fix(payout): on change handler for dropdown

src/CollectWidget.res

@@ -152,8 +152,12 @@ let make = (
               fieldName={field->getPaymentMethodDataFieldLabel(localeString)}
               value
               setValue={getVal => {
-                let isValid = calculateValidity(field, getVal(), ~default=Some(false))
+                let updatedValue = getVal()
+                let isValid = calculateValidity(field, updatedValue, ~default=Some(false))
                 setValidityDictVal(key, isValid)
+                if isValid->Option.getOr(false) {
+                  setFormData(key, updatedValue)
+                }
               }}
               options={countries->DropdownField.updateArrayOfStringToOptionsTypeArray}
               disabled=false

src/FormViewTabs.res

@@ -226,8 +226,10 @@ let make = (
           {payoutDynamicFields.payoutMethodData->renderPayoutMethodForm->React.array}
           {payoutDynamicFields.address
           ->Option.map(addressFields => {
-            let formFields = addressFields->renderAddressForm
-            if formFields->Array.length > 0 {
+            let fieldsToCollect =
+              addressFields->Array.filter(addressField => addressField.value == None)
+            if fieldsToCollect->Array.length > 0 {
+              let formFields = addressFields->renderAddressForm
               <>
                 <div className={`mb-2.5 ${contentHeaderClasses}`}>
                   {React.string(localeString.billingDetailsText)}

src/PaymentMethodCollectElement.res

@@ -192,7 +192,7 @@ let make = (~integrateError, ~logger) => {
 
   let renderCollectWidget = () =>
     <div className="flex flex-row overflow-scroll lg:w-6/10">
-      <div className="relative w-full h-auto lg:w-auto lg:mx-12 lg:mt-20 lg-mb-10">
+      <div className="relative w-full h-min lg:w-auto lg:mx-12 lg:mt-20 lg-mb-10">
         {loader
           ? <div className="absolute h-full w-full bg-jp-gray-600 bg-opacity-80" />
           : {React.null}}

src/Types/PaymentMethodCollectTypes.res

@@ -252,9 +252,15 @@ let getFieldOptions = dict => {
       obj
       ->Dict.get("options")
       ->Option.flatMap(JSON.Decode.array)
-      ->Option.map(options => BillingAddress(
-        AddressCountry(options->Array.filterMap(option => option->JSON.Decode.string)),
-      ))
+      ->Option.map(options => {
+        let countries = options->Array.filterMap(option => option->JSON.Decode.string)
+        countries->Array.sort(
+          (c1, c2) =>
+            (c1->String.charCodeAt(0)->Float.toInt - c2->String.charCodeAt(0)->Float.toInt)
+              ->Int.toFloat,
+        )
+        BillingAddress(AddressCountry(countries))
+      })
     )
   | _ => None
   }
@@ -338,7 +344,9 @@ let sortByCustomOrder = (arr: array<'a>, getKey: 'a => string, customOrder: arra
   })
 }
 
-let decodePayoutDynamicFields = (json: JSON.t): option<payoutDynamicFields> =>
+let decodePayoutDynamicFields = (json: JSON.t, defaultDynamicPmdFields): option<
+  payoutDynamicFields,
+> =>
   json
   ->JSON.Decode.object
   ->Option.map(obj => {
@@ -382,7 +390,9 @@ let decodePayoutDynamicFields = (json: JSON.t): option<payoutDynamicFields> =>
       address: address->Array.length > 0
         ? Some(sortByCustomOrder(address, item => item.pmdMap, customAddressOrder))
         : None,
-      payoutMethodData: sortByCustomOrder(pmd, item => item.pmdMap, customPmdOrder),
+      payoutMethodData: pmd->Array.length > 0
+        ? sortByCustomOrder(pmd, item => item.pmdMap, customPmdOrder)
+        : defaultDynamicPmdFields,
     }
   })
 
@@ -427,15 +437,20 @@ let decodePaymentMethodTypeWithRequiredFields = (
                   let payoutDynamicFields =
                     obj
                     ->Dict.get("required_fields")
-                    ->Option.flatMap(decodePayoutDynamicFields)
+                    ->Option.flatMap(
+                      json => json->decodePayoutDynamicFields(defaultDynamicPmdFields(~pmt)),
+                    )
                     ->Option.getOr({
                       address: None,
                       payoutMethodData: defaultDynamicPmdFields(~pmt),
                     })
                   switch pmt {
                   | Card(card) => {
                       pmta->Array.push(Card(card))
-                      let pmtwr: paymentMethodTypeWithDynamicFields = Card(card, payoutDynamicFields)
+                      let pmtwr: paymentMethodTypeWithDynamicFields = Card(
+                        card,
+                        payoutDynamicFields,
+                      )
                       pmtr->Array.push(pmtwr)
                       (pmta, pmtr)
                     }

src/Utilities/PaymentMethodCollectUtils.res

@@ -289,7 +289,7 @@ let getPaymentMethodDataFieldCharacterPattern = (key): option<Js.Re.t> =>
   | PayoutMethodData(PaypalMobNumber) => Some(%re("/^[0-9]{1,12}$/"))
   | PayoutMethodData(SepaBic) => Some(%re("/^([A-Z0-9]| ){1,8}$/"))
   | PayoutMethodData(SepaIban) => Some(%re("/^([A-Z0-9]| ){1,34}$/"))
-  | BillingAddress(AddressPincode) => Some(%re("/^[0-9]{1,8}$/"))
+  | BillingAddress(AddressPincode) => Some(%re("/^([0-9A-Z]| ){1,10}$/"))
   | BillingAddress(PhoneNumber) => Some(%re("/^[0-9]{1,12}$/"))
   | BillingAddress(PhoneCountryCode) => Some(%re("/^[0-9]{1,2}$/"))
   | _ => None
@@ -521,7 +521,7 @@ let defaultPaypalFields = [
   {
     pmdMap: "payout_method_data.wallet.telephone_number",
     displayName: "user_phone_number",
-    fieldType: SepaIban,
+    fieldType: PaypalMobNumber,
     value: None,
   },
 ]
@@ -565,12 +565,12 @@ let defaultEnabledPaymentMethods: array<paymentMethodType> = [
   Wallet(Paypal),
 ]
 let defaultEnabledPaymentMethodsWithDynamicFields: array<paymentMethodTypeWithDynamicFields> = [
-  Card((Credit, defaultPayoutDynamicFields())),
-  Card((Debit, defaultPayoutDynamicFields())),
-  BankTransfer((ACH, defaultPayoutDynamicFields())),
-  BankTransfer((Bacs, defaultPayoutDynamicFields())),
-  BankTransfer((Sepa, defaultPayoutDynamicFields())),
-  Wallet((Paypal, defaultPayoutDynamicFields())),
+  Card((Credit, defaultPayoutDynamicFields(~pmt=Card(Credit)))),
+  Card((Debit, defaultPayoutDynamicFields(~pmt=Card(Debit)))),
+  BankTransfer((ACH, defaultPayoutDynamicFields(~pmt=BankTransfer(ACH)))),
+  BankTransfer((Bacs, defaultPayoutDynamicFields(~pmt=BankTransfer(Bacs)))),
+  BankTransfer((Sepa, defaultPayoutDynamicFields(~pmt=BankTransfer(Sepa)))),
+  Wallet((Paypal, defaultPayoutDynamicFields(~pmt=Wallet(Paypal)))),
 ]
 let defaultPaymentMethodCollectOptions = {
   enabledPaymentMethods: defaultEnabledPaymentMethods,
@@ -696,6 +696,11 @@ let calculateValidity = (key, value, ~default=None) => {
     } else {
       Some(false)
     }
+  | PayoutMethodData(SepaIban) => Some(value->String.length > 13 && value->String.length < 34)
+
+  // Sepa BIC is optional
+  | PayoutMethodData(SepaBic) => Some(true)
+
   // Defaults
   | PayoutMethodData(_)
   | BillingAddress(_) =>