1bd8fe6821
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
116 lines
3.4 KiB
TypeScript
116 lines
3.4 KiB
TypeScript
"use client"
|
|
import { 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 { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
|
|
import Subtitle from "@scandic-hotels/design-system/Subtitle"
|
|
|
|
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 DatePickerSingleProps = {
|
|
close: () => void
|
|
startMonth?: Date
|
|
hideHeader?: boolean
|
|
selectedDate: Date
|
|
handleOnSelect: (selected: Date) => void
|
|
}
|
|
|
|
export default function DatePickerSingleMobile({
|
|
close,
|
|
handleOnSelect,
|
|
selectedDate,
|
|
hideHeader,
|
|
}: DatePickerSingleProps) {
|
|
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 currentDate = dt().toDate()
|
|
const lastDayOfPreviousMonth = dt(currentDate)
|
|
.set("date", 1)
|
|
.subtract(1, "day")
|
|
.toDate()
|
|
const yesterday = dt(currentDate).subtract(1, "day").toDate()
|
|
|
|
// 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} ${hideHeader ? styles.noHeader : ""}`}>
|
|
<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,
|
|
root: `${classNames.root} ${styles.root}`,
|
|
week: styles.week,
|
|
weekday: `${classNames.weekday} ${styles.weekDay}`,
|
|
}}
|
|
disabled={[
|
|
{ from: lastDayOfPreviousMonth, to: yesterday },
|
|
{ from: endDate, to: endOfLastMonth },
|
|
]}
|
|
endMonth={endDate}
|
|
formatters={{
|
|
formatWeekdayName(weekday) {
|
|
return dt(weekday).locale(lang).format("ddd")
|
|
},
|
|
}}
|
|
hideNavigation
|
|
lang={lang}
|
|
locale={locale}
|
|
mode="single"
|
|
/** Showing full year or what's left of it */
|
|
numberOfMonths={13}
|
|
onDayClick={handleOnSelect}
|
|
required
|
|
selected={selectedDate}
|
|
startMonth={currentDate}
|
|
weekStartsOn={1}
|
|
components={{
|
|
MonthCaption(props) {
|
|
return (
|
|
<div className={props.className}>
|
|
<Subtitle asChild type="two">
|
|
{props.children}
|
|
</Subtitle>
|
|
</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>
|
|
)
|
|
}
|