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/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Row/BookingCode.tsx

@@ -14,14 +14,15 @@ export default function BookingCodeRow({
   bookingCode,
   isCampaignRate,
 }: BookingCodeRowProps) {
-  if (!bookingCode) {
+  if (!bookingCode && !isCampaignRate) {
     return null
   }
 
   return (
     <tr className={styles.row}>
-      <td colSpan={2} align="left">
+      <td colSpan={2} align="center" className={styles.bookingCodeCell}>
         <BookingCodeChip
+          alignCenter
           bookingCode={bookingCode}
           isCampaign={isCampaignRate}
         />

packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Row/Price/Regular.tsx

@@ -23,12 +23,14 @@ export interface RegularPriceType {
 
 interface RegularPriceProps extends SharedPriceRowProps {
   isMemberRate: boolean
+  isCampaignRate?: boolean
   price: RegularPriceType["regular"]
 }
 
 export default function RegularPrice({
   bedType,
   isMemberRate,
+  isCampaignRate,
   nights,
   packages,
   price,
@@ -58,7 +60,8 @@ export default function RegularPrice({
   if (regularPriceIsHigherThanPrice) {
     regularCharge = formatPrice(intl, price.regularPricePerStay, price.currency)
   }
-  const isDiscounted = isMemberRate || regularPriceIsHigherThanPrice
+  const isDiscounted =
+    isMemberRate || isCampaignRate || regularPriceIsHigherThanPrice
 
   return (
     <>

packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/Row/row.module.css

@@ -19,3 +19,8 @@
   text-decoration: line-through;
   color: var(--Text-Secondary);
 }
+
+.bookingCodeCell {
+  justify-content: center;
+  width: 100%;
+}

packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/index.tsx

@@ -53,7 +53,7 @@ interface Room {
   childrenInRoom: Child[] | undefined
   packages: Packages | null
   price: RoomPrice
-  rateDefinition: Pick<RateDefinition, "isMemberRate">
+  rateDefinition: Pick<RateDefinition, "isMemberRate" | "isCampaignRate">
   roomType: string
 }
 
@@ -101,6 +101,9 @@ export default function PriceDetailsTable({
     if (room.rateDefinition.isMemberRate) {
       return true
     }
+    if (room.rateDefinition.isCampaignRate) {
+      return true
+    }
     if (!room.price.regular) {
       return false
     }
@@ -108,6 +111,9 @@ export default function PriceDetailsTable({
     return room.price.regular.pricePerStay > room.price.regular.pricePerStay
   })
 
+  const allRoomsHasCampaignRate = rooms.every(
+    (room) => room.rateDefinition.isCampaignRate
+  )
   return (
     <table className={styles.priceDetailsTable}>
       {rooms.map((room, idx) => {
@@ -176,6 +182,7 @@ export default function PriceDetailsTable({
                 bedType={room.bedType}
                 packages={room.packages}
                 isMemberRate={isMemberRate}
+                isCampaignRate={room.rateDefinition.isCampaignRate}
                 nights={nights}
                 price={price}
               />
@@ -211,6 +218,15 @@ export default function PriceDetailsTable({
               currency={currency}
               nights={nights}
             />
+            {rooms.length !== 1 &&
+              (room.rateDefinition.isCampaignRate || !!bookingCode) && (
+                <Tbody>
+                  <BookingCodeRow
+                    isCampaignRate={room.rateDefinition.isCampaignRate}
+                    bookingCode={bookingCode}
+                  />
+                </Tbody>
+              )}
           </Fragment>
         )
       })}
@@ -223,9 +239,8 @@ export default function PriceDetailsTable({
         />
 
         <VatRow totalPrice={totalPrice} vat={vat} />
-
         <LargeRow
-          allPricesIsDiscounted={allPricesIsDiscounted}
+          allPricesIsDiscounted={!!allPricesIsDiscounted || !!isCampaignRate}
           label={intl.formatMessage({
             id: "booking.priceIncludingVat",
             defaultMessage: "Price including VAT",
@@ -233,10 +248,15 @@ export default function PriceDetailsTable({
           price={totalPrice}
         />
 
-        <BookingCodeRow
-          isCampaignRate={isCampaignRate}
-          bookingCode={bookingCode}
-        />
+        {rooms.length === 1 && (allRoomsHasCampaignRate || bookingCode) && (
+          <>
+            <tr className={styles.bookingCode} />
+            <BookingCodeRow
+              isCampaignRate={isCampaignRate}
+              bookingCode={bookingCode}
+            />
+          </>
+        )}
       </Tbody>
     </table>
   )

packages/booking-flow/lib/components/PriceDetailsModal/PriceDetailsTable/priceDetailsTable.module.css

@@ -8,3 +8,7 @@
     min-width: 512px;
   }
 }
+
+.bookingCode {
+  padding-top: var(--Space-x3);
+}

packages/booking-flow/lib/components/PriceDetailsModal/index.tsx

@@ -13,7 +13,8 @@ function Trigger({ title }: { title: string }) {
   return (
     <Button
       variant="Text"
-      typography="Body/Supporting text (caption)/smBold"
+      size="Medium"
+      typography="Body/Paragraph/mdBold"
       wrapping={false}
     >
       {title}