From c2bc7a544909717c00991ebe52ec9252bda2829d Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <Pritish.budhiraja@gmail.com>
Date: Wed, 5 Jun 2024 13:36:55 +0530
Subject: [PATCH 1/2] fix: two shimmers issue fixed

---
 src/PaymentElement.res | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/PaymentElement.res b/src/PaymentElement.res
index d5f04ccee..bb4d506a2 100644
--- a/src/PaymentElement.res
+++ b/src/PaymentElement.res
@@ -384,7 +384,10 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
     {switch paymentMethodList {
     | LoadError(_) => React.null
     | _ =>
-      <RenderIf condition={paymentOptions->Array.length == 0 && walletOptions->Array.length == 0}>
+      <RenderIf
+        condition={!displaySavedPaymentMethods &&
+        paymentOptions->Array.length == 0 &&
+        walletOptions->Array.length == 0}>
         <PaymentElementShimmer />
       </RenderIf>
     }}

From 526d3bb7f637cd9d8799ed4dd2952c50333b65cb Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <Pritish.budhiraja@gmail.com>
Date: Thu, 6 Jun 2024 11:51:43 +0530
Subject: [PATCH 2/2] fix: empty pml response handle

---
 src/PaymentElement.res                 | 10 ++++-
 src/orca-log-catcher/ErrorBoundary.res | 53 +++++++++++++++-----------
 2 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/src/PaymentElement.res b/src/PaymentElement.res
index bb4d506a2..ae12def5b 100644
--- 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)
@@ -382,7 +385,10 @@ 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={!displaySavedPaymentMethods &&
diff --git a/src/orca-log-catcher/ErrorBoundary.res b/src/orca-log-catcher/ErrorBoundary.res
index 16c13f715..44e2818a9 100644
--- 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 />
     }
   }
 }