Merged in SW-3270-move-interactive-map-to-design-system-or-booking-flow (pull request #2681)

SW-3270 move interactive map to design system or booking flow * wip * wip * merge * wip * add support for locales in design-system * add story for HotelCard * setup alias * . * remove tracking from design-system for hotelcard * pass isUserLoggedIn * export design-system-new-deprecated.css from design-system * Add HotelMarkerByType to Storybook * Add interactive map to Storybook * fix reactintl in vitest * rename env variables * . * fix background colors * add storybook stories for <Link /> * merge * fix tracking for when clicking 'See rooms' in InteractiveMap * Merge branch 'master' of bitbucket.org:scandic-swap/web into SW-3270-move-interactive-map-to-design-system-or-booking-flow * remove deprecated comment Approved-by: Anton Gunnarsson
2025-08-25 11:26:16 +00:00
parent 4f8c51298f
commit c54c1ec540
139 changed files with 2511 additions and 1557 deletions
--- a/packages/design-system/lib/components/BookingCodeChip/index.tsx
+++ b/packages/design-system/lib/components/BookingCodeChip/index.tsx
@@ -0,0 +1,123 @@
+import { Button as ButtonRAC } from 'react-aria-components'
+import { useIntl } from 'react-intl'
+
+import IconChip from '@scandic-hotels/design-system/IconChip'
+import DiscountIcon from '@scandic-hotels/design-system/Icons/DiscountIcon'
+import FilledDiscountIcon from '@scandic-hotels/design-system/Icons/FilledDiscountIcon'
+import { MaterialIcon } from '@scandic-hotels/design-system/Icons/MaterialIcon'
+import { Typography } from '@scandic-hotels/design-system/Typography'
+
+import styles from './bookingCodeChip.module.css'
+
+type BaseBookingCodeChipProps = {
+  alignCenter?: boolean
+  bookingCode?: string | null
+  isBreakfastIncluded?: boolean
+  isCampaign?: boolean
+  isUnavailable?: boolean
+  withText?: boolean
+  filledIcon?: boolean
+}
+type BookingCodeChipWithoutCloseButtonProps = BaseBookingCodeChipProps & {
+  withCloseButton?: false
+}
+type BookingCodeChipWithCloseButtonProps = BaseBookingCodeChipProps & {
+  withCloseButton: true
+  onClose: () => void
+}
+
+type BookingCodeChipProps =
+  | BookingCodeChipWithoutCloseButtonProps
+  | BookingCodeChipWithCloseButtonProps
+
+export function BookingCodeChip({
+  alignCenter,
+  bookingCode,
+  isBreakfastIncluded,
+  isCampaign,
+  isUnavailable,
+  withText = true,
+  filledIcon = false,
+  ...props
+}: BookingCodeChipProps) {
+  const intl = useIntl()
+
+  if (isCampaign) {
+    return (
+      <IconChip
+        color="green"
+        icon={
+          filledIcon ? (
+            <FilledDiscountIcon color="Icon/Feedback/Success" />
+          ) : (
+            <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={
+        filledIcon ? (
+          <FilledDiscountIcon fill="Icon/Feedback/Information" />
+        ) : (
+          <DiscountIcon color="Icon/Feedback/Information" />
+        )
+      }
+      className={alignCenter ? styles.center : undefined}
+    >
+      <p
+        className={`${styles.bookingCodeChip} ${isUnavailable ? styles.unavailable : ''}`}
+      >
+        {withText && (
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <strong>
+              {intl.formatMessage({
+                defaultMessage: 'Booking code',
+              })}
+            </strong>
+          </Typography>
+        )}
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <span>{bookingCode}</span>
+        </Typography>
+      </p>
+      {props.withCloseButton && (
+        <>
+          <ButtonRAC className={styles.removeButton} onPress={props.onClose}>
+            <MaterialIcon icon="close" size={16} color="CurrentColor" />
+          </ButtonRAC>
+        </>
+      )}
+    </IconChip>
+  )
+}