Merged in chore/SW-3145-move-date-to-design-system (pull request #2556)

feat: SW-3145 Moved date component to design system

* chore: SW-3145 Moved date component to design system


Approved-by: Anton Gunnarsson
Approved-by: Matilda Landström

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

@@ -1,24 +1,33 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import { type RegisterOptions, useWatch } from "react-hook-form"
+import {
+  type FieldErrors,
+  type RegisterOptions,
+  useWatch,
+} from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Caption from "@scandic-hotels/design-system/Caption"
+import DateSelect from "@scandic-hotels/design-system/Form/Date"
 
-import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
+import useLang from "@/hooks/useLang"
+import { getErrorMessage } from "@/utils/getErrorMessage"
 
 import styles from "./signup.module.css"
 
 export default function Signup({
+  errors,
   name,
   registerOptions,
 }: {
+  errors: FieldErrors
   name: string
   registerOptions?: RegisterOptions
 }) {
   const intl = useIntl()
+  const lang = useLang()
 
   const [isJoinChecked, setIsJoinChecked] = useState(false)
 
@@ -50,6 +59,16 @@ export default function Signup({
           </Caption>
         </header>
         <DateSelect
+          labels={{
+            day: intl.formatMessage({ defaultMessage: "Day" }),
+            month: intl.formatMessage({ defaultMessage: "Month" }),
+            year: intl.formatMessage({ defaultMessage: "Year" }),
+            errorMessage: getErrorMessage(
+              intl,
+              errors["dateOfBirth"]?.message?.toString()
+            ),
+          }}
+          lang={lang}
           name="dateOfBirth"
           registerOptions={{ required: true, ...registerOptions }}
         />

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

@@ -214,6 +214,7 @@ export default function Details({ user }: DetailsProps) {
           {user ? null : (
             <div className={styles.fullWidth}>
               <Signup
+                errors={formState.errors}
                 name="join"
                 registerOptions={{ onBlur: updateDetailsStore }}
               />

apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/index.tsx

@@ -1,4 +1,5 @@
 import { dt } from "@scandic-hotels/common/dt"
+import { getNumberOfNights } from "@scandic-hotels/common/utils/dateFormatting"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
 
@@ -6,7 +7,6 @@ import { longDateWithYearFormat } from "@/constants/dateFormats"
 
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
-import { getNumberOfNights } from "@/utils/dateFormatting"
 
 import styles from "./footer.module.css"