fix: glitch in homepage (#325)

juspay · Feb 2, 2024 · a3116ed · a3116ed
1 parent 7e4622f
commit a3116ed
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 94 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -348,31 +348,44 @@ 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
       title={`${greeting}, it's great to see you!`}
       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
@@ -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
@@ -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
@@ -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 {
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,6 @@ name: Cypress Tests @@
     on:
       merge_group:
     jobs:
       cypress-tests:
         runs-on: ubuntu-latest
@@ Expand Down @@