chore: changes for modularity on product select

src/APIUtils/APIUtils.res

@@ -1,10 +1,8 @@
 open LogicUtils
 open APIUtilsTypes
-open CommonAuthHooks
 exception JsonException(JSON.t)
 
 let useGetURL = () => {
-  let {merchantId} = useCommonAuthInfo()->Option.getOr(defaultAuthInfo)
   let {getUserInfoData} = React.useContext(UserInfoProvider.defaultContext)
   let getUrl = (
     ~entityName: entityName,
@@ -16,7 +14,7 @@ let useGetURL = () => {
     ~reconType: reconType=#NONE,
     ~queryParamerters: option<string>=None,
   ) => {
-    let {transactionEntity, analyticsEntity, userEntity} = getUserInfoData()
+    let {transactionEntity, analyticsEntity, userEntity, merchantId} = getUserInfoData()
     let connectorBaseURL = `account/${merchantId}/connectors`
 
     let endpoint = switch entityName {
@@ -729,6 +727,7 @@ let useGetURL = () => {
   getUrl
 }
 let useHandleLogout = () => {
+  open SessionStorage
   let getURL = useGetURL()
   let {setAuthStateToLogout} = React.useContext(AuthInfoProvider.authStatusContext)
   let clearRecoilValue = ClearRecoilValueHook.useClearRecoilValue()
@@ -749,6 +748,7 @@ let useHandleLogout = () => {
         })
       setAuthStateToLogout()
       clearRecoilValue()
+      sessionStorage.removeItem("product")
       LocalStorage.clear()
     } catch {
     | _ => LocalStorage.clear()

src/Vault/VaultScreens/VaultDefaultHome.res

@@ -0,0 +1,31 @@
+@react.component
+let make = () => {
+  open PageUtils
+  open VaultHomeUtils
+
+  <div className="flex flex-1 flex-col w-full gap-14 items-center justify-center w-full h-screen">
+    <img alt="vaultOnboarding" src="/assets/VaultOnboarding.svg" />
+    <div className="flex flex-col gap-8 items-center">
+      <div
+        className="border rounded-md text-nd_green-200 border-nd_green-200 font-semibold p-1.5 text-sm w-fit">
+        {"Vault"->React.string}
+      </div>
+      <PageHeading
+        customHeadingStyle="gap-3 flex flex-col items-center"
+        title="Securely store your users's sensitive data"
+        customTitleStyle="text-2xl text-center font-bold text-nd_gray-700 font-500"
+        customSubTitleStyle="text-fs-16 font-normal text-center max-w-700"
+        subTitle="Learn how to vault cards from your Server if you're PCI compliant and Learn how to vault cards using Hyperswitch's Checkout if you're non-PCI compliant"
+      />
+    </div>
+    <div className="flex gap-4 max-w-800">
+      {vaultActionArray
+      ->Array.map(item =>
+        <VaultActionItem
+          heading=item.heading description=item.description img=item.imgSrc action=item.action
+        />
+      )
+      ->React.array}
+    </div>
+  </div>
+}

src/Vault/VaultScreens/VaultHome.res

@@ -2,7 +2,9 @@
 let make = () => {
   open PageUtils
   open VaultHomeUtils
-  <div className="flex flex-1 flex-col gap-14 items-center justify-center w-full h-screen">
+  let {setCreateNewMerchant} = React.useContext(ProductSelectionProvider.defaultContext)
+
+  <div className="flex flex-1 flex-col w-full gap-14 items-center justify-center w-full h-screen">
     <img alt="vaultOnboarding" src="/assets/VaultOnboarding.svg" />
     <div className="flex flex-col gap-8 items-center">
       <div
@@ -19,7 +21,7 @@ let make = () => {
       <Button
         text="Get Started"
         onClick={_ => {
-          RescriptReactRouter.replace(GlobalVars.appendDashboardPath(~url="/v2/vault/onboarding"))
+          setCreateNewMerchant(ProductTypes.Vault)
         }}
         buttonType=Primary
         buttonSize=Large

src/container/MerchantAccountContainer.res

@@ -14,98 +14,78 @@ let make = (~setAppScreenState) => {
     userHasResourceAccess,
   } = GroupACLHooks.useUserGroupACLHook()
   let featureFlagDetails = featureFlagAtom->Recoil.useRecoilValueFromAtom
-  let fetchMerchantAccountDetails = MerchantDetailsHook.useFetchMerchantDetails()
-  let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
   let {checkUserEntity} = React.useContext(UserInfoProvider.defaultContext)
   let merchantDetailsTypedValue = Recoil.useRecoilValueFromAtom(merchantDetailsValueAtom)
-  let setUpConnectoreContainer = async () => {
-    try {
-      setScreenState(_ => PageLoaderWrapper.Loading)
-      if !checkUserEntity([#Profile]) {
-        let _ = await fetchMerchantAccountDetails()
-      }
-      setScreenState(_ => PageLoaderWrapper.Success)
-    } catch {
-    | _ => setScreenState(_ => PageLoaderWrapper.Error(""))
-    }
-  }
-
-  React.useEffect(() => {
-    setUpConnectoreContainer()->ignore
-    None
-  }, [])
 
   <div>
-    <PageLoaderWrapper screenState={screenState} sectionHeight="!h-screen" showLogoutButton=true>
-      {switch url.path->urlPath {
-      | list{"home"} => <Home setAppScreenState />
-      | list{"recon"} =>
-        <AccessControl
-          isEnabled={featureFlagDetails.recon && !checkUserEntity([#Profile])}
-          authorization={userHasResourceAccess(~resourceAccess=ReconToken)}>
-          <Recon />
-        </AccessControl>
-      | list{"upload-files"} =>
-        <AccessControl
-          isEnabled={featureFlagDetails.recon && !checkUserEntity([#Profile])}
-          authorization={userHasResourceAccess(~resourceAccess=ReconUpload)}>
-          <ReconModule urlList={url.path->urlPath} />
-        </AccessControl>
-      | list{"run-recon"} =>
-        <AccessControl
-          isEnabled={featureFlagDetails.recon && !checkUserEntity([#Profile])}
-          authorization={userHasResourceAccess(~resourceAccess=RunRecon)}>
-          <ReconModule urlList={url.path->urlPath} />
-        </AccessControl>
-      | list{"recon-analytics"} =>
-        <AccessControl
-          isEnabled={featureFlagDetails.recon && !checkUserEntity([#Profile])}
-          authorization={userHasResourceAccess(~resourceAccess=ReconAndSettlementAnalytics)}>
-          <ReconModule urlList={url.path->urlPath} />
-        </AccessControl>
-      | list{"reports"} =>
-        <AccessControl
-          isEnabled={featureFlagDetails.recon && !checkUserEntity([#Profile])}
-          authorization={userHasResourceAccess(~resourceAccess=ReconReports)}>
-          <ReconModule urlList={url.path->urlPath} />
-        </AccessControl>
-      | list{"config-settings"} =>
-        <AccessControl
-          isEnabled={featureFlagDetails.recon && !checkUserEntity([#Profile])}
-          authorization={userHasResourceAccess(~resourceAccess=ReconConfig)}>
-          <ReconModule urlList={url.path->urlPath} />
-        </AccessControl>
+    {switch url.path->urlPath {
+    | list{"home"} => <Home setAppScreenState />
+    | list{"recon"} =>
+      <AccessControl
+        isEnabled={featureFlagDetails.recon && !checkUserEntity([#Profile])}
+        authorization={userHasResourceAccess(~resourceAccess=ReconToken)}>
+        <Recon />
+      </AccessControl>
+    | list{"upload-files"} =>
+      <AccessControl
+        isEnabled={featureFlagDetails.recon && !checkUserEntity([#Profile])}
+        authorization={userHasResourceAccess(~resourceAccess=ReconUpload)}>
+        <ReconModule urlList={url.path->urlPath} />
+      </AccessControl>
+    | list{"run-recon"} =>
+      <AccessControl
+        isEnabled={featureFlagDetails.recon && !checkUserEntity([#Profile])}
+        authorization={userHasResourceAccess(~resourceAccess=RunRecon)}>
+        <ReconModule urlList={url.path->urlPath} />
+      </AccessControl>
+    | list{"recon-analytics"} =>
+      <AccessControl
+        isEnabled={featureFlagDetails.recon && !checkUserEntity([#Profile])}
+        authorization={userHasResourceAccess(~resourceAccess=ReconAndSettlementAnalytics)}>
+        <ReconModule urlList={url.path->urlPath} />
+      </AccessControl>
+    | list{"reports"} =>
+      <AccessControl
+        isEnabled={featureFlagDetails.recon && !checkUserEntity([#Profile])}
+        authorization={userHasResourceAccess(~resourceAccess=ReconReports)}>
+        <ReconModule urlList={url.path->urlPath} />
+      </AccessControl>
+    | list{"config-settings"} =>
+      <AccessControl
+        isEnabled={featureFlagDetails.recon && !checkUserEntity([#Profile])}
+        authorization={userHasResourceAccess(~resourceAccess=ReconConfig)}>
+        <ReconModule urlList={url.path->urlPath} />
+      </AccessControl>
 
-      // Commented as not needed now
-      // | list{"file-processor"} =>
-      //   <AccessControl
-      //     isEnabled={featureFlagDetails.recon && !checkUserEntity([#Profile])}
-      //     authorization={userHasResourceAccess(~resourceAccess=ReconFiles)}>
-      //     <ReconModule urlList={url.path->urlPath} />
-      //   </AccessControl>
-      | list{"sdk"} =>
-        <AccessControl
-          isEnabled={!featureFlagDetails.isLiveMode}
-          authorization={hasAllGroupsAccess([
-            userHasAccess(~groupAccess=OperationsManage),
-            userHasAccess(~groupAccess=ConnectorsManage),
-          ])}>
-          <SDKPage />
-        </AccessControl>
-      | list{"unauthorized"} => <UnauthorizedPage />
-      | _ => <NotFoundPage />
-      }}
-      <RenderIf
-        condition={!featureFlagDetails.isLiveMode &&
-        // TODO: Remove `MerchantDetailsManage` permission in future
-        hasAnyGroupAccess(
-          userHasAccess(~groupAccess=MerchantDetailsManage),
-          userHasAccess(~groupAccess=AccountManage),
-        ) === Access &&
-        !checkUserEntity([#Profile]) &&
-        merchantDetailsTypedValue.merchant_name->Option.isNone}>
-        <SbxOnboardingSurvey showModal=surveyModal setShowModal=setSurveyModal />
-      </RenderIf>
-    </PageLoaderWrapper>
+    // Commented as not needed now
+    // | list{"file-processor"} =>
+    //   <AccessControl
+    //     isEnabled={featureFlagDetails.recon && !checkUserEntity([#Profile])}
+    //     authorization={userHasResourceAccess(~resourceAccess=ReconFiles)}>
+    //     <ReconModule urlList={url.path->urlPath} />
+    //   </AccessControl>
+    | list{"sdk"} =>
+      <AccessControl
+        isEnabled={!featureFlagDetails.isLiveMode}
+        authorization={hasAllGroupsAccess([
+          userHasAccess(~groupAccess=OperationsManage),
+          userHasAccess(~groupAccess=ConnectorsManage),
+        ])}>
+        <SDKPage />
+      </AccessControl>
+    | list{"unauthorized"} => <UnauthorizedPage />
+    | _ => <NotFoundPage />
+    }}
+    <RenderIf
+      condition={!featureFlagDetails.isLiveMode &&
+      // TODO: Remove `MerchantDetailsManage` permission in future
+      hasAnyGroupAccess(
+        userHasAccess(~groupAccess=MerchantDetailsManage),
+        userHasAccess(~groupAccess=AccountManage),
+      ) === Access &&
+      !checkUserEntity([#Profile]) &&
+      merchantDetailsTypedValue.merchant_name->Option.isNone}>
+      <SbxOnboardingSurvey showModal=surveyModal setShowModal=setSurveyModal />
+    </RenderIf>
   </div>
 }

src/entryPoints/AuthModule/AuthEntry.res

@@ -11,7 +11,9 @@ let make = () => {
         <AuthWrapper>
           <GlobalProvider>
             <UserInfoProvider>
-              <HyperSwitchApp />
+              <ProductSelectionProvider>
+                <HyperSwitchApp />
+              </ProductSelectionProvider>
             </UserInfoProvider>
           </GlobalProvider>
         </AuthWrapper>