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

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}

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" />,
 }

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

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>