Merged in feat/sw-2879-booking-widget-to-booking-flow-package (pull request #2532)
feat(SW-2879): Move BookingWidget to booking-flow package * Fix lockfile * Fix styling * a tiny little booking widget test * Tiny fixes * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Remove unused scripts * lint:fix * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Tiny lint fixes * update test * Update Input in booking-flow * Clean up comments etc * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Setup tracking context for booking-flow * Add missing use client * Fix temp tracking function * Pass booking to booking-widget * Remove comment * Add use client to booking widget tracking provider * Add use client to tracking functions * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Move debug page * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package * Merge branch 'master' into feat/sw-2879-booking-widget-to-booking-flow-package Approved-by: Bianca Widstam
This commit is contained in:
Anton Gunnarsson
@@ -0,0 +1,67 @@
|
||||
.complete,
|
||||
.partial {
|
||||
border: none;
|
||||
align-items: center;
|
||||
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
gap: var(--Spacing-x-one-and-half);
|
||||
padding: var(--Spacing-x2);
|
||||
z-index: 1;
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
width: 100%;
|
||||
/* In some cases the lingering pressend event will trigger the */
|
||||
/* webkit tap styling (but not triggering the buttons press event) */
|
||||
/* To avoid this "flash" the styling is set to transparent) */
|
||||
/* It is a non-standard css proprty, so shouldn't have too much of an effect on accessibility. */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.complete {
|
||||
grid-template-columns: 1fr 36px;
|
||||
}
|
||||
|
||||
.partial {
|
||||
grid-template-columns:
|
||||
minmax(auto, 120px) min-content 1fr
|
||||
auto;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.block > * {
|
||||
display: block;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.blockLabel {
|
||||
color: var(--Scandic-Red-Default);
|
||||
}
|
||||
|
||||
.locationAndDate {
|
||||
color: var(--Scandic-Grey-100);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: var(--Text-Interactive-Placeholder);
|
||||
}
|
||||
.icon {
|
||||
align-items: center;
|
||||
background-color: var(--Base-Button-Primary-Fill-Normal);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: center;
|
||||
justify-self: flex-end;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.complete,
|
||||
.partial {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "react-aria-components"
|
||||
import { useWatch } from "react-hook-form"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { shortDateFormat } from "@scandic-hotels/common/constants/dateFormats"
|
||||
import { dt } from "@scandic-hotels/common/dt"
|
||||
import { Divider } from "@scandic-hotels/design-system/Divider"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import useLang from "../../../hooks/useLang"
|
||||
|
||||
import styles from "./button.module.css"
|
||||
|
||||
import type { BookingWidgetSchema } from "../Client"
|
||||
|
||||
type BookingWidgetToggleButtonProps = {
|
||||
openMobileSearch: () => void
|
||||
}
|
||||
export default function MobileToggleButton({
|
||||
openMobileSearch,
|
||||
}: BookingWidgetToggleButtonProps) {
|
||||
const intl = useIntl()
|
||||
const lang = useLang()
|
||||
const date = useWatch<BookingWidgetSchema, "date">({ name: "date" })
|
||||
const rooms = useWatch<BookingWidgetSchema, "rooms">({ name: "rooms" })
|
||||
const searchTerm = useWatch<BookingWidgetSchema, "search">({ name: "search" })
|
||||
const selectedSearchTerm = useWatch<BookingWidgetSchema, "selectedSearch">({
|
||||
name: "selectedSearch",
|
||||
})
|
||||
|
||||
const selectedFromDate = dt(date.fromDate)
|
||||
.locale(lang)
|
||||
.format(shortDateFormat[lang])
|
||||
const selectedToDate = dt(date.toDate)
|
||||
.locale(lang)
|
||||
.format(shortDateFormat[lang])
|
||||
|
||||
const locationAndDateIsSet = searchTerm && date
|
||||
|
||||
const totalNights = dt(date.toDate).diff(dt(date.fromDate), "days")
|
||||
const totalRooms = rooms.length
|
||||
const totalAdults = rooms.reduce((acc, room) => {
|
||||
if (room.adults) {
|
||||
acc = acc + room.adults
|
||||
}
|
||||
return acc
|
||||
}, 0)
|
||||
const totalChildren = rooms.reduce((acc, room) => {
|
||||
if (room.childrenInRoom) {
|
||||
acc = acc + room.childrenInRoom.length
|
||||
}
|
||||
return acc
|
||||
}, 0)
|
||||
|
||||
const totalNightsMsg = intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "{totalNights, plural, one {# night} other {# nights}}",
|
||||
},
|
||||
{ totalNights }
|
||||
)
|
||||
|
||||
const totalAdultsMsg = intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "{totalAdults, plural, one {# adult} other {# adults}}",
|
||||
},
|
||||
{ totalAdults }
|
||||
)
|
||||
|
||||
const totalChildrenMsg = intl.formatMessage(
|
||||
{
|
||||
defaultMessage:
|
||||
"{totalChildren, plural, one {# child} other {# children}}",
|
||||
},
|
||||
{ totalChildren }
|
||||
)
|
||||
|
||||
const totalRoomsMsg = intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "{totalRooms, plural, one {# room} other {# rooms}}",
|
||||
},
|
||||
{ totalRooms }
|
||||
)
|
||||
|
||||
const totalDetails = [totalAdultsMsg]
|
||||
if (totalChildren > 0) {
|
||||
totalDetails.push(totalChildrenMsg)
|
||||
}
|
||||
totalDetails.push(totalRoomsMsg)
|
||||
|
||||
return (
|
||||
<Button
|
||||
className={locationAndDateIsSet ? styles.complete : styles.partial}
|
||||
onPress={openMobileSearch}
|
||||
>
|
||||
{!locationAndDateIsSet && (
|
||||
<>
|
||||
<span className={styles.block}>
|
||||
<Typography variant={"Body/Supporting text (caption)/smBold"}>
|
||||
<span className={styles.blockLabel}>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Where to?",
|
||||
})}
|
||||
</span>
|
||||
</Typography>
|
||||
<Typography variant={"Body/Paragraph/mdRegular"}>
|
||||
<span className={styles.placeholder}>
|
||||
{searchTerm
|
||||
? searchTerm
|
||||
: intl.formatMessage({
|
||||
defaultMessage: "Destination",
|
||||
})}
|
||||
</span>
|
||||
</Typography>
|
||||
</span>
|
||||
{/* Button can't contain HR elements */}
|
||||
<Divider color="Border/Divider/Subtle" variant="vertical" />
|
||||
<span className={styles.block}>
|
||||
<Typography variant={"Body/Supporting text (caption)/smBold"}>
|
||||
<span className={styles.blockLabel}>{totalNightsMsg}</span>
|
||||
</Typography>
|
||||
<Typography variant={"Body/Paragraph/mdRegular"}>
|
||||
<span className={styles.placeholder}>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "{selectedFromDate} - {selectedToDate}",
|
||||
},
|
||||
{
|
||||
selectedFromDate,
|
||||
selectedToDate,
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
</Typography>
|
||||
</span>
|
||||
<span className={styles.icon}>
|
||||
<MaterialIcon icon="search" color="Icon/Inverted" />
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
{locationAndDateIsSet && (
|
||||
<>
|
||||
<span className={styles.block}>
|
||||
<Typography variant={"Body/Supporting text (caption)/smRegular"}>
|
||||
<span className={styles.blockLabel}>{selectedSearchTerm}</span>
|
||||
</Typography>
|
||||
<Typography variant={"Body/Supporting text (caption)/smRegular"}>
|
||||
<span className={styles.locationAndDate}>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage:
|
||||
"{selectedFromDate} - {selectedToDate} ({totalNights}) {details}",
|
||||
},
|
||||
{
|
||||
selectedFromDate,
|
||||
selectedToDate,
|
||||
totalNights: totalNightsMsg,
|
||||
details: totalDetails.join(", "),
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
</Typography>
|
||||
</span>
|
||||
<span className={styles.icon}>
|
||||
<MaterialIcon icon="edit_square" color="Icon/Inverted" />
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export function MobileToggleButtonSkeleton() {
|
||||
const intl = useIntl()
|
||||
|
||||
return (
|
||||
<div className={styles.partial}>
|
||||
<span className={styles.block}>
|
||||
<Typography variant={"Body/Supporting text (caption)/smBold"}>
|
||||
<span className={styles.blockLabel}>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Where to?",
|
||||
})}
|
||||
</span>
|
||||
</Typography>
|
||||
<SkeletonShimmer display={"block"} height="20px" width="11ch" />
|
||||
</span>
|
||||
<Divider color="Border/Divider/Subtle" variant="vertical" />
|
||||
<span className={styles.block}>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span className={styles.blockLabel}>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage:
|
||||
"{totalNights, plural, one {# night} other {# nights}}",
|
||||
},
|
||||
{ totalNights: 0 }
|
||||
)}
|
||||
</span>
|
||||
</Typography>
|
||||
<SkeletonShimmer display={"block"} height="20px" width="13ch" />
|
||||
</span>
|
||||
<span className={styles.icon}>
|
||||
<MaterialIcon icon="search" color="Icon/Inverted" />
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user