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/BookingCodeChip/bookingCodeChip.module.css

@@ -0,0 +1,12 @@
+.bookingCodeChip {
+  display: flex;
+  gap: var(--Space-x05);
+}
+
+.bookingCodeChip .unavailable {
+  text-decoration: line-through;
+}
+
+.center {
+  justify-content: center;
+}

apps/scandic-web/components/BookingCodeChip/index.tsx

@@ -0,0 +1,90 @@
+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 "../TempDesignSystem/IconChip"
+
+import styles from "./bookingCodeChip.module.css"
+
+type BookingCodeChipProps = {
+  alignCenter?: boolean
+  bookingCode?: string | null
+  isBreakfastIncluded?: boolean
+  isCampaign?: boolean
+  isUnavailable?: boolean
+}
+
+export default function BookingCodeChip({
+  alignCenter,
+  bookingCode,
+  isBreakfastIncluded,
+  isCampaign,
+  isUnavailable,
+}: BookingCodeChipProps) {
+  const intl = useIntl()
+
+  if (isCampaign) {
+    return (
+      <IconChip
+        color="green"
+        icon={<DiscountIcon color="Icon/Feedback/Success" />}
+        className={alignCenter ? styles.center : undefined}
+      >
+        <p className={styles.bookingCodeChip}>
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <strong>
+              {intl.formatMessage({ defaultMessage: "Campaign" })}
+            </strong>
+          </Typography>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <span>
+              {isBreakfastIncluded
+                ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+                  `${bookingCode ?? ""} ${intl.formatMessage({
+                    defaultMessage: "Breakfast included",
+                  })}`
+                : // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+                  `${bookingCode ?? ""} ${intl.formatMessage({
+                    defaultMessage: "Breakfast excluded",
+                  })}`}
+            </span>
+          </Typography>
+        </p>
+      </IconChip>
+    )
+  }
+
+  if (!bookingCode) {
+    return null
+  }
+
+  return (
+    <IconChip
+      color="blue"
+      icon={<DiscountIcon color="Icon/Feedback/Information" />}
+      className={alignCenter ? styles.center : undefined}
+    >
+      <p className={styles.bookingCodeChip}>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <strong>
+            {intl.formatMessage({ defaultMessage: "Booking code" })}
+          </strong>
+        </Typography>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <span className={`${isUnavailable ? styles.unavailable : ""}`}>
+            {isUnavailable
+              ? intl.formatMessage(
+                  { defaultMessage: "{code} unavailable" },
+                  { code: bookingCode }
+                )
+              : intl.formatMessage(
+                  { defaultMessage: "{code} applied" },
+                  { code: bookingCode }
+                )}
+          </span>
+        </Typography>
+      </p>
+    </IconChip>
+  )
+}