Merge branch 'main' into async-await-refactoring-1

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)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.100.1",
+  "version": "0.101.1",
   "main": "index.js",
   "private": true,
   "dependencies": {

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 = {

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
-
   <div className="flex flex-col animate-slowShow" style={gridGap: themeObj.spacingTab}>
-    <EmailPaymentInput paymentType />
-    <FullNamePaymentInput paymentType={paymentType} />
-    <RenderIf condition={showAddressDetails.country == Auto}>
-      <DropdownField
-        appearance=config.appearance
-        fieldName=localeString.countryLabel
-        value=country
-        setValue=setCountry
-        disabled=false
-        options=updatedOptionsArrayForCountry
-      />
-    </RenderIf>
+    <DynamicFields
+      paymentType paymentMethod="bank_transfer" paymentMethodType="sepa" setRequiredFieldsBody
+    />
     <Surcharge paymentMethod="bank_transfer" paymentMethodType="sepa" />
     <InfoElement />
   </div>

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,