Skip to content

Commit

Permalink
Fix/semiloaded state race condition (#163)
Browse files Browse the repository at this point in the history
  • Loading branch information
vsrivatsa-edinburgh authored Feb 13, 2024
1 parent 3d7dead commit ffea059
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 33 deletions.
46 changes: 29 additions & 17 deletions src/Components/DynamicFields.res
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ let make = (
let {billingAddress} = Recoil.useRecoilValueFromAtom(optionAtom)

//<...>//
let paymentMethodTypes =
let paymentMethodTypes = React.useMemo3(() => {
PaymentMethodsRecord.getPaymentMethodTypeFromList(
~list,
~paymentMethod,
Expand All @@ -30,19 +30,25 @@ let make = (
~paymentMethodName=paymentMethodType,
),
)->Belt.Option.getWithDefault(PaymentMethodsRecord.defaultPaymentMethodType)
}, (list, paymentMethod, paymentMethodType))

let requiredFieldsWithBillingDetails = if paymentMethod === "card" {
paymentMethodTypes.required_fields
} else if (
PaymentMethodsRecord.dynamicFieldsEnabledPaymentMethods->Js.Array2.includes(paymentMethodType)
) {
paymentMethodTypes.required_fields
} else {
[]
}
let requiredFieldsWithBillingDetails = React.useMemo3(() => {
if paymentMethod === "card" {
paymentMethodTypes.required_fields
} else if (
PaymentMethodsRecord.dynamicFieldsEnabledPaymentMethods->Js.Array2.includes(paymentMethodType)
) {
paymentMethodTypes.required_fields
} else {
[]
}
}, (paymentMethod, paymentMethodTypes.required_fields, paymentMethodType))

let requiredFields =
requiredFieldsWithBillingDetails->DynamicFieldsUtils.removeBillingDetailsIfUseBillingAddress
let requiredFields = React.useMemo1(() => {
requiredFieldsWithBillingDetails->DynamicFieldsUtils.removeBillingDetailsIfUseBillingAddress(
billingAddress,
)
}, [requiredFieldsWithBillingDetails])

let isAllStoredCardsHaveName = React.useMemo1(() => {
PaymentType.getIsAllStoredCardsHaveName(savedCards)
Expand Down Expand Up @@ -265,24 +271,30 @@ let make = (
}
}

let dynamicFieldsToRenderOutsideBilling =
let dynamicFieldsToRenderOutsideBilling = React.useMemo1(() => {
fieldsArr->Js.Array2.filter(field =>
field->DynamicFieldsUtils.isFieldTypeToRenderOutsideBilling
)
}, [fieldsArr])

let dynamicFieldsToRenderInsideBilling =
let dynamicFieldsToRenderInsideBilling = React.useMemo1(() => {
fieldsArr->Js.Array2.filter(field =>
!(field->DynamicFieldsUtils.isFieldTypeToRenderOutsideBilling)
)
}, [fieldsArr])

let isInfoElementPresent = dynamicFieldsToRenderInsideBilling->Js.Array2.includes(InfoElement)
let isInfoElementPresent = React.useMemo1(() => {
dynamicFieldsToRenderInsideBilling->Js.Array2.includes(InfoElement)
}, [dynamicFieldsToRenderInsideBilling])

let isOnlyInfoElementPresent =
let isOnlyInfoElementPresent = React.useMemo2(() => {
dynamicFieldsToRenderInsideBilling->Js.Array2.length === 1 && isInfoElementPresent
}, (dynamicFieldsToRenderInsideBilling, isInfoElementPresent))

let isRenderDynamicFieldsInsideBilling =
let isRenderDynamicFieldsInsideBilling = React.useMemo2(() => {
dynamicFieldsToRenderInsideBilling->Js.Array2.length > 0 &&
(dynamicFieldsToRenderInsideBilling->Js.Array2.length > 1 || !isOnlyInfoElementPresent)
}, (dynamicFieldsToRenderInsideBilling, isOnlyInfoElementPresent))

React.useEffect1(() => {
let fieldsArrStr = fieldsArr->Js.Array2.map(field => {
Expand Down
20 changes: 8 additions & 12 deletions src/LoaderController.res
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,14 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger) => {
handlePostMessage([("iframeMounted", true->Js.Json.boolean)])
handlePostMessage([("applePayMounted", true->Js.Json.boolean)])
logger.setLogInitiated()
switch paymentlist {
| Loaded(_)
| LoadError(_) => ()
| _ =>
setList(._ =>
showCardFormByDefault && Utils.checkPriorityList(paymentMethodOrder) ? SemiLoaded : Loading
)
}
Window.addEventListener("click", ev =>
handleOnClickPostMessage(~targetOrigin=keys.parentURL, ev)
)
Expand Down Expand Up @@ -358,18 +366,6 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger) => {
handleMessage(handleFun, "Error in parsing sent Data")
}, (showCardFormByDefault, paymentMethodOrder))

React.useEffect1(() => {
switch paymentlist {
| Loaded(_)
| LoadError(_) => ()
| _ =>
setList(._ =>
showCardFormByDefault && Utils.checkPriorityList(paymentMethodOrder) ? SemiLoaded : Loading
)
}
None
}, [paymentlist])

let observer = ResizeObserver.newResizerObserver(entries => {
entries
->Js.Array2.map(item => {
Expand Down
3 changes: 1 addition & 2 deletions src/PaymentElement.res
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ let make = (
)
let isApplePayReady = Recoil.useRecoilValueFromAtom(isApplePayReady)
let isGooglePayReady = Recoil.useRecoilValueFromAtom(isGooglePayReady)
let pmList = Recoil.useRecoilValueFromAtom(list)
let methodslist = Recoil.useRecoilValueFromAtom(list)
let paymentOrder = paymentMethodOrder->Utils.getOptionalArr->Utils.removeDuplicate
let (sessions, setSessions) = React.useState(_ => Js.Dict.empty()->Js.Json.object_)
Expand Down Expand Up @@ -319,7 +318,7 @@ let make = (
</RenderIf>
<PoweredBy />
</RenderIf>
{switch pmList {
{switch methodslist {
| LoadError(_) => React.null
| _ =>
<RenderIf
Expand Down
3 changes: 1 addition & 2 deletions src/Utilities/DynamicFieldsUtils.res
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,8 @@ let getBillingAddressPathFromFieldType = (fieldType: PaymentMethodsRecord.paymen

let removeBillingDetailsIfUseBillingAddress = (
requiredFields: Js.Array2.t<PaymentMethodsRecord.required_fields>,
billingAddress: PaymentType.billingAddress,
) => {
let {billingAddress} = Recoil.useRecoilValueFromAtom(RecoilAtoms.optionAtom)

if billingAddress.isUseBillingAddress {
requiredFields->Js.Array2.filter(requiredField => {
!(requiredField.field_type->isBillingAddressFieldType)
Expand Down

0 comments on commit ffea059

Please sign in to comment.