Merged in fix/book-425-color-change-campaign-rate-card (pull request #3040)

fix(BOOK-425): fixed the color on campaign member rate name

* fix(BOOK-425): fixed the color on standard rate name

* listening to api resonse displayPriceRed again

* updated the conditional css class syntax


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

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Campaign.tsx

@@ -240,6 +240,7 @@ function Inner({
       isHighlightedRate={
         !!product.rateDefinition?.displayPriceRed || isMainRoomAndLoggedIn
       }
+      isHighlightedRateLabel={isMainRoomAndLoggedIn}
       memberRate={
         pricePerNightMember && !isMainRoomAndLoggedIn
           ? {

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

@@ -21,6 +21,7 @@ interface CampaignRateCardProps {
   omnibusRate?: Rate
   comparisonRate?: Omit<Rate, 'label'>
   isHighlightedRate?: boolean
+  isHighlightedRateLabel?: boolean
   approximateRate?: Rate
   handleChange: () => void
   handleTermsClick?: () => void
@@ -40,6 +41,7 @@ export default function CampaignRateCard({
   omnibusRate,
   bannerText,
   isHighlightedRate,
+  isHighlightedRateLabel,
   handleChange,
   rateTermDetails,
 }: CampaignRateCardProps) {
@@ -114,16 +116,19 @@ export default function CampaignRateCard({
             </div>
           </header>
           <div className={styles.content}>
-            <div className={styles.rateRow}>
+            <div
+              className={cx(styles.rateRow, {
+                [styles.highlightedRate]: isHighlightedRateLabel,
+              })}
+            >
               <Typography variant="Body/Supporting text (caption)/smBold">
                 <p>{rate.label}</p>
               </Typography>
               <Typography variant="Title/Subtitle/md">
                 <p
-                  className={cx(
-                    styles.rate,
-                    isHighlightedRate && styles.highlightedRate
-                  )}
+                  className={cx(styles.rateRow, {
+                    [styles.highlightedRate]: isHighlightedRate,
+                  })}
                 >
                   {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                   {`${rate.price} `}