diff --git a/CHANGELOG.md b/CHANGELOG.md index d45f255e..76ecbd4e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## [0.101.1](https://github.com/juspay/hyperswitch-web/compare/v0.101.0...v0.101.1) (2024-11-07) + +# [0.101.0](https://github.com/juspay/hyperswitch-web/compare/v0.100.1...v0.101.0) (2024-11-07) + + +### Features + +* added dynamic fields support for sepa bank transfer ([#775](https://github.com/juspay/hyperswitch-web/issues/775)) ([52d2d15](https://github.com/juspay/hyperswitch-web/commit/52d2d15ed2b2b8ed364a81fe9bbd3dfbd64c0cec)) + ## [0.100.1](https://github.com/juspay/hyperswitch-web/compare/v0.100.0...v0.100.1) (2024-11-06) # [0.100.0](https://github.com/juspay/hyperswitch-web/compare/v0.99.6...v0.100.0) (2024-11-06) diff --git a/package-lock.json b/package-lock.json index b5285a34..5853054d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "orca-payment-page", - "version": "0.100.1", + "version": "0.101.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "orca-payment-page", - "version": "0.100.1", + "version": "0.101.1", "hasInstallScript": true, "dependencies": { "@glennsl/rescript-fetch": "^0.2.0", diff --git a/package.json b/package.json index 33f8f557..18e32f89 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "orca-payment-page", - "version": "0.100.1", + "version": "0.101.1", "main": "index.js", "private": true, "dependencies": { diff --git a/src/Payments/PreMountLoader.res b/src/Payments/PreMountLoader.res index 1244153f..1c6ecbc5 100644 --- a/src/Payments/PreMountLoader.res +++ b/src/Payments/PreMountLoader.res @@ -1,30 +1,42 @@ let sendPromiseData = (promise, key) => { - open Promise - promise - ->then(res => resolve(res)) - ->catch(_ => resolve(JSON.Encode.null)) - ->thenResolve(response => { + let executePromise = async () => { + let response = try { + await promise + } catch { + | _ => JSON.Encode.null + } Utils.messageParentWindow([("response", response), ("data", key->JSON.Encode.string)]) - }) - ->ignore + } + executePromise()->ignore } -let useMessageHandler = getPromisesAndMessageHandler => { - React.useEffect0(() => { - let (promises, messageHandler) = getPromisesAndMessageHandler() +let useMessageHandler = getPromisesAndHandler => { + React.useEffect(_ => { + let (promises, messageHandler) = getPromisesAndHandler() + let setupMessageListener = _ => { + Utils.messageParentWindow([("preMountLoaderIframeMountedCallback", true->JSON.Encode.bool)]) + Window.addEventListener("message", messageHandler) + } - open Promise - Promise.all(promises) - ->thenResolve(_ => { + let cleanupMessageListener = _ => { Utils.messageParentWindow([("preMountLoaderIframeUnMount", true->JSON.Encode.bool)]) Window.removeEventListener("message", messageHandler) - }) - ->ignore + } + + setupMessageListener() + + let executeAllPromises = async () => { + try { + let _ = await Promise.all(promises) + } catch { + | error => Console.error2("Error in message handler:", error) + } + cleanupMessageListener() + } + executeAllPromises()->ignore - Utils.messageParentWindow([("preMountLoaderIframeMountedCallback", true->JSON.Encode.bool)]) - Window.addEventListener("message", messageHandler) - Some(() => Window.removeEventListener("message", messageHandler)) - }) + Some(cleanupMessageListener) + }, []) } module PreMountLoaderForElements = { diff --git a/src/Payments/SepaBankTransfer.res b/src/Payments/SepaBankTransfer.res index fd88fb89..8f9c4bd2 100644 --- a/src/Payments/SepaBankTransfer.res +++ b/src/Payments/SepaBankTransfer.res @@ -4,27 +4,17 @@ open Utils @react.component let make = (~paymentType) => { let {iframeId} = Recoil.useRecoilValueFromAtom(keys) - let {fields} = Recoil.useRecoilValueFromAtom(optionAtom) let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom) - let {config, themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom) - let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), BankTransfer) + let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom) let isManualRetryEnabled = Recoil.useRecoilValueFromAtom(isManualRetryEnabled) - let (country, setCountry) = React.useState(_ => "France") + let setComplete = Recoil.useSetRecoilState(fieldsComplete) let (email, _) = Recoil.useLoggedRecoilState(userEmailAddress, "email", loggerState) let (fullName, _) = Recoil.useLoggedRecoilState(userFullName, "fullName", loggerState) - let showAddressDetails = PaymentType.getShowAddressDetails( - ~billingDetails=fields.billingDetails, - ~logger=loggerState, - ) - let countryNames = Utils.getCountryNames(Country.country) - let setComplete = Recoil.useSetRecoilState(fieldsComplete) - let clientCountryCode = - Country.country - ->Array.find(item => item.countryName == country) - ->Option.getOr(Country.defaultTimeZone) + let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), BankTransfer) + + let (requiredFieldsBody, setRequiredFieldsBody) = React.useState(_ => Dict.make()) let complete = email.value != "" && fullName.value != "" && email.isValid->Option.getOr(false) let empty = email.value == "" || fullName.value == "" - let paymentMethodListValue = Recoil.useRecoilValueFromAtom(PaymentUtils.paymentMethodListValue) UtilityHooks.useHandlePostMessages(~complete, ~empty, ~paymentType="bank_transfer") @@ -38,14 +28,15 @@ let make = (~paymentType) => { let confirm = json->getDictFromJson->ConfirmType.itemToObjMapper if confirm.doSubmit { if complete { - let (connectors, _) = paymentMethodListValue->PaymentUtils.getConnectors(BankTransfer(Sepa)) + let bodyArr = + PaymentBody.dynamicPaymentBody("bank_transfer", "sepa") + ->getJsonFromArrayOfJson + ->flattenObject(true) + ->mergeTwoFlattenedJsonDicts(requiredFieldsBody) + ->getArrayOfTupleFromDict + intent( - ~bodyArr=PaymentBody.sepaBankTransferBody( - ~email=email.value, - ~name=fullName.value, - ~country=clientCountryCode.isoAlpha2, - ~connectors, - ), + ~bodyArr, ~confirmParam=confirm.confirmParams, ~handleUserError=false, ~iframeId, @@ -55,25 +46,13 @@ let make = (~paymentType) => { postFailedSubmitResponse(~errortype="validation_error", ~message="Please enter all fields") } } - }, (email, fullName, country, isManualRetryEnabled)) + }, (email, fullName, isManualRetryEnabled)) useSubmitPaymentData(submitCallback) - let updatedOptionsArrayForCountry = - countryNames->DropdownField.updateArrayOfStringToOptionsTypeArray -
- - - - - +
diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res index 2a5a8e75..c7c8d235 100644 --- a/src/Utilities/PaymentBody.res +++ b/src/Utilities/PaymentBody.res @@ -698,38 +698,6 @@ let bacsBankTransferBody = (~email, ~name, ~connectors) => { ] } -let sepaBankTransferBody = (~email, ~name, ~country, ~connectors) => { - let (firstName, lastName) = name->Utils.getFirstAndLastNameFromFullName - - [ - ("payment_method", "bank_transfer"->JSON.Encode.string), - ("connector", connectors->Utils.getArrofJsonString->JSON.Encode.array), - ("payment_method_type", "sepa"->JSON.Encode.string), - ( - "payment_method_data", - [ - ( - "billing", - [ - ("email", email->JSON.Encode.string), - ( - "address", - [ - ("first_name", firstName), - ("last_name", lastName), - ("country", country->JSON.Encode.string), - ]->Utils.getJsonFromArrayOfJson, - ), - ]->Utils.getJsonFromArrayOfJson, - ), - ( - "bank_transfer", - [("sepa_bank_transfer", Dict.make()->JSON.Encode.object)]->Utils.getJsonFromArrayOfJson, - ), - ]->Utils.getJsonFromArrayOfJson, - ), - ] -} let blikBody = (~blikCode) => [ ("payment_method", "bank_redirect"->JSON.Encode.string), ("payment_method_type", "blik"->JSON.Encode.string), @@ -977,16 +945,30 @@ let appendRedirectPaymentMethods = [ ] let appendBankeDebitMethods = ["sepa"] +let appendBankTransferMethods = ["sepa"] -let appendPaymentMethodExperience = (paymentMethodType, isQrPaymentMethod) => +let getPaymentMethodSuffix = (~paymentMethodType, ~paymentMethod, ~isQrPaymentMethod) => { if isQrPaymentMethod { - paymentMethodType ++ "_qr" + Some("qr") } else if appendRedirectPaymentMethods->Array.includes(paymentMethodType) { - paymentMethodType ++ "_redirect" - } else if appendBankeDebitMethods->Array.includes(paymentMethodType) { - paymentMethodType ++ "_bank_debit" + Some("redirect") + } else if ( + appendBankeDebitMethods->Array.includes(paymentMethodType) && paymentMethod == "bank_debit" + ) { + Some("bank_debit") + } else if ( + appendBankTransferMethods->Array.includes(paymentMethodType) && paymentMethod == "bank_transfer" + ) { + Some("bank_transfer") } else { - paymentMethodType + None + } +} + +let appendPaymentMethodExperience = (~paymentMethod, ~paymentMethodType, ~isQrPaymentMethod) => + switch getPaymentMethodSuffix(~paymentMethodType, ~paymentMethod, ~isQrPaymentMethod) { + | Some(suffix) => `${paymentMethodType}_${suffix}` + | None => paymentMethodType } let paymentExperiencePaymentMethods = ["affirm"] @@ -1010,7 +992,7 @@ let dynamicPaymentBody = (paymentMethod, paymentMethodType, ~isQrPaymentMethod=f paymentMethod, [ ( - paymentMethodType->appendPaymentMethodExperience(isQrPaymentMethod), + appendPaymentMethodExperience(~paymentMethod, ~paymentMethodType, ~isQrPaymentMethod), Dict.make()->JSON.Encode.object, ), ]->Utils.getJsonFromArrayOfJson,