Merged in feat/SW-3076 (pull request #2416)

feat(SW-3076: change phone country code on country select)

* feat(SW-3076: change phone country code on country select)


Approved-by: Simon.Emanuelsson

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx

@@ -85,6 +85,8 @@ export default function Details() {
     control,
     subscribe,
     formState: { isValid },
+    setValue,
+    watch,
   } = methods
 
   useFormTracking("checkout", subscribe, control, ` - room ${roomNr}`)
@@ -119,6 +121,14 @@ export default function Details() {
     }
   }, [crossValidationData, methods])
 
+  const countryCode = watch("countryCode")
+
+  useEffect(() => {
+    if (countryCode) {
+      setValue("phoneNumberCC", countryCode.toLowerCase())
+    }
+  }, [countryCode, setValue])
+
   const guestIsGoingToJoin = methods.watch("join")
   const guestIsMember = methods.watch("membershipNo")
 

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx

@@ -42,6 +42,7 @@ export default function Details({ user }: DetailsProps) {
     roomNr,
     idx,
   } = useRoomContext()
+
   const initialData = room.guest
 
   const memberRate = "member" in room.roomRate ? room.roomRate.member : null
@@ -74,7 +75,15 @@ export default function Details({ user }: DetailsProps) {
     reValidateMode: "onChange",
   })
 
-  const { formState, handleSubmit, trigger, control, subscribe } = methods
+  const {
+    formState,
+    handleSubmit,
+    trigger,
+    control,
+    subscribe,
+    setValue,
+    watch,
+  } = methods
 
   useFormTracking(
     "checkout",
@@ -103,7 +112,13 @@ export default function Details({ user }: DetailsProps) {
   }, [handleSubmit, formState.isValid, onSubmit, setIncomplete])
 
   useEffect(updateDetailsStore, [updateDetailsStore])
+  const countryCode = watch("countryCode")
 
+  useEffect(() => {
+    if (countryCode) {
+      setValue("phoneNumberCC", countryCode.toLowerCase())
+    }
+  }, [countryCode, setValue])
   return (
     <FormProvider {...methods}>
       <form

apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 import "react-international-phone/style.css"
 
+import { useEffect } from "react"
 import { TextField } from "react-aria-components"
 import { useFormContext, useWatch } from "react-hook-form"
 import {
@@ -42,6 +43,7 @@ export default function Phone({
   const lang = useLang()
   const { formState, getFieldState, register, setValue } = useFormContext()
   const fieldState = getFieldState(name)
+  const ccFieldState = getFieldState(countrySelectorName)
   const [phoneNumber, phoneNumberCC]: [string, string] = useWatch({
     name: [name, countrySelectorName],
   })
@@ -56,13 +58,18 @@ export default function Phone({
     setCountry(value.iso2)
     setValue(countrySelectorName, value.iso2, {
       shouldDirty: true,
+      shouldTouch: true,
       shouldValidate: true,
     })
     if (registerOptions.onBlur) {
       registerOptions.onBlur(value)
     }
   }
-
+  useEffect(() => {
+    if (!ccFieldState.isTouched) {
+      setCountry(phoneNumberCC)
+    }
+  }, [phoneNumberCC, setCountry, ccFieldState])
   return (
     <div className={`${styles.phone} ${className}`}>
       <CountrySelector