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,196 @@
|
||||
"use client"
|
||||
import { useCallback, useEffect, useRef, useState } from "react"
|
||||
import { useFormContext, useWatch } from "react-hook-form"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats"
|
||||
import { dt } from "@scandic-hotels/common/dt"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import useLang from "../../../hooks/useLang"
|
||||
import DatePickerRangeDesktop from "./Range/Desktop"
|
||||
import DatePickerRangeMobile from "./Range/Mobile"
|
||||
|
||||
import styles from "./date-picker.module.css"
|
||||
|
||||
import type { DateRange } from "react-day-picker"
|
||||
|
||||
type DatePickerFormProps = {
|
||||
name?: string
|
||||
}
|
||||
export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
|
||||
const lang = useLang()
|
||||
const intl = useIntl()
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const selectedDate = useWatch({ name })
|
||||
const { register, setValue } = useFormContext()
|
||||
const ref = useRef<HTMLDivElement | null>(null)
|
||||
|
||||
const close = useCallback(() => {
|
||||
if (!selectedDate.toDate) {
|
||||
setValue(
|
||||
name,
|
||||
{
|
||||
fromDate: selectedDate.fromDate,
|
||||
toDate: dt(selectedDate.fromDate).add(1, "day").format("YYYY-MM-DD"),
|
||||
},
|
||||
{ shouldDirty: true }
|
||||
)
|
||||
}
|
||||
|
||||
setIsOpen(false)
|
||||
}, [name, setValue, selectedDate])
|
||||
|
||||
function showOnFocus() {
|
||||
setIsOpen(true)
|
||||
}
|
||||
|
||||
function handleSelectDate(
|
||||
_nextRange: DateRange | undefined,
|
||||
selectedDay: Date
|
||||
) {
|
||||
const now = dt()
|
||||
const dateClicked = dt(selectedDay)
|
||||
const dateClickedFormatted = dateClicked.format("YYYY-MM-DD")
|
||||
/* check if selected date is not before todays date,
|
||||
which happens when "Enter" key is pressed in any other input field of the form */
|
||||
if (!dateClicked.isBefore(now, "day")) {
|
||||
// Handle form value updates based on the requirements
|
||||
if (selectedDate.fromDate && selectedDate.toDate) {
|
||||
// Both dates were previously selected, starting fresh with new date
|
||||
setValue(
|
||||
name,
|
||||
{
|
||||
fromDate: dateClickedFormatted,
|
||||
toDate: undefined,
|
||||
},
|
||||
{ shouldDirty: true }
|
||||
)
|
||||
} else if (selectedDate.fromDate && !selectedDate.toDate) {
|
||||
// If the selected day is the same as the first date, we don't need to update the form value
|
||||
if (dateClicked.isSame(selectedDate.fromDate)) {
|
||||
return
|
||||
}
|
||||
// We're selecting the second date
|
||||
if (dateClicked.isBefore(selectedDate.fromDate)) {
|
||||
// If second selected date is before first date, swap them
|
||||
setValue(
|
||||
name,
|
||||
{
|
||||
fromDate: dateClickedFormatted,
|
||||
toDate: selectedDate.fromDate,
|
||||
},
|
||||
{ shouldDirty: true }
|
||||
)
|
||||
} else {
|
||||
// If second selected date is after first date, keep order
|
||||
setValue(
|
||||
name,
|
||||
{
|
||||
fromDate: selectedDate.fromDate,
|
||||
toDate: dateClickedFormatted,
|
||||
},
|
||||
{ shouldDirty: true }
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const closeIfOutside = useCallback(
|
||||
(target: HTMLElement) => {
|
||||
if (ref.current && target && !ref.current.contains(target)) {
|
||||
close()
|
||||
}
|
||||
},
|
||||
[close, ref]
|
||||
)
|
||||
|
||||
function closeOnBlur(evt: FocusEvent) {
|
||||
if (isOpen) {
|
||||
const target = evt.relatedTarget as HTMLElement
|
||||
closeIfOutside(target)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(evt: Event) {
|
||||
if (isOpen) {
|
||||
const target = evt.target as HTMLElement
|
||||
closeIfOutside(target)
|
||||
}
|
||||
}
|
||||
document.body.addEventListener("click", handleClickOutside)
|
||||
return () => {
|
||||
document.body.removeEventListener("click", handleClickOutside)
|
||||
}
|
||||
}, [closeIfOutside, isOpen])
|
||||
|
||||
const selectedFromDate = dt(selectedDate.fromDate)
|
||||
.locale(lang)
|
||||
.format(longDateFormat[lang])
|
||||
const selectedToDate = !!selectedDate.toDate
|
||||
? dt(selectedDate.toDate).locale(lang).format(longDateFormat[lang])
|
||||
: ""
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.container}
|
||||
onBlur={(e) => {
|
||||
closeOnBlur(e.nativeEvent)
|
||||
}}
|
||||
data-isopen={isOpen}
|
||||
ref={ref}
|
||||
>
|
||||
<button
|
||||
className={styles.btn}
|
||||
onFocus={showOnFocus}
|
||||
onClick={() => setIsOpen(true)}
|
||||
type="button"
|
||||
>
|
||||
<Typography variant="Body/Paragraph/mdRegular" className={styles.body}>
|
||||
<span>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "{selectedFromDate} - {selectedToDate}",
|
||||
},
|
||||
{
|
||||
selectedFromDate,
|
||||
selectedToDate,
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
</Typography>
|
||||
</button>
|
||||
<input {...register("date.fromDate")} type="hidden" />
|
||||
<input {...register("date.toDate")} type="hidden" />
|
||||
<div aria-modal className={styles.hideWrapper} role="dialog">
|
||||
<DatePickerRangeDesktop
|
||||
close={close}
|
||||
handleOnSelect={handleSelectDate}
|
||||
// DayPicker lib needs Daterange in form as below to show appropriate UI
|
||||
selectedRange={{
|
||||
from: dt(selectedDate.fromDate).toDate(),
|
||||
to: selectedDate.toDate
|
||||
? dt(selectedDate.toDate).toDate()
|
||||
: undefined,
|
||||
}}
|
||||
/>
|
||||
{isOpen && (
|
||||
<DatePickerRangeMobile
|
||||
close={close}
|
||||
handleOnSelect={handleSelectDate}
|
||||
// DayPicker lib needs Daterange in form as below to show appropriate UI
|
||||
selectedRange={{
|
||||
from: dt(selectedDate.fromDate).toDate(),
|
||||
to: selectedDate.toDate
|
||||
? dt(selectedDate.toDate).toDate()
|
||||
: undefined,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user