b641f8387e
fix(SW-2534): Added validation error and fixed initial month in date picker for BW * Merged in revert-version (pull request #2128) revert including version in layouts and api responses * revert including version in layouts and api responses Approved-by: Linus Flood * feat: prevent users from selecting the same room when there is no vacancy for it * Merged in fix/no-my-stay-for-external-bookings (pull request #2126) fix: Only link web and app bookings to my stay Approved-by: Joakim Jäderberg * Merged in fix/bookingwidget-fixes (pull request #2135) Fix: (#SW-2663) bookingwidget mobile - Space around, border-radius and correct color on date field * fix: booking widget mobile - padding around booking widget and date color * Fixed rounded corners * Reduced minimum size of column Approved-by: Joakim Jäderberg * Merged in fix/LOY-105-signupform-error-messages (pull request #2121) feat(LOY-105): update signup form validation messages * feat(LOY-105): improve signup form validation messages Approved-by: Erik Tiekstra * fix(LOY-199): add missing benefits link * Merged in feat/SW-2340-aa-tracking-my-stay-pageview- (pull request #2133) feat: SW-2340 Implemented tracking on my-stay, webview my-stay and receipt page * feat: SW-2340 Implemented tracking on my-stay, webview my-stay and receipt page * feat: SW-2340 Updated webview tracking * feat: SW-2340 Updated receipt tracking Approved-by: Linus Flood * Merged in fix/SW-2804-missing-meeting-rooms (pull request #2138) fix: return [] when we get a 404 for meeting rooms for a hotel * fix: return [] when we get a 404 for meeting rooms for a hotel Approved-by: Linus Flood * feat(auth): limit output in session endpoint * fix(SW-2376): Vertically centered previous/next buttons inside carousel cards Approved-by: Matilda Landström * fix(SW-2055): Surrounded ul inside JsonToHtml with a typography component Approved-by: Matilda Landström * fix(SW-2621): Breaking too long words on heading inside destination city pages Approved-by: Matilda Landström * Merged in fix/sw-2763-external-scripts (pull request #2104) fix: try/catch external scripts to avoid them breaking our page #sw-2763 * fix: try/catch external scripts to avoid them breaking our page #sw-2763 Approved-by: Joakim Jäderberg * fix: handle non loaded surprises in case they're returned as null from server * feat(SW-2806): booking widget should not be blocked by sitewide alert * Merged in fix/remove-on-error (pull request #2142) fix: revert onError on the Script component * fix: revert onError on the Script component * Merged in fix/alert-icon (pull request #2139) fix(SW-2807): alert icons * fix(SW-2807): fix incorrect icon color on sitewide alert * fix(SW-2807): change error icon Approved-by: Erik Tiekstra Approved-by: Linus Flood * Merged in feat/SW-2760-SW-552-wellness-openinghours (pull request #2112) fix(SW-2760, SW-2552): fix opening hours wellness sidepeek * fix(SW-2760, SW-2552): fix opening hours wellness sidepeek Approved-by: Erik Tiekstra * Merged in feat/SW-1749-sidepeek-hotel-cta (pull request #2123) feat(SW-1749): add link to hotel page in sidepeek * feat(SW-1749): add link to hotel page in sidepeek Approved-by: Matilda Landström * fix(SW-2811): suggest list should follow where-to-field * fix(SW-2451): placement of suggest list * Merged in fix/SW-2684-booking-widget-text-overflow (pull request #2048) fix(SW-2684): truncate overflowing text in booking widget * fix: truncate overflowing text in booking widget * fix: change Body to Typography and css selector fix Approved-by: Hrishikesh Vaipurkar * Merged in feat/SW-2800-lightbox-history-state (pull request #2147) feat(SW-2800): closing image gallery and lightbox on using browser navigation * feat(SW-2800): closing image gallery and lightbox on using browser navigation Approved-by: Linus Flood * Merged in fix/enter-details-footer-margin (pull request #2150) fix: margin to footer on enter details * fix: margin to footer on enter details * Merged in fix/SW-2822-missing-meetingroom-images (pull request #2151) fix: meeting rooms with missing images * fix: meeting rooms with missing images Approved-by: Linus Flood Approved-by: Bianca Widstam
117 lines
3.6 KiB
TypeScript
117 lines
3.6 KiB
TypeScript
"use client"
|
|
import { DayPicker } from "react-day-picker"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
|
|
import { Lang } from "@/constants/languages"
|
|
import { dt } from "@/lib/dt"
|
|
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/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"
|
|
|
|
import type { DatePickerRangeProps } from "@/types/components/datepicker"
|
|
|
|
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 currentDate = dt().toDate()
|
|
const startOfCurrentMonth = dt(currentDate).set("date", 1).toDate()
|
|
const yesterday = dt(currentDate).subtract(1, "day").toDate()
|
|
|
|
// Max future date allowed to book kept same as of existing prod.
|
|
const endDate = dt().add(395, "day").toDate()
|
|
const endOfLastMonth = dt(endDate).endOf("month").toDate()
|
|
return (
|
|
<div className={styles.container}>
|
|
<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: startOfCurrentMonth, 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"
|
|
defaultMonth={selectedRange?.from}
|
|
/** Showing full year or what's left of it */
|
|
numberOfMonths={13}
|
|
onSelect={handleOnSelect}
|
|
required
|
|
selected={selectedRange}
|
|
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>
|
|
)
|
|
}
|