Merged in feat/SW-1648-booking-code-my-stay (pull request #1447)

feat(SW-1648): add booking code on my stay

* feat(SW-1648): add booking code on my stay


Approved-by: Niclas Edenvin

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

@@ -6,6 +6,7 @@ import { useIntl } from "react-intl"
 import { BookingStatusEnum } from "@/constants/booking"
 import { dt } from "@/lib/dt"
 
+import { BookingCodeIcon } from "@/components/Icons"
 import CrossCircleIcon from "@/components/Icons/CrossCircle"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
@@ -137,6 +138,17 @@ export function ReferenceCard({ booking, hotel }: ReferenceCardProps) {
           {formatPrice(intl, totalPrice, currencyCode)}
         </Caption>
       </div>
+      {booking?.bookingCode && (
+        <div className={styles.referenceRow}>
+          <Caption>{intl.formatMessage({ id: "Booking code" })}</Caption>
+          <IconChip color={"blue"} icon={<BookingCodeIcon color="blue" />}>
+            <Caption className={styles.bookingCode} color="blue">
+              <strong>{intl.formatMessage({ id: "Booking code" })}</strong>
+              {booking.bookingCode}
+            </Caption>
+          </IconChip>
+        </div>
+      )}
       {!showCancelButton && (
         <div className={styles.referenceRow}>
           <IconChip

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

@@ -11,6 +11,7 @@
 .referenceRow {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   padding-bottom: var(--Spacing-x-one-and-half);
 }
 
@@ -34,6 +35,11 @@
   display: none;
 }
 
+.bookingCode {
+  display: flex;
+  gap: var(--Spacing-x1);
+}
+
 @media (min-width: 768px) {
   .titleMobile {
     display: none;