From 180a1001408e51dbb3f423615191362057df1bb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joakim=20J=C3=A4derberg?= Date: Fri, 13 Jun 2025 07:07:22 +0000 Subject: [PATCH] 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 --- .../bookingCodeChip.module.css | 9 +++ .../components/BookingCodeChip/index.tsx | 56 ++++++++++++++++--- .../components/BookingWidget/Client.tsx | 12 ++++ .../RemoveBookingCodeButton.tsx | 33 +++++++++++ .../Rooms/RoomsHeader/index.tsx | 4 +- .../Icons/Nucleo/Benefits/FilledDiscount.tsx | 24 ++++++++ packages/design-system/package.json | 1 + 7 files changed, 130 insertions(+), 9 deletions(-) create mode 100644 apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RemoveBookingCodeButton/RemoveBookingCodeButton.tsx create mode 100644 packages/design-system/lib/components/Icons/Nucleo/Benefits/FilledDiscount.tsx diff --git a/apps/scandic-web/components/BookingCodeChip/bookingCodeChip.module.css b/apps/scandic-web/components/BookingCodeChip/bookingCodeChip.module.css index 97e4fd9a2..213c770db 100644 --- 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)); +} diff --git a/apps/scandic-web/components/BookingCodeChip/index.tsx b/apps/scandic-web/components/BookingCodeChip/index.tsx index 9c5813b2f..85022e2da 100644 --- 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 ( } + icon={ + filledIcon ? ( + + ) : ( + + ) + } className={alignCenter ? styles.center : undefined} >

@@ -62,21 +87,36 @@ export default function BookingCodeChip({ return ( } + icon={ + filledIcon ? ( + + ) : ( + + ) + } className={alignCenter ? styles.center : undefined} >

- - - {intl.formatMessage({ defaultMessage: "Booking code" })} - - + {withText && ( + + + {intl.formatMessage({ defaultMessage: "Booking code" })} + + + )} {bookingCode}

+ {props.withCloseButton && ( + <> + + + + + )} ) } diff --git a/apps/scandic-web/components/BookingWidget/Client.tsx b/apps/scandic-web/components/BookingWidget/Client.tsx index a5b073755..1b892e729 100644 --- 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 diff --git 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 new file mode 100644 index 000000000..68e54585d --- /dev/null +++ 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 ( + { + const newSearchParams = new URLSearchParams(searchParams) + newSearchParams.delete("bookingCode") + + const url = `${pathname}?${newSearchParams.toString()}` + + router.replace(url) + }} + /> + ) +} diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx index ebb1278b0..da28e05ac 100644 --- 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() { )}
+ - + {/* */}
) diff --git a/packages/design-system/lib/components/Icons/Nucleo/Benefits/FilledDiscount.tsx b/packages/design-system/lib/components/Icons/Nucleo/Benefits/FilledDiscount.tsx new file mode 100644 index 000000000..82d5becd0 --- /dev/null +++ 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 ( + + + + + + ) +} diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 13f3eceb3..8251fc6f6 100644 --- 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",