feat(WEB-170): edit profile view

components/TempDesignSystem/Form/Phone/index.tsx

@@ -0,0 +1,97 @@
+"use client"
+import "react-international-phone/style.css"
+import { useController, useFormContext, useWatch } from "react-hook-form"
+import { useCallback, useEffect, useRef } from "react"
+import { defaultCountries, getCountry } from "react-international-phone"
+
+import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
+import { PhoneInput, type PhoneInputRefType } from "react-international-phone"
+
+import styles from "./phone.module.css"
+
+import type { PhoneProps } from "./phone"
+
+export default function Phone({
+  name = "phone",
+  placeholder = "",
+  registerOptions = {
+    required: true,
+  },
+}: PhoneProps) {
+  const phoneRef = useRef<PhoneInputRefType>(null)
+  const { control, formState } = useFormContext()
+  const countryValue = useWatch({ name: "country" })
+  const defaultCountry = getCountry({
+    countries: defaultCountries,
+    field: "name",
+    value: countryValue,
+  })
+  /**
+   * Holds the previous selected country to be able to update
+   * countrycode based on country select field.
+   * Since PhoneInput inputs the countrys dialcode (country code) upon
+   * selection, we need to check if the current value is just
+   * the previously selected countrys dialcode number.
+   */
+  const prevSelectedCountry = useRef<string | undefined>(countryValue)
+  const { field } = useController({
+    control,
+    name,
+    rules: registerOptions,
+  })
+
+  const handleCountrySelectForPhone = useCallback(
+    (country: string) => {
+      const selectedCountry = getCountry({
+        countries: defaultCountries,
+        field: "name",
+        value: country,
+      })
+
+      if (selectedCountry) {
+        phoneRef.current?.setCountry(selectedCountry.iso2)
+        prevSelectedCountry.current = country
+      }
+    },
+    [phoneRef.current, prevSelectedCountry.current]
+  )
+
+  useEffect(() => {
+    if (countryValue) {
+      if (field.value) {
+        if (prevSelectedCountry.current) {
+          if (prevSelectedCountry.current !== countryValue) {
+            const selectedCountryPrev = getCountry({
+              countries: defaultCountries,
+              field: "name",
+              value: prevSelectedCountry.current,
+            })
+            if (
+              field.value.replace("+", "") === selectedCountryPrev?.dialCode
+            ) {
+              handleCountrySelectForPhone(countryValue)
+            }
+          }
+        } else {
+          handleCountrySelectForPhone(countryValue)
+        }
+      } else {
+        handleCountrySelectForPhone(countryValue)
+      }
+    }
+  }, [countryValue, prevSelectedCountry.current])
+
+  return (
+    <div className={styles.phone}>
+      <PhoneInput
+        {...field}
+        className={styles.input}
+        defaultCountry={defaultCountry?.iso2 ?? "se"}
+        placeholder={placeholder}
+        preferredCountries={["de", "dk", "fi", "no", "se", "gb"]}
+        ref={phoneRef}
+      />
+      <ErrorMessage errors={formState.errors} name={name} />
+    </div>
+  )
+}