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/Edit/Profile/FormContent/index.tsx

@@ -4,24 +4,27 @@ import { useIntl } from "react-intl"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import CountrySelect from "@scandic-hotels/design-system/Form/Country"
+import Phone from "@scandic-hotels/design-system/Form/Phone"
 import { Select } from "@scandic-hotels/design-system/Select"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { getLocalizedLanguageOptions } from "@/constants/languages"
+import {
+  getDefaultCountryFromLang,
+  getLocalizedLanguageOptions,
+} from "@/constants/languages"
 
 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 useLang from "@/hooks/useLang"
 import { getFormattedCountryList } from "@/utils/countries"
 import { getErrorMessage } from "@/utils/getErrorMessage"
 
-import { editProfileErrors } from "../schema"
-
 import styles from "./formContent.module.css"
 
-export default function FormContent() {
+import type { FieldErrors } from "react-hook-form"
+
+export default function FormContent({ errors }: { errors: FieldErrors }) {
   const intl = useIntl()
   const lang = useLang()
   const languageOptions = getLocalizedLanguageOptions(lang)
@@ -66,7 +69,8 @@ export default function FormContent() {
             countries={getFormattedCountryList(intl)}
             errorMessage={getErrorMessage(
               intl,
-              editProfileErrors.COUNTRY_REQUIRED
+              // @ts-expect-error countryCode doesn't exist schema not available
+              errors?.address?.countryCode?.message?.toString()
             )}
             label={intl.formatMessage({
               defaultMessage: "Country",
@@ -86,6 +90,15 @@ export default function FormContent() {
           data-hj-suppress
         />
         <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",
           })}

apps/scandic-web/components/Forms/Edit/Profile/index.tsx

@@ -185,7 +185,7 @@ export default function Form({ user }: EditFormProps) {
           onSubmit={methods.handleSubmit(handleSubmit)}
         >
           <FormProvider {...methods}>
-            <FormContent />
+            <FormContent errors={methods.formState.errors} />
           </FormProvider>
         </form>
       </section>