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

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);

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,79 +40,111 @@ export function HotelPriceCard({
         (isMemberPrice ? (
           <div className={styles.priceRow}>
             <dt>
-              <Caption color="red">
-                {intl.formatMessage({
-                  id: 'booking.memberPrice',
-                  defaultMessage: 'Member price',
-                })}
-              </Caption>
+              <Typography
+                variant="Body/Supporting text (caption)/smRegular"
+                className={styles.redColor}
+              >
+                <p>
+                  {intl.formatMessage({
+                    id: 'booking.memberPrice',
+                    defaultMessage: 'Member price',
+                  })}
+                </p>
+              </Typography>
             </dt>
           </div>
         ) : (
           <div className={styles.priceRow}>
             <dt>
-              <Caption color="uiTextHighContrast">
-                {intl.formatMessage({
-                  id: 'booking.standardPrice',
-                  defaultMessage: 'Standard price',
-                })}
-              </Caption>
+              <Typography
+                variant="Body/Supporting text (caption)/smRegular"
+                className={styles.defaultColor}
+              >
+                <p>
+                  {intl.formatMessage({
+                    id: 'booking.standardPrice',
+                    defaultMessage: 'Standard price',
+                  })}
+                </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}
           >
-            {intl.formatMessage({
-              id: 'common.from',
-              defaultMessage: 'From',
-            })}
-          </Caption>
+            <p>
+              {intl.formatMessage({
+                id: 'common.from',
+                defaultMessage: 'From',
+              })}
+            </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
+              }
             >
-              {productTypePrices.localPrice.currency}
-              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-              <span className={styles.perNight}>
-                /
-                {intl.formatMessage({
-                  id: 'common.night',
-                  defaultMessage: 'night',
-                })}
-              </span>
-            </Body>
+              <p>
+                {productTypePrices.localPrice.currency}
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                <span className={styles.perNight}>
+                  /
+                  {intl.formatMessage({
+                    id: 'common.night',
+                    defaultMessage: 'night',
+                  })}
+                </span>
+              </p>
+            </Typography>
           </div>
         </dd>
       </div>
       {productTypePrices?.requestedPrice && (
         <div className={styles.priceRow}>
           <dt>
-            <Caption color="uiTextMediumContrast">
-              {intl.formatMessage({
-                id: 'booking.approx',
-                defaultMessage: 'Approx.',
-              })}
-            </Caption>
+            <Typography
+              variant="Body/Supporting text (caption)/smRegular"
+              className={styles.secondaryColor}
+            >
+              <p>
+                {intl.formatMessage({
+                  id: 'booking.approx',
+                  defaultMessage: 'Approx.',
+                })}
+              </p>
+            </Typography>
           </dt>
           <dd>
-            <Caption color={'uiTextMediumContrast'}>
-              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-              {`${productTypePrices.requestedPrice.pricePerNight} `}
-              {productTypePrices.requestedPrice.currency}
-            </Caption>
+            <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}
+              </p>
+            </Typography>
           </dd>
         </div>
       )}
@@ -125,19 +156,29 @@ export function HotelPriceCard({
             <Divider className={styles.divider} />
             <div className={styles.priceRow}>
               <dt>
-                <Caption color="uiTextMediumContrast">
-                  {intl.formatMessage({
-                    id: 'common.total',
-                    defaultMessage: 'Total',
-                  })}
-                </Caption>
+                <Typography
+                  variant="Body/Supporting text (caption)/smRegular"
+                  className={styles.secondaryColor}
+                >
+                  <p>
+                    {intl.formatMessage({
+                      id: 'common.total',
+                      defaultMessage: 'Total',
+                    })}
+                  </p>
+                </Typography>
               </dt>
               <dd>
-                <Caption color={'uiTextMediumContrast'}>
-                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                  {`${productTypePrices.localPrice.pricePerStay} `}
-                  {productTypePrices.localPrice.currency}
-                </Caption>
+                <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}
+                  </p>
+                </Typography>
               </dd>
             </div>
           </>

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 && (