feat: Added Bacs Bank Debit

src/components/common/DynamicFields.res

@@ -43,6 +43,8 @@ module RenderField = {
     ~setFinalJsonDict,
     ~finalJsonDict,
     ~isSaveCardsFlow,
+    ~customValidationFunc,
+    ~customOnChangeFunc,
     ~statesJson: option<JSON.t>,
     ~keyToTrigerButtonClickError,
   ) => {
@@ -98,28 +100,36 @@ module RenderField = {
           )
           switch requiredFieldPath {
           | StringField(stringFieldPath) =>
-            let tempValid = RequiredFieldsTypes.checkIsValid(
-              ~text,
-              ~field_type=required_fields_type.field_type,
-              ~localeObject,
-            )
-
+            let validationErrMsg = switch customValidationFunc {
+            | Some(validation) =>
+              validation(
+                ~text,
+                ~field_type=required_fields_type.field_type,
+                ~display_name=Some(required_fields_type.display_name),
+              )
+            | None =>
+              RequiredFieldsTypes.checkIsValid(
+                ~text,
+                ~field_type=required_fields_type.field_type,
+                ~localeObject,
+              )
+            }
             let isCountryField = switch required_fields_type.field_type {
             | AddressCountry(_) => true
             | _ => false
             }
 
-            setErrorMesage(_ => tempValid)
+            setErrorMesage(_ => validationErrMsg)
             setFinalJsonDict(prev => {
               let newData = Dict.assign(Dict.make(), prev)
               if isCountryField {
                 let stateKey = getKey(stringFieldPath, "state")
                 switch newData->Dict.get(stateKey) {
-                | Some(_) => newData->Dict.set(stateKey, (JSON.Encode.null, tempValid))
+                | Some(_) => newData->Dict.set(stateKey, (JSON.Encode.null, validationErrMsg))
                 | None => ()
                 }
               }
-              newData->Dict.set(stringFieldPath, (text->JSON.Encode.string, tempValid))
+              newData->Dict.set(stringFieldPath, (text->JSON.Encode.string, validationErrMsg))
               newData
             })
           | FullNameField(firstNameFieldPath, lastNameFieldPath) =>
@@ -178,7 +188,11 @@ module RenderField = {
       setVal(val)
     }
     let onChange = text => {
-      setVal(_ => text)
+      switch customOnChangeFunc {
+      | Some(setter) =>
+        setVal(prev => setter(~text, ~field_type=required_fields_type.field_type, ~prev))
+      | None => setVal(_ => text)
+      }
     }
     React.useEffect1(() => {
       keyToTrigerButtonClickError != 0
@@ -281,6 +295,8 @@ module Fields = {
     ~setFinalJsonDict,
     ~isSaveCardsFlow,
     ~statesJson,
+    ~customValidationFunc,
+    ~customOnChangeFunc,
     ~keyToTrigerButtonClickError,
   ) => {
     fields
@@ -294,6 +310,8 @@ module Fields = {
           statesJson
           finalJsonDict
           setFinalJsonDict
+          customValidationFunc
+          customOnChangeFunc
           keyToTrigerButtonClickError
         />
       </React.Fragment>
@@ -314,6 +332,8 @@ let make = (
   ~keyToTrigerButtonClickError,
   ~shouldRenderShippingFields=false, //To render shipping fields
   ~displayPreValueFields=false,
+  ~customValidationFunc=None,
+  ~customOnChangeFunc=None,
   ~fieldsOrder: array<fieldType>=[Other, Billing, Shipping],
 ) => {
   // let {component} = ThemebasedStyle.useThemeBasedStyle()
@@ -425,6 +445,8 @@ let make = (
             setFinalJsonDict
             isSaveCardsFlow
             statesJson
+            customValidationFunc
+            customOnChangeFunc
             keyToTrigerButtonClickError
           />
         </>

src/hooks/PMListModifier.res

@@ -250,6 +250,23 @@ let useListModifier = () => {
                 isScreenFocus redirectProp=CRYPTO(cryptoVal) fields setConfirmButtonDataRef
               />,
           })
+          | BANK_DEBIT(bankDebitVal) =>
+          let fields =
+            redirectionList
+            ->Array.find(l => l.name == bankDebitVal.payment_method_type)
+            ->Option.getOr(Types.defaultRedirectType)
+          Some({
+            name: fields.text,
+            componentHoc: (~isScreenFocus, ~setConfirmButtonDataRef) =>
+              <Redirect
+                isScreenFocus
+                isDynamicFields={true}
+                dynamicFields={bankDebitVal.required_field}
+                redirectProp=BANK_DEBIT(bankDebitVal)
+                fields
+                setConfirmButtonDataRef
+              />,
+          })
         } {
         | Some(tab) =>
           let isInvalidScreen =

src/icons/Icon.res

@@ -14,6 +14,7 @@ let checkboxnotclicked = `<svg xmlns="http://www.w3.org/2000/svg" width="18" hei
 let defaultTick = `<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 0.5C3.13901 0.5 0 3.63901 0 7.5C0 11.361 3.13901 14.5 7 14.5C10.861 14.5 14 11.361 14 7.5C14 3.63901 10.861 0.5 7 0.5ZM5.09776 10.4946L2.57399 7.97713C2.29148 7.69462 2.29148 7.24888 2.57399 6.99776C2.8565 6.71525 3.27085 6.71525 3.55336 6.99776L5.56861 9.013L10.3839 4.19776C10.6664 3.91525 11.087 3.91525 11.3632 4.19776C11.6457 4.48027 11.6457 4.9009 11.3632 5.17713L6.04574 10.4946C5.82601 10.7771 5.37399 10.7771 5.09776 10.4946Z" fill="#8DBD00"/></svg>`
 let google_pay = `<svg width="752" height="400" viewBox="0 0 752 400" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1_67)">  <path d="M551.379 0H200.022C90.2234 0 0.387924 90 0.387924 200C0.387924 310 90.2234 400 200.022 400H551.379C661.178 400 751.013 310 751.013 200C751.013 90 661.178 0 551.379 0Z" fill="white"/> <path d="M551.379 16.2C576.034 16.2 599.99 21.1 622.548 30.7C644.408 40 663.973 53.3 680.941 70.2C697.811 87.1 711.086 106.8 720.369 128.7C729.952 151.3 734.843 175.3 734.843 200C734.843 224.7 729.952 248.7 720.369 271.3C711.086 293.2 697.811 312.8 680.941 329.8C664.072 346.7 644.408 360 622.548 369.3C599.99 378.9 576.034 383.8 551.379 383.8H200.022C175.367 383.8 151.411 378.9 128.853 369.3C106.993 360 87.4285 346.7 70.4596 329.8C53.5905 312.9 40.3148 293.2 31.0318 271.3C21.4493 248.7 16.5583 224.7 16.5583 200C16.5583 175.3 21.4493 151.3 31.0318 128.7C40.3148 106.8 53.5905 87.2 70.4596 70.2C87.3287 53.3 106.993 40 128.853 30.7C151.411 21.1 175.367 16.2 200.022 16.2H551.379ZM551.379 0H200.022C90.2234 0 0.387924 90 0.387924 200C0.387924 310 90.2234 400 200.022 400H551.379C661.178 400 751.013 310 751.013 200C751.013 90 661.178 0 551.379 0Z" fill="#3C4043"/>  <path d="M358.332 214.2V274.7H339.167V125.3H389.974C402.851 125.3 413.831 129.6 422.814 138.2C431.997 146.8 436.589 157.3 436.589 169.7C436.589 182.4 431.997 192.9 422.814 201.4C413.931 209.9 402.951 214.1 389.974 214.1H358.332V214.2ZM358.332 143.7V195.8H390.374C397.96 195.8 404.348 193.2 409.339 188.1C414.43 183 417.025 176.8 417.025 169.8C417.025 162.9 414.43 156.8 409.339 151.7C404.348 146.4 398.06 143.8 390.374 143.8H358.332V143.7Z" fill="#3C4043"/> <path d="M486.697 169.1C500.871 169.1 512.051 172.9 520.236 180.5C528.421 188.1 532.513 198.5 532.513 211.7V274.7H514.247V260.5H513.448C505.563 272.2 494.982 278 481.806 278C470.527 278 461.144 274.7 453.558 268C445.972 261.3 442.179 253 442.179 243C442.179 232.4 446.171 224 454.157 217.8C462.142 211.5 472.823 208.4 486.098 208.4C497.477 208.4 506.86 210.5 514.147 214.7V210.3C514.147 203.6 511.552 198 506.261 193.3C500.971 188.6 494.782 186.3 487.695 186.3C477.015 186.3 468.531 190.8 462.342 199.9L445.473 189.3C454.756 175.8 468.531 169.1 486.697 169.1ZM461.943 243.3C461.943 248.3 464.039 252.5 468.331 255.8C472.523 259.1 477.514 260.8 483.204 260.8C491.289 260.8 498.476 257.8 504.764 251.8C511.053 245.8 514.247 238.8 514.247 230.7C508.258 226 499.973 223.6 489.292 223.6C481.507 223.6 475.019 225.5 469.828 229.2C464.538 233.1 461.943 237.8 461.943 243.3Z" fill="#3C4043"/>  <path d="M636.723 172.4L572.84 319.6H553.076L576.832 268.1L534.709 172.4H555.571L585.916 245.8H586.315L615.861 172.4H636.723Z" fill="#3C4043"/> <path d="M282.102 202C282.102 195.74 281.543 189.75 280.505 183.99H200.172V216.99L246.437 217C244.561 227.98 238.522 237.34 229.269 243.58V264.99H256.808C272.889 250.08 282.102 228.04 282.102 202Z" fill="#4285F4"/>  <path d="M229.279 243.58C221.613 248.76 211.741 251.79 200.192 251.79C177.883 251.79 158.957 236.73 152.18 216.43H123.772V238.51C137.846 266.49 166.773 285.69 200.192 285.69C223.29 285.69 242.694 278.08 256.818 264.98L229.279 243.58Z" fill="#34A853"/> <path d="M149.505 200.05C149.505 194.35 150.453 188.84 152.18 183.66V161.58H123.772C117.953 173.15 114.679 186.21 114.679 200.05C114.679 213.89 117.963 226.95 123.772 238.52L152.18 216.44C150.453 211.26 149.505 205.75 149.505 200.05Z" fill="#FABB05"/> <path d="M200.192 148.3C212.799 148.3 224.088 152.65 233.002 161.15L257.407 136.72C242.584 122.89 223.26 114.4 200.192 114.4C166.783 114.4 137.846 133.6 123.772 161.58L152.18 183.66C158.957 163.36 177.883 148.3 200.192 148.3Z" fill="#E94235"/> </g>  <defs>  <clipPath id="clip0_1_67">  <rect width="752" height="400" fill="white"/> </clipPath> </defs> </svg>`
 let applePayList = `<svg id="apple_pay_saved" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M29.1343 0.783203H2.86575C2.75634 0.783203 2.64674 0.783203 2.53754 0.783839C2.44522 0.784495 2.35312 0.785517 2.26101 0.788024C2.06015 0.793443 1.85756 0.805263 1.6592 0.840822C1.45768 0.876998 1.27015 0.936005 1.0872 1.02891C0.907346 1.12014 0.742688 1.23947 0.599993 1.38186C0.457237 1.52425 0.337606 1.68821 0.246161 1.8678C0.152996 2.05028 0.0937985 2.23739 0.0577814 2.43855C0.0219401 2.63646 0.0100098 2.83849 0.00459659 3.03863C0.00212198 3.1305 0.0010606 3.22237 0.000459349 3.31421C-0.000178636 3.42338 3.40259e-05 3.53246 3.40259e-05 3.64182V18.3585C3.40259e-05 18.4679 -0.000178636 18.5768 0.000459349 18.6862C0.0010606 18.778 0.00212198 18.8699 0.00459659 18.9617C0.0100098 19.1617 0.0219401 19.3637 0.0577814 19.5616C0.0937985 19.7628 0.152996 19.9499 0.246161 20.1324C0.337606 20.3119 0.457237 20.4761 0.599993 20.6183C0.742688 20.7609 0.907346 20.8802 1.0872 20.9712C1.27015 21.0644 1.45768 21.1234 1.6592 21.1596C1.85756 21.1949 2.06015 21.2069 2.26101 21.2123C2.35312 21.2144 2.44522 21.2157 2.53754 21.2161C2.64674 21.2169 2.75634 21.2169 2.86575 21.2169H29.1343C29.2435 21.2169 29.3531 21.2169 29.4623 21.2161C29.5544 21.2157 29.6465 21.2144 29.739 21.2123C29.9395 21.2069 30.142 21.1949 30.3409 21.1596C30.5421 21.1234 30.7297 21.0644 30.9126 20.9712C31.0927 20.8802 31.2569 20.7609 31.3999 20.6183C31.5424 20.4761 31.662 20.3119 31.7537 20.1324C31.8471 19.9499 31.9062 19.7628 31.942 19.5616C31.9779 19.3637 31.9895 19.1617 31.995 18.9617C31.9975 18.8699 31.9987 18.778 31.9991 18.6862C32 18.5768 32 18.4679 32 18.3585V3.64182C32 3.53246 32 3.42338 31.9991 3.31421C31.9987 3.22237 31.9975 3.1305 31.995 3.03863C31.9895 2.83849 31.9779 2.63646 31.942 2.43855C31.9062 2.23739 31.8471 2.05028 31.7537 1.8678C31.662 1.68821 31.5424 1.52425 31.3999 1.38186C31.2569 1.23947 31.0927 1.12014 30.9126 1.02891C30.7297 0.936005 30.5421 0.876998 30.3409 0.840822C30.142 0.805263 29.9395 0.793443 29.739 0.788024C29.6465 0.785517 29.5544 0.784495 29.4623 0.783839C29.3531 0.783203 29.2435 0.783203 29.1343 0.783203Z" fill="black"/><path d="M29.1343 1.46387L29.4574 1.46448C29.545 1.4651 29.6325 1.46605 29.7205 1.46844C29.8737 1.47256 30.0528 1.48084 30.2197 1.51069C30.3649 1.53676 30.4866 1.57641 30.6034 1.63572C30.7187 1.69417 30.8244 1.77076 30.9166 1.86265C31.0092 1.95515 31.0861 2.06071 31.1455 2.17701C31.2046 2.29261 31.2441 2.41344 31.2701 2.55926C31.3 2.72398 31.3082 2.90313 31.3124 3.0568C31.3148 3.14353 31.3159 3.23027 31.3164 3.31907C31.3172 3.42646 31.3172 3.53379 31.3172 3.64139V18.3581C31.3172 18.4657 31.3172 18.5728 31.3163 18.6825C31.3159 18.7692 31.3148 18.856 31.3124 18.9429C31.3082 19.0963 31.3 19.2754 31.2697 19.442C31.2441 19.5858 31.2047 19.7067 31.1452 19.8229C31.086 19.9389 31.0092 20.0443 30.917 20.1362C30.8242 20.2288 30.7189 20.3052 30.6022 20.3642C30.4863 20.4232 30.3648 20.4628 30.2211 20.4886C30.0508 20.5189 29.8641 20.5272 29.7236 20.531C29.6352 20.533 29.5471 20.5342 29.457 20.5346C29.3496 20.5354 29.2417 20.5354 29.1343 20.5354H2.86576C2.86433 20.5354 2.86293 20.5354 2.86148 20.5354C2.75527 20.5354 2.64884 20.5354 2.54069 20.5346C2.45252 20.5342 2.36453 20.533 2.27947 20.5311C2.13571 20.5272 1.94897 20.5189 1.78002 20.4888C1.63509 20.4628 1.51358 20.4232 1.39611 20.3634C1.28052 20.3049 1.17529 20.2286 1.08247 20.1359C0.99037 20.0442 0.913831 19.9391 0.854653 19.8229C0.795417 19.7068 0.755785 19.5856 0.729726 19.4401C0.699604 19.2737 0.691329 19.0954 0.687194 18.943C0.684833 18.8558 0.683847 18.7685 0.683287 18.6818L0.682861 18.4257L0.682881 18.3581V3.64139L0.682861 3.57379L0.683267 3.31826C0.683847 3.231 0.684833 3.14376 0.687194 3.05658C0.691329 2.90403 0.699604 2.72562 0.729976 2.55789C0.755804 2.41367 0.795417 2.29246 0.854963 2.17581C0.913677 2.06052 0.990351 1.95527 1.08294 1.86294C1.17516 1.77092 1.28073 1.69442 1.39706 1.63541C1.51327 1.57639 1.63501 1.53676 1.77994 1.51075C1.94694 1.48082 2.12618 1.47256 2.27968 1.46842C2.36718 1.46605 2.45468 1.4651 2.54153 1.4645L2.86576 1.46387H29.1343Z" fill="white"/><path d="M8.73583 7.65557C9.00982 7.31374 9.19575 6.85476 9.14672 6.38574C8.74563 6.40564 8.25618 6.64968 7.97281 6.99178C7.71838 7.28473 7.49318 7.76292 7.55189 8.21228C8.00213 8.25124 8.45196 7.98781 8.73583 7.65557Z" fill="black"/><path d="M9.14155 8.30045C8.4877 8.26161 7.93176 8.6706 7.6195 8.6706C7.30708 8.6706 6.82892 8.32003 6.31175 8.32948C5.63863 8.33934 5.01404 8.71896 4.67246 9.32273C3.96988 10.5306 4.48705 12.3222 5.17027 13.3059C5.50206 13.7926 5.90192 14.3285 6.4288 14.3092C6.92661 14.2897 7.12173 13.9877 7.72684 13.9877C8.3315 13.9877 8.50726 14.3092 9.03423 14.2995C9.5807 14.2897 9.92234 13.8126 10.2541 13.3254C10.6347 12.7706 10.7906 12.2349 10.8004 12.2055C10.7906 12.1958 9.74661 11.7963 9.73693 10.5985C9.72707 9.5956 10.5565 9.11854 10.5956 9.08896C10.1272 8.39795 9.39529 8.32003 9.14155 8.30045Z" fill="black"/><path d="M14.8348 6.94238C16.256 6.94238 17.2456 7.91949 17.2456 9.34209C17.2456 10.7698 16.2356 11.752 14.7992 11.752H13.2257V14.2478H12.0889V6.94238H14.8348V6.94238ZM13.2257 10.8001H14.5302C15.52 10.8001 16.0833 10.2686 16.0833 9.34717C16.0833 8.42582 15.52 7.89928 14.5353 7.89928H13.2257V10.8001Z" fill="black"/><path d="M17.5426 12.7346C17.5426 11.803 18.2583 11.231 19.5273 11.1601L20.989 11.074V10.664C20.989 10.0716 20.588 9.71725 19.9181 9.71725C19.2835 9.71725 18.8876 10.0209 18.7913 10.4969H17.7558C17.8167 9.53493 18.6389 8.82617 19.9586 8.82617C21.2529 8.82617 22.0802 9.50964 22.0802 10.5779V14.2483H21.0295V13.3725H21.0042C20.6947 13.9648 20.0195 14.3394 19.3191 14.3394C18.2735 14.3394 17.5426 13.6914 17.5426 12.7346ZM20.989 12.2537V11.8335L19.6743 11.9144C19.0196 11.96 18.6491 12.2486 18.6491 12.7042C18.6491 13.1699 19.0348 13.4737 19.6236 13.4737C20.39 13.4737 20.989 12.9472 20.989 12.2537Z" fill="black"/><path d="M23.0722 16.2071V15.3211C23.1533 15.3413 23.336 15.3413 23.4274 15.3413C23.9349 15.3413 24.209 15.1287 24.3765 14.582C24.3765 14.5718 24.473 14.258 24.473 14.2529L22.5443 8.92188H23.7319L25.0821 13.2556H25.1023L26.4526 8.92188H27.6098L25.6098 14.5262C25.1532 15.8173 24.6253 16.2324 23.5188 16.2324C23.4274 16.2324 23.1533 16.2223 23.0722 16.2071Z" fill="black"/></svg>`
+let becsDebit = `<svg xmlns="http://www.w3.org/2000/svg" width="124" height="124" viewBox="0 0 20 21" fill="none"><path d="M9.99966 6.71422C10.3406 6.71422 10.6677 6.57876 10.9088 6.33765C11.1499 6.09653 11.2854 5.7695 11.2854 5.42851C11.2854 5.08751 11.1499 4.76049 10.9088 4.51937C10.6677 4.27825 10.3406 4.14279 9.99966 4.14279C9.65866 4.14279 9.33164 4.27825 9.09052 4.51937C8.8494 4.76049 8.71394 5.08751 8.71394 5.42851C8.71394 5.7695 8.8494 6.09653 9.09052 6.33765C9.33164 6.57876 9.65866 6.71422 9.99966 6.71422ZM10.7625 0.967079C10.5415 0.804186 10.2742 0.716309 9.99966 0.716309C9.72512 0.716309 9.45779 0.804186 9.2368 0.967079L1.09394 6.97136C0.0962268 7.70765 0.616513 9.29165 1.8568 9.29165H2.28537V15.4991C1.77757 15.7107 1.34379 16.0679 1.03871 16.5256C0.733627 16.9834 0.570915 17.5212 0.571084 18.0714V19.3571C0.571084 19.7119 0.859084 19.9999 1.21394 19.9999H18.7854C18.9559 19.9999 19.1194 19.9322 19.2399 19.8116C19.3605 19.6911 19.4282 19.5276 19.4282 19.3571V18.0714C19.4282 17.5214 19.2654 16.9837 18.9604 16.5261C18.6553 16.0685 18.2216 15.7115 17.7139 15.4999V9.29165H18.1417C19.3828 9.29165 19.9031 7.70765 18.9045 6.97136L10.7625 0.967079ZM3.57108 15.2857V9.29165H5.71394V15.2857H3.57108ZM16.4282 9.29165V15.2857H14.2854V9.29165H16.4282ZM12.9997 9.29165V15.2857H10.6425V9.29165H12.9997ZM9.3568 9.29165V15.2857H6.99966V9.29165H9.3568ZM1.8568 8.00594L9.99966 2.00165L18.1417 8.00594H1.8568ZM1.8568 18.0714C1.8568 17.2434 2.5288 16.5714 3.3568 16.5714H16.6425C17.4705 16.5714 18.1425 17.2434 18.1425 18.0714V18.7142H1.8568V18.0714Z" fill="currentColor"/></svg>`
 type uri = {
   uri: string,
   local: bool,
@@ -56,6 +57,7 @@ let make = (
     | "defaulttick" => defaultTick
     | "google pay" => google_pay
     | "apple pay" => applePayList
+    | "bacs debit" =>becsDebit
     | _ => ""
     }
     localName == ""