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

@@ -10,3 +10,12 @@
 .center {
   justify-content: center;
 }
+
+.removeButton {
+  color: currentColor;
+  background-color: transparent;
+  border-width: 0;
+  cursor: pointer;
+  padding: var(--Space-x05);
+  margin: calc(-1 * var(--Space-x05));
+}

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">
+        {withText && (
-          <strong>
+          <Typography variant="Body/Supporting text (caption)/smBold">
-            {intl.formatMessage({ defaultMessage: "Booking code" })}
+            <strong>
-          </strong>
+              {intl.formatMessage({ defaultMessage: "Booking code" })}
-        </Typography>
+            </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>
   )
 }

apps/scandic-web/components/BookingWidget/Client.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useSearchParams } from "next/navigation"
 import { use, useEffect, useRef, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 
@@ -133,6 +134,17 @@ export default function BookingWidgetClient({
     reValidateMode: "onSubmit",
   })
 
+  const searchParams = useSearchParams()
+  const bookingCodeFromSearchParams = searchParams.get("bookingCode") || ""
+  const [bookingCode, setBookingCode] = useState(bookingCodeFromSearchParams)
+
+  if (bookingCode !== bookingCodeFromSearchParams) {
+    methods.setValue("bookingCode", {
+      value: bookingCodeFromSearchParams,
+    })
+    setBookingCode(bookingCodeFromSearchParams)
+  }
+
   useEffect(() => {
     if (!selectedLocation) return
 

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RemoveBookingCodeButton/RemoveBookingCodeButton.tsx

@@ -0,0 +1,33 @@
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+
+import { useRatesStore } from "@/stores/select-rate"
+
+import BookingCodeChip from "@/components/BookingCodeChip"
+
+export function RemoveBookingCodeButton() {
+  const bookingCode = useRatesStore((state) => state.booking.bookingCode)
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const pathname = usePathname()
+
+  if (!bookingCode) {
+    return null
+  }
+
+  return (
+    <BookingCodeChip
+      bookingCode={bookingCode}
+      filledIcon
+      withCloseButton={true}
+      withText={false}
+      onClose={() => {
+        const newSearchParams = new URLSearchParams(searchParams)
+        newSearchParams.delete("bookingCode")
+
+        const url = `${pathname}?${newSearchParams.toString()}`
+
+        router.replace(url)
+      }}
+    />
+  )
+}

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx

@@ -11,6 +11,7 @@ import RoomPackageFilter from "./RoomPackageFilter"
 import styles from "./roomsHeader.module.css"
 
 import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
+import { RemoveBookingCodeButton } from "./RemoveBookingCodeButton/RemoveBookingCodeButton"
 
 export default function RoomsHeader() {
   const { isFetchingPackages, rooms, totalRooms } = useRoomContext()
@@ -55,8 +56,9 @@ export default function RoomsHeader() {
         )}
       </Typography>
       <div className={styles.filters}>
+        <RemoveBookingCodeButton />
         <RoomPackageFilter />
-        <BookingCodeFilter />
+        {/* <BookingCodeFilter /> */}
       </div>
     </div>
   )

packages/design-system/lib/components/Icons/Nucleo/Benefits/FilledDiscount.tsx

@@ -0,0 +1,24 @@
+import { NucleoIconProps } from '../../icon'
+import { colorVariants } from '../colorVariants'
+
+export default function FilledDiscount({ color, size }: NucleoIconProps) {
+  const fill = color ? colorVariants[color] : 'currentColor'
+  const width = size || '1em'
+  const height = size || '1em'
+
+  return (
+    <svg
+      height={height}
+      width={width}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g fill={fill}>
+        <path
+          d="M23.707,11.293L21,8.586V4c0-0.552-0.448-1-1-1h-4.586l-2.707-2.707c-0.391-0.391-1.023-0.391-1.414,0 L8.586,3H4C3.448,3,3,3.448,3,4v4.586l-2.707,2.707c-0.391,0.391-0.391,1.023,0,1.414L3,15.414V20c0,0.552,0.448,1,1,1h4.586 l2.707,2.707C11.488,23.902,11.744,24,12,24s0.512-0.098,0.707-0.293L15.414,21H20c0.552,0,1-0.448,1-1v-4.586l2.707-2.707 C24.098,12.316,24.098,11.684,23.707,11.293z M8.5,7C9.328,7,10,7.672,10,8.5S9.328,10,8.5,10S7,9.328,7,8.5S7.672,7,8.5,7z M15.5,17c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S16.328,17,15.5,17z M8,17.414L6.586,16L16,6.586 L17.414,8L8,17.414z"
+          fill={fill}
+        />
+      </g>
+    </svg>
+  )
+}

packages/design-system/package.json

@@ -34,6 +34,7 @@
     "./Icons/CutleryTwoIcon": "./dist/components/Icons/Illustrations/CutleryTwo.js",
     "./Icons/DiamondAddIcon": "./dist/components/Icons/Customised/Benefits/DiamondAdd.js",
     "./Icons/DiscountIcon": "./dist/components/Icons/Nucleo/Benefits/discount-2-2.js",
+    "./Icons/FilledDiscountIcon": "./dist/components/Icons/Nucleo/Benefits/FilledDiscount.js",
     "./Icons/DoorIcon": "./dist/components/Icons/Nucleo/Amenities_Facilities/door-2.js",
     "./Icons/DowntownCamperIcon": "./dist/components/Icons/Logos/DowntownCamper.js",
     "./Icons/FacebookIcon": "./dist/components/Icons/Customised/Socials/Facebook.js",