Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: react suspense log added #565

Merged
merged 8 commits into from
Sep 2, 2024
Merged

refactor: react suspense log added #565

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9a1ffbe
refactor: suspense logs added
PritishBudhiraja Aug 14, 2024
0d50607
refactor: suspense logs added
PritishBudhiraja Aug 14, 2024
37f3f90
Merge branch 'main' into react-suspense-log-added
PritishBudhiraja Aug 14, 2024
c8f66bd
Merge branch 'main' into react-suspense-log-added
PritishBudhiraja Aug 21, 2024
66db774
Merge branch 'main' into react-suspense-log-added
PritishBudhiraja Aug 26, 2024
2f2e14d
Merge branch 'main' of github.com:juspay/hyperswitch-web into react-s…
PritishBudhiraja Sep 2, 2024
5eef8e0
fix: display name plugin added
PritishBudhiraja Sep 2, 2024
1a583e7
fix: comments addressed
PritishBudhiraja Sep 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 108 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.3",
"@babel/preset-react": "^7.24.7",
"@commitlint/cli": "^17.0.3",
"@commitlint/config-conventional": "^17.0.3",
"@semantic-release/changelog": "^6.0.3",
Expand All @@ -65,6 +66,7 @@
"@semantic-release/release-notes-generator": "^14.0.1",
"autoprefixer": "^10.4.8",
"babel-loader": "^9.1.3",
"babel-plugin-add-react-displayname": "^0.0.5",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
"cz-conventional-changelog": "^3.3.0",
Expand Down
2 changes: 1 addition & 1 deletion src/Index.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ let app = switch ReactDOM.querySelector("#app") {
<div className="h-auto flex flex-col ">
<div className="h-auto flex flex-col">
<Recoil.RecoilRoot>
<ErrorBoundary level=ErrorBoundary.Top>
<ErrorBoundary level=ErrorBoundary.Top componentName="App">
<App />
</ErrorBoundary>
</Recoil.RecoilRoot>
Expand Down
47 changes: 25 additions & 22 deletions src/PaymentElement.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,47 +284,47 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
<PaymentShimmer />
}
let checkoutEle = {
<ErrorBoundary key={selectedOption}>
<ErrorBoundary key={selectedOption} componentName="PaymentElement">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this ErrorBoundary?

{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) =>
Expand All @@ -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>
}
Expand Down Expand Up @@ -402,7 +402,10 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
condition={(paymentOptions->Array.length > 0 || walletOptions->Array.length > 0) &&
showFields}>
<div className="flex flex-col place-items-center">
<ErrorBoundary key="payment_request_buttons_all" level={ErrorBoundary.RequestButton}>
<ErrorBoundary
key="payment_request_buttons_all"
level={ErrorBoundary.RequestButton}
componentName="PaymentRequestButtonElement">
<PaymentRequestButtonElement sessions walletOptions paymentType />
</ErrorBoundary>
<RenderIf
Expand Down
11 changes: 8 additions & 3 deletions src/Payments/PaymentRequestButtonElement.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,13 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
{walletOptions
->Array.mapWithIndex((item, i) => {
<ErrorBoundary
level={ErrorBoundary.RequestButton} key={`${item}-${i->Int.toString}-request-button`}>
<React.Suspense fallback={<WalletShimmer />} key={i->Int.toString}>
level={ErrorBoundary.RequestButton}
key={`${item}-${i->Int.toString}-request-button`}
componentName="PaymentRequestButtonElement">
<ReusableReactSuspense
loaderComponent={<WalletShimmer />}
componentName="PaymentRequestButtonElement"
key={i->Int.toString}>
{switch clientSecret {
| Some(_) =>
switch item->paymentMode {
Expand Down Expand Up @@ -123,7 +128,7 @@ let make = (~sessions, ~walletOptions, ~paymentType) => {
}
| None => React.null
}}
</React.Suspense>
</ReusableReactSuspense>
</ErrorBoundary>
})
->React.array}
Expand Down
27 changes: 15 additions & 12 deletions src/RenderPaymentMethods.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,28 +72,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
Expand Down Expand Up @@ -144,12 +146,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
}}
Expand Down
5 changes: 4 additions & 1 deletion src/WalletElement.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,10 @@ let make = (~paymentType) => {

<RenderIf condition={walletOptions->Array.length > 0}>
<div className="flex flex-col place-items-center">
<ErrorBoundary key="payment_request_buttons_all" level={ErrorBoundary.RequestButton}>
<ErrorBoundary
key="payment_request_buttons_all"
level={ErrorBoundary.RequestButton}
componentName="WalletElement">
<PaymentRequestButtonElement sessions walletOptions paymentType />
</ErrorBoundary>
</div>
Expand Down
Loading
Loading