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
2025-06-13 07:07:22 +00:00
parent ad3be1b4f4
commit 180a100140
7 changed files with 130 additions and 9 deletions
--- a/apps/scandic-web/components/BookingCodeChip/bookingCodeChip.module.css
+++ b/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));
+}
--- a/apps/scandic-web/components/BookingCodeChip/index.tsx
+++ b/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>
  )
 }
--- a/apps/scandic-web/components/BookingWidget/Client.tsx
+++ b/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

--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RemoveBookingCodeButton/RemoveBookingCodeButton.tsx
+++ b/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)
+      }}
+    />
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx
+++ b/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>
  )
--- a/packages/design-system/lib/components/Icons/Nucleo/Benefits/FilledDiscount.tsx
+++ b/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>
+  )
+}
--- a/packages/design-system/package.json
+++ b/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",