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