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,145 @@
|
||||
"use client"
|
||||
|
||||
import { 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 Caption from "@scandic-hotels/design-system/Caption"
|
||||
import { Divider } from "@scandic-hotels/design-system/Divider"
|
||||
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 "./desktop.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 DatePickerRangeDesktop({
|
||||
close,
|
||||
handleOnSelect,
|
||||
selectedRange,
|
||||
}: DatePickerRangeProps) {
|
||||
const lang = useLang()
|
||||
const intl = useIntl()
|
||||
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]
|
||||
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()
|
||||
|
||||
function handleMonthChange(selected: Date) {
|
||||
setMonth(selected)
|
||||
}
|
||||
return (
|
||||
<DayPicker
|
||||
classNames={{
|
||||
...classNames,
|
||||
caption_label: `${classNames.caption_label} ${styles.captionLabel}`,
|
||||
day: `${classNames.day} ${styles.day}`,
|
||||
day_button: `${classNames.day_button} ${styles.dayButton}`,
|
||||
footer: styles.footer,
|
||||
month_caption: `${classNames.month_caption} ${styles.monthCaption}`,
|
||||
months: `${classNames.months} ${styles.months}`,
|
||||
range_end: styles.rangeEnd,
|
||||
range_middle: styles.rangeMiddle,
|
||||
range_start: styles.rangeStart,
|
||||
root: `${classNames.root} ${styles.container}`,
|
||||
week: styles.week,
|
||||
weekday: `${classNames.weekday} ${styles.weekDay}`,
|
||||
nav: `${classNames.nav} ${styles.nav}`,
|
||||
button_next: `${classNames.button_next} ${styles.button_next}`,
|
||||
button_previous: `${classNames.button_previous} ${styles.button_previous}`,
|
||||
}}
|
||||
disabled={[
|
||||
{ from: lastDayOfPreviousMonth, to: yesterday },
|
||||
{ from: endDate, to: endOfLastMonth },
|
||||
]}
|
||||
excludeDisabled
|
||||
footer
|
||||
formatters={{
|
||||
formatWeekdayName(weekday) {
|
||||
return dt(weekday).locale(lang).format("ddd")
|
||||
},
|
||||
}}
|
||||
lang={lang}
|
||||
locale={locale}
|
||||
mode="range"
|
||||
month={month}
|
||||
numberOfMonths={2}
|
||||
onSelect={handleOnSelect}
|
||||
onMonthChange={handleMonthChange}
|
||||
required={false}
|
||||
selected={selectedRange}
|
||||
startMonth={currentDate}
|
||||
endMonth={endDate}
|
||||
weekStartsOn={1}
|
||||
components={{
|
||||
Chevron(props) {
|
||||
return (
|
||||
<MaterialIcon
|
||||
icon="chevron_left"
|
||||
className={props.className}
|
||||
size={20}
|
||||
/>
|
||||
)
|
||||
},
|
||||
Footer(props) {
|
||||
return (
|
||||
<>
|
||||
<Divider
|
||||
className={styles.divider}
|
||||
color="Border/Divider/Subtle"
|
||||
/>
|
||||
<footer className={props.className}>
|
||||
<Button
|
||||
intent="tertiary"
|
||||
onPress={close}
|
||||
size="small"
|
||||
theme="base"
|
||||
>
|
||||
<Caption color="white" type="bold" asChild>
|
||||
<span>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Select dates",
|
||||
})}
|
||||
</span>
|
||||
</Caption>
|
||||
</Button>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
},
|
||||
MonthCaption(props) {
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<Typography variant="Title/Subtitle/md">
|
||||
<h3>{props.children}</h3>
|
||||
</Typography>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user