feat: refactor of my stay

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

@@ -0,0 +1,49 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import Divider from "@/components/TempDesignSystem/Divider"
+
+import styles from "./reference.module.css"
+
+export default function Reference() {
+  const intl = useIntl()
+  const { cancellationNumber, confirmationNumber, isCancelled, rooms } =
+    useMyStayStore((state) => ({
+      cancellationNumber: state.bookedRoom.cancellationNumber,
+      confirmationNumber: state.bookedRoom.confirmationNumber,
+      isCancelled: state.bookedRoom.isCancelled,
+      rooms: state.rooms,
+    }))
+
+  if (rooms.length > 1) {
+    return null
+  }
+
+  const title = isCancelled
+    ? intl.formatMessage({
+        defaultMessage: "Cancellation number",
+      })
+    : intl.formatMessage({
+        defaultMessage: "Booking number",
+      })
+
+  return (
+    <>
+      <div className={styles.row}>
+        <Typography variant="Body/Lead text">
+          <p className={styles.textDefault}>{title}</p>
+        </Typography>
+        <Typography variant="Title/Subtitle/md">
+          <p className={styles.textDefault}>
+            {isCancelled ? <s>{cancellationNumber}</s> : confirmationNumber}
+          </p>
+        </Typography>
+      </div>
+      <Divider color="subtle" />
+    </>
+  )
+}

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Reference/reference.module.css

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