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/Forms/Signup/index.tsx

@@ -10,6 +10,7 @@ import { logger } from "@scandic-hotels/common/logger"
 import { Button } from "@scandic-hotels/design-system/Button"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import CountrySelect from "@scandic-hotels/design-system/Form/Country"
+import Phone from "@scandic-hotels/design-system/Form/Phone"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 import {
@@ -27,7 +28,6 @@ import {
 import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
-import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Link from "@/components/TempDesignSystem/Link"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useFormTracking } from "@/components/TrackingSDK/hooks"
@@ -98,7 +98,11 @@ export default function SignupForm({ title }: SignUpFormProps) {
     shouldFocusError: true,
   })
 
-  const { control, subscribe } = methods
+  const {
+    control,
+    subscribe,
+    formState: { errors },
+  } = methods
 
   const { trackFormSubmit } = useFormTracking("signup", subscribe, control)
 
@@ -174,7 +178,7 @@ export default function SignupForm({ title }: SignUpFormProps) {
                 countries={getFormattedCountryList(intl)}
                 errorMessage={getErrorMessage(
                   intl,
-                  signupErrors.COUNTRY_REQUIRED
+                  errors.address?.countryCode?.message
                 )}
                 label={intl.formatMessage({
                   defaultMessage: "Country",
@@ -192,6 +196,15 @@ export default function SignupForm({ title }: SignUpFormProps) {
                 type="email"
               />
               <Phone
+                countryLabel={intl.formatMessage({
+                  defaultMessage: "Country code",
+                })}
+                countriesWithTranslatedName={getFormattedCountryList(intl)}
+                defaultCountryCode={getDefaultCountryFromLang(lang)}
+                errorMessage={getErrorMessage(
+                  intl,
+                  errors.phoneNumber?.message
+                )}
                 label={intl.formatMessage({
                   defaultMessage: "Phone number",
                 })}