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

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/BookingCode/bookingCode.module.css

@@ -1,5 +1,9 @@
 .row {
-  align-items: center;
   display: flex;
+  align-items: center;
   justify-content: space-between;
+
+  &.rightAligned {
+    justify-content: flex-end;
+  }
 }

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/BookingCode/index.tsx

@@ -1,8 +1,8 @@
 "use client"
+import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
-import IconChip from "@scandic-hotels/design-system/IconChip"
-import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
+import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useMyStayStore } from "@/stores/my-stay"
@@ -11,31 +11,40 @@ import styles from "./bookingCode.module.css"
 
 export default function BookingCode() {
   const intl = useIntl()
-  const bookingCode = useMyStayStore((state) => state.bookedRoom.bookingCode)
+  const { bookingCode, isCampaignRate } = useMyStayStore((state) => ({
+    bookingCode: state.bookedRoom.bookingCode,
+    isCampaignRate: state.bookedRoom.isCampaignRate,
+  }))
 
-  if (!bookingCode) {
+  if (!bookingCode && !isCampaignRate) {
     return null
   }
 
-  return (
-    <div className={styles.row}>
-      <Typography variant="Body/Supporting text (caption)/smRegular">
-        <p>
-          {intl.formatMessage({
-            id: "booking.bookingCode",
-            defaultMessage: "Booking code",
-          })}
-        </p>
-      </Typography>
+  const codeType = isCampaignRate
+    ? intl.formatMessage({
+        id: "booking.campaignCode",
+        defaultMessage: "Campaign code",
+      })
+    : intl.formatMessage({
+        id: "booking.bookingCode",
+        defaultMessage: "Booking code",
+      })
 
-      <IconChip
-        color="blue"
-        icon={<DiscountIcon color="Icon/Feedback/Information" />}
-      >
+  const showCodeType = bookingCode || !isCampaignRate
+
+  return (
+    <div className={cx(styles.row, { [styles.rightAligned]: !showCodeType })}>
+      {showCodeType && (
         <Typography variant="Body/Supporting text (caption)/smRegular">
-          <span>{bookingCode}</span>
+          <p>{codeType}</p>
         </Typography>
-      </IconChip>
+      )}
+
+      <BookingCodeChip
+        bookingCode={bookingCode}
+        isCampaign={isCampaignRate}
+        withText={!showCodeType}
+      />
     </div>
   )
 }