Merged in feat/BOOK-485-campaign-rate-my-stay (pull request #3120)

feat(BOOK-485): add campaign tag on my stay and update design * feat(BOOK-485): add campaign tag on my stay and update design * feat(BOOK-485): update rightAligned Approved-by: Erik Tiekstra
2025-11-12 08:19:24 +00:00
parent c8cc4138b5
commit 2c044de187
12 changed files with 102 additions and 186 deletions
--- a/apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/index.tsx
@@ -37,6 +37,7 @@ export default function PriceDetails() {
        totalPrice={totalPrice}
        vat={bookedRoom.vatPercentage}
        defaultCurrency={bookedRoom.currencyCode}
+        isCampaignRate={bookedRoom.isCampaignRate}
      />
    </div>
  )
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/BookingCode/bookingCode.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/BookingCode/bookingCode.module.css
@@ -1,5 +1,9 @@
 .row {
-  align-items: center;
  display: flex;
+  align-items: center;
  justify-content: space-between;
+
+  &.rightAligned {
+    justify-content: flex-end;
+  }
 }
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/BookingCode/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/BookingCode/index.tsx
@@ -1,8 +1,8 @@
 "use client"
+import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"

-import IconChip from "@scandic-hotels/design-system/IconChip"
-import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
+import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useMyStayStore } from "@/stores/my-stay"
@@ -11,31 +11,40 @@ import styles from "./bookingCode.module.css"

 export default function BookingCode() {
  const intl = useIntl()
-  const bookingCode = useMyStayStore((state) => state.bookedRoom.bookingCode)
+  const { bookingCode, isCampaignRate } = useMyStayStore((state) => ({
+    bookingCode: state.bookedRoom.bookingCode,
+    isCampaignRate: state.bookedRoom.isCampaignRate,
+  }))

-  if (!bookingCode) {
+  if (!bookingCode && !isCampaignRate) {
    return null
  }

-  return (
-    <div className={styles.row}>
-      <Typography variant="Body/Supporting text (caption)/smRegular">
-        <p>
-          {intl.formatMessage({
-            id: "booking.bookingCode",
-            defaultMessage: "Booking code",
-          })}
-        </p>
-      </Typography>
+  const codeType = isCampaignRate
+    ? intl.formatMessage({
+        id: "booking.campaignCode",
+        defaultMessage: "Campaign code",
+      })
+    : intl.formatMessage({
+        id: "booking.bookingCode",
+        defaultMessage: "Booking code",
+      })

-      <IconChip
-        color="blue"
-        icon={<DiscountIcon color="Icon/Feedback/Information" />}
-      >
+  const showCodeType = bookingCode || !isCampaignRate
+
+  return (
+    <div className={cx(styles.row, { [styles.rightAligned]: !showCodeType })}>
+      {showCodeType && (
        <Typography variant="Body/Supporting text (caption)/smRegular">
-          <span>{bookingCode}</span>
+          <p>{codeType}</p>
        </Typography>
-      </IconChip>
+      )}
+
+      <BookingCodeChip
+        bookingCode={bookingCode}
+        isCampaign={isCampaignRate}
+        withText={!showCodeType}
+      />
    </div>
  )
 }
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/BookingCode.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/BookingCode.tsx
@@ -1,42 +0,0 @@
-"use client"
-import { useIntl } from "react-intl"
-
-import IconChip from "@scandic-hotels/design-system/IconChip"
-import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import { useMyStayStore } from "@/stores/my-stay"
-
-export default function BookingCode() {
-  const intl = useIntl()
-
-  const bookingCode = useMyStayStore((state) => state.bookedRoom.bookingCode)
-
-  if (!bookingCode) {
-    return null
-  }
-
-  return (
-    <Typography variant="Body/Supporting text (caption)/smBold">
-      <IconChip
-        color="blue"
-        icon={<DiscountIcon color="Icon/Feedback/Information" />}
-      >
-        {intl.formatMessage(
-          {
-            id: "booking.bookingCodeWithValue",
-            defaultMessage: "<strong>Booking code</strong>: {value}",
-          },
-          {
-            value: bookingCode,
-            strong: (text) => (
-              <Typography variant="Body/Supporting text (caption)/smBold">
-                <strong>{text}</strong>
-              </Typography>
-            ),
-          }
-        )}
-      </IconChip>
-    </Typography>
-  )
-}
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/index.tsx
@@ -1,12 +1,19 @@
-import BookingCode from "./BookingCode"
+import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
 import PriceDetails from "./PriceDetails"

 import styles from "./information.module.css"

 export default function BookingInformation() {
+  const { bookingCode, isCampaignRate } = useMyStayStore((state) => ({
+    bookingCode: state.bookedRoom.bookingCode,
+    isCampaignRate: state.bookedRoom.isCampaignRate,
+  }))
  return (
    <div className={styles.bookingInformation}>
-      <BookingCode />
+      <BookingCodeChip bookingCode={bookingCode} isCampaign={isCampaignRate} />
      <PriceDetails />
    </div>
  )
--- a/apps/scandic-web/components/HotelReservation/MyStay/utils/mapRoomDetails.ts
+++ b/apps/scandic-web/components/HotelReservation/MyStay/utils/mapRoomDetails.ts
@@ -138,6 +138,7 @@ export function mapRoomDetails({

  return {
    ...booking,
+    isCampaignRate: booking.rateDefinition.isCampaignRate,
    bedType: {
      description: room?.bedType.mainBed.description ?? "",
      roomTypeCode: room?.bedType.code ?? "",
--- a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeekContent/index.tsx
+++ b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeekContent/index.tsx
@@ -7,8 +7,8 @@ import { dt } from "@scandic-hotels/common/dt"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Accordion from "@scandic-hotels/design-system/Accordion"
 import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
+import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
 import IconChip from "@scandic-hotels/design-system/IconChip"
-import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -422,29 +422,10 @@ export default function BookedRoomSidePeekContent({
            </div>
          </div>
        </div>
-        {bookingCode && (
-          <Typography variant="Body/Supporting text (caption)/smBold">
-            <IconChip
-              color="blue"
-              icon={<DiscountIcon color="Icon/Feedback/Information" />}
-            >
-              {intl.formatMessage(
-                {
-                  id: "booking.bookingCodeWithValue",
-                  defaultMessage: "<strong>Booking code</strong>: {value}",
-                },
-                {
-                  value: bookingCode,
-                  strong: (text) => (
-                    <Typography variant="Body/Supporting text (caption)/smBold">
-                      <strong>{text}</strong>
-                    </Typography>
-                  ),
-                }
-              )}
-            </IconChip>
-          </Typography>
-        )}
+        <BookingCodeChip
+          bookingCode={bookingCode}
+          isCampaign={rateDefinition.isCampaignRate}
+        />

        <GuestDetails
          refId={refId}
--- a/apps/scandic-web/types/stores/my-stay.ts
+++ b/apps/scandic-web/types/stores/my-stay.ts
@@ -18,6 +18,7 @@ export type Room = Omit<
  BookingConfirmation["booking"],
  "packages" | "roomPrice"
 > & {
+  isCampaignRate: boolean
  bedType: BedTypeSchema
  breakfast: Omit<BreakfastPackage, "requestedPrice"> | undefined | false
  breakfastChildren: Omit<BreakfastPackage, "requestedPrice"> | null
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RemoveBookingCodeButton/RemoveBookingCodeButton.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RemoveBookingCodeButton/RemoveBookingCodeButton.tsx
@@ -16,7 +16,6 @@ export function RemoveBookingCodeButton() {
  return (
    <BookingCodeChip
      bookingCode={bookingCode}
-      filledIcon
      isCampaign={hasCampaignRates}
      withCloseButton={true}
      withText={false}
--- a/packages/design-system/lib/components/BookingCodeChip/BookingCodeChip.stories.tsx
+++ b/packages/design-system/lib/components/BookingCodeChip/BookingCodeChip.stories.tsx
@@ -23,11 +23,6 @@ export const WithoutText: Story = {
  render: () => <BookingCodeChip bookingCode="ABC123" withText={false} />,
 }

-export const FilledIcon: Story = {
-  args: {},
-  render: () => <BookingCodeChip bookingCode="ABC123" filledIcon />,
-}
-
 export const Unavailable: Story = {
  args: {},
  render: () => <BookingCodeChip bookingCode="ABC123" isUnavailable />,
@@ -50,9 +45,7 @@ export const CampaignWithoutBookingCode: Story = {
  render: () => <BookingCodeChip isCampaign />,
 }

-export const CampaignFilledIcon: Story = {
+export const CampaignWithBookingCode: Story = {
  args: {},
-  render: () => (
-    <BookingCodeChip isCampaign bookingCode="SUMMER25" filledIcon />
-  ),
+  render: () => <BookingCodeChip isCampaign bookingCode="SUMMER25" />,
 }
--- a/packages/design-system/lib/components/BookingCodeChip/bookingCodeChip.module.css
+++ b/packages/design-system/lib/components/BookingCodeChip/bookingCodeChip.module.css
@@ -7,6 +7,12 @@
  text-decoration: line-through;
 }

+.separator {
+  text-decoration: none;
+  display: inline-block;
+  margin-right: var(--Space-x05);
+}
+
 .center {
  justify-content: center;
 }
--- a/packages/design-system/lib/components/BookingCodeChip/index.tsx
+++ b/packages/design-system/lib/components/BookingCodeChip/index.tsx
@@ -1,7 +1,6 @@
 import { useIntl } from 'react-intl'

 import IconChip from '../IconChip'
-import DiscountIcon from '../Icons/Nucleo/Benefits/discount-2-2'
 import FilledDiscountIcon from '../Icons/Nucleo/Benefits/FilledDiscount'
 import { MaterialIcon } from '../Icons/MaterialIcon'
 import { Typography } from '../Typography'
@@ -17,7 +16,6 @@ type BaseBookingCodeChipProps = {
  isUnavailable?: boolean
  isCampaignUnavailable?: boolean
  withText?: boolean
-  filledIcon?: boolean
 }
 type BookingCodeChipWithoutCloseButtonProps = BaseBookingCodeChipProps & {
  withCloseButton?: false
@@ -39,106 +37,68 @@ export function BookingCodeChip({
  isCampaignUnavailable,
  isUnavailable,
  withText = true,
-  filledIcon = false,
  withCloseButton,
  onClose,
 }: BookingCodeChipProps) {
  const intl = useIntl()

-  if (isCampaign || isCampaignUnavailable) {
-    return (
-      <IconChip
-        color="green"
-        icon={
-          filledIcon ? (
-            <MaterialIcon
-              icon="sell"
-              color="Icon/Feedback/Success"
-              isFilled={!!filledIcon}
-            />
-          ) : (
-            <MaterialIcon icon="sell" color="Icon/Feedback/Success" />
-          )
-        }
-        className={alignCenter ? styles.center : undefined}
-      >
-        <p
-          className={cx(styles.bookingCodeChip, {
-            [styles.unavailable]: isCampaignUnavailable,
-          })}
-        >
-          <Typography variant="Body/Supporting text (caption)/smBold">
-            <strong>
-              {intl.formatMessage({
-                id: 'booking.campaign',
-                defaultMessage: 'Campaign',
-              })}
-            </strong>
-          </Typography>
-          {bookingCode && (
-            <Typography variant="Body/Supporting text (caption)/smRegular">
-              {/*eslint-disable-next-line formatjs/no-literal-string-in-jsx*/}
-              <span>∙ {bookingCode}</span>
-            </Typography>
-          )}
-        </p>
-        {withCloseButton && (
-          <IconButton
-            style="Muted"
-            theme="Inverted"
-            wrapping
-            className={styles.removeButton}
-            onPress={onClose}
-            aria-label={intl.formatMessage({
-              id: 'booking.removeBookingCode',
-              defaultMessage: 'Remove booking code',
-            })}
-          >
-            <MaterialIcon
-              icon="close"
-              size={16}
-              color="Icon/Feedback/Success"
-            />
-          </IconButton>
-        )}
-      </IconChip>
-    )
-  }
-
-  if (!bookingCode) {
+  const isCampaignRate = isCampaign || isCampaignUnavailable
+  if (!isCampaignRate && !bookingCode) {
    return null
  }

+  const color = isCampaignRate ? 'green' : 'blue'
+
+  const iconColor = isCampaignRate
+    ? 'Icon/Feedback/Success'
+    : 'Icon/Feedback/Information'
+
+  const isUnavailableRate = isCampaignRate
+    ? isCampaignUnavailable
+    : isUnavailable
+
+  const label = isCampaignRate
+    ? intl.formatMessage({
+        id: 'booking.campaign',
+        defaultMessage: 'Campaign',
+      })
+    : intl.formatMessage({
+        id: 'booking.bookingCode',
+        defaultMessage: 'Booking code',
+      })
+
+  const icon = isCampaignRate ? (
+    <MaterialIcon icon="sell" color={iconColor} isFilled={false} size={20} />
+  ) : (
+    <FilledDiscountIcon fill={iconColor} size={20} />
+  )
+
  return (
    <IconChip
-      color="blue"
-      icon={
-        filledIcon ? (
-          <FilledDiscountIcon fill="Icon/Feedback/Information" />
-        ) : (
-          <DiscountIcon color="Icon/Feedback/Information" />
-        )
-      }
+      color={color}
+      icon={icon}
      className={alignCenter ? styles.center : undefined}
    >
      <p
        className={cx(styles.bookingCodeChip, {
-          [styles.unavailable]: isUnavailable,
+          [styles.unavailable]: isUnavailableRate,
        })}
      >
        {withText && (
          <Typography variant="Body/Supporting text (caption)/smBold">
-            <strong>
-              {intl.formatMessage({
-                id: 'booking.bookingCode',
-                defaultMessage: 'Booking code',
-              })}
-            </strong>
+            <strong>{label}</strong>
+          </Typography>
+        )}
+
+        {bookingCode && (
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <span>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {withText && <span className={styles.separator}>∙</span>}
+              {bookingCode}
+            </span>
          </Typography>
        )}
-        <Typography variant="Body/Supporting text (caption)/smRegular">
-          <span>{bookingCode}</span>
-        </Typography>
      </p>
      {withCloseButton && (
        <IconButton
@@ -152,11 +112,7 @@ export function BookingCodeChip({
            defaultMessage: 'Remove booking code',
          })}
        >
-          <MaterialIcon
-            icon="close"
-            size={16}
-            color="Icon/Feedback/Information"
-          />
+          <MaterialIcon icon="close" size={16} color={iconColor} />
        </IconButton>
      )}
    </IconChip>