feat: refactor of my stay

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/BookingCode/bookingCode.module.css

@@ -0,0 +1,5 @@
+.row {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}

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

@@ -0,0 +1,41 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import IconChip from "@/components/TempDesignSystem/IconChip"
+
+import styles from "./bookingCode.module.css"
+
+export default function BookingCode() {
+  const intl = useIntl()
+  const bookingCode = useMyStayStore((state) => state.bookedRoom.bookingCode)
+
+  if (!bookingCode) {
+    return null
+  }
+
+  return (
+    <div className={styles.row}>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p>
+          {intl.formatMessage({
+            defaultMessage: "Booking code",
+          })}
+        </p>
+      </Typography>
+
+      <IconChip
+        color="blue"
+        icon={<DiscountIcon color="Icon/Feedback/Information" />}
+      >
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <span>{bookingCode}</span>
+        </Typography>
+      </IconChip>
+    </div>
+  )
+}