feat: phone country dropdown added

src/Components/DropdownField.res

@@ -8,6 +8,7 @@ let make = (
   ~options,
   ~disabled=false,
   ~className="",
+  ~width="w-full",
 ) => {
   let {themeObj, localeString, config} = Recoil.useRecoilValueFromAtom(configAtom)
   let {readOnly} = Recoil.useRecoilValueFromAtom(optionAtom)
@@ -45,7 +46,7 @@ let make = (
 
   let cursorClass = !disabled ? "cursor-pointer" : "cursor-not-allowed"
   <RenderIf condition={options->Array.length > 0}>
-    <div className="flex flex-col w-full">
+    <div className={`flex flex-col ${width}`}>
       <RenderIf condition={fieldName->String.length > 0 && appearance.labels == Above}>
         <div
           className={`Label `}

src/Components/PaymentField.res

@@ -4,6 +4,10 @@ open RecoilAtomTypes
 let make = (
   ~setValue=?,
   ~value: RecoilAtomTypes.field,
+  ~valueDropDown=?,
+  ~setValueDropDown=?,
+  ~dropDownFieldName=?,
+  ~dropDownOptions=?,
   ~onChange,
   ~onBlur=?,
   ~rightIcon=React.null,
@@ -75,8 +79,21 @@ let make = (
   }
   let labelClass = getClassName("Label")
   let inputClass = getClassName("Input")
+  let flexDirectionBasedOnType = type_ === "tel" ? "flex-row" : "flex-col"
 
-  <div className="flex flex-col w-full" style={ReactDOMStyle.make(~color=themeObj.colorText, ())}>
+  <div
+    className={`flex ${flexDirectionBasedOnType} w-full`}
+    style={ReactDOMStyle.make(~color=themeObj.colorText, ())}>
+    <RenderIf condition={type_ === "tel"}>
+      <DropdownField
+        appearance=config.appearance
+        value={valueDropDown->Option.getOr("")}
+        setValue={setValueDropDown->Option.getOr(_ => ())}
+        fieldName={dropDownFieldName->Option.getOr(fieldName)}
+        options={dropDownOptions->Option.getOr([])}
+        width="!w-1/3 mr-2"
+      />
+    </RenderIf>
     <RenderIf condition={fieldName->String.length > 0 && config.appearance.labels == Above}>
       <div
         className={`Label ${labelClass}`}
@@ -90,7 +107,7 @@ let make = (
         {React.string(fieldName)}
       </div>
     </RenderIf>
-    <div className="flex flex-row " style={ReactDOMStyle.make(~direction, ())}>
+    <div className="flex flex-row w-full" style={ReactDOMStyle.make(~direction, ())}>
       <div className="relative w-full">
         <input
           style={ReactDOMStyle.make(

src/Components/PhoneNumberPaymentInput.res

@@ -1,37 +1,64 @@
-open RecoilAtoms
-open PaymentType
-
 @react.component
 let make = () => {
+  open RecoilAtoms
+  open PaymentType
+  open Utils
+
+  let phoneRef = React.useRef(Nullable.null)
   let {fields} = Recoil.useRecoilValueFromAtom(optionAtom)
   let loggerState = Recoil.useRecoilValueFromAtom(loggerAtom)
-
+  let showDetails = getShowDetails(~billingDetails=fields.billingDetails, ~logger=loggerState)
   let (phone, setPhone) = Recoil.useLoggedRecoilState(userPhoneNumber, "phone", loggerState)
+  let clientCountry = getClientCountry(CardUtils.dateTimeFormat().resolvedOptions().timeZone)
+  let currentCountryCode = Utils.getCountryCode(clientCountry.countryName)
 
-  let showDetails = getShowDetails(~billingDetails=fields.billingDetails, ~logger=loggerState)
-  let formatBSB = bsb => {
-    let formatted = bsb
-
-    let secondPart = formatted->String.sliceToEnd(~start=4)->String.trim
-
-    if formatted->String.length <= 4 {
-      "+351 "
-    } else if formatted->String.length > 4 {
-      `+351 ${secondPart}`
-    } else {
-      formatted
-    }
-  }
+  let countryAndCodeCodeList =
+    phoneNumberJson
+    ->JSON.Decode.object
+    ->Option.getOr(Dict.make())
+    ->getArray("countries")
+
+  let phoneNumberCodeOptions = countryAndCodeCodeList->Array.reduce([], (acc, countryObj) => {
+    acc->Array.push(countryObj->getDictFromJson->getString("phone_number_code", ""))
+    acc
+  })
+
+  let defaultCountryCodeFilteredValue =
+    countryAndCodeCodeList
+    ->Array.filter(countryObj => {
+      countryObj->getDictFromJson->getString("country_code", "") === currentCountryCode.isoAlpha2
+    })
+    ->Array.get(0)
+    ->Option.getOr(
+      {
+        "country_code": "",
+        "phone_number_code": "",
+        "validation_regex": "",
+        "format_example": "",
+        "format_regex": "",
+      }->toJson,
+    )
+    ->getDictFromJson
+    ->getString("phone_number_code", "")
+
+  let (valueDropDown, setValueDropDown) = React.useState(_ => defaultCountryCodeFilteredValue)
 
   let changePhone = ev => {
     let val: string = ReactEvent.Form.target(ev)["value"]->String.replaceRegExp(%re("/\+D+/g"), "")
     setPhone(prev => {
       ...prev,
-      value: val->formatBSB,
+      countryCode: valueDropDown,
+      value: val,
     })
   }
 
-  let phoneRef = React.useRef(Nullable.null)
+  React.useEffect(() => {
+    setPhone(prev => {
+      ...prev,
+      countryCode: valueDropDown,
+    })
+    None
+  }, valueDropDown)
 
   <RenderIf condition={showDetails.phone == Auto}>
     <PaymentField
@@ -44,6 +71,9 @@ let make = () => {
       inputRef=phoneRef
       placeholder="+351 200 000 000"
       maxLength=14
+      dropDownOptions=phoneNumberCodeOptions
+      valueDropDown
+      setValueDropDown
     />
   </RenderIf>
 }

src/Types/RecoilAtomTypes.res

@@ -2,4 +2,5 @@ type field = {
   value: string,
   isValid: option<bool>,
   errorString: string,
+  countryCode?: string,
 }

src/Utilities/RecoilAtoms.res

@@ -30,9 +30,10 @@ let userEmailAddress = Recoil.atom("userEmailAddress", defaultFieldValues)
 let userPhoneNumber = Recoil.atom(
   "userPhoneNumber",
   {
-    value: "+351 ",
+    value: "",
     isValid: None,
     errorString: "",
+    countryCode: "",
   },
 )
 let isGooglePayReady = Recoil.atom("isGooglePayReady", false)