chore: Vault sidebar setup

juspay · Feb 4, 2025 · a963c04 · a963c04
1 parent 3d194e8
commit a963c04
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 17 deletions.
diff --git a/src/Vault/VaultScreens/VaultConfiguration.res b/src/Vault/VaultScreens/VaultConfiguration.res
@@ -1,11 +1,13 @@
 @react.component
 let make = () => {
+  let {setShowSideBar} = React.useContext(GlobalProvider.defaultContext)
   let name = "stripe"
   <>
     <div> {"vault configuration"->React.string} </div>
     <Button
       text={`Connect ${name->LogicUtils.capitalizeString}`}
       onClick={_ => {
+        setShowSideBar(_ => false)
         RescriptReactRouter.replace(
           GlobalVars.appendDashboardPath(~url=`/v2/vault/onboarding/new?name=${name}`),
         )

diff --git a/src/Vault/VaultScreens/VaultOnboarding.res b/src/Vault/VaultScreens/VaultOnboarding.res
@@ -3,53 +3,119 @@ let make = () => {
   open APIUtils
   open PageLoaderWrapper
   open LogicUtils
+  open VerticalStepIndicatorTypes
+  open VerticalStepIndicatorUtils
+
+  let sections = [
+    {
+      id: "payment-processor",
+      name: "Payment Processor",
+      icon: "nd-inbox",
+      subSections: None,
+    },
+    {
+      id: "success",
+      name: "Success",
+      icon: "nd-plugin",
+      subSections: None,
+    },
+  ]
 
   let getURL = useGetURL()
   let url = RescriptReactRouter.useUrl()
   let connector = UrlUtils.useGetFilterDictFromUrl("")->LogicUtils.getString("name", "")
-  Js.log2("connectorconnectorconnectorconnector", connector)
   let updateAPIHook = useUpdateMethod(~showErrorToast=false)
   let connectorID = HSwitchUtils.getConnectorIDFromUrl(url.path->List.toArray, "")
   let (screenState, setScreenState) = React.useState(_ => Loading)
   let (initialValues, setInitialValues) = React.useState(_ => Dict.make()->JSON.Encode.object)
+  let {setShowSideBar} = React.useContext(GlobalProvider.defaultContext)
   let {getUserInfoData} = React.useContext(UserInfoProvider.defaultContext)
   let {profileId} = getUserInfoData()
+  let (connectorId, setConnectorId) = React.useState(() => "")
+  let (currentStep, setNextStep) = React.useState(() => {
+    sectionId: "payment-processor",
+    subSectionId: None,
+  })
+
+  let getNextStep = (currentStep: step): option<step> => {
+    findNextStep(sections, currentStep)
+  }
+
+  let getPreviousStep = (currentStep: step): option<step> => {
+    findPreviousStep(sections, currentStep)
+  }
+
+  let onPreviousClick = () => {
+    switch getPreviousStep(currentStep) {
+    | Some(previousStep) => setNextStep(_ => previousStep)
+    | None => ()
+    }
+  }
 
   let updatedInitialVal = React.useMemo(() => {
     let initialValuesToDict = initialValues->getDictFromJsonObject
     // TODO: Refactor for generic case
     initialValuesToDict->Dict.set("connector_name", `${connector}`->JSON.Encode.string)
-    initialValuesToDict->Dict.set("connector_label", `${connector}_hj`->JSON.Encode.string)
+    initialValuesToDict->Dict.set("connector_label", `${connector}_dakjfhsod`->JSON.Encode.string)
     initialValuesToDict->Dict.set("connector_type", "payment_processor"->JSON.Encode.string)
     initialValuesToDict->Dict.set("profile_id", profileId->JSON.Encode.string)
     initialValuesToDict->JSON.Encode.object
   }, [connector, profileId])
 
+  let onNextClick = () => {
+    switch getNextStep(currentStep) {
+    | Some(nextStep) => setNextStep(_ => nextStep)
+    | None => ()
+    }
+  }
+
   let onSubmit = async (values, _form: ReactFinalForm.formApi) => {
     try {
       let connectorUrl = getURL(~entityName=CONNECTOR, ~methodType=Post, ~id=None)
       let response = await updateAPIHook(connectorUrl, values, Post)
       let connectorId = response->getDictFromJsonObject->getString("merchant_connector_id", "")
-      RescriptReactRouter.replace(
-        GlobalVars.appendDashboardPath(
-          ~url=`/v2/vault/onboarding/${connectorId}?name=${connector}`,
-        ),
-      )
+      setConnectorId(_ => connectorId)
+      onNextClick()
     } catch {
     | _ => ()
     }
     Nullable.null
   }
 
-  <div>
-    <p> {"Authenticate your processor"->React.string} </p>
-    <p>
-      {"Configure your credentials from your processor dashboard. Hyperswitch encrypts and stores these credentials securely."->React.string}
-    </p>
-    <Form onSubmit initialValues>
-      <ConnectorAuthKeys initialValues={updatedInitialVal} setInitialValues showVertically=true />
-      <FormValuesSpy />
-      <FormRenderer.SubmitButton text="Submit" buttonSize={Small} />
-    </Form>
+  let onSucessClick = () => {
+    setShowSideBar(_ => true)
+    RescriptReactRouter.replace(
+      GlobalVars.appendDashboardPath(~url=`/v2/vault/onboarding/${connectorId}?name=${connector}`),
+    )
+  }
+
+  let backClick = () => {
+    RescriptReactRouter.replace(GlobalVars.appendDashboardPath(~url="/v2/recovery/home"))
+  }
+
+  <div className="flex flex-row gap-x-6">
+    <VerticalStepIndicator title="Configure Vault" sections currentStep backClick />
+    <div>
+      <p>
+        {"Configure your credentials from your processor dashboard. Hyperswitch encrypts and stores these credentials securely."->React.string}
+      </p>
+      {switch currentStep {
+      | {sectionId: "payment-processor"} =>
+        <Form onSubmit initialValues>
+          <ConnectorAuthKeys
+            initialValues={updatedInitialVal} setInitialValues showVertically=true
+          />
+          <FormValuesSpy />
+          <FormRenderer.SubmitButton text="Submit" buttonSize={Small} />
+        </Form>
+      | {sectionId: "success"} =>
+        <div>
+          <p> {"Success"->React.string} </p>
+          <p> {"Your processor has been successfully authenticated."->React.string} </p>
+          <Button text="Next" buttonType=Primary onClick={_ => onSucessClick()->ignore} />
+        </div>
+      | _ => React.null
+      }}
+    </div>
   </div>
 }
diff --git a/src/entryPoints/VaultApp/VaultApp.res b/src/entryPoints/VaultApp/VaultApp.res
@@ -2,6 +2,20 @@
 let make = () => {
   let url = RescriptReactRouter.useUrl()
 
+  // Need to be moved into vault container
+  let {showSideBar} = React.useContext(GlobalProvider.defaultContext)
+
+  let goToLanding = () => {
+    if showSideBar {
+      RescriptReactRouter.replace(GlobalVars.appendDashboardPath(~url="/v2/vault/home"))
+    }
+  }
+
+  React.useEffect0(() => {
+    goToLanding()
+    None
+  })
+
   {
     switch url.path->HSwitchUtils.urlPath {
     | list{"v2", "vault", "home"} => <VaultHome />