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