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

fix: two shimmers issue fixed #424

Merged
merged 5 commits into from
Jun 11, 2024
Merged

fix: two shimmers issue fixed #424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c2bc7a5
fix: two shimmers issue fixed
PritishBudhiraja Jun 5, 2024
526d3bb
fix: empty pml response handle
PritishBudhiraja Jun 6, 2024
416aaac
Merge branch 'main' of github.com:juspay/hyperswitch-web into two-shi…
PritishBudhiraja Jun 6, 2024
cd8844a
Merge branch 'main' into two-shimmer-issue
PritishBudhiraja Jun 7, 2024
c03d943
Merge branch 'main' into two-shimmer-issue
PritishBudhiraja Jun 10, 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
15 changes: 12 additions & 3 deletions src/PaymentElement.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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)
Expand Down Expand Up @@ -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>
}}
Expand Down
53 changes: 30 additions & 23 deletions src/orca-log-catcher/ErrorBoundary.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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 />
}
}
}
Expand Down
Loading