From e0de68c495d3fd92b9ac495002c734a5a45ea0a6 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Wed, 17 Jul 2024 10:31:20 +0200
Subject: [PATCH] fix: parse phone number when setting default values

---
 components/Forms/Edit/Profile/index.tsx          | 14 ++++++++++++--
 components/TempDesignSystem/Form/Phone/index.tsx |  3 +--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/components/Forms/Edit/Profile/index.tsx b/components/Forms/Edit/Profile/index.tsx
index 80ca6d710..4b9f322ce 100644
--- a/components/Forms/Edit/Profile/index.tsx
+++ b/components/Forms/Edit/Profile/index.tsx
@@ -1,14 +1,15 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
+import { isValidPhoneNumber, parsePhoneNumber } from "libphonenumber-js"
 import { useParams } from "next/navigation"
 import { useFormState as useReactFormState } from "react-dom"
 import { FormProvider, useForm } from "react-hook-form"
+import { usePhoneInput } from "react-international-phone"
 import { useIntl } from "react-intl"
 
 import { profile } from "@/constants/routes/myPages"
 
 import { editProfile } from "@/actions/editProfile"
-import Header from "@/components/Profile/Header"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
@@ -39,6 +40,15 @@ export default function Form({ user }: EditFormProps) {
     null
   )
 
+  const { inputValue: phoneInput } = usePhoneInput({
+    defaultCountry:
+      user.phoneNumber && isValidPhoneNumber(user.phoneNumber)
+        ? parsePhoneNumber(user.phoneNumber).country?.toLowerCase()
+        : "se",
+    forceDialCode: true,
+    value: user.phoneNumber,
+  })
+
   const methods = useForm<EditProfileSchema>({
     defaultValues: {
       address: {
@@ -50,7 +60,7 @@ export default function Form({ user }: EditFormProps) {
       dateOfBirth: user.dateOfBirth,
       email: user.email,
       language: user.language,
-      phoneNumber: user.phoneNumber,
+      phoneNumber: phoneInput,
       currentPassword: "",
       newPassword: "",
       retypeNewPassword: "",
diff --git a/components/TempDesignSystem/Form/Phone/index.tsx b/components/TempDesignSystem/Form/Phone/index.tsx
index 561d1bba0..09438233b 100644
--- a/components/TempDesignSystem/Form/Phone/index.tsx
+++ b/components/TempDesignSystem/Form/Phone/index.tsx
@@ -54,8 +54,7 @@ export default function Phone({
         ? parsePhoneNumber(
             formState.defaultValues?.phoneNumber
           ).country?.toLowerCase()
-        : "sv",
-      disableCountryGuess: true,
+        : "se",
       forceDialCode: true,
       value: phone,
     })