Merged in feat/SW-2398-ui-update-for-booking-codes (pull request #1862)

feat: SW-2398 UI updates booking codes

* feat: SW-2398 UI updates booking codes

* feat: SW-2398 Rate cards UI changes

* feat: SW-2398 Optimized css with vars and chip code

* feat: SW-2398 Optimized code as review comments

* feat: SW-2398 Optimized code

* feat: SW-2398 Optimized code and mobile UX

* feat: SW-2398 Optimized code

* feat: SW-2398 Fixed UI

* feat: SW-2398 Updated animation


Approved-by: Erik Tiekstra

apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/BookingCode.tsx

@@ -1,47 +1,32 @@
 "use client"
-import { useIntl } from "react-intl"
 
-import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import IconChip from "@/components/TempDesignSystem/IconChip"
+import BookingCodeChip from "@/components/BookingCodeChip"
 
 import styles from "./row.module.css"
 
 interface BookingCodeRowProps {
   bookingCode?: string
+  isBreakfastIncluded?: boolean
+  isCampaignRate?: boolean
 }
 
-export default function BookingCodeRow({ bookingCode }: BookingCodeRowProps) {
-  const intl = useIntl()
-
+export default function BookingCodeRow({
+  bookingCode,
+  isBreakfastIncluded,
+  isCampaignRate,
+}: BookingCodeRowProps) {
   if (!bookingCode) {
     return null
   }
 
-  const text = intl.formatMessage(
-    { defaultMessage: "<strong>Booking code</strong>: {value}" },
-    {
-      value: bookingCode,
-      strong: (text) => (
-        <Typography variant="Body/Supporting text (caption)/smBold">
-          <strong>{text}</strong>
-        </Typography>
-      ),
-    }
-  )
-
   return (
     <tr className={styles.row}>
       <td colSpan={2} align="left">
-        <Typography variant="Body/Supporting text (caption)/smRegular">
-          <IconChip
-            color="blue"
-            icon={<DiscountIcon color="Icon/Feedback/Information" />}
-          >
-            {text}
-          </IconChip>
-        </Typography>
+        <BookingCodeChip
+          bookingCode={bookingCode}
+          isBreakfastIncluded={isBreakfastIncluded}
+          isCampaign={isCampaignRate}
+        />
       </td>
     </tr>
   )

apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/index.tsx

@@ -53,6 +53,7 @@ export interface Room {
 export interface PriceDetailsTableProps {
   bookingCode?: string
   fromDate: string
+  isCampaignRate?: boolean
   rooms: Room[]
   toDate: string
   totalPrice: Price
@@ -62,6 +63,7 @@ export interface PriceDetailsTableProps {
 export default function PriceDetailsTable({
   bookingCode,
   fromDate,
+  isCampaignRate,
   rooms,
   toDate,
   totalPrice,
@@ -83,6 +85,8 @@ export default function PriceDetailsTable({
   const allRoomsPackages: Package[] = rooms
     .flatMap((r) => r.packages)
     .filter((r): r is Package => !!r)
+
+  const isAllBreakfastIncluded = rooms.every((room) => room.breakfastIncluded)
   return (
     <table className={styles.priceDetailsTable}>
       {rooms.map((room, idx) => {
@@ -207,7 +211,11 @@ export default function PriceDetailsTable({
           regularPrice={totalPrice.local.regularPrice}
         />
 
-        <BookingCodeRow bookingCode={bookingCode} />
+        <BookingCodeRow
+          isCampaignRate={isCampaignRate}
+          isBreakfastIncluded={isAllBreakfastIncluded}
+          bookingCode={bookingCode}
+        />
       </Tbody>
     </table>
   )