feat(WEB-169): get profile data from API

components/TempDesignSystem/Form/Phone/index.tsx

@@ -12,7 +12,8 @@ import styles from "./phone.module.css"
 import type { PhoneProps } from "./phone"
 
 export default function Phone({
-  name = "phone",
+  countrySelectName = "country",
+  name = "phoneNumber",
   placeholder = "",
   registerOptions = {
     required: true,
@@ -20,11 +21,11 @@ export default function Phone({
 }: PhoneProps) {
   const phoneRef = useRef<PhoneInputRefType>(null)
   const { control, formState } = useFormContext()
-  const countryValue = useWatch({ name: "country" })
+  const countryValue = useWatch({ name: countrySelectName })
   const defaultCountry = getCountry({
     countries: defaultCountries,
-    field: "name",
-    value: countryValue,
+    field: "iso2",
+    value: String(countryValue).toLowerCase(),
   })
   /**
    * Holds the previous selected country to be able to update
@@ -44,13 +45,13 @@ export default function Phone({
     (country: string) => {
       const selectedCountry = getCountry({
         countries: defaultCountries,
-        field: "name",
-        value: country,
+        field: "iso2",
+        value: country.toLowerCase(),
       })
 
       if (selectedCountry) {
         phoneRef.current?.setCountry(selectedCountry.iso2)
-        prevSelectedCountry.current = country
+        prevSelectedCountry.current = country.toLowerCase()
       }
     },
     [phoneRef.current, prevSelectedCountry.current]
@@ -63,8 +64,8 @@ export default function Phone({
           if (prevSelectedCountry.current !== countryValue) {
             const selectedCountryPrev = getCountry({
               countries: defaultCountries,
-              field: "name",
-              value: prevSelectedCountry.current,
+              field: "iso2",
+              value: prevSelectedCountry.current.toLowerCase(),
             })
             if (
               field.value.replace("+", "") === selectedCountryPrev?.dialCode

components/TempDesignSystem/Form/Phone/phone.ts

@@ -1,6 +1,7 @@
 import type { RegisterOptions } from "react-hook-form"
 
 export type PhoneProps = {
+  countrySelectName?: string
   name?: string
   placeholder?: string
   registerOptions?: RegisterOptions