From b641f8387edc468a7a33d5edc185c30d1f643f3b Mon Sep 17 00:00:00 2001 From: Tobias Johansson Date: Tue, 20 May 2025 06:49:27 +0000 Subject: [PATCH] Merged in fix/SW-2534-booking-widget-fixes (pull request #2129) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix(SW-2534): Added validation error and fixed initial month in date picker for BW * Merged in revert-version (pull request #2128) revert including version in layouts and api responses * revert including version in layouts and api responses Approved-by: Linus Flood * feat: prevent users from selecting the same room when there is no vacancy for it * Merged in fix/no-my-stay-for-external-bookings (pull request #2126) fix: Only link web and app bookings to my stay Approved-by: Joakim Jäderberg * Merged in fix/bookingwidget-fixes (pull request #2135) Fix: (#SW-2663) bookingwidget mobile - Space around, border-radius and correct color on date field * fix: booking widget mobile - padding around booking widget and date color * Fixed rounded corners * Reduced minimum size of column Approved-by: Joakim Jäderberg * Merged in fix/LOY-105-signupform-error-messages (pull request #2121) feat(LOY-105): update signup form validation messages * feat(LOY-105): improve signup form validation messages Approved-by: Erik Tiekstra * fix(LOY-199): add missing benefits link * Merged in feat/SW-2340-aa-tracking-my-stay-pageview- (pull request #2133) feat: SW-2340 Implemented tracking on my-stay, webview my-stay and receipt page * feat: SW-2340 Implemented tracking on my-stay, webview my-stay and receipt page * feat: SW-2340 Updated webview tracking * feat: SW-2340 Updated receipt tracking Approved-by: Linus Flood * Merged in fix/SW-2804-missing-meeting-rooms (pull request #2138) fix: return [] when we get a 404 for meeting rooms for a hotel * fix: return [] when we get a 404 for meeting rooms for a hotel Approved-by: Linus Flood * feat(auth): limit output in session endpoint * fix(SW-2376): Vertically centered previous/next buttons inside carousel cards Approved-by: Matilda Landström * fix(SW-2055): Surrounded ul inside JsonToHtml with a typography component Approved-by: Matilda Landström * fix(SW-2621): Breaking too long words on heading inside destination city pages Approved-by: Matilda Landström * Merged in fix/sw-2763-external-scripts (pull request #2104) fix: try/catch external scripts to avoid them breaking our page #sw-2763 * fix: try/catch external scripts to avoid them breaking our page #sw-2763 Approved-by: Joakim Jäderberg * fix: handle non loaded surprises in case they're returned as null from server * feat(SW-2806): booking widget should not be blocked by sitewide alert * Merged in fix/remove-on-error (pull request #2142) fix: revert onError on the Script component * fix: revert onError on the Script component * Merged in fix/alert-icon (pull request #2139) fix(SW-2807): alert icons * fix(SW-2807): fix incorrect icon color on sitewide alert * fix(SW-2807): change error icon Approved-by: Erik Tiekstra Approved-by: Linus Flood * Merged in feat/SW-2760-SW-552-wellness-openinghours (pull request #2112) fix(SW-2760, SW-2552): fix opening hours wellness sidepeek * fix(SW-2760, SW-2552): fix opening hours wellness sidepeek Approved-by: Erik Tiekstra * Merged in feat/SW-1749-sidepeek-hotel-cta (pull request #2123) feat(SW-1749): add link to hotel page in sidepeek * feat(SW-1749): add link to hotel page in sidepeek Approved-by: Matilda Landström * fix(SW-2811): suggest list should follow where-to-field * fix(SW-2451): placement of suggest list * Merged in fix/SW-2684-booking-widget-text-overflow (pull request #2048) fix(SW-2684): truncate overflowing text in booking widget * fix: truncate overflowing text in booking widget * fix: change Body to Typography and css selector fix Approved-by: Hrishikesh Vaipurkar * Merged in feat/SW-2800-lightbox-history-state (pull request #2147) feat(SW-2800): closing image gallery and lightbox on using browser navigation * feat(SW-2800): closing image gallery and lightbox on using browser navigation Approved-by: Linus Flood * Merged in fix/enter-details-footer-margin (pull request #2150) fix: margin to footer on enter details * fix: margin to footer on enter details * Merged in fix/SW-2822-missing-meetingroom-images (pull request #2151) fix: meeting rooms with missing images * fix: meeting rooms with missing images Approved-by: Linus Flood Approved-by: Bianca Widstam --- .../components/DatePicker/Range/Desktop.tsx | 2 +- .../components/DatePicker/Range/Mobile.tsx | 1 + .../FormContent/Search/index.tsx | 2 +- .../FormContent/ValidationError/index.tsx | 32 +++ .../validationError.module.css | 36 ++++ .../FormContent/formContent.module.css | 5 + .../Forms/BookingWidget/FormContent/index.tsx | 199 +++++++++--------- .../components/GuestsRoomsPicker/index.tsx | 10 +- 8 files changed, 190 insertions(+), 97 deletions(-) create mode 100644 apps/scandic-web/components/Forms/BookingWidget/FormContent/ValidationError/index.tsx create mode 100644 apps/scandic-web/components/Forms/BookingWidget/FormContent/ValidationError/validationError.module.css diff --git a/apps/scandic-web/components/DatePicker/Range/Desktop.tsx b/apps/scandic-web/components/DatePicker/Range/Desktop.tsx index ff1b235c8..2c5161d53 100644 --- a/apps/scandic-web/components/DatePicker/Range/Desktop.tsx +++ b/apps/scandic-web/components/DatePicker/Range/Desktop.tsx @@ -29,7 +29,7 @@ export default function DatePickerRangeDesktop({ }: DatePickerRangeProps) { const lang = useLang() const intl = useIntl() - const [month, setMonth] = useState(new Date()) + const [month, setMonth] = useState(selectedRange?.from ?? new Date()) /** English is default language and doesn't need to be imported */ const locale = lang === Lang.en ? undefined : locales[lang] diff --git a/apps/scandic-web/components/DatePicker/Range/Mobile.tsx b/apps/scandic-web/components/DatePicker/Range/Mobile.tsx index 0079b095d..95712d841 100644 --- a/apps/scandic-web/components/DatePicker/Range/Mobile.tsx +++ b/apps/scandic-web/components/DatePicker/Range/Mobile.tsx @@ -74,6 +74,7 @@ export default function DatePickerRangeMobile({ lang={lang} locale={locale} mode="range" + defaultMonth={selectedRange?.from} /** Showing full year or what's left of it */ numberOfMonths={13} onSelect={handleOnSelect} diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx index 945ca5a11..188c96719 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx @@ -225,7 +225,7 @@ export function SearchSkeleton() { const intl = useIntl() return (
-
+
{intl.formatMessage({ defaultMessage: "Where to?" })} diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/ValidationError/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/ValidationError/index.tsx new file mode 100644 index 000000000..586b38059 --- /dev/null +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/ValidationError/index.tsx @@ -0,0 +1,32 @@ +import { useIntl } from "react-intl" + +import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" + +import Caption from "@/components/TempDesignSystem/Text/Caption" + +import styles from "./validationError.module.css" + +export default function ValidationError() { + const intl = useIntl() + + return ( +
+ + + {intl.formatMessage({ + defaultMessage: "Enter destination or hotel", + })} + + + {intl.formatMessage({ + defaultMessage: + "A destination or hotel name is needed to be able to search for a hotel room.", + })} + +
+ ) +} diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/ValidationError/validationError.module.css b/apps/scandic-web/components/Forms/BookingWidget/FormContent/ValidationError/validationError.module.css new file mode 100644 index 000000000..061fb6049 --- /dev/null +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/ValidationError/validationError.module.css @@ -0,0 +1,36 @@ +.container { + position: absolute; + top: calc(100% + var(--Space-x2)); + background: var(--Surface-Primary-Default); + border-radius: var(--Corner-radius-lg); + box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1); + padding: var(--Space-x15); + max-width: min(100vw, calc(360px - var(--Space-x2))); + width: 360px; + + display: flex; + flex-direction: column; + padding: var(--Space-x15); + align-items: flex-start; + gap: var(--Space-x05); + z-index: var(--dialog-z-index); +} + +.title { + display: flex; + align-items: center; + gap: var(--Space-x1); +} + +.message { + text-wrap: auto; +} + +@media screen and (min-width: 1367px) { + .container { + top: calc(100% + var(--Space-x1) + var(--Space-x2)); + left: calc(var(--Space-x1) * -1); + padding: var(--Space-x2); + max-width: 360px; + } +} diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/formContent.module.css b/apps/scandic-web/components/Forms/BookingWidget/FormContent/formContent.module.css index 3f33084ef..f097a2599 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/formContent.module.css +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/formContent.module.css @@ -11,6 +11,7 @@ display: none; } +.where, .rooms, .when { position: relative; @@ -25,6 +26,10 @@ display: none; } +.label { + color: var(--Text-Accent-Primary); +} + @media screen and (max-width: 767px) { .voucherContainer { padding: var(--Spacing-x2) 0 var(--Spacing-x4); diff --git a/apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx index f9578cce6..1fad7ffbe 100644 --- a/apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx +++ b/apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx @@ -4,6 +4,7 @@ import { useFormContext, useWatch } from "react-hook-form" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { Typography } from "@scandic-hotels/design-system/Typography" import { dt } from "@/lib/dt" @@ -11,10 +12,10 @@ import DatePicker from "@/components/DatePicker" import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker" import SkeletonShimmer from "@/components/SkeletonShimmer" import Button from "@/components/TempDesignSystem/Button" -import Caption from "@/components/TempDesignSystem/Text/Caption" import { RemoveExtraRooms } from "./BookingCode" import { Search, SearchSkeleton } from "./Search" +import ValidationError from "./ValidationError" import Voucher, { VoucherSkeleton } from "./Voucher" import styles from "./formContent.module.css" @@ -37,19 +38,23 @@ export default function FormContent({ const nights = dt(selectedDate.toDate).diff(dt(selectedDate.fromDate), "days") return ( - <> -
-
-
- -
-
- +
+
+
+ + {errors.search && } +
+
+ +
-
- - -
+ +
-
- -
-
- -
-
- {errors.bookingCode?.value?.message?.indexOf("Multi-room") === 0 ? ( - - ) : null} - + + +
- +
+ +
+
+ +
+
+ {errors.bookingCode?.value?.message?.indexOf("Multi-room") === 0 ? ( + + ) : null} + +
+
) } @@ -141,25 +145,33 @@ export function BookingWidgetFormContentSkeleton() {
- - {intl.formatMessage( - { - defaultMessage: - "{totalNights, plural, one {# night} other {# nights}}", - }, - { totalNights: 0 } - )} - + + +
- - + + - + +
@@ -174,18 +186,17 @@ export function BookingWidgetFormContentSkeleton() { type="submit" disabled > - {intl.formatMessage({ defaultMessage: "Search", })} - + + diff --git a/apps/scandic-web/components/GuestsRoomsPicker/index.tsx b/apps/scandic-web/components/GuestsRoomsPicker/index.tsx index bd9109924..ca318c208 100644 --- a/apps/scandic-web/components/GuestsRoomsPicker/index.tsx +++ b/apps/scandic-web/components/GuestsRoomsPicker/index.tsx @@ -21,7 +21,11 @@ import styles from "./guests-rooms-picker.module.css" import type { BookingWidgetSchema } from "@/types/components/bookingWidget" import type { GuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker" -export default function GuestsRoomsPickerForm() { +export default function GuestsRoomsPickerForm({ + ariaLabelledBy, +}: { + ariaLabelledBy?: string +}) { const { trigger } = useFormContext() const rooms = useWatch({ name: "rooms" }) @@ -115,6 +119,7 @@ export default function GuestsRoomsPickerForm() { triggerFn={() => { setIsOpen(true) }} + ariaLabelledBy={ariaLabelledBy} /> @@ -129,10 +134,12 @@ function Trigger({ rooms, className, triggerFn, + ariaLabelledBy, }: { rooms: GuestsRoom[] className: string triggerFn?: () => void + ariaLabelledBy?: string }) { const intl = useIntl() @@ -173,6 +180,7 @@ function Trigger({ className={`${className} ${styles.btn}`} type="button" onPress={triggerFn} + aria-labelledby={ariaLabelledBy} > {parts.join(", ")}