fix(SW-1095): set country code based on url lang when phone input empty

components/TempDesignSystem/Form/Phone/index.tsx

@@ -12,17 +12,20 @@ import {
 } from "react-international-phone"
 import { useIntl } from "react-intl"
 
+import { Lang } from "@/constants/languages"
+
 import { ChevronDownIcon } from "@/components/Icons"
 import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
 import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 import Label from "@/components/TempDesignSystem/Form/Label"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import useLang from "@/hooks/useLang"
 
 import styles from "./phone.module.css"
 
 import type { ChangeEvent } from "react"
 
-import type { PhoneProps } from "./phone"
+import { LowerCaseCountryCode, PhoneProps } from "@/types/components/form/phone"
 
 export default function Phone({
   ariaLabel = "Phone number input",
@@ -37,6 +40,7 @@ export default function Phone({
   },
 }: PhoneProps) {
   const intl = useIntl()
+  const lang = useLang()
   const { control, setValue, trigger } = useFormContext()
   const phone = useWatch({ name })
 
@@ -47,13 +51,17 @@ export default function Phone({
     rules: registerOptions,
   })
 
+  const defaultPhoneNumber = formState.defaultValues?.phoneNumber
+
+  // If defaultPhoneNumber exists and is valid, parse it to get the country code,
+  // otherwise set the default country from the lang.
+  const defaultCountry = isValidPhoneNumber(defaultPhoneNumber)
+    ? parsePhoneNumber(defaultPhoneNumber).country?.toLowerCase()
+    : getDefaultCountryFromLang(lang)
+
   const { country, handlePhoneValueChange, inputValue, setCountry } =
     usePhoneInput({
-      defaultCountry: isValidPhoneNumber(formState.defaultValues?.phoneNumber)
-        ? parsePhoneNumber(
-            formState.defaultValues?.phoneNumber
-          ).country?.toLowerCase()
-        : "se",
+      defaultCountry,
       disableDialCodeAndPrefix: true,
       forceDialCode: true,
       value: phone,
@@ -142,3 +150,15 @@ export default function Phone({
     </div>
   )
 }
+
+function getDefaultCountryFromLang(lang: Lang): LowerCaseCountryCode {
+  const countryMap: Record<Lang, LowerCaseCountryCode> = {
+    sv: "se",
+    da: "dk",
+    fi: "fi",
+    no: "no",
+    de: "de",
+    en: "gb",
+  }
+  return countryMap[lang] || "se"
+}

components/TempDesignSystem/Form/Phone/phone.ts

@@ -1,12 +0,0 @@
-import type { RegisterOptions } from "react-hook-form"
-
-export type PhoneProps = {
-  ariaLabel?: string
-  className?: string
-  disabled?: boolean
-  label: string
-  name?: string
-  placeholder?: string
-  readOnly?: boolean
-  registerOptions?: RegisterOptions
-}