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