Merged in chore/SW-3145-move-phone (pull request #2549)

chore/SW-3145 Moved Phone to design system

* chore/SW-3145 Moved Phone to design system

* chore: SW-3145 Moved phone and removed intl direct dependency


Approved-by: Anton Gunnarsson

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

@@ -6,12 +6,13 @@ import { useIntl } from "react-intl"
 
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import CountrySelect from "@scandic-hotels/design-system/Form/Country"
+import Phone from "@scandic-hotels/design-system/Form/Phone"
 
+import { getDefaultCountryFromLang } from "@/constants/languages"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
 import Input from "@/components/TempDesignSystem/Form/Input"
-import Phone from "@/components/TempDesignSystem/Form/Phone"
 import { useFormTracking } from "@/components/TrackingSDK/hooks"
 import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"
@@ -21,7 +22,7 @@ import { getErrorMessage } from "@/utils/getErrorMessage"
 
 import MemberPriceModal from "../MemberPriceModal"
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
-import { getMultiroomDetailsSchema, multiroomErrors } from "./schema"
+import { getMultiroomDetailsSchema } from "./schema"
 
 import styles from "./details.module.css"
 
@@ -89,7 +90,7 @@ export default function Details() {
     trigger,
     control,
     subscribe,
-    formState: { isValid },
+    formState: { isValid, errors },
     setValue,
     watch,
   } = methods
@@ -192,10 +193,7 @@ export default function Details() {
           <CountrySelect
             className={styles.fullWidth}
             countries={getFormattedCountryList(intl)}
-            errorMessage={getErrorMessage(
-              intl,
-              multiroomErrors.COUNTRY_REQUIRED
-            )}
+            errorMessage={getErrorMessage(intl, errors.countryCode?.message)}
             label={intl.formatMessage({
               defaultMessage: "Country",
             })}
@@ -212,6 +210,12 @@ export default function Details() {
             registerOptions={{ required: true, onBlur: updateDetailsStore }}
           />
           <Phone
+            countryLabel={intl.formatMessage({
+              defaultMessage: "Country code",
+            })}
+            countriesWithTranslatedName={getFormattedCountryList(intl)}
+            defaultCountryCode={getDefaultCountryFromLang(lang)}
+            errorMessage={getErrorMessage(intl, errors.phoneNumber?.message)}
             className={styles.fullWidth}
             label={intl.formatMessage({
               defaultMessage: "Phone number",

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

@@ -6,12 +6,13 @@ import { useIntl } from "react-intl"
 
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import CountrySelect from "@scandic-hotels/design-system/Form/Country"
+import Phone from "@scandic-hotels/design-system/Form/Phone"
 
+import { getDefaultCountryFromLang } from "@/constants/languages"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
 import Input from "@/components/TempDesignSystem/Form/Input"
-import Phone from "@/components/TempDesignSystem/Form/Phone"
 import { useFormTracking } from "@/components/TrackingSDK/hooks"
 import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"
@@ -21,11 +22,7 @@ import { getErrorMessage } from "@/utils/getErrorMessage"
 
 import MemberPriceModal from "../MemberPriceModal"
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
-import {
-  guestDetailsSchema,
-  roomOneErrors,
-  signedInDetailsSchema,
-} from "./schema"
+import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
 import Signup from "./Signup"
 
 import styles from "./details.module.css"
@@ -178,7 +175,10 @@ export default function Details({ user }: DetailsProps) {
             })}
             lang={lang}
             countries={getFormattedCountryList(intl)}
-            errorMessage={getErrorMessage(intl, roomOneErrors.COUNTRY_REQUIRED)}
+            errorMessage={getErrorMessage(
+              intl,
+              formState.errors.countryCode?.message
+            )}
             name="countryCode"
             readOnly={!!user}
             registerOptions={{ required: true, onBlur: updateDetailsStore }}
@@ -195,6 +195,15 @@ export default function Details({ user }: DetailsProps) {
           />
           <Phone
             className={styles.fullWidth}
+            countryLabel={intl.formatMessage({
+              defaultMessage: "Country code",
+            })}
+            countriesWithTranslatedName={getFormattedCountryList(intl)}
+            defaultCountryCode={getDefaultCountryFromLang(lang)}
+            errorMessage={getErrorMessage(
+              intl,
+              formState.errors.phoneNumber?.message
+            )}
             label={intl.formatMessage({
               defaultMessage: "Phone number",
             })}

apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx

@@ -5,10 +5,11 @@ import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
 import CountrySelect from "@scandic-hotels/design-system/Form/Country"
-import { signupErrors } from "@scandic-hotels/trpc/routers/user/schemas"
+import Phone from "@scandic-hotels/design-system/Form/Phone"
+
+import { getDefaultCountryFromLang } from "@/constants/languages"
 
 import Input from "@/components/TempDesignSystem/Form/Input"
-import Phone from "@/components/TempDesignSystem/Form/Phone"
 import useLang from "@/hooks/useLang"
 import { getFormattedCountryList } from "@/utils/countries"
 import { getErrorMessage } from "@/utils/getErrorMessage"
@@ -28,7 +29,11 @@ export default function ModifyContact({
 }: ModifyContactProps) {
   const intl = useIntl()
   const lang = useLang()
-  const { getValues, setValue } = useFormContext()
+  const {
+    getValues,
+    setValue,
+    formState: { errors },
+  } = useFormContext()
 
   useEffect(() => {
     setValue("firstName", guest.firstName ?? "")
@@ -65,7 +70,7 @@ export default function ModifyContact({
               countries={getFormattedCountryList(intl)}
               errorMessage={getErrorMessage(
                 intl,
-                signupErrors.COUNTRY_REQUIRED
+                errors.countryCode?.message?.toString()
               )}
               label={intl.formatMessage({
                 defaultMessage: "Country",
@@ -86,6 +91,15 @@ export default function ModifyContact({
           </div>
           <div className={styles.row}>
             <Phone
+              countryLabel={intl.formatMessage({
+                defaultMessage: "Country code",
+              })}
+              countriesWithTranslatedName={getFormattedCountryList(intl)}
+              defaultCountryCode={getDefaultCountryFromLang(lang)}
+              errorMessage={getErrorMessage(
+                intl,
+                errors.phoneNumber?.message?.toString()
+              )}
               label={intl.formatMessage({
                 defaultMessage: "Phone number",
               })}