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">
-          <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>
   )
 }

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>
   )