Merged in feat/book-425-optimize-campaign-rate-card (pull request #3015)

Feat/book 425 optimize campaign rate card

* feat(BOOK-425): design updates to RateCard

* feat(BOOK-425): design updates to campaign BookingCodeChip

* feat(BOOK-425): fixed breakfast message & booking code chips on select rate and enter detailss

* feat(BOOK-425): fixed booking code chip on Booking Confirmation page

* fixed draft comments

* fixed more comments

* feat(BOOK-425): removed fixed height from RateCard banner

* fixed another variable comment

* fixed more pr comments

* fixed more pr comments

* updated ratecard campaign standard rate title color

* removed deconstructed props


Approved-by: Bianca Widstam
Approved-by: Erik Tiekstra

packages/design-system/lib/components/BookingCodeChip/index.tsx

@@ -1,4 +1,3 @@
-import { Button as ButtonRAC } from 'react-aria-components'
 import { useIntl } from 'react-intl'
 
 import IconChip from '../IconChip'
@@ -8,6 +7,7 @@ import { MaterialIcon } from '../Icons/MaterialIcon'
 import { Typography } from '../Typography'
 
 import styles from './bookingCodeChip.module.css'
+import { IconButton } from '../IconButton'
 
 type BaseBookingCodeChipProps = {
   alignCenter?: boolean
@@ -19,6 +19,7 @@ type BaseBookingCodeChipProps = {
 }
 type BookingCodeChipWithoutCloseButtonProps = BaseBookingCodeChipProps & {
   withCloseButton?: false
+  onClose?: undefined
 }
 type BookingCodeChipWithCloseButtonProps = BaseBookingCodeChipProps & {
   withCloseButton: true
@@ -36,7 +37,8 @@ export function BookingCodeChip({
   isUnavailable,
   withText = true,
   filledIcon = false,
-  ...props
+  withCloseButton,
+  onClose,
 }: BookingCodeChipProps) {
   const intl = useIntl()
 
@@ -46,9 +48,13 @@ export function BookingCodeChip({
         color="green"
         icon={
           filledIcon ? (
-            <FilledDiscountIcon color="Icon/Feedback/Success" />
+            <MaterialIcon
+              icon="sell"
+              color="Icon/Feedback/Success"
+              isFilled={!!filledIcon}
+            />
           ) : (
-            <DiscountIcon color="Icon/Feedback/Success" />
+            <MaterialIcon icon="sell" color="Icon/Feedback/Success" />
           )
         }
         className={alignCenter ? styles.center : undefined}
@@ -64,10 +70,30 @@ export function BookingCodeChip({
           </Typography>
           {bookingCode && (
             <Typography variant="Body/Supporting text (caption)/smRegular">
-              <span>{bookingCode}</span>
+              {/*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>
     )
   }
@@ -105,12 +131,24 @@ export function BookingCodeChip({
           <span>{bookingCode}</span>
         </Typography>
       </p>
-      {props.withCloseButton && (
-        <>
-          <ButtonRAC className={styles.removeButton} onPress={props.onClose}>
-            <MaterialIcon icon="close" size={16} color="CurrentColor" />
-          </ButtonRAC>
-        </>
+      {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/Information"
+          />
+        </IconButton>
       )}
     </IconChip>
   )

packages/design-system/lib/components/RateCard/Campaign/index.tsx

@@ -1,3 +1,5 @@
+import { cx } from 'class-variance-authority'
+
 import { Typography } from '../../Typography'
 import { Rate, RateTermDetails } from '../types'
 
@@ -56,9 +58,12 @@ export default function CampaignRateCard({
         onChange={handleChange}
       />
       <div className={classNames}>
-        <Typography variant="Label/xsBold">
-          <p className={styles.banner}>{bannerText}</p>
-        </Typography>
+        <div className={styles.banner}>
+          <MaterialIcon size={16} icon="sell" color="CurrentColor" />
+          <Typography variant="Label/xsBold">
+            <p>{bannerText}</p>
+          </Typography>
+        </div>
         <div className={styles.container}>
           <header>
             <Typography variant="Tag/sm">
@@ -67,7 +72,7 @@ export default function CampaignRateCard({
                   title={rateTitle}
                   subtitle={paymentTerm}
                   trigger={
-                    <IconButton theme="Black" style="Muted">
+                    <IconButton theme="Black" style="Muted" wrapping>
                       <MaterialIcon
                         icon="info"
                         size={20}
@@ -109,14 +114,17 @@ export default function CampaignRateCard({
             </div>
           </header>
           <div className={styles.content}>
-            <div
-              className={`${styles.rateRow} ${isHighlightedRate ? styles.highlightedRate : ''}`}
-            >
+            <div className={styles.rateRow}>
               <Typography variant="Body/Supporting text (caption)/smBold">
                 <p>{rate.label}</p>
               </Typography>
               <Typography variant="Title/Subtitle/md">
-                <p>
+                <p
+                  className={cx(
+                    styles.rate,
+                    isHighlightedRate && styles.highlightedRate
+                  )}
+                >
                   {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                   {`${rate.price} `}
                   <Typography variant="Body/Supporting text (caption)/smBold">

packages/design-system/lib/components/RateCard/Code/index.tsx

@@ -63,7 +63,7 @@ export default function CodeRateCard({
                   title={rateTitle}
                   subtitle={paymentTerm}
                   trigger={
-                    <IconButton theme="Black" style="Muted">
+                    <IconButton theme="Black" style="Muted" wrapping>
                       <MaterialIcon
                         icon="info"
                         size={20}

packages/design-system/lib/components/RateCard/Points/index.tsx

@@ -49,7 +49,7 @@ export default function PointsRateCard({
                 title={rateTitle}
                 subtitle={paymentTerm}
                 trigger={
-                  <IconButton theme="Black" style="Muted">
+                  <IconButton theme="Black" style="Muted" wrapping>
                     <MaterialIcon icon="info" size={20} color="Icon/Default" />
                   </IconButton>
                 }

packages/design-system/lib/components/RateCard/Regular/index.tsx

@@ -56,7 +56,7 @@ export default function RegularRateCard({
                   title={rateTitle}
                   subtitle={paymentTerm}
                   trigger={
-                    <IconButton theme="Black" style="Muted">
+                    <IconButton theme="Black" style="Muted" wrapping>
                       <MaterialIcon
                         icon="info"
                         size={20}

packages/design-system/lib/components/RateCard/rate-card.module.css

@@ -58,7 +58,7 @@ label:not(:has(.radio:checked)) .checkIcon {
   border-top-right-radius: var(--Corner-radius-md);
   text-align: center;
   color: var(--Text-Inverted);
-  padding: var(--Space-x05) 0;
+  padding: var(--Space-x05) var(--Space-x1);
   text-transform: none;
 }
 
@@ -66,7 +66,6 @@ label:not(:has(.radio:checked)) .checkIcon {
   display: flex;
   flex-direction: column;
   gap: var(--Space-x1);
-
   padding: var(--Space-x1) var(--Space-x15) var(--Space-x15);
 }
 
@@ -100,7 +99,7 @@ label:not(:has(.radio:checked)) .checkIcon {
 }
 
 .highlightedRate {
-  color: var(--Surface-Brand-Primary-1-OnSurface-Accent);
+  color: var(--Text-Accent-Primary);
 }
 
 .textSecondary {
@@ -160,7 +159,19 @@ label:not(:has(.radio:checked)) .checkIcon {
 }
 
 .variant-campaign .banner {
-  background-color: var(--Surface-Accent-3);
+  background-color: var(
+    --Surface-Feedback-Succes-light,
+    var(--Scandic-Green-60)
+  ); /*Should be updated to only use the new token --Surface-Feedback-Succes-light when tokens are up to date*/
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Space-x05);
+  align-self: stretch;
+}
+
+.variant-campaign .rate {
+  color: var(--Text-Accent-Primary);
 }
 
 .variant-code .banner {