Merged in fix/SW-2964-hide-booking-code-switcher (pull request #2345)

fix: as a temporary fix hide booking code switcher and add a way to do a search without bookingcode

* fix: as a temporary fix hide booking code switcher and add a way to do a search without bookingcode


Approved-by: Linus Flood

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

@@ -1,19 +1,35 @@
+import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 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 IconChip from "../TempDesignSystem/IconChip"
 
 import styles from "./bookingCodeChip.module.css"
 
-type BookingCodeChipProps = {
+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 default function BookingCodeChip({
   alignCenter,
@@ -21,6 +37,9 @@ export default function BookingCodeChip({
   isBreakfastIncluded,
   isCampaign,
   isUnavailable,
+  withText = true,
+  filledIcon = false,
+  ...props
 }: BookingCodeChipProps) {
   const intl = useIntl()
 
@@ -28,7 +47,13 @@ export default function BookingCodeChip({
     return (
       <IconChip
         color="green"
-        icon={<DiscountIcon color="Icon/Feedback/Success" />}
+        icon={
+          filledIcon ? (
+            <FilledDiscountIcon color="Icon/Feedback/Success" />
+          ) : (
+            <DiscountIcon color="Icon/Feedback/Success" />
+          )
+        }
         className={alignCenter ? styles.center : undefined}
       >
         <p className={styles.bookingCodeChip}>
@@ -62,21 +87,36 @@ export default function BookingCodeChip({
   return (
     <IconChip
       color="blue"
-      icon={<DiscountIcon color="Icon/Feedback/Information" />}
+      icon={
+        filledIcon ? (
+          <FilledDiscountIcon fill="Icon/Feedback/Information" />
+        ) : (
+          <DiscountIcon color="Icon/Feedback/Information" />
+        )
+      }
       className={alignCenter ? styles.center : undefined}
     >
       <p
         className={`${styles.bookingCodeChip} ${isUnavailable ? styles.unavailable : ""}`}
       >
-        <Typography variant="Body/Supporting text (caption)/smBold">
-          <strong>
-            {intl.formatMessage({ defaultMessage: "Booking code" })}
-          </strong>
-        </Typography>
+        {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>
   )
 }