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
2025-02-28 14:09:23 +00:00
parent 6804b52d31
commit 4fc25e42b5
13 changed files with 73 additions and 1 deletions
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx
+++ b/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
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css
+++ b/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;
--- a/apps/scandic-web/components/HotelReservation/MyStay/Room/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Room/index.tsx
@@ -7,6 +7,7 @@ import { dt } from "@/lib/dt"
 import { getIconForFeatureCode } from "@/components/HotelReservation/utils"
 import {
  BedDoubleIcon,
+  BookingCodeIcon,
  CoffeeIcon,
  ContractIcon,
  DoorOpenIcon,
@@ -14,7 +15,9 @@ import {
 } from "@/components/Icons"
 import RocketLaunch from "@/components/Icons/Refresh"
 import Image from "@/components/Image"
+import IconChip from "@/components/TempDesignSystem/IconChip"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"
@@ -241,8 +244,16 @@ export function Room({ booking, room, hotel, user }: RoomProps) {
            </div>
            <GuestDetails user={user} booking={booking} isMobile={false} />
          </div>
+
          <div className={styles.bookingInformation}>
-            <div className={styles.bookingCode}></div>
+            {booking?.bookingCode && (
+              <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 className={styles.priceDetails}>
              <div className={styles.price}>
                <Body color="uiTextHighContrast">
--- a/apps/scandic-web/components/HotelReservation/MyStay/Room/room.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Room/room.module.css
@@ -6,6 +6,11 @@
  padding: var(--Spacing-x3) 0;
 }

+.bookingCode {
+  display: flex;
+  gap: var(--Spacing-x1);
+}
+
@media (min-width: 768px) {
  .room {
    background-color: transparent;
@@ -261,6 +266,7 @@
  .bookingInformation {
    flex-direction: row;
    justify-content: space-between;
+    align-items: flex-start;
  }
 }

--- a/apps/scandic-web/components/Icons/BookingCode.tsx
+++ b/apps/scandic-web/components/Icons/BookingCode.tsx
@@ -0,0 +1,29 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function BookingCodeIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.6734 2.27895C12.3015 1.90702 11.6985 1.90702 11.3266 2.27895L8.89123 4.71429H5.66667C5.14068 4.71429 4.71428 5.14068 4.71428 5.66667V8.89123L2.27895 11.3266C1.90702 11.6985 1.90702 12.3015 2.27895 12.6734L4.71428 15.1088V18.3333C4.71428 18.8593 5.14068 19.2857 5.66667 19.2857H8.89122L11.3266 21.7211C11.6985 22.093 12.3015 22.093 12.6734 21.7211L15.1088 19.2857H18.3333C18.8593 19.2857 19.2857 18.8593 19.2857 18.3333V15.1088L21.7211 12.6734C22.093 12.3015 22.093 11.6985 21.7211 11.3266L19.2857 8.89122V5.66667C19.2857 5.14068 18.8593 4.71429 18.3333 4.71429H15.1088L12.6734 2.27895ZM15.6957 8.30441C16.1014 8.71015 16.1014 9.36798 15.6957 9.77372L9.77363 15.6958C9.36789 16.1015 8.71006 16.1015 8.30432 15.6958C7.89858 15.2901 7.89858 14.6322 8.30432 14.2265L14.2264 8.30441C14.6321 7.89867 15.29 7.89867 15.6957 8.30441ZM9.53248 11.0131C10.3502 11.0131 11.013 10.3502 11.013 9.53257C11.013 8.7149 10.3502 8.05205 9.53248 8.05205C8.71481 8.05205 8.05196 8.7149 8.05196 9.53257C8.05196 10.3502 8.71481 11.0131 9.53248 11.0131ZM15.9481 14.4676C15.9481 15.2853 15.2852 15.9482 14.4675 15.9482C13.6499 15.9482 12.987 15.2853 12.987 14.4676C12.987 13.65 13.6499 12.9871 14.4675 12.9871C15.2852 12.9871 15.9481 13.65 15.9481 14.4676Z"
+        fill="#26201E"
+      />
+    </svg>
+  )
+}
--- a/apps/scandic-web/components/Icons/index.tsx
+++ b/apps/scandic-web/components/Icons/index.tsx
@@ -26,6 +26,7 @@ export { default as SingleBedIcon } from "./Beds/SingleBed"
 export { default as TwinBedsIcon } from "./Beds/TwinBeds"
 export { default as BikeIcon } from "./Bike"
 export { default as BikingIcon } from "./Biking"
+export { default as BookingCodeIcon } from "./BookingCode"
 export { default as BreakfastIcon } from "./Breakfast"
 export { default as BusinessIcon } from "./Business"
 export { default as CableIcon } from "./Cable"
--- a/apps/scandic-web/i18n/dictionaries/da.json
+++ b/apps/scandic-web/i18n/dictionaries/da.json
@@ -86,6 +86,7 @@
  "Book your next stay": "Book your next stay",
  "Book {type} parking": "Book {type} parkering",
  "Booking": "Booking",
+  "Booking code": "Bookingkode",
  "Booking confirmation": "Booking bekræftelse",
  "Booking number": "Bookingnummer",
  "Booking policy": "Booking politik",
--- a/apps/scandic-web/i18n/dictionaries/de.json
+++ b/apps/scandic-web/i18n/dictionaries/de.json
@@ -87,6 +87,7 @@
  "Book your next stay": "Book your next stay",
  "Book {type} parking": "Buchen Sie {type} Parkplatz",
  "Booking": "Booking",
+  "Booking code": "Buchungscode",
  "Booking confirmation": "Buchungsbestätigung",
  "Booking number": "Buchungsnummer",
  "Booking policy": "Buchungsbedingungen",
--- a/apps/scandic-web/i18n/dictionaries/en.json
+++ b/apps/scandic-web/i18n/dictionaries/en.json
@@ -86,6 +86,7 @@
  "Book your next stay": "Book your next stay",
  "Book {type} parking": "Book {type} parking",
  "Booking": "Booking",
+  "Booking code": "Booking code",
  "Booking confirmation": "Booking confirmation",
  "Booking number": "Booking number",
  "Booking policy": "Booking policy",
--- a/apps/scandic-web/i18n/dictionaries/fi.json
+++ b/apps/scandic-web/i18n/dictionaries/fi.json
@@ -85,6 +85,7 @@
  "Book your next stay": "Book your next stay",
  "Book {type} parking": "Varaa {type} pysäköinti",
  "Booking": "Booking",
+  "Booking code": "Varauskoodi",
  "Booking confirmation": "Varausvahvistus",
  "Booking number": "Varausnumero",
  "Booking policy": "Varauskäytäntö",
--- a/apps/scandic-web/i18n/dictionaries/no.json
+++ b/apps/scandic-web/i18n/dictionaries/no.json
@@ -85,6 +85,7 @@
  "Book your next stay": "Book your next stay",
  "Book {type} parking": "Book {type} parkering",
  "Booking": "Booking",
+  "Booking code": "Bestillingskode",
  "Booking confirmation": "Bestillingsbekreftelse",
  "Booking number": "Bestillingsnummer",
  "Booking policy": "Bestillingsbetingelser",
--- a/apps/scandic-web/i18n/dictionaries/sv.json
+++ b/apps/scandic-web/i18n/dictionaries/sv.json
@@ -85,6 +85,7 @@
  "Book your next stay": "Book your next stay",
  "Book {type} parking": "Boka {type} parkering",
  "Booking": "Booking",
+  "Booking code": "Bokningskod",
  "Booking confirmation": "Bokningsbekräftelse",
  "Booking number": "Bokningsnummer",
  "Booking policy": "Bokningsvillkor",
--- a/apps/scandic-web/server/routers/booking/output.ts
+++ b/apps/scandic-web/server/routers/booking/output.ts
@@ -196,6 +196,7 @@ export const bookingConfirmationSchema = z
        childBedPreferences: z.array(childBedPreferencesSchema).default([]),
        childrenAges: z.array(z.number().int()).default([]),
        canChangeDate: z.boolean(),
+        bookingCode: z.string().nullable(),
        computedReservationStatus: z.string().nullable().default(""),
        confirmationNumber: z.string().nullable().default(""),
        createDateTime: z.date({ coerce: true }),