Merged in feat/BOOK-426-add-campaign-tag-select-hotel (pull request #3023)

Feat/BOOK-426 add campaign tag select hotel * feat(BOOK-426): introduce campaign tag on select hotel card * feat(BOOK-426): remove redundant tags * feat(BOOK-426): fix comments, change to typography * feat(BOOK-426): fix comments, update to cx Approved-by: Erik Tiekstra Approved-by: Matilda Landström
2025-10-29 14:10:12 +00:00
parent 5e81ec0eaf
commit ed833e714b
5 changed files with 153 additions and 69 deletions
--- a/packages/booking-flow/lib/components/HotelCardListing/index.tsx
+++ b/packages/booking-flow/lib/components/HotelCardListing/index.tsx
@@ -4,6 +4,7 @@ import { useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useMemo, useRef } from "react"
 import { useIntl } from "react-intl"

+import { RateTypeEnum } from "@scandic-hotels/common/constants/rateType"
 import {
  alternativeHotelsMap,
  selectHotelMap,
@@ -82,6 +83,18 @@ export default function HotelCardListing({
    isBookingCodeRateAvailable &&
    activeCodeFilter === BookingCodeFilterEnum.Discounted

+  const isCampaignWithBookingCode =
+    !!bookingCode &&
+    hotelData
+      .filter((hotel) => hotel.availability.bookingCode)
+      .every(
+        (hotel) =>
+          hotel.availability.productType?.public?.rateType ===
+            RateTypeEnum.PublicPromotion ||
+          hotel.availability.productType?.member?.rateType ===
+            RateTypeEnum.PublicPromotion
+      )
+
  const unfilteredHotelCount = showOnlyBookingCodeRates
    ? hotelData.filter((hotel) => hotel.availability.bookingCode).length
    : hotelData.length
@@ -233,6 +246,7 @@ export default function HotelCardListing({
            }
            type={type}
            bookingCode={bookingCode}
+            isCampaignWithBookingCode={isCampaignWithBookingCode}
            isAlternative={isAlternative}
          />
        </div>
--- a/packages/design-system/lib/components/BookingCodeChip/index.tsx
+++ b/packages/design-system/lib/components/BookingCodeChip/index.tsx
@@ -7,6 +7,7 @@ import { MaterialIcon } from '../Icons/MaterialIcon'
 import { Typography } from '../Typography'

 import styles from './bookingCodeChip.module.css'
+import { cx } from 'class-variance-authority'
 import { IconButton } from '../IconButton'

 type BaseBookingCodeChipProps = {
@@ -14,6 +15,7 @@ type BaseBookingCodeChipProps = {
  bookingCode?: string | null
  isCampaign?: boolean
  isUnavailable?: boolean
+  isCampaignUnavailable?: boolean
  withText?: boolean
  filledIcon?: boolean
 }
@@ -34,6 +36,7 @@ export function BookingCodeChip({
  alignCenter,
  bookingCode,
  isCampaign,
+  isCampaignUnavailable,
  isUnavailable,
  withText = true,
  filledIcon = false,
@@ -42,7 +45,7 @@ export function BookingCodeChip({
 }: BookingCodeChipProps) {
  const intl = useIntl()

-  if (isCampaign) {
+  if (isCampaign || isCampaignUnavailable) {
    return (
      <IconChip
        color="green"
@@ -59,7 +62,11 @@ export function BookingCodeChip({
        }
        className={alignCenter ? styles.center : undefined}
      >
-        <p className={styles.bookingCodeChip}>
+        <p
+          className={cx(styles.bookingCodeChip, {
+            [styles.unavailable]: isCampaignUnavailable,
+          })}
+        >
          <Typography variant="Body/Supporting text (caption)/smBold">
            <strong>
              {intl.formatMessage({
@@ -115,7 +122,9 @@ export function BookingCodeChip({
      className={alignCenter ? styles.center : undefined}
    >
      <p
-        className={`${styles.bookingCodeChip} ${isUnavailable ? styles.unavailable : ''}`}
+        className={cx(styles.bookingCodeChip, {
+          [styles.unavailable]: isUnavailable,
+        })}
      >
        {withText && (
          <Typography variant="Body/Supporting text (caption)/smBold">
--- a/packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css
@@ -16,6 +16,16 @@
  padding: var(--Spacing-x-quarter) 0;
 }

+.redColor {
+  color: var(--Text-Accent-Primary);
+}
+.defaultColor {
+  color: var(--Text-Default);
+}
+.secondaryColor {
+  color: var(--Text-Secondary);
+}
+
 .price {
  display: flex;
  gap: var(--Spacing-x-half);
--- a/packages/design-system/lib/components/HotelCard/HotelPriceCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelPriceCard/index.tsx
@@ -1,12 +1,9 @@
 import { cx } from 'class-variance-authority'
 import { useIntl } from 'react-intl'

-import Body from '../../Body'
-import Caption from '../../Caption'
 import { Divider } from '../../Divider'
-import Subtitle from '../../Subtitle'
 import { RateTypeEnum } from '@scandic-hotels/common/constants/rateType'
-
+import { Typography } from '../../Typography'
 import styles from './hotelPriceCard.module.css'

 type Price = {
@@ -23,12 +20,14 @@ export type PriceCardProps = {
  }
  isMemberPrice?: boolean
  className?: string
+  isCampaign?: boolean
 }

 export function HotelPriceCard({
  productTypePrices,
  isMemberPrice = false,
  className,
+  isCampaign = false,
 }: PriceCardProps) {
  const intl = useIntl()
  const isRegularOrPublicPromotionRate =
@@ -41,50 +40,71 @@ export function HotelPriceCard({
        (isMemberPrice ? (
          <div className={styles.priceRow}>
            <dt>
-              <Caption color="red">
+              <Typography
+                variant="Body/Supporting text (caption)/smRegular"
+                className={styles.redColor}
+              >
+                <p>
                  {intl.formatMessage({
                    id: 'booking.memberPrice',
                    defaultMessage: 'Member price',
                  })}
-              </Caption>
+                </p>
+              </Typography>
            </dt>
          </div>
        ) : (
          <div className={styles.priceRow}>
            <dt>
-              <Caption color="uiTextHighContrast">
+              <Typography
+                variant="Body/Supporting text (caption)/smRegular"
+                className={styles.defaultColor}
+              >
+                <p>
                  {intl.formatMessage({
                    id: 'booking.standardPrice',
                    defaultMessage: 'Standard price',
                  })}
-              </Caption>
+                </p>
+              </Typography>
            </dt>
          </div>
        ))}
      <div className={styles.priceRow}>
        <dt>
-          <Caption
-            type="bold"
-            color={isMemberPrice ? 'red' : 'uiTextHighContrast'}
+          <Typography
+            variant="Body/Supporting text (caption)/smBold"
+            className={isMemberPrice ? styles.redColor : styles.defaultColor}
          >
+            <p>
              {intl.formatMessage({
                id: 'common.from',
                defaultMessage: 'From',
              })}
-          </Caption>
+            </p>
+          </Typography>
        </dt>
        <dd>
          <div className={styles.price}>
-            <Subtitle
-              type="two"
-              color={isMemberPrice ? 'red' : 'uiTextHighContrast'}
+            <Typography
+              variant="Title/Subtitle/md"
+              className={
+                isMemberPrice || isCampaign
+                  ? styles.redColor
+                  : styles.defaultColor
+              }
            >
-              {productTypePrices.localPrice.pricePerNight}
-            </Subtitle>
-            <Body
-              color={isMemberPrice ? 'red' : 'uiTextHighContrast'}
-              textTransform="bold"
+              <p> {productTypePrices.localPrice.pricePerNight}</p>
+            </Typography>
+            <Typography
+              variant="Body/Paragraph/mdBold"
+              className={
+                isMemberPrice || isCampaign
+                  ? styles.redColor
+                  : styles.defaultColor
+              }
            >
+              <p>
                {productTypePrices.localPrice.currency}
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                <span className={styles.perNight}>
@@ -94,26 +114,37 @@ export function HotelPriceCard({
                    defaultMessage: 'night',
                  })}
                </span>
-            </Body>
+              </p>
+            </Typography>
          </div>
        </dd>
      </div>
      {productTypePrices?.requestedPrice && (
        <div className={styles.priceRow}>
          <dt>
-            <Caption color="uiTextMediumContrast">
+            <Typography
+              variant="Body/Supporting text (caption)/smRegular"
+              className={styles.secondaryColor}
+            >
+              <p>
                {intl.formatMessage({
                  id: 'booking.approx',
                  defaultMessage: 'Approx.',
                })}
-            </Caption>
+              </p>
+            </Typography>
          </dt>
          <dd>
-            <Caption color={'uiTextMediumContrast'}>
+            <Typography
+              variant="Body/Supporting text (caption)/smRegular"
+              className={styles.secondaryColor}
+            >
+              <p>
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                {`${productTypePrices.requestedPrice.pricePerNight} `}
                {productTypePrices.requestedPrice.currency}
-            </Caption>
+              </p>
+            </Typography>
          </dd>
        </div>
      )}
@@ -125,19 +156,29 @@ export function HotelPriceCard({
            <Divider className={styles.divider} />
            <div className={styles.priceRow}>
              <dt>
-                <Caption color="uiTextMediumContrast">
+                <Typography
+                  variant="Body/Supporting text (caption)/smRegular"
+                  className={styles.secondaryColor}
+                >
+                  <p>
                    {intl.formatMessage({
                      id: 'common.total',
                      defaultMessage: 'Total',
                    })}
-                </Caption>
+                  </p>
+                </Typography>
              </dt>
              <dd>
-                <Caption color={'uiTextMediumContrast'}>
+                <Typography
+                  variant="Body/Supporting text (caption)/smRegular"
+                  className={styles.secondaryColor}
+                >
+                  <p>
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                    {`${productTypePrices.localPrice.pricePerStay} `}
                    {productTypePrices.localPrice.currency}
-                </Caption>
+                  </p>
+                </Typography>
              </dd>
            </div>
          </>
--- a/packages/design-system/lib/components/HotelCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/index.tsx
@@ -108,7 +108,7 @@ export type HotelCardProps = {
  isAlternative?: boolean
  pointsCurrency?: CurrencyEnum
  fullPrice: boolean
-
+  isCampaignWithBookingCode: boolean
  lang: Lang

  belowInfoSlot: React.ReactNode
@@ -133,6 +133,7 @@ export const HotelCard = memo(
    lang,
    belowInfoSlot,
    fullPrice,
+    isCampaignWithBookingCode,
    onAddressClick,
    onHover,
    onHoverEnd,
@@ -166,6 +167,10 @@ export const HotelCard = memo(
    })

    const isDisabled = prices?.redemptions?.length && hasInsufficientPoints
+    const isCampaign =
+      prices?.public?.rateType === RateTypeEnum.PublicPromotion ||
+      prices?.member?.rateType === RateTypeEnum.PublicPromotion
+    const showBookingCodeChip = bookingCode || isCampaign

    return (
      <article
@@ -267,10 +272,14 @@ export const HotelCard = memo(
              <NoPriceAvailableCard />
            ) : (
              <>
-                {bookingCode && (
+                {showBookingCodeChip && (
                  <BookingCodeChip
                    bookingCode={bookingCode}
                    isUnavailable={fullPrice}
+                    isCampaignUnavailable={
+                      isCampaignWithBookingCode && fullPrice
+                    }
+                    isCampaign={isCampaign}
                  />
                )}
                {(!isUserLoggedIn ||
@@ -280,6 +289,7 @@ export const HotelCard = memo(
                    <HotelPriceCard
                      productTypePrices={prices.public}
                      className={styles.priceCard}
+                      isCampaign={isCampaign}
                    />
                  )}
                {prices.member && (