From 9a1ffbe7e955154565393906cce0116675218343 Mon Sep 17 00:00:00 2001 From: Pritish Budhiraja <pritish.budhiraja@gmail.com> Date: Wed, 14 Aug 2024 16:03:26 +0530 Subject: [PATCH] refactor: suspense logs added --- src/PaymentElement.res | 40 +++++++++---------- src/Payments/PaymentRequestButtonElement.res | 7 +++- src/RenderPaymentMethods.res | 27 +++++++------ .../ReusableReactSuspense.res | 8 ++++ 4 files changed, 48 insertions(+), 34 deletions(-) create mode 100644 src/orca-log-catcher/ReusableReactSuspense.res diff --git a/src/PaymentElement.res b/src/PaymentElement.res index fe3509fed..7fa063597 100644 --- a/src/PaymentElement.res +++ b/src/PaymentElement.res @@ -288,43 +288,43 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod {switch selectedOption->PaymentModeType.paymentMode { | Card => <CardPayment cardProps expiryProps cvcProps paymentType /> | Klarna => - <React.Suspense fallback={loader()}> + <ReusableReactSuspense loaderComponent={loader()} componentName="KlarnaPaymentLazy"> <KlarnaPaymentLazy paymentType /> - </React.Suspense> + </ReusableReactSuspense> | ACHTransfer => - <React.Suspense fallback={loader()}> + <ReusableReactSuspense loaderComponent={loader()} componentName="ACHBankTransferLazy"> <ACHBankTransferLazy paymentType /> - </React.Suspense> + </ReusableReactSuspense> | SepaTransfer => - <React.Suspense fallback={loader()}> + <ReusableReactSuspense loaderComponent={loader()} componentName="SepaBankTransferLazy"> <SepaBankTransferLazy paymentType /> - </React.Suspense> + </ReusableReactSuspense> | BacsTransfer => - <React.Suspense fallback={loader()}> + <ReusableReactSuspense loaderComponent={loader()} componentName="BacsBankTransferLazy"> <BacsBankTransferLazy paymentType /> - </React.Suspense> + </ReusableReactSuspense> | ACHBankDebit => - <React.Suspense fallback={loader()}> + <ReusableReactSuspense loaderComponent={loader()} componentName="ACHBankDebitLazy"> <ACHBankDebitLazy paymentType /> - </React.Suspense> + </ReusableReactSuspense> | SepaBankDebit => - <React.Suspense fallback={loader()}> + <ReusableReactSuspense loaderComponent={loader()} componentName="SepaBankDebitLazy"> <SepaBankDebitLazy paymentType /> - </React.Suspense> + </ReusableReactSuspense> | BacsBankDebit => - <React.Suspense fallback={loader()}> + <ReusableReactSuspense loaderComponent={loader()} componentName="BacsBankDebitLazy"> <BacsBankDebitLazy paymentType /> - </React.Suspense> + </ReusableReactSuspense> | BanContactCard => <CardPayment cardProps expiryProps cvcProps paymentType isBancontact=true /> | BecsBankDebit => - <React.Suspense fallback={loader()}> + <ReusableReactSuspense loaderComponent={loader()} componentName="BecsBankDebitLazy"> <BecsBankDebitLazy paymentType /> - </React.Suspense> + </ReusableReactSuspense> | Boleto => - <React.Suspense fallback={loader()}> + <ReusableReactSuspense loaderComponent={loader()} componentName="BoletoLazy"> <BoletoLazy paymentType /> - </React.Suspense> + </ReusableReactSuspense> | ApplePay => switch applePayToken { | ApplePayTokenOptional(optToken) => @@ -350,9 +350,9 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod }} </SessionPaymentWrapper> | _ => - <React.Suspense fallback={loader()}> + <ReusableReactSuspense loaderComponent={loader()} componentName="PaymentMethodsWrapperLazy"> <PaymentMethodsWrapperLazy paymentType paymentMethodName=selectedOption /> - </React.Suspense> + </ReusableReactSuspense> }} </ErrorBoundary> } diff --git a/src/Payments/PaymentRequestButtonElement.res b/src/Payments/PaymentRequestButtonElement.res index f78578493..1d8145412 100644 --- a/src/Payments/PaymentRequestButtonElement.res +++ b/src/Payments/PaymentRequestButtonElement.res @@ -66,7 +66,10 @@ let make = (~sessions, ~walletOptions, ~paymentType) => { ->Array.mapWithIndex((item, i) => { <ErrorBoundary level={ErrorBoundary.RequestButton} key={`${item}-${i->Int.toString}-request-button`}> - <React.Suspense fallback={<WalletShimmer />} key={i->Int.toString}> + <ReusableReactSuspense + loaderComponent={<WalletShimmer />} + componentName="PaymentRequestButtonElement" + key={i->Int.toString}> {switch clientSecret { | Some(_) => switch item->paymentMode { @@ -123,7 +126,7 @@ let make = (~sessions, ~walletOptions, ~paymentType) => { } | None => React.null }} - </React.Suspense> + </ReusableReactSuspense> </ErrorBoundary> }) ->React.array} diff --git a/src/RenderPaymentMethods.res b/src/RenderPaymentMethods.res index d02c2bbfe..52d254968 100644 --- a/src/RenderPaymentMethods.res +++ b/src/RenderPaymentMethods.res @@ -71,28 +71,30 @@ let make = ( <div className="w-full font-medium"> {switch paymentType { | Card => - <React.Suspense - fallback={<RenderIf condition={showLoader}> + <ReusableReactSuspense + loaderComponent={<RenderIf condition={showLoader}> <CardElementShimmer /> - </RenderIf>}> + </RenderIf>} + componentName="SingleLineCardPaymentLazy"> <SingleLineCardPaymentLazy paymentType cardProps expiryProps cvcProps zipProps handleElementFocus isFocus /> - </React.Suspense> + </ReusableReactSuspense> | GooglePayElement | PayPalElement | ApplePayElement | KlarnaElement | ExpressCheckoutElement | Payment => - <React.Suspense - fallback={<RenderIf condition={showLoader}> + <ReusableReactSuspense + loaderComponent={<RenderIf condition={showLoader}> {paymentType->Utils.getIsWalletElementPaymentType ? <WalletShimmer /> : <PaymentElementShimmer />} - </RenderIf>}> + </RenderIf>} + componentName="PaymentElementRendererLazy"> <PaymentElementRendererLazy paymentType cardProps expiryProps cvcProps /> - </React.Suspense> + </ReusableReactSuspense> | CardNumberElement => <InputField isValid=isCardValid @@ -143,12 +145,13 @@ let make = ( isFocus /> | PaymentMethodsManagement => - <React.Suspense - fallback={<RenderIf condition={showLoader}> + <ReusableReactSuspense + loaderComponent={<RenderIf condition={showLoader}> <PaymentElementShimmer /> - </RenderIf>}> + </RenderIf>} + componentName="PaymentManagementLazy"> <PaymentManagementLazy /> - </React.Suspense> + </ReusableReactSuspense> | PaymentMethodCollectElement | NONE => React.null }} diff --git a/src/orca-log-catcher/ReusableReactSuspense.res b/src/orca-log-catcher/ReusableReactSuspense.res new file mode 100644 index 000000000..1bb1fcc62 --- /dev/null +++ b/src/orca-log-catcher/ReusableReactSuspense.res @@ -0,0 +1,8 @@ +@react.component +let make = (~children, ~loaderComponent, ~componentName) => { + Console.log2("-- componentName -- ", componentName) + + <ErrorBoundary level=ErrorBoundary.PaymentMethod> + <React.Suspense fallback={loaderComponent}> {children} </React.Suspense> + </ErrorBoundary> +}