chore: setup recon product (#1966)

juspay · Dec 24, 2024 · 31bac54 · 31bac54
1 parent c278fbd
commit 31bac54
Show file tree

Hide file tree

Showing 16 changed files with 177 additions and 44 deletions.
diff --git a/config/config.toml b/config/config.toml
@@ -52,6 +52,7 @@ tax_processor=true
 x_feature_route=false
 tenant_user=false
 dev_click_to_pay=false
+dev_recon_v2_product=false
 [default.merchant_config]
 [default.merchant_config.new_analytics]
 org_ids=[]

diff --git a/src/screens/APIUtils/APIUtils.res → src/APIUtils/APIUtils.res b/src/screens/APIUtils/APIUtils.res → src/APIUtils/APIUtils.res
diff --git a/src/screens/APIUtils/APIUtilsTypes.res → src/APIUtils/APIUtilsTypes.res b/src/screens/APIUtils/APIUtilsTypes.res → src/APIUtils/APIUtilsTypes.res
diff --git a/src/entryPoints/FeatureFlagUtils.res b/src/entryPoints/FeatureFlagUtils.res
@@ -44,6 +44,7 @@ type featureFlag = {
   xFeatureRoute: bool,
   tenantUser: bool,
   clickToPay: bool,
+  devReconv2Product: bool,
 }
 
 let featureFlagType = (featureFlags: JSON.t) => {
@@ -90,6 +91,7 @@ let featureFlagType = (featureFlags: JSON.t) => {
     taxProcessor: dict->getBool("tax_processor", false),
     xFeatureRoute: dict->getBool("x_feature_route", false),
     tenantUser: dict->getBool("tenant_user", false),
+    devReconv2Product: dict->getBool("dev_recon_v2_product", false),
   }
 }
 

diff --git a/src/entryPoints/HSReconApp.res b/src/entryPoints/HSReconApp.res
@@ -0,0 +1,24 @@
+@react.component
+let make = () => {
+  open HSwitchUtils
+  open HyperswitchAtom
+  let pageViewEvent = MixpanelHook.usePageView()
+  let url = RescriptReactRouter.useUrl()
+  let featureFlagDetails = featureFlagAtom->Recoil.useRecoilValueFromAtom
+  let path = url.path->List.toArray->Array.joinWith("/")
+  React.useEffect(() => {
+    if featureFlagDetails.mixpanel {
+      pageViewEvent(~path)->ignore
+    }
+    None
+  }, (featureFlagDetails.mixpanel, path))
+
+  {
+    switch url.path->urlPath {
+    | list{"v2", "recon", "onboarding"} => <ReconOnBoardingContainer />
+    | list{"v2", "recon", "home"} => <ReconHomeContainer />
+    | list{"v2", "recon", "analytics"} => <ReconAnalyticsContainer />
+    | _ => React.null
+    }
+  }
+}
diff --git a/src/entryPoints/HSReconSidebarValues.res b/src/entryPoints/HSReconSidebarValues.res
@@ -0,0 +1,45 @@
+open SidebarTypes
+
+let reconOnBoarding = {
+  SubLevelLink({
+    name: "Profile Setup",
+    link: `v2/recon/onboarding`,
+    access: Access,
+    searchOptions: [("Recon onboarding", "")],
+  })
+}
+let reconHome = {
+  SubLevelLink({
+    name: "Home",
+    link: `v2/recon/home`,
+    access: Access,
+    searchOptions: [("Recon home", "")],
+  })
+}
+let reconAnalytics = {
+  SubLevelLink({
+    name: "Analytics",
+    link: `v2/recon/analytics`,
+    access: Access,
+    searchOptions: [("Recon analytics", "")],
+  })
+}
+
+let recon = () => {
+  let links = [reconOnBoarding, reconAnalytics]
+  Section({
+    name: "Recon And Settlement",
+    icon: "v2/recon",
+    showSection: true,
+    links,
+  })
+}
+let emptyComponent = CustomComponent({
+  component: React.null,
+})
+
+let useGetReconSideBar = () => {
+  let {devReconv2Product} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
+  let sidebar = [devReconv2Product ? recon() : emptyComponent]
+  sidebar
+}
diff --git a/src/entryPoints/HyperSwitchApp.res b/src/entryPoints/HyperSwitchApp.res
@@ -41,6 +41,7 @@ let make = () => {
 
   let isLiveUsersCounterEnabled = featureFlagDetails.liveUsersCounter
   let hyperSwitchAppSidebars = SidebarValues.useGetSidebarValues(~isReconEnabled)
+  let reconSidebars = HSReconSidebarValues.useGetReconSideBar()
   sessionExpired := false
 
   let setUpDashboard = async () => {
@@ -102,7 +103,10 @@ let make = () => {
             <div className="flex relative overflow-auto h-screen ">
               <RenderIf condition={screenState === Success}>
                 <Sidebar
-                  path={url.path} sidebars={hyperSwitchAppSidebars} key={(screenState :> string)}
+                  path={url.path}
+                  sidebars={hyperSwitchAppSidebars}
+                  key={(screenState :> string)}
+                  productSiebars={reconSidebars}
                 />
               </RenderIf>
               <PageLoaderWrapper
@@ -148,6 +152,7 @@ let make = () => {
                       className="p-6 md:px-16 md:pb-16 pt-[4rem] flex flex-col gap-10 max-w-fixedPageWidth">
                       <ErrorBoundary>
                         {switch url.path->urlPath {
+                        | list{"v2", "recon", ..._} => <HSReconApp />
                         | list{"home", ..._}
                         | list{"recon"}
                         | list{"upload-files"}

diff --git a/src/reconContainer/ReconAnalyticsContainer.res b/src/reconContainer/ReconAnalyticsContainer.res
@@ -0,0 +1,4 @@
+@react.component
+let make = () => {
+  <ReconAnalytics />
+}
diff --git a/src/reconContainer/ReconHomeContainer.res b/src/reconContainer/ReconHomeContainer.res
@@ -0,0 +1,4 @@
+@react.component
+let make = () => {
+  <ReconHome />
+}
diff --git a/src/reconContainer/ReconOnBoardingContainer.res b/src/reconContainer/ReconOnBoardingContainer.res
@@ -0,0 +1,4 @@
+@react.component
+let make = () => {
+  <ReconOnboarding />
+}
diff --git a/src/reconScreens/ReconAnalytics/ReconAnalytics.res b/src/reconScreens/ReconAnalytics/ReconAnalytics.res
@@ -0,0 +1,4 @@
+@react.component
+let make = () => {
+  <div> {"Analytics"->React.string} </div>
+}
diff --git a/src/reconScreens/ReconHome/ReconHome.res b/src/reconScreens/ReconHome/ReconHome.res
@@ -0,0 +1,4 @@
+@react.component
+let make = () => {
+  <div> {"Home"->React.string} </div>
+}
diff --git a/src/reconScreens/ReconOnboarding/RecoOnbdConfiguration.res b/src/reconScreens/ReconOnboarding/RecoOnbdConfiguration.res
@@ -0,0 +1 @@
+
diff --git a/src/reconScreens/ReconOnboarding/ReconOnbdLanding.res b/src/reconScreens/ReconOnboarding/ReconOnbdLanding.res
@@ -0,0 +1,4 @@
+@react.component
+let make = () => {
+  <div> {"OnBoarding"->React.string} </div>
+}
diff --git a/src/reconScreens/ReconOnboarding/ReconOnboarding.res b/src/reconScreens/ReconOnboarding/ReconOnboarding.res
@@ -0,0 +1,6 @@
+@react.component
+let make = () => {
+  <div>
+    <ReconOnbdLanding />
+  </div>
+}
diff --git a/src/screens/Sidebar/Sidebar.res b/src/screens/Sidebar/Sidebar.res
@@ -448,6 +448,7 @@ let make = (
   ~path,
   ~linkSelectionCheck=defaultLinkSelectionCheck,
   ~verticalOffset="120px",
+  ~productSiebars: array<topLevelItem>,
 ) => {
   open CommonAuthHooks
   let {globalUIConfig: {sidebarColor: {backgroundColor}}} = React.useContext(
@@ -553,51 +554,75 @@ let make = (
           className="h-full overflow-y-scroll transition-transform duration-1000 overflow-x-hidden sidebar-scrollbar"
           style={height: `calc(100vh - ${verticalOffset})`}>
           <style> {React.string(sidebarScrollbarCss)} </style>
-          {sidebars
-          ->Array.mapWithIndex((tabInfo, index) => {
-            switch tabInfo {
-            | RemoteLink(record)
-            | Link(record) => {
-                let isSelected = linkSelectionCheck(firstPart, record.link)
-                <SidebarItem
-                  key={Int.toString(index)} tabInfo isSelected isSidebarExpanded setOpenItem
-                />
-              }
-
-            | LinkWithTag(record) => {
-                let isSelected = linkSelectionCheck(firstPart, record.link)
-                <SidebarItem key={Int.toString(index)} tabInfo isSelected isSidebarExpanded />
-              }
-
-            | Section(section) =>
-              <RenderIf condition={section.showSection} key={Int.toString(index)}>
-                <SidebarNestedSection
+          <div>
+            {sidebars
+            ->Array.mapWithIndex((tabInfo, index) => {
+              switch tabInfo {
+              | RemoteLink(record)
+              | Link(record) => {
+                  let isSelected = linkSelectionCheck(firstPart, record.link)
+                  <SidebarItem
+                    key={Int.toString(index)} tabInfo isSelected isSidebarExpanded setOpenItem
+                  />
+                }
+
+              | LinkWithTag(record) => {
+                  let isSelected = linkSelectionCheck(firstPart, record.link)
+                  <SidebarItem key={Int.toString(index)} tabInfo isSelected isSidebarExpanded />
+                }
+
+              | Section(section) =>
+                <RenderIf condition={section.showSection} key={Int.toString(index)}>
+                  <SidebarNestedSection
+                    key={Int.toString(index)}
+                    section
+                    linkSelectionCheck
+                    firstPart
+                    isSideBarExpanded={isSidebarExpanded}
+                    openItem
+                    setOpenItem
+                    isSectionAutoCollapseEnabled=true
+                  />
+                </RenderIf>
+              | Heading(headingOptions) =>
+                <div
                   key={Int.toString(index)}
-                  section
-                  linkSelectionCheck
-                  firstPart
-                  isSideBarExpanded={isSidebarExpanded}
-                  openItem
-                  setOpenItem
-                  isSectionAutoCollapseEnabled=true
-                />
-              </RenderIf>
-            | Heading(headingOptions) =>
-              <div
-                key={Int.toString(index)}
-                className={`text-xs font-semibold leading-5 text-[#5B6376] overflow-hidden border-l-2 rounded-sm border-transparent px-3 ${isSidebarExpanded
-                    ? "mx-2"
-                    : "mx-1"} mt-5 mb-3`}>
-                {{isSidebarExpanded ? headingOptions.name : ""}->React.string}
-              </div>
+                  className={`text-xs font-semibold leading-5 text-[#5B6376] overflow-hidden border-l-2 rounded-sm border-transparent px-3 ${isSidebarExpanded
+                      ? "mx-2"
+                      : "mx-1"} mt-5 mb-3`}>
+                  {{isSidebarExpanded ? headingOptions.name : ""}->React.string}
+                </div>
 
-            | CustomComponent(customComponentOptions) =>
-              <RenderIf condition={isSidebarExpanded} key={Int.toString(index)}>
-                customComponentOptions.component
-              </RenderIf>
-            }
-          })
-          ->React.array}
+              | CustomComponent(customComponentOptions) =>
+                <RenderIf condition={isSidebarExpanded} key={Int.toString(index)}>
+                  customComponentOptions.component
+                </RenderIf>
+              }
+            })
+            ->React.array}
+          </div>
+          <div className="border-t border-blue-840 mt-5">
+            {productSiebars
+            ->Array.mapWithIndex((tabInfo, index) => {
+              switch tabInfo {
+              | Section(section) =>
+                <RenderIf condition={section.showSection} key={Int.toString(index)}>
+                  <SidebarNestedSection
+                    key={Int.toString(index)}
+                    section
+                    linkSelectionCheck
+                    firstPart
+                    isSideBarExpanded={isSidebarExpanded}
+                    openItem
+                    setOpenItem
+                    isSectionAutoCollapseEnabled=true
+                  />
+                </RenderIf>
+              | _ => React.null
+              }
+            })
+            ->React.array}
+          </div>
         </div>
         <div className="flex items-center justify-between mb-5 mt-2 mx-2 mr-2 hover:bg-[#334264]">
           <RenderIf condition={isSidebarExpanded}>