fix: parse phone number when setting default values

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: "",

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,
     })