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 }}

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx

@@ -2,6 +2,7 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
+import { ErrorMessage } from "@scandic-hotels/design-system/Form/ErrorMessage"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType"
@@ -9,8 +10,8 @@ import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType"
 import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
 
 import Alert from "@/components/TempDesignSystem/Alert"
-import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
 import Select from "@/components/TempDesignSystem/Form/Select"
+import { getErrorMessage } from "@/utils/getErrorMessage"
 
 import styles from "./selectQuantityStep.module.css"
 
@@ -116,7 +117,14 @@ export default function SelectQuantityStep({ user }: SelectQuantityStepProps) {
           items={cardQuantityOptions}
           isNestedInModal
         />
-        <ErrorMessage errors={errors} name="quantityWithCard" />
+        <ErrorMessage
+          errors={errors}
+          name="quantityWithCard"
+          messageLabel={getErrorMessage(
+            intl,
+            errors["quantityWithCard"]?.message?.toString()
+          )}
+        />
       </div>
     </div>
   )

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

@@ -4,10 +4,14 @@ import { useFormContext } from "react-hook-form"
 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 CountrySelect from "@/components/TempDesignSystem/Form/Country"
 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"
 
 import styles from "./modifyContact.module.css"
 
@@ -23,6 +27,7 @@ export default function ModifyContact({
   isFirstStep,
 }: ModifyContactProps) {
   const intl = useIntl()
+  const lang = useLang()
   const { getValues, setValue } = useFormContext()
 
   useEffect(() => {
@@ -57,9 +62,15 @@ export default function ModifyContact({
           </div>
           <div className={styles.row}>
             <CountrySelect
+              countries={getFormattedCountryList(intl)}
+              errorMessage={getErrorMessage(
+                intl,
+                signupErrors.COUNTRY_REQUIRED
+              )}
               label={intl.formatMessage({
                 defaultMessage: "Country",
               })}
+              lang={lang}
               name="countryCode"
             />
           </div>