diff --git a/src/Components/AddressPaymentInput.res b/src/Components/AddressPaymentInput.res index 5b9dc389a..2c6fee406 100644 --- a/src/Components/AddressPaymentInput.res +++ b/src/Components/AddressPaymentInput.res @@ -202,7 +202,7 @@ let make = (~paymentType, ~className="") => { } } }, (line1, line2, country, state, city, postalCode)) - submitPaymentData(submitCallback) + useSubmitPaymentData(submitCallback) let hasDefaulltValues = line2.value !== "" || city.value !== "" || postalCode.value !== "" || state.value !== "" diff --git a/src/Components/BillingNamePaymentInput.res b/src/Components/BillingNamePaymentInput.res index 8f08abbe9..39b2a213c 100644 --- a/src/Components/BillingNamePaymentInput.res +++ b/src/Components/BillingNamePaymentInput.res @@ -60,7 +60,7 @@ let make = (~paymentType, ~customFieldName=None, ~requiredFields as optionalRequ } } }, [billingName]) - submitPaymentData(submitCallback) + useSubmitPaymentData(submitCallback) { } } }, [blikCode]) - submitPaymentData(submitCallback) + useSubmitPaymentData(submitCallback) diff --git a/src/Components/EmailPaymentInput.res b/src/Components/EmailPaymentInput.res index a207be735..3fdc6b0ee 100644 --- a/src/Components/EmailPaymentInput.res +++ b/src/Components/EmailPaymentInput.res @@ -54,7 +54,7 @@ let make = (~paymentType) => { } } }, [email]) - submitPaymentData(submitCallback) + useSubmitPaymentData(submitCallback)
diff --git a/src/Components/Surcharge.res b/src/Components/Surcharge.res index f8821d4bf..99c3af66f 100644 --- a/src/Components/Surcharge.res +++ b/src/Components/Surcharge.res @@ -19,12 +19,15 @@ let make = ( let paymentMethodTypes = paymentMethodType->getPaymentMethodTypes + let getOneClickWalletsMessage = SurchargeUtils.useOneClickWalletsMessageGetter(~list) + let getSurchargeUtilsMessage = SurchargeUtils.useMessageGetter() + let getSurchargeMessage = () => { if isForWallets { - SurchargeUtils.getOneClickWalletsMessage(~list) + getOneClickWalletsMessage() } else { switch paymentMethodTypes.surcharge_details { - | Some(surchargeDetails) => SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails, ~list) + | Some(surchargeDetails) => getSurchargeUtilsMessage(~paymentMethod, ~surchargeDetails, ~list) | None => if paymentMethod === "card" { let creditPaymentMethodTypes = getPaymentMethodTypes("credit") @@ -44,13 +47,21 @@ let make = ( let debitCardSurcharge = debitSurchargeDetails.displayTotalSurchargeAmount if creditCardSurcharge >= debitCardSurcharge { - SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails={creditSurchargeDetails}, ~list) + getSurchargeUtilsMessage( + ~paymentMethod, + ~surchargeDetails={creditSurchargeDetails}, + ~list, + ) } else { - SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails={debitSurchargeDetails}, ~list) + getSurchargeUtilsMessage( + ~paymentMethod, + ~surchargeDetails={debitSurchargeDetails}, + ~list, + ) } | (None, Some(surchargeDetails)) | (Some(surchargeDetails), None) => - SurchargeUtils.getMessage(~paymentMethod, ~surchargeDetails, ~list) + getSurchargeUtilsMessage(~paymentMethod, ~surchargeDetails, ~list) | (None, None) => None } } else { diff --git a/src/Components/SurchargeUtils.res b/src/Components/SurchargeUtils.res index cc077d976..912aefe8c 100644 --- a/src/Components/SurchargeUtils.res +++ b/src/Components/SurchargeUtils.res @@ -13,101 +13,107 @@ type walletSurchargeDetails = { surchargeDetails: PaymentMethodsRecord.surchargeDetails, } -let getSurchargeDetailsForOneClickWallets = (~list) => { +let useSurchargeDetailsForOneClickWallets = (~list) => { let areOneClickWalletsRendered = Recoil.useRecoilValueFromAtom( RecoilAtoms.areOneClickWalletsRendered, ) - oneClickWallets->Js.Array2.reduce((acc, wallet) => { - let isWalletBtnRendered = switch wallet.paymentMethodType { - | "apple_pay" => areOneClickWalletsRendered.isApplePay - | "paypal" => areOneClickWalletsRendered.isPaypal - | "google_pay" => areOneClickWalletsRendered.isGooglePay - | _ => false - } - if isWalletBtnRendered { - let paymentMethodType = - PaymentMethodsRecord.getPaymentMethodTypeFromList( - ~list, - ~paymentMethod="wallet", - ~paymentMethodType=wallet.paymentMethodType, - )->Belt.Option.getWithDefault(PaymentMethodsRecord.defaultPaymentMethodType) - switch paymentMethodType.surcharge_details { - | Some(surchargDetails) => - acc->Js.Array2.concat([ - { - name: wallet.displayName, - surchargeDetails: surchargDetails, - }, - ]) - | None => acc + React.useMemo2(() => { + oneClickWallets->Js.Array2.reduce((acc, wallet) => { + let isWalletBtnRendered = switch wallet.paymentMethodType { + | "apple_pay" => areOneClickWalletsRendered.isApplePay + | "paypal" => areOneClickWalletsRendered.isPaypal + | "google_pay" => areOneClickWalletsRendered.isGooglePay + | _ => false } - } else { - acc - } - }, []) + if isWalletBtnRendered { + let paymentMethodType = + PaymentMethodsRecord.getPaymentMethodTypeFromList( + ~list, + ~paymentMethod="wallet", + ~paymentMethodType=wallet.paymentMethodType, + )->Belt.Option.getWithDefault(PaymentMethodsRecord.defaultPaymentMethodType) + switch paymentMethodType.surcharge_details { + | Some(surchargDetails) => + acc->Js.Array2.concat([ + { + name: wallet.displayName, + surchargeDetails: surchargDetails, + }, + ]) + | None => acc + } + } else { + acc + } + }, []) + }, (areOneClickWalletsRendered, list)) } -let getMessage = ( - ~surchargeDetails: PaymentMethodsRecord.surchargeDetails, - ~paymentMethod, - ~list: PaymentMethodsRecord.list, -) => { +let useMessageGetter = () => { let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom) - let surchargeValue = surchargeDetails.displayTotalSurchargeAmount->Js.Float.toString - let getLocaleStrForSurcharge = (cardLocale, altPaymentLocale) => { - paymentMethod === "card" - ? cardLocale(list.currency, surchargeValue) - : altPaymentLocale(list.currency, surchargeValue) + let getMessage = ( + ~surchargeDetails: PaymentMethodsRecord.surchargeDetails, + ~paymentMethod, + ~list: PaymentMethodsRecord.list, + ) => { + let surchargeValue = surchargeDetails.displayTotalSurchargeAmount->Js.Float.toString + + let localeStrForSurcharge = if paymentMethod === "card" { + localeString.surchargeMsgAmountForCard(list.currency, surchargeValue) + } else { + localeString.surchargeMsgAmount(list.currency, surchargeValue) + } + + Some(localeStrForSurcharge) } - Some( - getLocaleStrForSurcharge( - localeString.surchargeMsgAmountForCard, - localeString.surchargeMsgAmount, - ), - ) + getMessage } -let getOneClickWalletsMessage = (~list) => { +let useOneClickWalletsMessageGetter = (~list) => { let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom) - let oneClickWalletsArr = getSurchargeDetailsForOneClickWallets(~list) + let oneClickWalletsArr = useSurchargeDetailsForOneClickWallets(~list) - if oneClickWalletsArr->Js.Array2.length !== 0 { - let msg = oneClickWalletsArr->Js.Array2.reducei((acc, wallet, index) => { - let amount = wallet.surchargeDetails.displayTotalSurchargeAmount->Js.Float.toString - let myMsg = - <> - {React.string(`${list.currency} ${amount}`)} - {React.string(`${Utils.nbsp}${localeString.on} ${wallet.name}`)} - - let msgToConcat = if index === 0 { - myMsg - } else if index === oneClickWalletsArr->Belt.Array.length - 1 { + let getOneClickWalletsMessage = () => { + if oneClickWalletsArr->Js.Array2.length !== 0 { + let msg = oneClickWalletsArr->Js.Array2.reducei((acc, wallet, index) => { + let amount = wallet.surchargeDetails.displayTotalSurchargeAmount->Js.Float.toString + let myMsg = + <> + {React.string(`${list.currency} ${amount}`)} + {React.string(`${Utils.nbsp}${localeString.on} ${wallet.name}`)} + + let msgToConcat = if index === 0 { + myMsg + } else if index === oneClickWalletsArr->Belt.Array.length - 1 { + <> + {React.string(`${Utils.nbsp}${localeString.\"and"}${Utils.nbsp}`)} + {myMsg} + + } else { + <> + {React.string(`,${Utils.nbsp}`)} + {myMsg} + + } <> - {React.string(`${Utils.nbsp}${localeString.\"and"}${Utils.nbsp}`)} - {myMsg} + {acc} + {msgToConcat} - } else { + }, React.null) + let finalElement = <> - {React.string(`,${Utils.nbsp}`)} - {myMsg} + {React.string(`${localeString.surchargeMsgAmountForOneClickWallets}:${Utils.nbsp}`)} + {msg} - } - <> - {acc} - {msgToConcat} - - }, React.null) - let finalElement = - <> - {React.string(`${localeString.surchargeMsgAmountForOneClickWallets}:${Utils.nbsp}`)} - {msg} - - Some(finalElement) - } else { - None + Some(finalElement) + } else { + None + } } + + getOneClickWalletsMessage } diff --git a/src/PaymentElement.res b/src/PaymentElement.res index 11547b33a..0653f0a9e 100644 --- a/src/PaymentElement.res +++ b/src/PaymentElement.res @@ -228,7 +228,7 @@ let make = ( ) } }, [selectedOption]) - Utils.submitPaymentData(submitCallback) + Utils.useSubmitPaymentData(submitCallback) React.useEffect4(() => { setSelectedOption(.prev => selectedOption !== "" diff --git a/src/Payments/ACHBankDebit.res b/src/Payments/ACHBankDebit.res index 05b15b9eb..ce8e694ff 100644 --- a/src/Payments/ACHBankDebit.res +++ b/src/Payments/ACHBankDebit.res @@ -87,7 +87,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) } } }, (email, modalData, fullName)) - submitPaymentData(submitCallback) + useSubmitPaymentData(submitCallback)
{ let val = ReactEvent.Form.target(ev)["value"] diff --git a/src/Payments/BacsBankTransfer.res b/src/Payments/BacsBankTransfer.res index 18be19f9e..df647aa10 100644 --- a/src/Payments/BacsBankTransfer.res +++ b/src/Payments/BacsBankTransfer.res @@ -51,7 +51,7 @@ let default = (props: props) => { } } }, [email, fullName]) - submitPaymentData(submitCallback) + useSubmitPaymentData(submitCallback)
{ let val = ReactEvent.Form.target(ev)["value"] diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res index 2656b5000..fd84d85d9 100644 --- a/src/Payments/CardPayment.res +++ b/src/Payments/CardPayment.res @@ -186,7 +186,7 @@ let make = ( isCustomerAcceptanceRequired, nickname, )) - submitPaymentData(submitCallback) + useSubmitPaymentData(submitCallback) let paymentMethod = isBancontact ? "bank_redirect" : "card" let paymentMethodType = isBancontact ? "bancontact_card" : "debit" diff --git a/src/Payments/GPay.res b/src/Payments/GPay.res index 163075be4..15ff2319f 100644 --- a/src/Payments/GPay.res +++ b/src/Payments/GPay.res @@ -271,7 +271,7 @@ let make = ( } } }) - submitPaymentData(submitCallback) + useSubmitPaymentData(submitCallback) { isWallet diff --git a/src/Payments/KlarnaPayment.res b/src/Payments/KlarnaPayment.res index 62cba3d45..1dad635ab 100644 --- a/src/Payments/KlarnaPayment.res +++ b/src/Payments/KlarnaPayment.res @@ -58,7 +58,7 @@ let make = (~paymentType, ~countryProps, ~list: PaymentMethodsRecord.list) => { } } }, (email, fullName, country)) - submitPaymentData(submitCallback) + useSubmitPaymentData(submitCallback)
{ if status == "ready" { diff --git a/src/Payments/PaymentMethodsWrapper.res b/src/Payments/PaymentMethodsWrapper.res index a1e42a527..551a3d29c 100644 --- a/src/Payments/PaymentMethodsWrapper.res +++ b/src/Payments/PaymentMethodsWrapper.res @@ -115,7 +115,7 @@ let make = ( phoneNumber.value, (selectedBank, currency, requiredFieldsBody), )) - submitPaymentData(submitCallback) + useSubmitPaymentData(submitCallback)
diff --git a/src/Payments/PreMountLoader.res b/src/Payments/PreMountLoader.res index cf9c7eec6..b15457179 100644 --- a/src/Payments/PreMountLoader.res +++ b/src/Payments/PreMountLoader.res @@ -15,21 +15,21 @@ let make = (~sessionId as _, ~publishableKey as _, ~clientSecret as _, ~endpoint // // sessionTokensResponse, // // ) = React.useMemo0(() => { // // ( - // // PaymentHelpers.usePaymentMethodList( + // // PaymentHelpers.fetchPaymentMethodList( // // ~clientSecret, // // ~publishableKey, // // ~logger, // // ~switchToCustomPod=false, // // ~endpoint, // // ), - // // PaymentHelpers.useCustomerDetails( + // // PaymentHelpers.fetchCustomerDetails( // // ~clientSecret, // // ~publishableKey, // // ~optLogger=Some(logger), // // ~switchToCustomPod=false, // // ~endpoint, // // ), - // // PaymentHelpers.useSessions( + // // PaymentHelpers.fetchSessions( // // ~clientSecret, // // ~publishableKey, // // ~optLogger=Some(logger), diff --git a/src/Payments/SepaBankDebit.res b/src/Payments/SepaBankDebit.res index 79f020fb0..e8fd16e8d 100644 --- a/src/Payments/SepaBankDebit.res +++ b/src/Payments/SepaBankDebit.res @@ -76,7 +76,7 @@ let make = (~paymentType: CardThemeType.mode, ~list: PaymentMethodsRecord.list) } } }, (email, fullName, modalData)) - submitPaymentData(submitCallback) + useSubmitPaymentData(submitCallback)
, paymentType: p } } -let useSessions = ( +let fetchSessions = ( ~clientSecret, ~publishableKey, ~wallets=[], @@ -879,7 +879,7 @@ let useSessions = ( }) } -let usePaymentMethodList = ( +let fetchPaymentMethodList = ( ~clientSecret, ~publishableKey, ~logger, @@ -953,7 +953,7 @@ let usePaymentMethodList = ( }) } -let useCustomerDetails = ( +let fetchCustomerDetails = ( ~clientSecret, ~publishableKey, ~endpoint, diff --git a/src/Utilities/Utils.res b/src/Utilities/Utils.res index 125c1345e..5aa3ba851 100644 --- a/src/Utilities/Utils.res +++ b/src/Utilities/Utils.res @@ -242,7 +242,7 @@ let handleMessage = (fun, _errorMessage) => { Window.addEventListener("message", handle) Some(() => Window.removeEventListener("message", handle)) } -let submitPaymentData = callback => { +let useSubmitPaymentData = callback => { React.useEffect1(() => {handleMessage(callback, "")}, [callback]) } diff --git a/src/orca-loader/Elements.res b/src/orca-loader/Elements.res index 5fa2c9db0..0558bd778 100644 --- a/src/orca-loader/Elements.res +++ b/src/orca-loader/Elements.res @@ -60,7 +60,7 @@ let make = ( ->Belt.Option.flatMap(Js.Json.decodeBoolean) ->Belt.Option.getWithDefault(false) - let paymentMethodListPromise = PaymentHelpers.usePaymentMethodList( + let paymentMethodListPromise = PaymentHelpers.fetchPaymentMethodList( ~clientSecret, ~publishableKey, ~endpoint, @@ -68,7 +68,7 @@ let make = ( ~logger, ) - let sessionsPromise = PaymentHelpers.useSessions( + let sessionsPromise = PaymentHelpers.fetchSessions( ~clientSecret, ~publishableKey, ~endpoint, @@ -129,7 +129,7 @@ let make = ( ->ignore } let fetchCustomerDetails = mountedIframeRef => { - let customerDetailsPromise = PaymentHelpers.useCustomerDetails( + let customerDetailsPromise = PaymentHelpers.fetchCustomerDetails( ~clientSecret, ~publishableKey, ~endpoint, diff --git a/src/orca-loader/PaymentSessionMethods.res b/src/orca-loader/PaymentSessionMethods.res index ae58bb4ea..4955ffd9d 100644 --- a/src/orca-loader/PaymentSessionMethods.res +++ b/src/orca-loader/PaymentSessionMethods.res @@ -11,7 +11,7 @@ let getCustomerSavedPaymentMethods = ( ~switchToCustomPod, ) => { open Promise - PaymentHelpers.useCustomerDetails( + PaymentHelpers.fetchCustomerDetails( ~clientSecret, ~publishableKey, ~endpoint,