From df49579ee2de2c19048476852ace9f2436524549 Mon Sep 17 00:00:00 2001
From: Pritish Budhiraja <1805317@kiit.ac.in>
Date: Thu, 18 Apr 2024 15:37:05 +0530
Subject: [PATCH] fix: comments addressed

---
 src/Components/DropdownField.res           | 12 +++--
 src/Components/DynamicFields.res           | 55 ++++------------------
 src/Components/PhoneNumberPaymentInput.res | 24 +++++-----
 src/Payments/BankDebitModal.res            |  2 -
 src/Payments/KlarnaPayment.res             |  3 +-
 src/Payments/SepaBankTransfer.res          | 11 +----
 6 files changed, 33 insertions(+), 74 deletions(-)

diff --git a/src/Components/DropdownField.res b/src/Components/DropdownField.res
index c29a2c2f6..51f47bef8 100644
--- a/src/Components/DropdownField.res
+++ b/src/Components/DropdownField.res
@@ -1,9 +1,14 @@
 type optionType = {
-  label: string,
   value: string,
+  label?: string,
   displayValue?: string,
 }
 
+let updateArrayOfStringToOptionsTypeArray = arrayOfString =>
+  arrayOfString->Array.map(item => {
+    value: item,
+  })
+
 open RecoilAtoms
 @react.component
 let make = (
@@ -39,9 +44,7 @@ let make = (
         options
         ->Array.find((ele: optionType) => ele.value === value)
         ->Option.getOr({
-          label: "",
           value: "",
-          displayValue: "",
         })
 
       switch setDisplayValue {
@@ -60,7 +63,6 @@ let make = (
           options
           ->Array.get(0)
           ->Option.getOr({
-            label: "",
             value: "",
           })
         ).value
@@ -120,7 +122,7 @@ let make = (
             {options
             ->Array.mapWithIndex((item, index) => {
               <option key={Int.toString(index)} value=item.value>
-                {React.string(item.label)}
+                {React.string(item.label->Option.getOr(item.value))}
               </option>
             })
             ->React.array}
diff --git a/src/Components/DynamicFields.res b/src/Components/DynamicFields.res
index f0a36e016..a2297732a 100644
--- a/src/Components/DynamicFields.res
+++ b/src/Components/DynamicFields.res
@@ -426,15 +426,8 @@ let make = (
               />
             </div>
           | Currency(currencyArr) =>
-            let updatedCurrencyArray: array<
-              DropdownField.optionType,
-            > = currencyArr->Array.map(item => {
-              let optionVal: DropdownField.optionType = {
-                label: item,
-                value: item,
-              }
-              optionVal
-            })
+            let updatedCurrencyArray =
+              currencyArr->DropdownField.updateArrayOfStringToOptionsTypeArray
             <DropdownField
               appearance=config.appearance
               fieldName=localeString.currencyLabel
@@ -533,15 +526,8 @@ let make = (
                     }}
                   </div>
                 | CountryAndPincode(countryArr) =>
-                  let updatedCountryArray: array<
-                    DropdownField.optionType,
-                  > = countryArr->Array.map(item => {
-                    let optionVal: DropdownField.optionType = {
-                      label: item,
-                      value: item,
-                    }
-                    optionVal
-                  })
+                  let updatedCountryArray =
+                    countryArr->DropdownField.updateArrayOfStringToOptionsTypeArray
                   <div className="flex gap-1">
                     <DropdownField
                       appearance=config.appearance
@@ -682,15 +668,8 @@ let make = (
                   />
                 | BlikCode => <BlikCodePaymentInput />
                 | Country =>
-                  let updatedCountryNames: array<
-                    DropdownField.optionType,
-                  > = countryNames->Array.map(item => {
-                    let optionVal: DropdownField.optionType = {
-                      label: item,
-                      value: item,
-                    }
-                    optionVal
-                  })
+                  let updatedCountryNames =
+                    countryNames->DropdownField.updateArrayOfStringToOptionsTypeArray
                   <DropdownField
                     appearance=config.appearance
                     fieldName=localeString.countryLabel
@@ -700,15 +679,8 @@ let make = (
                     options=updatedCountryNames
                   />
                 | AddressCountry(countryArr) =>
-                  let updatedCountryArr: array<
-                    DropdownField.optionType,
-                  > = countryArr->Array.map(item => {
-                    let optionVal: DropdownField.optionType = {
-                      label: item,
-                      value: item,
-                    }
-                    optionVal
-                  })
+                  let updatedCountryArr =
+                    countryArr->DropdownField.updateArrayOfStringToOptionsTypeArray
                   <DropdownField
                     appearance=config.appearance
                     fieldName=localeString.countryLabel
@@ -718,15 +690,8 @@ let make = (
                     options=updatedCountryArr
                   />
                 | Bank =>
-                  let updatedBankNames: array<
-                    DropdownField.optionType,
-                  > = bankNames->Array.map(item => {
-                    let optionVal: DropdownField.optionType = {
-                      label: item,
-                      value: item,
-                    }
-                    optionVal
-                  })
+                  let updatedBankNames =
+                    bankNames->DropdownField.updateArrayOfStringToOptionsTypeArray
                   <DropdownField
                     appearance=config.appearance
                     fieldName=localeString.bankLabel
diff --git a/src/Components/PhoneNumberPaymentInput.res b/src/Components/PhoneNumberPaymentInput.res
index 7bc7a5a9e..72f3de867 100644
--- a/src/Components/PhoneNumberPaymentInput.res
+++ b/src/Components/PhoneNumberPaymentInput.res
@@ -23,16 +23,14 @@ let make = () => {
     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", "")
+
     let phoneNumberOptionsValue: DropdownField.optionType = {
-      label: `${countryObjDict->getString("country_flag", "")} ${countryObjDict->getString(
-          "country_name",
-          "",
-        )} ${countryObjDict->getString("phone_number_code", "")}`,
-      displayValue: `${countryObjDict->getString("country_flag", "")} ${countryObjDict->getString(
-          "phone_number_code",
-          "",
-        )}`,
-      value: countryObjDict->getString("phone_number_code", ""),
+      label: `${countryFlag} ${countryName} ${phoneNumberCode}`,
+      displayValue: `${countryFlag} ${phoneNumberCode}`,
+      value: phoneNumberCode,
     }
     acc->Array.push(phoneNumberOptionsValue)
     acc
@@ -76,11 +74,13 @@ let make = () => {
       phoneNumberCodeOptions
       ->Array.find(ele => ele.value === valueDropDown)
       ->Option.getOr({
-        label: "",
         value: "",
-        displayValue: "",
       })
-    setDisplayValue(_ => findDisplayValue.displayValue->Option.getOr(findDisplayValue.label))
+    setDisplayValue(_ =>
+      findDisplayValue.displayValue->Option.getOr(
+        findDisplayValue.label->Option.getOr(findDisplayValue.value),
+      )
+    )
     None
   }, [phoneNumberCodeOptions])
 
diff --git a/src/Payments/BankDebitModal.res b/src/Payments/BankDebitModal.res
index 83ea47c17..879b82a14 100644
--- a/src/Payments/BankDebitModal.res
+++ b/src/Payments/BankDebitModal.res
@@ -319,11 +319,9 @@ let make = (~setModalData) => {
               disabled=false
               options=[
                 {
-                  label: "Savings",
                   value: "Savings",
                 },
                 {
-                  label: "Checking",
                   value: "Checking",
                 },
               ]
diff --git a/src/Payments/KlarnaPayment.res b/src/Payments/KlarnaPayment.res
index 7a6c1f802..84a2bb91c 100644
--- a/src/Payments/KlarnaPayment.res
+++ b/src/Payments/KlarnaPayment.res
@@ -15,7 +15,8 @@ let make = (~paymentType, ~list: PaymentMethodsRecord.list) => {
   let (fullName, _) = Recoil.useLoggedRecoilState(userFullName, "fullName", loggerState)
   let (email, _) = Recoil.useLoggedRecoilState(userEmailAddress, "email", loggerState)
 
-  let countryNames = Utils.getCountryNames(Country.country)
+  let countryNames =
+    Utils.getCountryNames(Country.country)->DropdownField.updateArrayOfStringToOptionsTypeArray
 
   let (country, setCountry) = Recoil.useRecoilState(userCountry)
   let setCountry = val => {
diff --git a/src/Payments/SepaBankTransfer.res b/src/Payments/SepaBankTransfer.res
index 5d4f2a25a..6fbe2970b 100644
--- a/src/Payments/SepaBankTransfer.res
+++ b/src/Payments/SepaBankTransfer.res
@@ -56,15 +56,8 @@ let make = (~paymentType, ~list) => {
   }, (email, fullName, country))
   useSubmitPaymentData(submitCallback)
 
-  let updatedOptionsArrayForCountry: array<
-    DropdownField.optionType,
-  > = countryNames->Array.map(item => {
-    let optionVal: DropdownField.optionType = {
-      label: item,
-      value: item,
-    }
-    optionVal
-  })
+  let updatedOptionsArrayForCountry =
+    countryNames->DropdownField.updateArrayOfStringToOptionsTypeArray
 
   <div
     className="flex flex-col animate-slowShow"