scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove guest picker store

Browse Source
This commit is contained in:
Christel Westerberg
2024-11-12 16:45:25 +01:00
parent 58678244fc
commit ca3819f7cc
17 changed files with 368 additions and 597 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/BookingWidget/Client.tsx
+21 -19
View File
@@ -36,7 +36,6 @@ export default function BookingWidgetClient({
name: StickyElementNameEnum.BOOKING_WIDGET,
})
const bookingWidgetSearchData: BookingWidgetSearchParams | undefined =
searchParams
? (getFormattedUrlQueryParams(new URLSearchParams(searchParams), {
@@ -79,9 +78,7 @@ export default function BookingWidgetClient({
const methods = useForm<BookingWidgetSchema>({
defaultValues: {
search: selectedLocation?.name ?? "",
location: selectedLocation
? JSON.stringify(selectedLocation)
: undefined,
location: selectedLocation ? JSON.stringify(selectedLocation) : undefined,
date: {
// UTC is required to handle requests from far away timezones https://scandichotels.atlassian.net/browse/SWAP-6375 & PET-507
// This is specifically to handle timezones falling in different dates.
@@ -147,29 +144,34 @@ export default function BookingWidgetClient({
? JSON.parse(sessionStorageSearchData)
: undefined
!(selectedLocation?.name) && initialSelectedLocation?.name &&
!selectedLocation?.name &&
initialSelectedLocation?.name &&
methods.setValue("search", initialSelectedLocation.name)
!selectedLocation && sessionStorageSearchData &&
!selectedLocation &&
sessionStorageSearchData &&
methods.setValue("location", encodeURIComponent(sessionStorageSearchData))
}, [methods, selectedLocation])
return (
<FormProvider {...methods}>
<section ref={bookingWidgetRef} className={styles.containerDesktop}>
<Form locations={locations} type={type} />
</section>
<section className={styles.containerMobile} data-open={isOpen}>
<button
className={styles.close}
onClick={closeMobileSearch}
type="button"
>
<CloseLargeIcon />
</button>
<Form locations={locations} type={type} />
<section
ref={bookingWidgetRef}
className={styles.wrapper}
data-open={isOpen}
>
<MobileToggleButton openMobileSearch={openMobileSearch} />
<div className={styles.formContainer}>
<button
className={styles.close}
onClick={closeMobileSearch}
type="button"
>
<CloseLargeIcon />
</button>
<Form locations={locations} type={type} />
</div>
</section>
<div className={styles.backdrop} onClick={closeMobileSearch} />
<MobileToggleButton openMobileSearch={openMobileSearch} />
</FormProvider>
)
}
components/BookingWidget/MobileToggleButton/button.module.css
-2
View File
@@ -6,8 +6,6 @@
display: grid;
gap: var(--Spacing-x-one-and-half);
padding: var(--Spacing-x2);
position: sticky;
top: 0;
z-index: 1;
background-color: var(--Base-Surface-Primary-light-Normal);
}
components/BookingWidget/MobileToggleButton/index.tsx
-7
View File
@@ -31,12 +31,6 @@ export default function MobileToggleButton({
const location = useWatch({ name: "location" })
const rooms: BookingWidgetSchema["rooms"] = useWatch({ name: "rooms" })
const bookingWidgetMobileRef = useRef(null)
useStickyPosition({
ref: bookingWidgetMobileRef,
name: StickyElementNameEnum.BOOKING_WIDGET_MOBILE,
})
const parsedLocation: Location | null = location
? JSON.parse(decodeURIComponent(location))
: null
@@ -75,7 +69,6 @@ export default function MobileToggleButton({
className={locationAndDateIsSet ? styles.complete : styles.partial}
onClick={openMobileSearch}
role="button"
ref={bookingWidgetMobileRef}
>
{!locationAndDateIsSet && (
<>
components/BookingWidget/bookingWidget.module.css
+49 -47
View File
@@ -1,60 +1,62 @@
.containerDesktop,
.containerMobile,
.close {
display: none;
.wrapper {
position: sticky;
z-index: var(--booking-widget-z-index);
}
@media screen and (max-width: 767px) {
.containerMobile {
background-color: var(--UI-Input-Controls-Surface-Normal);
bottom: -100%;
display: grid;
gap: var(--Spacing-x3);
grid-template-rows: 36px 1fr;
height: calc(100dvh - 20px);
padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x7);
position: fixed;
transition: bottom 300ms ease;
width: 100%;
z-index: 10000;
border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
}
.formContainer {
display: grid;
grid-template-rows: 36px 1fr;
background-color: var(--UI-Input-Controls-Surface-Normal);
border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
gap: var(--Spacing-x3);
height: calc(100dvh - 20px);
width: 100%;
padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x7);
position: fixed;
bottom: -100%;
transition: bottom 300ms ease;
}
.containerMobile[data-open="true"] {
bottom: 0;
}
.wrapper[data-open="true"] {
z-index: var(--booking-widget-open-z-index);
}
.close {
background: none;
border: none;
cursor: pointer;
justify-self: flex-end;
}
.wrapper[data-open="true"] .formContainer {
bottom: 0;
}
.containerMobile[data-open="true"] + .backdrop {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1000;
}
.close {
background: none;
border: none;
cursor: pointer;
justify-self: flex-end;
}
.wrapper[data-open="true"] + .backdrop {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: calc(var(--booking-widget-open-z-index) - 1);
}
@media screen and (min-width: 768px) {
.containerDesktop {
display: block;
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
position: sticky;
.wrapper {
top: 0;
z-index: 10;
background-color: var(--Base-Surface-Primary-light-Normal);
}
}
@media screen and (min-width: 1367px) {
.container {
z-index: 9;
.formContainer {
display: block;
background-color: var(--Base-Surface-Primary-light-Normal);
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
height: auto;
position: static;
padding: 0;
}
.close {
display: none;
}
}