chore: removed skeleton ui

juspay · Feb 25, 2025 · ae0293e · ae0293e
1 parent 771d23b
commit ae0293e
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 224 deletions.
diff --git a/src/Recon/ReconApp/ReconApp.res b/src/Recon/ReconApp/ReconApp.res
@@ -2,14 +2,12 @@
 let make = () => {
   let url = RescriptReactRouter.useUrl()
   let (showOnBoarding, setShowOnBoarding) = React.useState(_ => true)
-  let (showSkeleton, setShowSkeleton) = React.useState(_ => true)
 
   {
     switch url.path->HSwitchUtils.urlPath {
     | list{"v2", "recon", "onboarding"} =>
-      <ReconOnBoardingContainer showOnBoarding setShowOnBoarding showSkeleton />
-    | list{"v2", "recon", "configuration"} =>
-      <ReconConfigurationContainer setShowOnBoarding setShowSkeleton />
+      <ReconOnBoardingContainer showOnBoarding setShowOnBoarding />
+    | list{"v2", "recon", "configuration"} => <ReconConfigurationContainer setShowOnBoarding />
     | list{"v2", "recon", "reports"} => <ReconReportsContainer />
     | _ => React.null
     }

diff --git a/src/Recon/reconContainer/ReconConfigurationContainer.res b/src/Recon/reconContainer/ReconConfigurationContainer.res
@@ -1,5 +1,5 @@
 @react.component
-let make = (~setShowOnBoarding, ~setShowSkeleton) => {
+let make = (~setShowOnBoarding) => {
   let {showSideBar} = React.useContext(GlobalProvider.defaultContext)
 
   let goToLanding = () => {
@@ -13,5 +13,5 @@ let make = (~setShowOnBoarding, ~setShowSkeleton) => {
     None
   })
 
-  <ReconConfiguration setShowOnBoarding setShowSkeleton />
+  <ReconConfiguration setShowOnBoarding />
 }
diff --git a/src/Recon/reconContainer/ReconOnBoardingContainer.res b/src/Recon/reconContainer/ReconOnBoardingContainer.res
@@ -1,4 +1,4 @@
 @react.component
-let make = (~showOnBoarding, ~setShowOnBoarding, ~showSkeleton) => {
-  <ReconOnboarding showOnBoarding setShowOnBoarding showSkeleton />
+let make = (~showOnBoarding, ~setShowOnBoarding) => {
+  <ReconOnboarding showOnBoarding setShowOnBoarding />
 }
diff --git a/src/Recon/reconScreens/ReconConfiguration/Final/Final.res b/src/Recon/reconScreens/ReconConfiguration/Final/Final.res
@@ -1,7 +1,7 @@
 open VerticalStepIndicatorTypes
 
 @react.component
-let make = (~currentStep: step, ~setCurrentStep, ~setShowOnBoarding, ~setShowSkeleton) => {
+let make = (~currentStep: step, ~setCurrentStep, ~setShowOnBoarding) => {
   open ReconConfigurationUtils
   open VerticalStepIndicatorUtils
 
@@ -19,7 +19,6 @@ let make = (~currentStep: step, ~setCurrentStep, ~setShowOnBoarding, ~setShowSke
     setShowSideBar(_ => true)
     RescriptReactRouter.replace(GlobalVars.appendDashboardPath(~url="/v2/recon/onboarding"))
     setShowOnBoarding(_ => false)
-    setShowSkeleton(_ => false)
   }
 
   let customSelectionComponent =

diff --git a/src/Recon/reconScreens/ReconConfiguration/OrderDataConnection/OrderDataConnection.res b/src/Recon/reconScreens/ReconConfiguration/OrderDataConnection/OrderDataConnection.res
@@ -6,9 +6,6 @@ let make = (~currentStep: step, ~setCurrentStep, ~selectedOrderSource, ~setSelec
   open OrderDataConnectionUtils
   open VerticalStepIndicatorUtils
 
-  let (showDummyFile, setShowDummyFile) = React.useState(_ => false)
-  let (isLoading, setIsLoading) = React.useState(_ => false)
-
   let getNextStep = (currentStep: step): option<step> => {
     findNextStep(sections, currentStep)
   }
@@ -20,34 +17,6 @@ let make = (~currentStep: step, ~setCurrentStep, ~selectedOrderSource, ~setSelec
     }
   }
 
-  let onUploadFileClick = () => {
-    setIsLoading(_ => true)
-    setShowDummyFile(_ => true)
-    let _ = Js.Global.setTimeout(() => setIsLoading(_ => false), 2000)
-  }
-
-  let customSelectionComponent = {
-    switch isLoading {
-    | true =>
-      <div className="relative">
-        <div
-          className="w-4 h-4 rounded-full absolute right-2 -top-2 border-2 border-solid border-nd_primary_blue-100"
-        />
-        <div
-          className="w-4 h-4 rounded-full animate-spin absolute right-2 -top-2 border-2 border-solid border-nd_primary_blue-300 border-t-transparent"
-        />
-      </div>
-
-    | false =>
-      <Icon
-        name="nd-delete-dustbin"
-        className="cursor-pointer"
-        onClick={_ => setShowDummyFile(_ => false)}
-        customHeight="16"
-      />
-    }
-  }
-
   <div className="flex flex-col h-full gap-y-10">
     <ReconConfigurationHelper.SubHeading
       title="Connect Order Data Source"
@@ -71,55 +40,19 @@ let make = (~currentStep: step, ~setCurrentStep, ~selectedOrderSource, ~setSelec
               isSelected={isSelected}
               iconName={step->getIconName}
               onClick={_ => setSelectedOrderSource(_ => step)}
-              customSelectionComponent={<Icon name="nd-circle-dot" customHeight="16" />}
-              customOuterClass="cursor-pointer"
+              customSelectionComponent={<Icon name="nd-checkbox-base" customHeight="16" />}
+              isDisabled={step->isDisabled}
             />
           })
           ->React.array}
         </div>
-        {switch selectedOrderSource {
-        | UploadFile =>
-          <div
-            className="bg-nd_gray-25 border rounded-lg flex flex-col gap-4 items-center justify-center px-4 pt-3 pb-4 w-full">
-            <RenderIf condition={showDummyFile}>
-              <ReconConfigurationHelper.StepCard
-                isLoading
-                key="Dummy_order_data.csv"
-                stepName="Dummy_order_data.csv"
-                description="3.4 MB"
-                isSelected=true
-                iconName="nd-file"
-                onClick={_ => ()}
-                customSelectionComponent
-                customSelectionBorderClass="border-nd_br_gray-500"
-              />
-            </RenderIf>
-            <div className="flex flex-col items-center gap-4">
-              <p className="text-sm font-medium leading-5 text-nd_gray-400">
-                {"Add your data as per the sample file and upload "->React.string}
-                <span
-                  className="text-sm font-semibold text-nd_primary_blue-500 leading-5 underline">
-                  {"Sample file"->React.string}
-                </span>
-              </p>
-              <Button
-                leftIcon={CustomIcon(<Icon name="nd-upload" />)}
-                buttonType={Secondary}
-                text="Upload File"
-                onClick={_ => onUploadFileClick()}
-                customButtonStyle="w-298-px"
-              />
-            </div>
-          </div>
-        | _ => React.null
-        }}
       </div>
       <div className="flex justify-end items-center">
         <Button
           text="Next"
           customButtonStyle="rounded w-full"
           buttonType={Primary}
-          buttonState={isLoading || !showDummyFile ? Disabled : Normal}
+          buttonState={Normal}
           onClick={_ => onNextClick()->ignore}
         />
       </div>

diff --git a/src/Recon/reconScreens/ReconConfiguration/OrderDataConnection/OrderDataConnectionUtils.res b/src/Recon/reconScreens/ReconConfiguration/OrderDataConnection/OrderDataConnectionUtils.res
@@ -3,18 +3,25 @@ open OrderDataConnectionTypes
 let getSelectedStepName = step => {
   switch step {
   | ConnectYourOrderDataSource => "Connect your order data source"
-  | UploadFile => "Upload File"
+  | UploadFile => "Try with Sample Data"
   }
 }
 
 let getSelectedStepDescription = step => {
   switch step {
   | ConnectYourOrderDataSource => "This feature is available in production only"
-  | UploadFile => "Use data in a .csv file"
+  | UploadFile => "Explore with our pre-populated sample order data."
   }
 }
 
-let orderDataStepsArr: array<orderDataSteps> = [ConnectYourOrderDataSource, UploadFile]
+let isDisabled = step => {
+  switch step {
+  | ConnectYourOrderDataSource => true
+  | UploadFile => false
+  }
+}
+
+let orderDataStepsArr: array<orderDataSteps> = [UploadFile, ConnectYourOrderDataSource]
 
 let getIconName = step => {
   switch step {

diff --git a/src/Recon/reconScreens/ReconConfiguration/ReconConfiguration.res b/src/Recon/reconScreens/ReconConfiguration/ReconConfiguration.res
@@ -1,5 +1,5 @@
 @react.component
-let make = (~setShowOnBoarding, ~setShowSkeleton) => {
+let make = (~setShowOnBoarding) => {
   open ReconConfigurationTypes
   open OrderDataConnectionTypes
   open VerticalStepIndicatorTypes
@@ -32,6 +32,15 @@ let make = (~setShowOnBoarding, ~setShowSkeleton) => {
           <VerticalStepIndicator titleElement=reconTitleElement sections currentStep backClick />
         </div>
         <div className="h-full p-12 overflow-hidden">
+          <div
+            className="absolute z-10 top-76-px left-0 w-full py-4 px-10 bg-orange-50 flex justify-between items-center">
+            <div className="flex gap-4 items-center">
+              <Icon name="nd-information-triangle" size=24 />
+              <p className="text-nd_gray-600 text-base leading-6 font-medium">
+                {"You're viewing sample analytics to help you understand how the reports will look with real data"->React.string}
+              </p>
+            </div>
+          </div>
           <div className="w-500-px">
             {switch currentStep.sectionId->getSectionVariantFromString {
             | #orderDataConnection =>
@@ -44,12 +53,7 @@ let make = (~setShowOnBoarding, ~setShowSkeleton) => {
             | #connectProcessors =>
               <ConnectProcessors currentStep={currentStep} setCurrentStep={setCurrentStep} />
             | #finish =>
-              <Final
-                currentStep={currentStep}
-                setCurrentStep={setCurrentStep}
-                setShowOnBoarding
-                setShowSkeleton
-              />
+              <Final currentStep={currentStep} setCurrentStep={setCurrentStep} setShowOnBoarding />
             }}
           </div>
         </div>

diff --git a/src/Recon/reconScreens/ReconConfiguration/ReconConfigurationHelper.res b/src/Recon/reconScreens/ReconConfiguration/ReconConfigurationHelper.res
@@ -20,16 +20,22 @@ module StepCard = {
     ~customSelectionComponent,
     ~customOuterClass="",
     ~customSelectionBorderClass=?,
+    ~isDisabled=false,
   ) => {
     let borderClass = switch (customSelectionBorderClass, isSelected) {
     | (Some(val), true) => val
     | (_, true) => "border-blue-500"
     | _ => ""
     }
 
+    let disabledClass = switch isDisabled {
+    | true => "opacity-50 filter blur-xs pointer-events-none cursor-not-allowed"
+    | false => "cursor-pointer"
+    }
+
     <div
       key={stepName}
-      className={`flex items-center gap-x-2.5 border ${borderClass} rounded-xl p-3 transition-shadow justify-between w-full ${customOuterClass}`}
+      className={`flex items-center gap-x-2.5 border rounded-xl p-3 transition-shadow justify-between w-full ${borderClass}  ${disabledClass} ${customOuterClass}`}
       onClick={onClick}>
       <div className="flex flex-row items-center gap-x-4">
         <Icon name=iconName className="w-8 h-8" />
@@ -45,6 +51,9 @@ module StepCard = {
       <RenderIf condition={isSelected}>
         {<div className="flex flex-row items-center gap-2"> customSelectionComponent </div>}
       </RenderIf>
+      <RenderIf condition={isDisabled}>
+        <div className="h-4 w-4 border border-nd_gray-300 rounded-full" />
+      </RenderIf>
     </div>
   }
 }
diff --git a/src/Recon/reconScreens/ReconOnboarding/ReconOnboarding.res b/src/Recon/reconScreens/ReconOnboarding/ReconOnboarding.res
@@ -1,11 +1,11 @@
 @react.component
-let make = (~showOnBoarding, ~setShowOnBoarding, ~showSkeleton) => {
+let make = (~showOnBoarding, ~setShowOnBoarding) => {
   open ReconOnboardingHelper
 
   {
     switch showOnBoarding {
     | true => <ReconOnboardingLanding setShowOnBoarding />
-    | false => <ReconOverview showSkeleton />
+    | false => <ReconOverview />
     }
   }
 }