feat: phone country dropdown added

src/Components/DropdownField.res

@@ -1,13 +1,32 @@
+type optionType = {
+  value: string,
+  label?: string,
+  displayValue?: string,
+}
+
+let updateArrayOfStringToOptionsTypeArray = arrayOfString =>
+  arrayOfString->Array.map(item => {
+    value: item,
+  })
+
+let defaultValue = {
+  value: "",
+}
+
 open RecoilAtoms
 @react.component
 let make = (
   ~appearance: CardThemeType.appearance,
   ~value,
   ~setValue,
+  ~isDisplayValueVisible=false,
+  ~displayValue=?,
+  ~setDisplayValue=?,
   ~fieldName,
-  ~options,
+  ~options: array<optionType>,
   ~disabled=false,
   ~className="",
+  ~width="w-full",
 ) => {
   let {themeObj, localeString, config} = Recoil.useRecoilValueFromAtom(configAtom)
   let {readOnly} = Recoil.useRecoilValueFromAtom(optionAtom)
@@ -25,13 +44,31 @@ let make = (
     let target = ev->ReactEvent.Form.target
     let value = target["value"]
     setValue(value)
+    if isDisplayValueVisible {
+      let findDisplayValue =
+        options
+        ->Array.find(ele => ele.value === value)
+        ->Option.getOr(defaultValue)
+
+      switch setDisplayValue {
+      | Some(setDisplayValue) =>
+        setDisplayValue(_ => findDisplayValue.displayValue->Option.getOr(value))
+      | None => ()
+      }
+    }
   }
   let disbaledBG = React.useMemo(() => {
     themeObj.colorBackground
   }, [themeObj])
   React.useEffect0(() => {
-    if value === "" || !(options->Array.includes(value)) {
-      setValue(_ => options->Array.get(0)->Option.getOr(""))
+    if value === "" || !(options->Array.map(val => val.value)->Array.includes(value)) {
+      setValue(_ =>
+        (
+          options
+          ->Array.get(0)
+          ->Option.getOr(defaultValue)
+        ).value
+      )
     }
     None
   })
@@ -47,7 +84,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 &&
@@ -64,26 +101,42 @@ let make = (
         </div>
       </RenderIf>
       <div className="relative">
-        <select
-          ref={dropdownRef->ReactDOM.Ref.domRef}
-          style={
-            background: disabled ? disbaledBG : themeObj.colorBackground,
-            opacity: disabled ? "35%" : "",
-            padding: themeObj.spacingUnit,
-            width: "100%",
-          }
-          name=""
-          value
-          disabled={readOnly || disabled}
-          onChange=handleChange
-          onFocus=handleFocus
-          className={`${inputClassStyles} ${className} w-full appearance-none outline-none ${cursorClass}`}>
-          {options
-          ->Array.mapWithIndex((item: string, i) => {
-            <option key={Int.toString(i)} value=item> {React.string(item)} </option>
-          })
-          ->React.array}
-        </select>
+        <div className={`Input ${className} appearance-none relative`}>
+          <RenderIf condition={isDisplayValueVisible && displayValue->Option.isSome}>
+            <div
+              className="absolute top-2.5 right-0 left-2 bottom-0 pointer-events-none rounded-sm"
+              style={
+                background: disabled ? disbaledBG : themeObj.colorBackground,
+                opacity: disabled ? "35%" : "",
+                padding: themeObj.spacingUnit,
+                width: "100%",
+              }>
+              {React.string(displayValue->Option.getOr(""))}
+            </div>
+          </RenderIf>
+          <select
+            ref={dropdownRef->ReactDOM.Ref.domRef}
+            style={
+              background: disabled ? disbaledBG : themeObj.colorBackground,
+              opacity: disabled ? "35%" : "",
+              padding: themeObj.spacingUnit,
+              width: "100%",
+            }
+            name=""
+            value
+            disabled={readOnly || disabled}
+            onChange=handleChange
+            onFocus=handleFocus
+            className={`${inputClassStyles} ${className} w-full appearance-none outline-none ${cursorClass}`}>
+            {options
+            ->Array.mapWithIndex((item, index) => {
+              <option key={Int.toString(index)} value=item.value>
+                {React.string(item.label->Option.getOr(item.value))}
+              </option>
+            })
+            ->React.array}
+          </select>
+        </div>
         <RenderIf condition={config.appearance.labels == Floating}>
           <div
             className={`Label ${floatinglabelClass} absolute bottom-0 ml-3 ${focusClass}`}
@@ -100,7 +153,7 @@ let make = (
           </div>
         </RenderIf>
         <div
-          className="self-center absolute"
+          className="self-center absolute pointer-events-none"
           style={
             opacity: disabled ? "35%" : "",
             color: themeObj.colorText,

src/Components/DynamicFields.res

@@ -440,13 +440,15 @@ let make = (
               />
             </div>
           | Currency(currencyArr) =>
+            let updatedCurrencyArray =
+              currencyArr->DropdownField.updateArrayOfStringToOptionsTypeArray
             <DropdownField
               appearance=config.appearance
               fieldName=localeString.currencyLabel
               value=currency
               setValue=setCurrency
               disabled=false
-              options=currencyArr
+              options=updatedCurrencyArray
             />
           | FullName =>
             <>
@@ -560,14 +562,16 @@ let make = (
                     }}
                   </div>
                 | CountryAndPincode(countryArr) =>
+                  let updatedCountryArray =
+                    countryArr->DropdownField.updateArrayOfStringToOptionsTypeArray
                   <div className={`flex ${isSpacedInnerLayout ? "gap-1" : ""}`}>
                     <DropdownField
                       appearance=config.appearance
                       fieldName=localeString.countryLabel
                       value=country
                       setValue={setCountry}
                       disabled=false
-                      options=countryArr
+                      options=updatedCountryArray
                       className={isSpacedInnerLayout ? "" : "!border-t-0 !border-r-0"}
                     />
                     <PaymentField
@@ -703,31 +707,37 @@ let make = (
                   />
                 | BlikCode => <BlikCodePaymentInput />
                 | Country =>
+                  let updatedCountryNames =
+                    countryNames->DropdownField.updateArrayOfStringToOptionsTypeArray
                   <DropdownField
                     appearance=config.appearance
                     fieldName=localeString.countryLabel
                     value=country
                     setValue=setCountry
                     disabled=false
-                    options=countryNames
+                    options=updatedCountryNames
                   />
                 | AddressCountry(countryArr) =>
+                  let updatedCountryArr =
+                    countryArr->DropdownField.updateArrayOfStringToOptionsTypeArray
                   <DropdownField
                     appearance=config.appearance
                     fieldName=localeString.countryLabel
                     value=country
                     setValue=setCountry
                     disabled=false
-                    options=countryArr
+                    options=updatedCountryArr
                   />
                 | Bank =>
+                  let updatedBankNames =
+                    bankNames->DropdownField.updateArrayOfStringToOptionsTypeArray
                   <DropdownField
                     appearance=config.appearance
                     fieldName=localeString.bankLabel
                     value=selectedBank
                     setValue=setSelectedBank
                     disabled=false
-                    options=bankNames
+                    options=updatedBankNames
                   />
                 | SpecialField(element) => element
                 | InfoElement =>

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,
@@ -16,6 +20,8 @@ let make = (
   ~placeholder="",
   ~className="",
   ~inputRef,
+  ~displayValue=?,
+  ~setDisplayValue=?,
 ) => {
   let {config} = Recoil.useRecoilValueFromAtom(configAtom)
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
@@ -76,9 +82,25 @@ let make = (
   }
   let labelClass = getClassName("Label")
   let inputClass = getClassName("Input")
+
   let inputClassStyles = isSpacedInnerLayout ? "Input" : "Input-Compressed"
 
-  <div className="flex flex-col w-full" style={color: themeObj.colorText}>
+  let flexDirectionBasedOnType = type_ === "tel" ? "flex-row" : "flex-col"
+
+  <div className={`flex ${flexDirectionBasedOnType} w-full`} style={color: themeObj.colorText}>
+    <RenderIf condition={type_ === "tel"}>
+      <DropdownField
+        appearance=config.appearance
+        value={valueDropDown->Option.getOr("")}
+        setValue={setValueDropDown->Option.getOr(_ => ())}
+        fieldName={dropDownFieldName->Option.getOr("")}
+        options={dropDownOptions->Option.getOr([])}
+        width="w-1/3 mr-2"
+        displayValue={displayValue->Option.getOr("")}
+        setDisplayValue={setDisplayValue->Option.getOr(_ => ())}
+        isDisplayValueVisible=true
+      />
+    </RenderIf>
     <RenderIf
       condition={fieldName->String.length > 0 &&
       config.appearance.labels == Above &&
@@ -94,7 +116,7 @@ let make = (
         {React.string(fieldName)}
       </div>
     </RenderIf>
-    <div className="flex flex-row " style={direction: direction}>
+    <div className="flex flex-row w-full" style={direction: direction}>
       <div className="relative w-full">
         <input
           style={

src/Components/PhoneNumberPaymentInput.res

@@ -1,37 +1,87 @@
-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 (displayValue, setDisplayValue) = React.useState(_ => "")
 
-  let showDetails = getShowDetails(~billingDetails=fields.billingDetails, ~logger=loggerState)
-  let formatBSB = bsb => {
-    let formatted = bsb
+  let countryAndCodeCodeList =
+    phoneNumberJson
+    ->JSON.Decode.object
+    ->Option.getOr(Dict.make())
+    ->getArray("countries")
 
-    let secondPart = formatted->String.sliceToEnd(~start=4)->String.trim
+  let phoneNumberCodeOptions: array<
+    DropdownField.optionType,
+  > = countryAndCodeCodeList->Array.reduce([], (acc, countryObj) => {
+    let countryObjDict = countryObj->getDictFromJson
+    let countryFlag = countryObjDict->getString("country_flag", "")
+    let phoneNumberCode = countryObjDict->getString("phone_number_code", "")
+    let countryName = countryObjDict->getString("country_name", "")
 
-    if formatted->String.length <= 4 {
-      "+351 "
-    } else if formatted->String.length > 4 {
-      `+351 ${secondPart}`
-    } else {
-      formatted
+    let phoneNumberOptionsValue: DropdownField.optionType = {
+      label: `${countryFlag} ${countryName} ${phoneNumberCode}`,
+      displayValue: `${countryFlag} ${phoneNumberCode}`,
+      value: `${countryFlag}#${phoneNumberCode}`,
     }
-  }
+    acc->Array.push(phoneNumberOptionsValue)
+    acc
+  })
+
+  let defaultCountryCodeFilteredValue =
+    countryAndCodeCodeList
+    ->Array.filter(countryObj => {
+      countryObj->getDictFromJson->getString("country_code", "") === currentCountryCode.isoAlpha2
+    })
+    ->Array.get(0)
+    ->Option.getOr(
+      {
+        "phone_number_code": "",
+      }->Identity.anyTypeToJson,
+    )
+    ->getDictFromJson
+    ->getString("phone_number_code", "")
+
+  let (valueDropDown, setValueDropDown) = React.useState(_ => defaultCountryCodeFilteredValue)
+  let getCountryCodeSplitValue = val => val->String.split("#")->Array.get(1)->Option.getOr("")
 
   let changePhone = ev => {
-    let val: string = ReactEvent.Form.target(ev)["value"]->String.replaceRegExp(%re("/\+D+/g"), "")
+    let val: string = ReactEvent.Form.target(ev)["value"]->String.replaceRegExp(%re("/\D|\s/g"), "")
     setPhone(prev => {
       ...prev,
-      value: val->formatBSB,
+      countryCode: valueDropDown->getCountryCodeSplitValue,
+      value: val,
     })
   }
 
-  let phoneRef = React.useRef(Nullable.null)
+  React.useEffect(() => {
+    setPhone(prev => {
+      ...prev,
+      countryCode: valueDropDown->getCountryCodeSplitValue,
+    })
+    None
+  }, [valueDropDown])
+
+  React.useEffect(() => {
+    let findDisplayValue =
+      phoneNumberCodeOptions
+      ->Array.find(ele => ele.value === valueDropDown)
+      ->Option.getOr(DropdownField.defaultValue)
+    setDisplayValue(_ =>
+      findDisplayValue.displayValue->Option.getOr(
+        findDisplayValue.label->Option.getOr(findDisplayValue.value),
+      )
+    )
+    None
+  }, [phoneNumberCodeOptions])
 
   <RenderIf condition={showDetails.phone == Auto}>
     <PaymentField
@@ -44,6 +94,11 @@ let make = () => {
       inputRef=phoneRef
       placeholder="+351 200 000 000"
       maxLength=14
+      dropDownOptions=phoneNumberCodeOptions
+      valueDropDown
+      setValueDropDown
+      displayValue
+      setDisplayValue
     />
   </RenderIf>
 }