feat: refactor of my stay

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Dates/dates.module.css

@@ -0,0 +1,15 @@
+.row {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.label {
+  align-items: center;
+  display: flex;
+  gap: var(--Space-x1);
+}
+
+.textDefault {
+  color: var(--Text-Default);
+}

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Dates/index.tsx

@@ -0,0 +1,53 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { dt } from "@/lib/dt"
+import { useMyStayStore } from "@/stores/my-stay"
+
+import useLang from "@/hooks/useLang"
+
+import styles from "./dates.module.css"
+
+export default function Dates() {
+  const intl = useIntl()
+  const lang = useLang()
+  const { checkInDate, checkOutDate } = useMyStayStore((state) => ({
+    checkInDate: state.bookedRoom.checkInDate,
+    checkOutDate: state.bookedRoom.checkOutDate,
+  }))
+
+  const from = dt(checkInDate).locale(lang).format("D MMM")
+  const fromYear = dt(checkInDate).year()
+  const to = dt(checkOutDate).locale(lang).format("D MMM")
+  const toYear = dt(checkOutDate).year()
+
+  const isSameYear = fromYear === toYear
+
+  const stayFrom = isSameYear ? from : `${from}, ${fromYear}`
+  const stayTo = `${to}, ${toYear}`
+
+  return (
+    <div className={styles.row}>
+      <div className={styles.label}>
+        <MaterialIcon icon="calendar_month" />
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p className={styles.textDefault}>
+            {intl.formatMessage({
+              defaultMessage: "Dates",
+            })}
+          </p>
+        </Typography>
+      </div>
+
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p className={styles.textDefault}>
+          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
+          {stayFrom} → {stayTo}
+        </p>
+      </Typography>
+    </div>
+  )
+}