Merged in chore/SW-3145-move-country (pull request #2545)

chore: SW-3145 Moved country into design system

* chore: SW-3145 Moved country into design system


Approved-by: Anton Gunnarsson

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

@@ -5,26 +5,30 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Footnote from "@scandic-hotels/design-system/Footnote"
+import CountrySelect from "@scandic-hotels/design-system/Form/Country"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
-import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 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"
 import usePhoneNumberParsing from "@/hooks/usePhoneNumberParsing"
+import { getFormattedCountryList } from "@/utils/countries"
+import { getErrorMessage } from "@/utils/getErrorMessage"
 
 import MemberPriceModal from "../MemberPriceModal"
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
-import { getMultiroomDetailsSchema } from "./schema"
+import { getMultiroomDetailsSchema, multiroomErrors } from "./schema"
 
 import styles from "./details.module.css"
 
 const formID = "enter-details"
 export default function Details() {
   const intl = useIntl()
+  const lang = useLang()
 
   const { addPreSubmitCallback, rooms } = useEnterDetailsStore((state) => ({
     addPreSubmitCallback: state.actions.addPreSubmitCallback,
@@ -187,9 +191,15 @@ export default function Details() {
           />
           <CountrySelect
             className={styles.fullWidth}
+            countries={getFormattedCountryList(intl)}
+            errorMessage={getErrorMessage(
+              intl,
+              multiroomErrors.COUNTRY_REQUIRED
+            )}
             label={intl.formatMessage({
               defaultMessage: "Country",
             })}
+            lang={lang}
             name="countryCode"
             registerOptions={{ required: true, onBlur: updateDetailsStore }}
           />

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

@@ -5,20 +5,27 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Footnote from "@scandic-hotels/design-system/Footnote"
+import CountrySelect from "@scandic-hotels/design-system/Form/Country"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
-import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 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"
 import usePhoneNumberParsing from "@/hooks/usePhoneNumberParsing"
+import { getFormattedCountryList } from "@/utils/countries"
+import { getErrorMessage } from "@/utils/getErrorMessage"
 
 import MemberPriceModal from "../MemberPriceModal"
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
-import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
+import {
+  guestDetailsSchema,
+  roomOneErrors,
+  signedInDetailsSchema,
+} from "./schema"
 import Signup from "./Signup"
 
 import styles from "./details.module.css"
@@ -31,6 +38,7 @@ import type {
 const formID = "enter-details"
 export default function Details({ user }: DetailsProps) {
   const intl = useIntl()
+  const lang = useLang()
 
   const { lastRoom, addPreSubmitCallback } = useEnterDetailsStore((state) => ({
     lastRoom: state.lastRoom,
@@ -168,6 +176,9 @@ export default function Details({ user }: DetailsProps) {
             label={intl.formatMessage({
               defaultMessage: "Country",
             })}
+            lang={lang}
+            countries={getFormattedCountryList(intl)}
+            errorMessage={getErrorMessage(intl, roomOneErrors.COUNTRY_REQUIRED)}
             name="countryCode"
             readOnly={!!user}
             registerOptions={{ required: true, onBlur: updateDetailsStore }}