@qite/tide-booking-component 1.2.4 → 1.2.5

package/src/booking-product/components/date-range-picker/index.tsx

@@ -1,181 +1,196 @@
-import {
-  endOfDay,
-  endOfMonth,
-  getMonth,
-  getYear,
-  isAfter,
-  isEqual,
-  isWithinInterval,
-  startOfDay,
-} from "date-fns";
-
-import { isNil } from "lodash";
-import React, { useEffect, useState } from "react";
-import Calendar from "./calendar";
-
-interface DateRangePickerProps {
-  fromDate?: Date;
-  toDate?: Date;
-  focusMonth?: { month: number; year: number };
-  locale?: Locale;
-  duration?: number;
-  disabledDaysFunction?: (date: Date) => boolean;
-  extraClassNamesFunction?: (date: Date) => string[];
-  dayContentFunction?: (date: Date) => JSX.Element | null | undefined;
-  onSelectionChange?: (fromDate: Date, toDate: Date) => void;
-  onFromDateChange?: (date?: Date) => void;
-  onToDateChange?: (date?: Date) => void;
-  onFocusMonthChange?: (focusMonth: { month: number; year: number }) => void;
-}
-
-const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
-  const [fromDate, setFromDate] = useState<Date | undefined>(props.fromDate);
-  const [toDate, setToDate] = useState<Date | undefined>(props.toDate);
-  const [focusMonth, setFocusMonth] = useState<{ month: number; year: number }>(
-    props.focusMonth ?? { year: getYear(new Date()), month: getMonth(new Date()) }
-  );
-  const [isWaitingForToDate, setWaitingForToDate] = useState<boolean>(false);
-
-  const handleDayClick = (day: Date) => {
-    const { onSelectionChange } = props;
-
-    if (isWaitingForToDate && !isNil(fromDate) && isAfter(day, fromDate)) {
-      setToDate(day);
-      setWaitingForToDate(false);
-
-      if (props.onToDateChange) {
-        props.onToDateChange(undefined);
-      }
-
-      if (onSelectionChange) {
-        onSelectionChange(fromDate, day);
-      }
-    } else {
-      setFromDate(day);
-
-      if (props.duration) {
-        const to = new Date(
-          Date.UTC(day.getFullYear(), day.getMonth(), day.getDate() + props.duration)
-        );
-        setToDate(to);
-
-        if (onSelectionChange) {
-          onSelectionChange(day, to);
-        }
-      } else {
-        setToDate(undefined);
-        setWaitingForToDate(true);
-      }
-
-      if (props.onFromDateChange) {
-        props.onFromDateChange(day);
-      }
-    }
-  };
-
-  const handleDayMouseOver = (day: Date) => {
-    if (
-      isWaitingForToDate &&
-      (isNil(fromDate) || isEqual(day, fromDate) || isAfter(day, fromDate))
-    ) {
-      setToDate(day);
-    }
-  };
-
-  const handlePreviousClick = () => {
-    const { month, year } = focusMonth;
-
-    const previousMonth = (month - 1) % 12;
-    const previousMonthsYear = previousMonth > month ? year - 1 : year;
-
-    const newFocusMonth = { year: previousMonthsYear, month: previousMonth };
-
-    setFocusMonth(newFocusMonth);
-
-    if (props.onFocusMonthChange) {
-      props.onFocusMonthChange(newFocusMonth);
-    }
-  };
-
-  const handleNextClick = () => {
-    const { month, year } = focusMonth;
-
-    const nextMonth = (month + 1) % 12;
-    const nextMonthsYear = nextMonth < month ? year + 1 : year;
-
-    const newFocusMonth = { year: nextMonthsYear, month: nextMonth };
-
-    setFocusMonth(newFocusMonth);
-
-    if (props.onFocusMonthChange) {
-      props.onFocusMonthChange(newFocusMonth);
-    }
-  };
-
-  const today = startOfDay(new Date());
-
-  const firstCalendarYear = focusMonth.year;
-  const firstCalendarMonth = focusMonth.month;
-
-  const secondCalendarMonth = (firstCalendarMonth + 1) % 12;
-  const secondCalendarYear =
-    secondCalendarMonth < firstCalendarMonth ? firstCalendarYear + 1 : firstCalendarYear;
-
-  const checkIfDateIsSelected = (date: Date) =>
-    isNil(toDate)
-      ? !isNil(fromDate) && isEqual(date, fromDate)
-      : !isNil(fromDate) &&
-        isWithinInterval(date, { start: startOfDay(fromDate), end: endOfDay(toDate) });
-
-  useEffect(() => {
-    setFromDate(props.fromDate);
-    setToDate(props.toDate);
-  }, [props.fromDate?.valueOf(), props.toDate?.valueOf()]);
-
-  useEffect(() => {
-    if (props.fromDate) {
-      setFocusMonth({ month: props.fromDate.getMonth(), year: props.fromDate.getFullYear() });
-    }
-  }, [props.fromDate?.valueOf()]);
-
-  return (
-    <div className="date-range-picker">
-      <div className="date-range-picker__from">
-        <Calendar
-          year={firstCalendarYear}
-          month={firstCalendarMonth}
-          onDayClick={handleDayClick}
-          onDayMouseOver={handleDayMouseOver}
-          onPreviousClick={handlePreviousClick}
-          hasPreviousButton={isAfter(
-            new Date(firstCalendarYear, firstCalendarMonth),
-            endOfMonth(today)
-          )}
-          hasNextButton={false}
-          selectedDaysFunction={checkIfDateIsSelected}
-          disabledDaysFunction={props.disabledDaysFunction}
-          extraClassNamesFunction={props.extraClassNamesFunction}
-          dayContentFunction={props.dayContentFunction}
-          hasFixedHeight={true}
-        />
-      </div>
-      <div className="date-range-picker__to">
-        <Calendar
-          year={secondCalendarYear}
-          month={secondCalendarMonth}
-          onDayClick={handleDayClick}
-          onDayMouseOver={handleDayMouseOver}
-          onNextClick={handleNextClick}
-          hasPreviousButton={false}
-          selectedDaysFunction={checkIfDateIsSelected}
-          disabledDaysFunction={props.disabledDaysFunction}
-          extraClassNamesFunction={props.extraClassNamesFunction}
-          dayContentFunction={props.dayContentFunction}
-          hasFixedHeight={true}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default DateRangePicker;
+import {
+  endOfDay,
+  endOfMonth,
+  getMonth,
+  getYear,
+  isAfter,
+  isEqual,
+  isWithinInterval,
+  startOfDay,
+} from "date-fns";
+
+import { isNil } from "lodash";
+import React, { useEffect, useState } from "react";
+import Calendar from "./calendar";
+
+interface DateRangePickerProps {
+  fromDate?: Date;
+  toDate?: Date;
+  focusMonth?: { month: number; year: number };
+  locale?: Locale;
+  duration?: number;
+  disabledDaysFunction?: (date: Date) => boolean;
+  extraClassNamesFunction?: (date: Date) => string[];
+  dayContentFunction?: (date: Date) => JSX.Element | null | undefined;
+  onSelectionChange?: (fromDate: Date, toDate: Date) => void;
+  onFromDateChange?: (date?: Date) => void;
+  onToDateChange?: (date?: Date) => void;
+  onFocusMonthChange?: (focusMonth: { month: number; year: number }) => void;
+}
+
+const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
+  const [fromDate, setFromDate] = useState<Date | undefined>(props.fromDate);
+  const [toDate, setToDate] = useState<Date | undefined>(props.toDate);
+  const [focusMonth, setFocusMonth] = useState<{ month: number; year: number }>(
+    props.focusMonth ?? {
+      year: getYear(new Date()),
+      month: getMonth(new Date()),
+    }
+  );
+  const [isWaitingForToDate, setWaitingForToDate] = useState<boolean>(false);
+
+  const handleDayClick = (day: Date) => {
+    const { onSelectionChange } = props;
+
+    if (isWaitingForToDate && !isNil(fromDate) && isAfter(day, fromDate)) {
+      setToDate(day);
+      setWaitingForToDate(false);
+
+      if (props.onToDateChange) {
+        props.onToDateChange(undefined);
+      }
+
+      if (onSelectionChange) {
+        onSelectionChange(fromDate, day);
+      }
+    } else {
+      setFromDate(day);
+
+      if (props.duration) {
+        const to = new Date(
+          Date.UTC(
+            day.getFullYear(),
+            day.getMonth(),
+            day.getDate() + props.duration
+          )
+        );
+        setToDate(to);
+
+        if (onSelectionChange) {
+          onSelectionChange(day, to);
+        }
+      } else {
+        setToDate(undefined);
+        setWaitingForToDate(true);
+      }
+
+      if (props.onFromDateChange) {
+        props.onFromDateChange(day);
+      }
+    }
+  };
+
+  const handleDayMouseOver = (day: Date) => {
+    if (
+      isWaitingForToDate &&
+      (isNil(fromDate) || isEqual(day, fromDate) || isAfter(day, fromDate))
+    ) {
+      setToDate(day);
+    }
+  };
+
+  const handlePreviousClick = () => {
+    const { month, year } = focusMonth;
+
+    const previousMonth = (month - 1) % 12;
+    const previousMonthsYear = previousMonth > month ? year - 1 : year;
+
+    const newFocusMonth = { year: previousMonthsYear, month: previousMonth };
+
+    setFocusMonth(newFocusMonth);
+
+    if (props.onFocusMonthChange) {
+      props.onFocusMonthChange(newFocusMonth);
+    }
+  };
+
+  const handleNextClick = () => {
+    const { month, year } = focusMonth;
+
+    const nextMonth = (month + 1) % 12;
+    const nextMonthsYear = nextMonth < month ? year + 1 : year;
+
+    const newFocusMonth = { year: nextMonthsYear, month: nextMonth };
+
+    setFocusMonth(newFocusMonth);
+
+    if (props.onFocusMonthChange) {
+      props.onFocusMonthChange(newFocusMonth);
+    }
+  };
+
+  const today = startOfDay(new Date());
+
+  const firstCalendarYear = focusMonth.year;
+  const firstCalendarMonth = focusMonth.month;
+
+  const secondCalendarMonth = (firstCalendarMonth + 1) % 12;
+  const secondCalendarYear =
+    secondCalendarMonth < firstCalendarMonth
+      ? firstCalendarYear + 1
+      : firstCalendarYear;
+
+  const checkIfDateIsSelected = (date: Date) =>
+    isNil(toDate)
+      ? !isNil(fromDate) && isEqual(date, fromDate)
+      : !isNil(fromDate) &&
+        isWithinInterval(date, {
+          start: startOfDay(fromDate),
+          end: endOfDay(toDate),
+        });
+
+  useEffect(() => {
+    setFromDate(props.fromDate);
+    setToDate(props.toDate);
+  }, [props.fromDate?.valueOf(), props.toDate?.valueOf()]);
+
+  useEffect(() => {
+    if (props.fromDate) {
+      setFocusMonth({
+        month: props.fromDate.getMonth(),
+        year: props.fromDate.getFullYear(),
+      });
+    }
+  }, [props.fromDate?.valueOf()]);
+
+  return (
+    <div className="date-range-picker">
+      <div className="date-range-picker__from">
+        <Calendar
+          year={firstCalendarYear}
+          month={firstCalendarMonth}
+          onDayClick={handleDayClick}
+          onDayMouseOver={handleDayMouseOver}
+          onPreviousClick={handlePreviousClick}
+          hasPreviousButton={isAfter(
+            new Date(firstCalendarYear, firstCalendarMonth),
+            endOfMonth(today)
+          )}
+          hasNextButton={false}
+          selectedDaysFunction={checkIfDateIsSelected}
+          disabledDaysFunction={props.disabledDaysFunction}
+          extraClassNamesFunction={props.extraClassNamesFunction}
+          dayContentFunction={props.dayContentFunction}
+          hasFixedHeight={true}
+        />
+      </div>
+      <div className="date-range-picker__to">
+        <Calendar
+          year={secondCalendarYear}
+          month={secondCalendarMonth}
+          onDayClick={handleDayClick}
+          onDayMouseOver={handleDayMouseOver}
+          onNextClick={handleNextClick}
+          hasPreviousButton={false}
+          selectedDaysFunction={checkIfDateIsSelected}
+          disabledDaysFunction={props.disabledDaysFunction}
+          extraClassNamesFunction={props.extraClassNamesFunction}
+          dayContentFunction={props.dayContentFunction}
+          hasFixedHeight={true}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DateRangePicker;

package/src/booking-product/components/dates.tsx

@@ -1,132 +1,136 @@
-import { format, isBefore, startOfDay } from "date-fns";
-import React, { useContext, useEffect, useState } from "react";
-import { usePopper } from "react-popper";
-import { buildClassName } from "../../shared/utils/class-util";
-import { getTranslations } from "../../shared/utils/localization-util";
-import SettingsContext from "../settings-context";
-import { DateRange } from "../types";
-import DateRangePicker from "./date-range-picker";
-import Icon from "./icon";
-
-interface DatesProps {
-  value?: DateRange;
-  duration?: number;
-  onChange?: (value: DateRange) => void;
-}
-
-const Dates: React.FC<DatesProps> = ({
-  value,
-  duration,
-  onChange
-}) => {
-  const {
-    language,
-  } = useContext(SettingsContext);
-  const translations = getTranslations(language);
-  const mql = typeof window !== "undefined" ? window.matchMedia("(min-width: 1200px)") : undefined;
-
-  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  const [panelActive, setPanelActive] = useState<boolean>(false);
-
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: "top",
-    modifiers: [
-      {
-        name: "offset",
-        options: {
-          offset: [0, -40],
-        },
-      },
-      {
-        name: "preventOverflow",
-        options: {
-          padding: 40,
-        },
-      }
-    ],
-  });
-
-  const handleInputFocus = () => {
-    if (!panelActive) setPanelActive(true);
-  }
-
-  const handleSelectionChange = (fromDate?: Date, toDate?: Date) => {
-    if (onChange) {
-      onChange({ fromDate, toDate });
-      setPanelActive(false);
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener("mousedown", handleDocumentClick);
-    return () => {
-      document.removeEventListener("mousedown", handleDocumentClick);
-    };
-  });
-
-  const handleDocumentClick: EventListener = (event) => {
-    if (referenceElement && !referenceElement.contains(event.target as Node)) {
-      if (panelActive) setPanelActive(false);
-    }
-  };
-
-  return (
-    <div className="booking-product__dates" ref={setReferenceElement}>
-      <div className="booking-product__dates-title">
-        <Icon name="ui-calendar" width={25} height={25} />
-        {translations.PRODUCT.TRAVEL_PERIOD}
-      </div>
-      <div className="form__group form__group--datepicker form__group--icon">
-        <div className="form__group-input">
-          <label className="form__label">{translations.PRODUCT.DEPARTURE}</label>
-          <input
-            type="text"
-            readOnly
-            value={value?.fromDate ? format(value.fromDate, "dd/MM/yyyy") : ""}
-            className="form__input"
-            placeholder={translations.PRODUCT.DEPARTURE_DATE}
-            onClick={handleInputFocus}
-          />
-        </div>
-
-        <div className="form__group-input">
-          <label className="form__label">{translations.PRODUCT.RETURN}</label>
-          <input
-            type="text"
-            readOnly
-            value={value?.toDate ? format(value.toDate, "dd/MM/yyyy") : ""}
-            className="form__input"
-            placeholder={translations.PRODUCT.RETURN_DATE}
-            onClick={handleInputFocus}
-          />
-        </div>
-        <div
-          ref={setPopperElement}
-          className={buildClassName([
-            "qsm__panel qsm__panel--bordered qsm__panel--dates-pricing",
-            panelActive && "qsm__panel--active",
-            !mql?.matches && "qsm__panel--mobile"
-          ])}
-          style={mql?.matches ? styles.popper : undefined}
-          {...attributes.popper}
-        >
-          <DateRangePicker
-            fromDate={value?.fromDate}
-            toDate={value?.toDate}
-            duration={duration}
-            disabledDaysFunction={(date) => isBefore(date, startOfDay(new Date()))}
-            onSelectionChange={handleSelectionChange}
-          />
-          {!mql?.matches && (
-            <div className="qsm__close" onClick={() => setPanelActive(false)}>
-              <Icon name="ui-close" height={25} width={25} />
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default Dates;
+import { format, isBefore, startOfDay } from "date-fns";
+import React, { useContext, useEffect, useState } from "react";
+import { usePopper } from "react-popper";
+import { buildClassName } from "../../shared/utils/class-util";
+import { getTranslations } from "../../shared/utils/localization-util";
+import SettingsContext from "../settings-context";
+import { DateRange } from "../types";
+import DateRangePicker from "./date-range-picker";
+import Icon from "./icon";
+
+interface DatesProps {
+  value?: DateRange;
+  duration?: number;
+  onChange?: (value: DateRange) => void;
+}
+
+const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
+  const { language } = useContext(SettingsContext);
+  const translations = getTranslations(language);
+  const mql =
+    typeof window !== "undefined"
+      ? window.matchMedia("(min-width: 1200px)")
+      : undefined;
+
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null
+  );
+  const [panelActive, setPanelActive] = useState<boolean>(false);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "top",
+    modifiers: [
+      {
+        name: "offset",
+        options: {
+          offset: [0, -40],
+        },
+      },
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 40,
+        },
+      },
+    ],
+  });
+
+  const handleInputFocus = () => {
+    if (!panelActive) setPanelActive(true);
+  };
+
+  const handleSelectionChange = (fromDate?: Date, toDate?: Date) => {
+    if (onChange) {
+      onChange({ fromDate, toDate });
+      setPanelActive(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleDocumentClick);
+    return () => {
+      document.removeEventListener("mousedown", handleDocumentClick);
+    };
+  });
+
+  const handleDocumentClick: EventListener = (event) => {
+    if (referenceElement && !referenceElement.contains(event.target as Node)) {
+      if (panelActive) setPanelActive(false);
+    }
+  };
+
+  return (
+    <div className="booking-product__dates" ref={setReferenceElement}>
+      <div className="booking-product__dates-title">
+        <Icon name="ui-calendar" width={25} height={25} />
+        {translations.PRODUCT.TRAVEL_PERIOD}
+      </div>
+      <div className="form__group form__group--datepicker form__group--icon">
+        <div className="form__group-input">
+          <label className="form__label">
+            {translations.PRODUCT.DEPARTURE}
+          </label>
+          <input
+            type="text"
+            readOnly
+            value={value?.fromDate ? format(value.fromDate, "dd/MM/yyyy") : ""}
+            className="form__input"
+            placeholder={translations.PRODUCT.DEPARTURE_DATE}
+            onClick={handleInputFocus}
+          />
+        </div>
+
+        <div className="form__group-input">
+          <label className="form__label">{translations.PRODUCT.RETURN}</label>
+          <input
+            type="text"
+            readOnly
+            value={value?.toDate ? format(value.toDate, "dd/MM/yyyy") : ""}
+            className="form__input"
+            placeholder={translations.PRODUCT.RETURN_DATE}
+            onClick={handleInputFocus}
+          />
+        </div>
+        <div
+          ref={setPopperElement}
+          className={buildClassName([
+            "qsm__panel qsm__panel--bordered qsm__panel--dates-pricing",
+            panelActive && "qsm__panel--active",
+            !mql?.matches && "qsm__panel--mobile",
+          ])}
+          style={mql?.matches ? styles.popper : undefined}
+          {...attributes.popper}
+        >
+          <DateRangePicker
+            fromDate={value?.fromDate}
+            toDate={value?.toDate}
+            duration={duration}
+            disabledDaysFunction={(date) =>
+              isBefore(date, startOfDay(new Date()))
+            }
+            onSelectionChange={handleSelectionChange}
+          />
+          {!mql?.matches && (
+            <div className="qsm__close" onClick={() => setPanelActive(false)}>
+              <Icon name="ui-close" height={25} width={25} />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dates;