From a3116ed23cd226cd4257b8df7e27531c4150aa84 Mon Sep 17 00:00:00 2001
From: Jeeva Ramachandran <120017870+JeevaRamu0104@users.noreply.github.com>
Date: Fri, 2 Feb 2024 13:02:20 +0530
Subject: [PATCH] fix: glitch in homepage (#325)

---
 .github/workflows/cypress-test.yml            |  1 -
 .../hyperswitch/HyperSwitchApp.res            |  2 +-
 .../hyperswitch/Provider/GlobalProvider.res   |  4 +-
 .../hyperswitch/Provider/ProviderTypes.res    |  4 +-
 src/entryPoints/hyperswitch/SidebarValues.res | 46 +++++++-----
 .../HomePageOverviewComponent.res             | 75 +++++++------------
 src/screens/HyperSwitch/Home/HomeV2.res       | 43 +++++++----
 .../Home/ProdIntent/ProdIntentForm.res        |  2 +-
 .../HyperSwitch/Home/QuickStart/GoLive.res    |  8 +-
 .../IntegrateYourAppLanding.res               |  2 +
 10 files changed, 93 insertions(+), 94 deletions(-)

diff --git a/.github/workflows/cypress-test.yml b/.github/workflows/cypress-test.yml
index 008089365..129421d8a 100644
--- a/.github/workflows/cypress-test.yml
+++ b/.github/workflows/cypress-test.yml
@@ -3,7 +3,6 @@ name: Cypress Tests
 on:
   merge_group:
 
-
 jobs:
   cypress-tests:
     runs-on: ubuntu-latest
diff --git a/src/entryPoints/hyperswitch/HyperSwitchApp.res b/src/entryPoints/hyperswitch/HyperSwitchApp.res
index da61f3d92..09bc59cb7 100644
--- a/src/entryPoints/hyperswitch/HyperSwitchApp.res
+++ b/src/entryPoints/hyperswitch/HyperSwitchApp.res
@@ -160,7 +160,7 @@ let make = () => {
   }
 
   let determineQuickStartPageState = () => {
-    isProdIntentCompleted &&
+    isProdIntentCompleted->Option.getOr(false) &&
     enumDetails.integrationCompleted &&
     !(enumDetails.testPayment.payment_id->isEmptyString)
       ? RescriptReactRouter.replace("/home")
diff --git a/src/entryPoints/hyperswitch/Provider/GlobalProvider.res b/src/entryPoints/hyperswitch/Provider/GlobalProvider.res
index d8df0b5a8..718f1aa82 100644
--- a/src/entryPoints/hyperswitch/Provider/GlobalProvider.res
+++ b/src/entryPoints/hyperswitch/Provider/GlobalProvider.res
@@ -12,7 +12,7 @@ let defaultValue = {
   setDashboardPageState: _ => (),
   permissionInfo: [],
   setPermissionInfo: _ => (),
-  isProdIntentCompleted: false,
+  isProdIntentCompleted: None,
   setIsProdIntentCompleted: _ => (),
   quickStartPageState: QuickStartTypes.ConnectProcessor(LANDING),
   setQuickStartPageState: _ => (),
@@ -30,7 +30,7 @@ let make = (~children) => {
   let (showProdIntentForm, setShowProdIntentForm) = React.useState(_ => false)
   let (dashboardPageState, setDashboardPageState) = React.useState(_ => #DEFAULT)
   let (permissionInfo, setPermissionInfo) = React.useState(_ => [])
-  let (isProdIntentCompleted, setIsProdIntentCompleted) = React.useState(_ => false)
+  let (isProdIntentCompleted, setIsProdIntentCompleted) = React.useState(_ => None)
   let (
     quickStartPageState,
     setQuickStartPageState,
diff --git a/src/entryPoints/hyperswitch/Provider/ProviderTypes.res b/src/entryPoints/hyperswitch/Provider/ProviderTypes.res
index e627d6f97..84afa3d42 100644
--- a/src/entryPoints/hyperswitch/Provider/ProviderTypes.res
+++ b/src/entryPoints/hyperswitch/Provider/ProviderTypes.res
@@ -44,8 +44,8 @@ type contextType = {
   setIntegrationDetails: (integrationDetailsType => integrationDetailsType) => unit,
   permissionInfo: array<getInfoType>,
   setPermissionInfo: (array<getInfoType> => array<getInfoType>) => unit,
-  isProdIntentCompleted: bool,
-  setIsProdIntentCompleted: (bool => bool) => unit,
+  isProdIntentCompleted: option<bool>,
+  setIsProdIntentCompleted: (option<bool> => option<bool>) => unit,
   quickStartPageState: QuickStartTypes.quickStartType,
   setQuickStartPageState: (
     QuickStartTypes.quickStartType => QuickStartTypes.quickStartType
diff --git a/src/entryPoints/hyperswitch/SidebarValues.res b/src/entryPoints/hyperswitch/SidebarValues.res
index dbecf02fc..d0a57d062 100644
--- a/src/entryPoints/hyperswitch/SidebarValues.res
+++ b/src/entryPoints/hyperswitch/SidebarValues.res
@@ -11,29 +11,37 @@ module GetProductionAccess = {
     let {isProdIntentCompleted, setShowProdIntentForm} = React.useContext(
       GlobalProvider.defaultContext,
     )
-    let backgroundColor = isProdIntentCompleted ? "bg-light_green" : "bg-light_blue"
-    let cursorStyles = isProdIntentCompleted ? "cursor-default" : "cursor-pointer"
-    let productionAccessString = isProdIntentCompleted
+    let isProdIntent = isProdIntentCompleted->Option.getOr(false)
+    let backgroundColor = isProdIntent ? "bg-light_green" : "bg-light_blue"
+    let cursorStyles = isProdIntent ? "cursor-default" : "cursor-pointer"
+    let productionAccessString = isProdIntent
       ? "Production Access Requested"
       : "Get Production Access"
 
-    <div
-      className={`flex items-center gap-2 ${backgroundColor} ${cursorStyles} px-4 py-3 m-2 ml-2 mb-3 !mx-4 whitespace-nowrap rounded`}
-      onClick={_ => {
-        isProdIntentCompleted
-          ? ()
-          : {
-              setShowProdIntentForm(_ => true)
-              mixpanelEvent(~eventName="get_production_access", ())
-            }
-      }}>
-      <div className={`text-white ${textStyles} !font-semibold`}>
-        {productionAccessString->React.string}
+    switch isProdIntentCompleted {
+    | Some(_) =>
+      <div
+        className={`flex items-center gap-2 ${backgroundColor} ${cursorStyles} px-4 py-3 m-2 ml-2 mb-3 !mx-4 whitespace-nowrap rounded`}
+        onClick={_ => {
+          isProdIntent
+            ? ()
+            : {
+                setShowProdIntentForm(_ => true)
+                mixpanelEvent(~eventName="get_production_access", ())
+              }
+        }}>
+        <div className={`text-white ${textStyles} !font-semibold`}>
+          {productionAccessString->React.string}
+        </div>
+        <UIUtils.RenderIf condition={!isProdIntent}>
+          <Icon name="thin-right-arrow" customIconColor="white" size=20 />
+        </UIUtils.RenderIf>
       </div>
-      <UIUtils.RenderIf condition={!isProdIntentCompleted}>
-        <Icon name="thin-right-arrow" customIconColor="white" size=20 />
-      </UIUtils.RenderIf>
-    </div>
+    | None =>
+      <Shimmer
+        styleClass="h-10 px-4 py-3 m-2 ml-2 mb-3 dark:bg-black bg-white rounded" shimmerType={Small}
+      />
+    }
   }
 }
 
diff --git a/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res b/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res
index 51119e284..524d830b2 100644
--- a/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res
+++ b/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res
@@ -4,33 +4,16 @@ module ConnectorOverview = {
   @react.component
   let make = () => {
     open ConnectorUtils
-    let (screenState, setScreenState) = React.useState(_ => PageLoaderWrapper.Loading)
-    let (configuredConnectors, setConfiguredConnectors) = React.useState(_ => [])
-    let fetchConnectorListResponse = useFetchConnectorList()
     let userPermissionJson = Recoil.useRecoilValueFromAtom(HyperswitchAtom.userPermissionAtom)
-
-    let getConnectorList = async () => {
-      open LogicUtils
-      try {
-        let response = await fetchConnectorListResponse()
-        let connectorsList =
-          response->getProcessorsListFromJson(~removeFromList=ConnectorTypes.FRMPlayer, ())
-
-        let arr =
-          connectorsList->Array.map(paymentMethod =>
-            paymentMethod->getString("connector_name", "")->getConnectorNameTypeFromString
-          )
-        setConfiguredConnectors(_ => arr)
-        setScreenState(_ => Success)
-      } catch {
-      | _ => setScreenState(_ => PageLoaderWrapper.Error("Failed to fetch"))
-      }
-    }
-
-    React.useEffect0(() => {
-      getConnectorList()->ignore
-      None
-    })
+    let connectorsList =
+      HyperswitchAtom.connectorListAtom
+      ->Recoil.useRecoilValueFromAtom
+      ->LogicUtils.safeParse
+      ->getProcessorsListFromJson(~removeFromList=ConnectorTypes.FRMPlayer, ())
+    let configuredConnectors =
+      connectorsList->Array.map(paymentMethod =>
+        paymentMethod->LogicUtils.getString("connector_name", "")->getConnectorNameTypeFromString
+      )
 
     let getConnectorIconsList = () => {
       let icons =
@@ -60,28 +43,24 @@ module ConnectorOverview = {
     }
 
     <UIUtils.RenderIf condition={configuredConnectors->Array.length > 0}>
-      <PageLoaderWrapper screenState customLoader={<Shimmer styleClass="w-full h-full" />}>
-        <div className=boxCss>
-          {getConnectorIconsList()}
-          <div className="flex items-center gap-2">
-            <p className=cardHeaderTextStyle>
-              {`${configuredConnectors
-                ->Array.length
-                ->Int.toString} Active Processors`->React.string}
-            </p>
-          </div>
-          <ACLButton
-            text="+ Add More"
-            access={userPermissionJson.merchantConnectorAccountRead}
-            buttonType={PrimaryOutline}
-            customButtonStyle="w-10 !px-3"
-            buttonSize={Small}
-            onClick={_ => {
-              "/connectors"->RescriptReactRouter.push
-            }}
-          />
+      <div className=boxCss>
+        {getConnectorIconsList()}
+        <div className="flex items-center gap-2">
+          <p className=cardHeaderTextStyle>
+            {`${configuredConnectors->Array.length->Int.toString} Active Processors`->React.string}
+          </p>
         </div>
-      </PageLoaderWrapper>
+        <ACLButton
+          text="+ Add More"
+          access={userPermissionJson.merchantConnectorAccountRead}
+          buttonType={PrimaryOutline}
+          customButtonStyle="w-10 !px-3"
+          buttonSize={Small}
+          onClick={_ => {
+            "/connectors"->RescriptReactRouter.push
+          }}
+        />
+      </div>
     </UIUtils.RenderIf>
   }
 }
@@ -244,9 +223,7 @@ module OverviewInfo = {
 let make = () => {
   let {systemMetrics} = HyperswitchAtom.featureFlagAtom->Recoil.useRecoilValueFromAtom
   let userPermissionJson = Recoil.useRecoilValueFromAtom(HyperswitchAtom.userPermissionAtom)
-
   <div className="flex flex-col gap-4">
-    <p className=headingStyle> {"Overview"->React.string} </p>
     <div className="grid grid-cols-1 md:grid-cols-3 w-full gap-4">
       <ConnectorOverview />
       <UIUtils.RenderIf condition={userPermissionJson.analytics === Access}>
diff --git a/src/screens/HyperSwitch/Home/HomeV2.res b/src/screens/HyperSwitch/Home/HomeV2.res
index f3a18de38..69792508d 100644
--- a/src/screens/HyperSwitch/Home/HomeV2.res
+++ b/src/screens/HyperSwitch/Home/HomeV2.res
@@ -348,19 +348,36 @@ module Resources = {
   }
 }
 
+module QuickStartModule = {
+  @react.component
+  let make = () => {
+    let {isProdIntentCompleted} = React.useContext(GlobalProvider.defaultContext)
+    let enumDetails = Recoil.useRecoilValueFromAtom(HyperswitchAtom.enumVariantAtom)
+    let typedEnumValue = enumDetails->LogicUtils.safeParse->QuickStartUtils.getTypedValueFromDict
+    let isMobileView = MatchMedia.useMobileChecker()
+    <div>
+      {switch isProdIntentCompleted {
+      | Some(prodIntent) =>
+        if (
+          [
+            typedEnumValue.testPayment.payment_id->String.length > 0,
+            typedEnumValue.integrationCompleted,
+            prodIntent,
+          ]->Array.includes(false)
+        ) {
+          <QuickStart isMobileView />
+        } else {
+          <HomePageOverviewComponent />
+        }
+      | None => <Shimmer styleClass="w-2/3 h-64 dark:bg-black bg-white" shimmerType={Small} />
+      }}
+    </div>
+  }
+}
+
 @react.component
 let make = () => {
   let greeting = HomeUtils.getGreeting()
-  let isMobileView = MatchMedia.useMobileChecker()
-  let {isProdIntentCompleted} = React.useContext(GlobalProvider.defaultContext)
-  let enumDetails = Recoil.useRecoilValueFromAtom(HyperswitchAtom.enumVariantAtom)
-  let typedEnumValue = enumDetails->LogicUtils.safeParse->QuickStartUtils.getTypedValueFromDict
-
-  let checkingConditions = [
-    typedEnumValue.testPayment.payment_id->String.length > 0,
-    typedEnumValue.integrationCompleted,
-    isProdIntentCompleted,
-  ]
 
   <>
     <PageUtils.PageHeading
@@ -368,11 +385,7 @@ let make = () => {
       subTitle="Welcome to the home of your Payments Control Centre. It aims at providing your team with a 360-degree view of payments."
     />
     <div className="w-full flex flex-col gap-14">
-      {if checkingConditions->Array.includes(false) {
-        <QuickStart isMobileView />
-      } else {
-        <HomePageOverviewComponent />
-      }}
+      <QuickStartModule />
       <RecipesAndPlugins />
       <Resources />
     </div>
diff --git a/src/screens/HyperSwitch/Home/ProdIntent/ProdIntentForm.res b/src/screens/HyperSwitch/Home/ProdIntent/ProdIntentForm.res
index c959246b1..8e56cdb82 100644
--- a/src/screens/HyperSwitch/Home/ProdIntent/ProdIntentForm.res
+++ b/src/screens/HyperSwitch/Home/ProdIntent/ProdIntentForm.res
@@ -25,10 +25,10 @@ let make = (~isFromMilestoneCard=false) => {
       let valueForProdIntent =
         firstValueFromArray->getDictFromJsonObject->getDictfromDict("ProdIntent")
       let hideHeader = valueForProdIntent->getBool(IsCompleted->getStringFromVariant, false)
-      setIsProdIntentCompleted(_ => hideHeader)
       if !hideHeader {
         valueForProdIntent->Dict.set(POCemail->getStringFromVariant, email->JSON.Encode.string)
       }
+      setIsProdIntentCompleted(_ => Some(hideHeader))
       setInitialValues(_ => valueForProdIntent)
     } catch {
     | _ => ()
diff --git a/src/screens/HyperSwitch/Home/QuickStart/GoLive.res b/src/screens/HyperSwitch/Home/QuickStart/GoLive.res
index 89b4e8c62..9e5bd1118 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/GoLive.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/GoLive.res
@@ -53,11 +53,11 @@ let make = (~goLive) => {
       let firstValueFromArray = res->getArrayFromJson([])->getValueFromArray(0, JSON.Encode.null)
       let valueForProdIntent =
         firstValueFromArray->getDictFromJsonObject->getDictfromDict("ProdIntent")
-      let hideHeader = valueForProdIntent->getBool(IsCompleted->getStringFromVariant, false)
-      setIsProdIntentCompleted(_ => hideHeader)
-      if !hideHeader {
+      let hideHeader = valueForProdIntent->getOptionBool(IsCompleted->getStringFromVariant)
+      if !(hideHeader->Option.getOr(false)) {
         valueForProdIntent->Dict.set(POCemail->getStringFromVariant, email->JSON.Encode.string)
       }
+      setIsProdIntentCompleted(_ => hideHeader)
       setQuickStartPageState(_ => FinalLandingPage)
       setInitialValues(_ => valueForProdIntent)
     } catch {
@@ -86,7 +86,7 @@ let make = (~goLive) => {
 
   let landingButtonGroup = {
     <div className="flex flex-col gap-4 w-full">
-      <UIUtils.RenderIf condition={!isProdIntentCompleted}>
+      <UIUtils.RenderIf condition={!(isProdIntentCompleted->Option.getOr(false))}>
         <Button
           text="Get Production Access"
           buttonType={Primary}
diff --git a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppLanding.res b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppLanding.res
index 072b47c42..68f82e56c 100644
--- a/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppLanding.res
+++ b/src/screens/HyperSwitch/Home/QuickStart/IntegrateYourApp/IntegrateYourAppLanding.res
@@ -17,6 +17,7 @@ let make = (~integrateAppValue: integrateApp) => {
   let (buttonState, setButtonState) = React.useState(_ => Button.Normal)
   let currentRoute =
     typedValueOfEnum.integrationMethod.integration_type->textToVariantMapperForBuildHS
+  let fetchConnectorListResponse = ConnectorUtils.useFetchConnectorList()
 
   let landingButtonGroup = {
     <div className="flex flex-col gap-4 w-full">
@@ -47,6 +48,7 @@ let make = (~integrateAppValue: integrateApp) => {
       }
       let enumVariant = quickStartPageState->variantToEnumMapper
       let _ = await IntegrationMethod(integartionValue)->usePostEnumDetails(enumVariant)
+      let _ = fetchConnectorListResponse()->ignore
       setQuickStartPageState(_ => IntegrateApp(CUSTOM_INTEGRATION))
       setButtonState(_ => Normal)
     } catch {