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