feat: sub steps (#56)

Co-authored-by: Lokesh Jain <[email protected]> Co-authored-by: Jeeva Ramachandran <[email protected]>
juspay · Dec 12, 2023 · 16a3e18 · 16a3e18
1 parent ff1b90b
commit 16a3e18
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateFromScratch.res
@@ -14,6 +14,7 @@ let make = (
   let (currentStep, setCurrentStep) = React.useState(_ => DownloadTestAPIKey)
   let {setQuickStartPageState} = React.useContext(GlobalProvider.defaultContext)
   let isLastStep = currentStep === DisplayPaymentConfirmation
+  let updateEnumInRecoil = EnumVariantHook.useUpdateEnumInRecoil()
 
   let theme = switch ThemeProvider.useTheme() {
   | Dark => "vs-dark"
@@ -25,10 +26,18 @@ let make = (
       buttonState={Normal}
       buttonType={PrimaryOutline}
       text="Back"
-      onClick={_ =>
-        currentStep === DownloadTestAPIKey
-          ? setQuickStartPageState(_ => IntegrateApp(CHOOSE_INTEGRATION))
-          : setCurrentStep(_ => getNavigationStepForStandardIntegration(~currentStep, ()))}
+      onClick={_ => {
+        let prevStep = getNavigationStepForStandardIntegration(~currentStep, ())
+        if currentStep === DownloadTestAPIKey {
+          setQuickStartPageState(_ => IntegrateApp(CHOOSE_INTEGRATION))
+        } else {
+          let _ = updateEnumInRecoil([
+            (String("pending"), currentStep->getPolyMorphicVariantOfIntegrationSubStep),
+            (String("ongoing"), prevStep->getPolyMorphicVariantOfIntegrationSubStep),
+          ])
+          setCurrentStep(_ => prevStep)
+        }
+      }}
       buttonSize=Small
     />
 
@@ -40,9 +49,13 @@ let make = (
         if isLastStep {
           markAsDone()->ignore
         } else {
-          setCurrentStep(_ =>
-            getNavigationStepForStandardIntegration(~currentStep, ~forward=true, ())
-          )
+          let nextStep = getNavigationStepForStandardIntegration(~currentStep, ~forward=true, ())
+          let _ = updateEnumInRecoil([
+            (String("completed"), currentStep->getPolyMorphicVariantOfIntegrationSubStep),
+            (String("ongoing"), nextStep->getPolyMorphicVariantOfIntegrationSubStep),
+          ])
+
+          setCurrentStep(_ => nextStep)
         }
       }}
       buttonSize=Small

diff --git a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppUtils.res b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppUtils.res
@@ -45,3 +45,26 @@ let getNavigationStepForStandardIntegration = (
   | DisplayPaymentConfirmation => forward ? DisplayPaymentConfirmation : DisplayCheckout
   }
 }
+
+let getPolyMorphicVariantOfIntegrationSubStep: standardIntegrationSteps => QuickStartTypes.sectionHeadingVariant = (
+  currentStep: standardIntegrationSteps,
+) => {
+  switch currentStep {
+  | DownloadTestAPIKey => #DownloadTestAPIKey
+  | CreatePayment => #CreatePayment
+  | DisplayCheckout => #DisplayCheckout
+  | DisplayPaymentConfirmation => #DisplayPaymentConfirmation
+  }
+}
+
+let getPolyMorphicVariantOfMigrateFromStripe: migrateFromStripeSteps => QuickStartTypes.sectionHeadingVariant = (
+  currentStep: migrateFromStripeSteps,
+) => {
+  switch currentStep {
+  | DownloadAPIKey => #DownloadTestAPIKeyStripe
+  | InstallDeps => #InstallDeps
+  | ReplaceAPIKeys => #ReplaceAPIKeys
+  | ReconfigureCheckout => #ReconfigureCheckout
+  | LoadCheckout => #LoadCheckout
+  }
+}
diff --git a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/MigrateFromStripe.res b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/MigrateFromStripe.res
@@ -14,6 +14,7 @@ let make = (
   let (currentStep, setCurrentStep) = React.useState(_ => DownloadAPIKey)
   let {setQuickStartPageState} = React.useContext(GlobalProvider.defaultContext)
   let isLastStep = currentStep === LoadCheckout
+  let updateEnumInRecoil = EnumVariantHook.useUpdateEnumInRecoil()
 
   let theme = switch ThemeProvider.useTheme() {
   | Dark => "vs-dark"
@@ -25,10 +26,18 @@ let make = (
       buttonState={Normal}
       buttonType={PrimaryOutline}
       text="Back"
-      onClick={_ =>
-        currentStep === DownloadAPIKey
-          ? setQuickStartPageState(_ => IntegrateApp(CHOOSE_INTEGRATION))
-          : setCurrentStep(_ => getNavigationStepForMigrateFromStripe(~currentStep, ()))}
+      onClick={_ => {
+        let prevStep = getNavigationStepForMigrateFromStripe(~currentStep, ())
+        if currentStep === DownloadAPIKey {
+          setQuickStartPageState(_ => IntegrateApp(CHOOSE_INTEGRATION))
+        } else {
+          let _ = updateEnumInRecoil([
+            (String("pending"), currentStep->getPolyMorphicVariantOfMigrateFromStripe),
+            (String("ongoing"), prevStep->getPolyMorphicVariantOfMigrateFromStripe),
+          ])
+          setCurrentStep(_ => prevStep)
+        }
+      }}
       buttonSize=Small
     />
 
@@ -40,9 +49,12 @@ let make = (
         if isLastStep {
           markAsDone()->ignore
         } else {
-          setCurrentStep(_ =>
-            getNavigationStepForMigrateFromStripe(~currentStep, ~forward=true, ())
-          )
+          let nextStep = getNavigationStepForMigrateFromStripe(~currentStep, ~forward=true, ())
+          let _ = updateEnumInRecoil([
+            (String("completed"), currentStep->getPolyMorphicVariantOfMigrateFromStripe),
+            (String("ongoing"), nextStep->getPolyMorphicVariantOfMigrateFromStripe),
+          ])
+          setCurrentStep(_ => nextStep)
         }
       }}
       buttonSize=Small

diff --git a/src/screens/HyperSwitch/Home/QuickStart/QuickStartTypes.res b/src/screens/HyperSwitch/Home/QuickStart/QuickStartTypes.res
@@ -47,6 +47,10 @@ type sectionHeadingVariant = [
   | #TestPayment
   | #IntegrationMethod
   | #IntegrationCompleted
+  | #DownloadTestAPIKey
+  | #CreatePayment
+  | #DisplayCheckout
+  | #DisplayPaymentConfirmation
   | #StripeConnected
   | #PaypalConnected
   | #SPRoutingConfigured
@@ -56,6 +60,11 @@ type sectionHeadingVariant = [
   | #SetupWoocomWebhook
   | #IsMultipleConfiguration
   | #GoLive
+  | #DownloadTestAPIKeyStripe
+  | #InstallDeps
+  | #ReplaceAPIKeys
+  | #ReconfigureCheckout
+  | #LoadCheckout
 ]
 
 type processorType = {
@@ -85,13 +94,24 @@ type responseType = {
   configureWoocom: bool,
   setupWoocomWebhook: bool,
   isMultipleConfiguration: bool,
+  downloadTestAPIKeyStripe: string,
+  installDeps: string,
+  replaceAPIKeys: string,
+  reconfigureCheckout: string,
+  loadCheckout: string,
+  downloadTestAPIKey: string,
+  createPayment: string,
+  displayCheckout: string,
+  displayPaymentConfirmation: string,
 }
+
 type requestObjectType =
   | ProcesorType(processorType)
   | RoutingType(routingType)
   | PaymentType(paymentType)
   | IntegrationMethod(integrationMethod)
   | ConnectorChoice(connectorChoice)
   | Boolean(bool)
+  | String(string)
 
 type valueType = String(string) | Boolean(bool)
diff --git a/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res b/src/screens/HyperSwitch/Home/QuickStart/QuickStartUtils.res
@@ -169,6 +169,13 @@ let getTypedValueFromDict = valueString => {
     ->getDictfromDict(#IntegrationMethod->getStringFromVariant)
     ->getIntegrationType,
     integrationCompleted: value->getBool(#IntegrationCompleted->getStringFromVariant, false),
+    downloadTestAPIKey: value->getString(#DownloadTestAPIKey->getStringFromVariant, ""),
+    createPayment: value->getString(#CreatePayment->getStringFromVariant, ""),
+    displayCheckout: value->getString(#DisplayCheckout->getStringFromVariant, ""),
+    displayPaymentConfirmation: value->getString(
+      #DisplayPaymentConfirmation->getStringFromVariant,
+      "",
+    ),
     stripeConnected: value
     ->getDictfromDict(#StripeConnected->getStringFromVariant)
     ->getProcessorType,
@@ -183,6 +190,11 @@ let getTypedValueFromDict = valueString => {
     configureWoocom: value->getBool(#ConfigureWoocom->getStringFromVariant, false),
     setupWoocomWebhook: value->getBool(#SetupWoocomWebhook->getStringFromVariant, false),
     isMultipleConfiguration: value->getBool(#IsMultipleConfiguration->getStringFromVariant, false),
+    downloadTestAPIKeyStripe: value->getString(#DownloadTestAPIKeyStripe->getStringFromVariant, ""),
+    installDeps: value->getString(#InstallDeps->getStringFromVariant, ""),
+    replaceAPIKeys: value->getString(#ReplaceAPIKeys->getStringFromVariant, ""),
+    reconfigureCheckout: value->getString(#ReconfigureCheckout->getStringFromVariant, ""),
+    loadCheckout: value->getString(#LoadCheckout->getStringFromVariant, ""),
   }
   typedValue
 }
@@ -231,6 +243,17 @@ let getStatusValue = (comparator: valueType, enumVariant, dashboardPageState) =>
     boolValue ? COMPLETED : dashboardPageState === enumVariant ? ONGOING : PENDING
   }
 }
+
+let getStatusFromString = statusString => {
+  open HSSelfServeSidebar
+  switch statusString->Js.String2.toUpperCase {
+  | "PENDING" => PENDING
+  | "COMPLETED" => COMPLETED
+  | "ONGOING" => ONGOING
+  | _ => PENDING
+  }
+}
+
 let sidebarTextBasedOnVariant = choiceState =>
   switch choiceState {
   | #MigrateFromStripe => "Hyperswitch For Stripe Users"
@@ -276,23 +299,23 @@ let getSidebarOptionsForIntegrateYourApp: (
       subOptions: [
         {
           title: "Download Test API Keys",
-          status: PENDING,
+          status: enumValue.downloadTestAPIKeyStripe->getStatusFromString,
         },
         {
           title: "Install Dependencies",
-          status: PENDING,
+          status: enumValue.installDeps->getStatusFromString,
         },
         {
           title: "Replace API keys",
-          status: PENDING,
+          status: enumValue.replaceAPIKeys->getStatusFromString,
         },
         {
           title: "Reconfigure Checkout Form",
-          status: PENDING,
+          status: enumValue.reconfigureCheckout->getStatusFromString,
         },
         {
           title: "Load Hyperswitch Checkout",
-          status: PENDING,
+          status: enumValue.loadCheckout->getStatusFromString,
         },
       ],
     },
@@ -317,19 +340,19 @@ let getSidebarOptionsForIntegrateYourApp: (
       subOptions: [
         {
           title: "Download Test API Key",
-          status: PENDING,
+          status: enumValue.downloadTestAPIKey->getStatusFromString,
         },
         {
           title: "Create a Payment",
-          status: PENDING,
+          status: enumValue.createPayment->getStatusFromString,
         },
         {
           title: "Display Hyperswitch Checkout",
-          status: PENDING,
+          status: enumValue.displayCheckout->getStatusFromString,
         },
         {
           title: "Display Payment Confirmation",
-          status: PENDING,
+          status: enumValue.displayPaymentConfirmation->getStatusFromString,
         },
       ],
     },
@@ -571,6 +594,7 @@ let generateBodyBasedOnType = (parentVariant: sectionHeadingVariant, value: requ
     ]->getJsonFromArrayOfJson
 
   | Boolean(_) => (parentVariant :> string)->Js.Json.string
+  | String(str) => str->Js.Json.string
   }
 }
 

diff --git a/src/screens/HyperSwitch/Hooks/EnumVariantHook.res b/src/screens/HyperSwitch/Hooks/EnumVariantHook.res
@@ -48,6 +48,10 @@ let useUpdateEnumInRecoil = () => {
           let booleanDict = [((enumVariant :> string), true->Js.Json.boolean)]->Js.Dict.fromArray
           enumDictsArray->Array.push(booleanDict)
         }
+      | String(str) => {
+          let stringDict = [((enumVariant :> string), str->Js.Json.string)]->Js.Dict.fromArray
+          enumDictsArray->Array.push(stringDict)
+        }
       | _ => enumDictsArray->Array.push(bodyValForApi->getDictFromJsonObject)
       }
     })