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,151 @@
|
||||
"use client"
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
import { type DateRange, DayPicker } from "react-day-picker"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { Lang } from "@scandic-hotels/common/constants/language"
|
||||
import { dt } from "@scandic-hotels/common/dt"
|
||||
import Body from "@scandic-hotels/design-system/Body"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import useLang from "../../../../hooks/useLang"
|
||||
import { locales } from "../locales"
|
||||
|
||||
import styles from "./mobile.module.css"
|
||||
import classNames from "react-day-picker/style.module.css"
|
||||
|
||||
type DatePickerRangeProps = {
|
||||
close: () => void
|
||||
startMonth?: Date
|
||||
hideHeader?: boolean
|
||||
selectedRange: DateRange | undefined
|
||||
handleOnSelect: (nextRange: DateRange | undefined, selectedDay: Date) => void
|
||||
}
|
||||
|
||||
export default function DatePickerRangeMobile({
|
||||
close,
|
||||
handleOnSelect,
|
||||
selectedRange,
|
||||
}: DatePickerRangeProps) {
|
||||
const lang = useLang()
|
||||
const intl = useIntl()
|
||||
|
||||
/** English is default language and doesn't need to be imported */
|
||||
const locale = lang === Lang.en ? undefined : locales[lang]
|
||||
const monthsRef = useRef<HTMLDivElement | null>(null)
|
||||
const [autoScrollEnabled, setAutoScrollEnabled] = useState(true)
|
||||
|
||||
const currentDate = dt().toDate()
|
||||
const lastDayOfPreviousMonth = dt(currentDate)
|
||||
.set("date", 1)
|
||||
.subtract(1, "day")
|
||||
.toDate()
|
||||
|
||||
const yesterday = dt(currentDate).subtract(1, "day").toDate()
|
||||
|
||||
useEffect(() => {
|
||||
if (!monthsRef.current || !selectedRange?.from || !autoScrollEnabled) return
|
||||
|
||||
const selectedDay = monthsRef.current.querySelector(
|
||||
'td[aria-selected="true"]:not([data-outside="true"])'
|
||||
)
|
||||
|
||||
const targetMonth = selectedDay?.closest(`.${styles.month}`)
|
||||
|
||||
if (targetMonth) {
|
||||
targetMonth.scrollIntoView({ block: "start" })
|
||||
}
|
||||
}, [selectedRange, autoScrollEnabled])
|
||||
|
||||
function handleSelectWrapper(
|
||||
dateRange: DateRange | undefined,
|
||||
selectedDay: Date
|
||||
) {
|
||||
setAutoScrollEnabled(false)
|
||||
handleOnSelect(dateRange, selectedDay)
|
||||
}
|
||||
|
||||
// Max future date allowed to book kept same as of existing prod.
|
||||
const endDate = dt(currentDate).add(395, "day").toDate()
|
||||
const endOfLastMonth = dt(endDate).endOf("month").toDate()
|
||||
return (
|
||||
<div className={styles.container} ref={monthsRef}>
|
||||
<header className={styles.header}>
|
||||
<button className={styles.close} onClick={close} type="button">
|
||||
<MaterialIcon icon="close" />
|
||||
</button>
|
||||
</header>
|
||||
<DayPicker
|
||||
classNames={{
|
||||
...classNames,
|
||||
caption_label: `${classNames.caption_label} ${styles.captionLabel}`,
|
||||
day: `${classNames.day} ${styles.day}`,
|
||||
day_button: `${classNames.day_button} ${styles.dayButton}`,
|
||||
month: styles.month,
|
||||
month_caption: `${classNames.month_caption} ${styles.monthCaption}`,
|
||||
months: styles.months,
|
||||
range_end: styles.rangeEnd,
|
||||
range_middle: styles.rangeMiddle,
|
||||
range_start: styles.rangeStart,
|
||||
root: `${classNames.root} ${styles.root}`,
|
||||
week: styles.week,
|
||||
weekday: `${classNames.weekday} ${styles.weekDay}`,
|
||||
}}
|
||||
disabled={[
|
||||
{ from: lastDayOfPreviousMonth, to: yesterday },
|
||||
{ from: endDate, to: endOfLastMonth },
|
||||
]}
|
||||
endMonth={endDate}
|
||||
excludeDisabled
|
||||
formatters={{
|
||||
formatWeekdayName(weekday) {
|
||||
return dt(weekday).locale(lang).format("ddd")
|
||||
},
|
||||
}}
|
||||
hideNavigation
|
||||
lang={lang}
|
||||
locale={locale}
|
||||
mode="range"
|
||||
/** Showing full year or what's left of it */
|
||||
numberOfMonths={13}
|
||||
onSelect={(dateRange, selectedDay) =>
|
||||
handleSelectWrapper(dateRange, selectedDay)
|
||||
}
|
||||
required
|
||||
selected={selectedRange}
|
||||
startMonth={currentDate}
|
||||
weekStartsOn={1}
|
||||
components={{
|
||||
MonthCaption(props) {
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<h3>{props.children}</h3>
|
||||
</Typography>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<footer className={styles.footer}>
|
||||
<Button
|
||||
className={styles.button}
|
||||
intent="tertiary"
|
||||
onPress={close}
|
||||
size="large"
|
||||
theme="base"
|
||||
>
|
||||
<Body color="white" textTransform="bold" asChild>
|
||||
<span>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Select dates",
|
||||
})}
|
||||
</span>
|
||||
</Body>
|
||||
</Button>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user