fix: two shimmers issue fixed (#424)

juspay · Jun 11, 2024 · 78ba856 · 78ba856
1 parent 904a7ba
commit 78ba856
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 26 deletions.
diff --git a/src/PaymentElement.res b/src/PaymentElement.res
@@ -9,6 +9,7 @@ let cardsToRender = (width: int) => {
 }
 @react.component
 let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mode) => {
+  let divRef = React.useRef(Nullable.null)
   let sessionsObj = Recoil.useRecoilValueFromAtom(sessions)
   let {
     showCardFormByDefault,
@@ -25,7 +26,9 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
   let (walletOptions, setWalletOptions) = React.useState(_ => [])
   let {sdkHandleConfirmPayment} = Recoil.useRecoilValueFromAtom(optionAtom)
 
-  let setPaymentMethodListValue = Recoil.useSetRecoilState(PaymentUtils.paymentMethodListValue)
+  let (paymentMethodListValue, setPaymentMethodListValue) = Recoil.useRecoilState(
+    PaymentUtils.paymentMethodListValue,
+  )
   let (cardsContainerWidth, setCardsContainerWidth) = React.useState(_ => 0)
   let layoutClass = CardUtils.getLayoutClass(layout)
   let (selectedOption, setSelectedOption) = Recoil.useRecoilState(selectedOptionAtom)
@@ -368,9 +371,15 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       </div>
     </RenderIf>
     {switch paymentMethodList {
-    | LoadError(_) => React.null
+    | LoadError(_) =>
+      <RenderIf condition={paymentMethodListValue.payment_methods->Array.length === 0}>
+        <ErrorBoundary.ErrorTextAndImage divRef level={Top} />
+      </RenderIf>
     | _ =>
-      <RenderIf condition={paymentOptions->Array.length == 0 && walletOptions->Array.length == 0}>
+      <RenderIf
+        condition={!displaySavedPaymentMethods &&
+        paymentOptions->Array.length == 0 &&
+        walletOptions->Array.length == 0}>
         <PaymentElementShimmer />
       </RenderIf>
     }}

diff --git a/src/orca-log-catcher/ErrorBoundary.res b/src/orca-log-catcher/ErrorBoundary.res
@@ -92,6 +92,35 @@ let errorIcon = {
   </svg>
 }
 
+module ErrorTextAndImage = {
+  @react.component
+  let make = (~divRef, ~level) => {
+    let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+    let message = switch level {
+    | Top => "We'll be back with you shortly :)"
+    | _ => "Try another payment method :)"
+    }
+
+    <div
+      ref={divRef->ReactDOM.Ref.domRef}
+      style={
+        color: themeObj.colorPrimary,
+        backgroundColor: themeObj.colorBackground,
+        borderRadius: themeObj.borderRadius,
+        borderColor: themeObj.borderColor,
+      }
+      className="flex  items-center">
+      <div className="flex flex-row  items-center m-6">
+        <div style={marginLeft: "1rem"}> {errorIcon} </div>
+        <div className="flex flex-col items-center justify-center" style={marginLeft: "3rem"}>
+          <div> {"Oops, something went wrong!"->React.string} </div>
+          <div className="text-sm"> {message->React.string} </div>
+        </div>
+      </div>
+    </div>
+  }
+}
+
 module ErrorCard = {
   @react.component
   let make = (~error: Sentry.ErrorBoundary.fallbackArg, ~level) => {
@@ -134,7 +163,6 @@ module ErrorCard = {
     })
 
     let (divH, setDivH) = React.useState(_ => 0.0)
-    let {themeObj} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
     let (keys, _setKeys) = Recoil.useRecoilState(RecoilAtoms.keys)
     let {iframeId} = keys
     let divRef = React.useRef(Nullable.null)
@@ -164,30 +192,9 @@ module ErrorCard = {
       None
     }, (divH, iframeId))
 
-    let message = switch level {
-    | Top => "We'll be back with you shortly :)"
-    | _ => "Try another payment method :)"
-    }
     switch level {
     | RequestButton => React.null
-    | _ =>
-      <div
-        ref={divRef->ReactDOM.Ref.domRef}
-        style={
-          color: themeObj.colorPrimary,
-          backgroundColor: themeObj.colorBackground,
-          borderRadius: themeObj.borderRadius,
-          borderColor: themeObj.borderColor,
-        }
-        className="flex  items-center">
-        <div className="flex flex-row  items-center m-6">
-          <div style={marginLeft: "1rem"}> {errorIcon} </div>
-          <div className="flex flex-col items-center justify-center" style={marginLeft: "3rem"}>
-            <div> {"Oops, something went wrong!"->React.string} </div>
-            <div className="text-sm"> {message->React.string} </div>
-          </div>
-        </div>
-      </div>
+    | _ => <ErrorTextAndImage divRef level />
     }
   }
 }