@qite/tide-booking-component 1.4.92 → 1.4.93

package/src/qsm/components/date-picker/index.tsx

@@ -1,152 +1,152 @@
-import React, { useRef, useState, useEffect, useContext } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { setFromDate, setToDate, setMobileFilterType, setMobileDatePickerMode, setMinDate, setMaxDate, setDateFlexibility } from '../../store/qsm-slice';
-import { QSMRootState } from '../../store/qsm-store';
-import { addYears, format, startOfDay } from 'date-fns';
-import DateRangePicker from '../date-range-picker';
-import useMediaQuery from '../../../shared/utils/use-media-query-util';
-import QSMConfigurationContext from '../../qsm-configuration-context';
-
-const DatePicker: React.FC = () => {
-  const dispatch = useDispatch();
-  const isSmallScreen = useMediaQuery('(max-width: 768px)');
-
-  /* 🔑  STATE FIRST (no TDZ issues) */
-  const [isOpen, setIsOpen] = useState(false); // range pop-over
-  const [isSingleOpen, setIsSingleOpen] = useState(false); // single pop-over
-
-  const { datesIcon, showReturnDate = true, minDate, maxDate, dateFlexibility = [] } = useContext(QSMConfigurationContext);
-
-  const isSingleDate = !showReturnDate;
-
-  const dateInputWrapperRef = useRef<HTMLDivElement>(null);
-  const dateInputRef = useRef<HTMLDivElement>(null);
-
-  const today = startOfDay(new Date());
-  const effectiveMinDate = minDate ?? today;
-  const effectiveMaxDate = maxDate ?? addYears(today, 1);
-
-  const { fromDate, toDate } = useSelector((state: QSMRootState) => ({
-    fromDate: state.qsm.fromDate,
-    toDate: state.qsm.toDate
-  }));
-
-  /* ----------------------- outside click close ----------------------- */
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dateInputWrapperRef.current &&
-        !dateInputWrapperRef.current.contains(event.target as Node) &&
-        dateInputRef.current &&
-        !dateInputRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-        setIsSingleOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  /* ----------------------- min/max & flexibility sync ---------------- */
-  useEffect(() => {
-    dispatch(setMinDate(effectiveMinDate.toISOString()));
-    dispatch(setMaxDate(effectiveMaxDate.toISOString()));
-  }, [dispatch, effectiveMinDate, effectiveMaxDate]);
-
-  useEffect(() => {
-    if (dateFlexibility.length) {
-      dispatch(setDateFlexibility(dateFlexibility));
-    }
-  }, [dispatch, JSON.stringify(dateFlexibility)]);
-
-  /* =================== SINGLE DATE (only departure) ================= */
-  if (isSingleDate) {
-    return (
-      <div className="qsm__double-input" ref={dateInputWrapperRef}>
-        <div
-          className="qsm__input-wrapper"
-          onClick={() => {
-            if (isSmallScreen) {
-              dispatch(setMobileDatePickerMode('single'));
-              dispatch(setMobileFilterType('date'));
-            } else {
-              setIsSingleOpen(true);
-            }
-          }}>
-          {datesIcon && <span className="qsm__input-icon">{datesIcon}</span>}
-          <label className="qsm__label">Vertrek</label>
-          <input type="text" className="qsm__input u-ps-2" placeholder="Datum" readOnly value={fromDate ? format(new Date(fromDate), 'dd/MM/yyyy') : ''} />
-        </div>
-
-        {!isSmallScreen && isSingleOpen && (
-          <div className="qsm__datepicker-popover" ref={dateInputRef}>
-            <DateRangePicker
-              fromDate={fromDate ? new Date(fromDate) : undefined}
-              onSelectionChange={(from) => {
-                dispatch(setFromDate(from ? from.toISOString() : undefined));
-                dispatch(setToDate(undefined));
-              }}
-              onRequestClose={() => setIsSingleOpen(false)}
-              isSingleDate
-            />
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  /* ======================== RANGE PICKER ============================= */
-  const handleFromDateClick = () => {
-    if (isSmallScreen) {
-      dispatch(setMobileDatePickerMode('range'));
-      dispatch(setMobileFilterType('date'));
-    } else {
-      setIsOpen(true);
-    }
-  };
-
-  return (
-    <div className="qsm__double-input" ref={dateInputWrapperRef}>
-      {/* Departure */}
-      <label className="qsm__input-wrapper" onClick={handleFromDateClick}>
-        {datesIcon && <span className="qsm__input-icon">{datesIcon}</span>}
-        <span className="qsm__label">Vertrek</span>
-        <input
-          type="text"
-          id="vertrek"
-          className="qsm__input u-ps-2"
-          placeholder="Datum"
-          readOnly
-          value={fromDate ? format(new Date(fromDate), 'dd/MM/yyyy') : ''}
-        />
-        <div className="qsm__input-line qsm__input-line--datepicker" />
-      </label>
-
-      {/* Return */}
-      <label className="qsm__input-wrapper" onClick={handleFromDateClick}>
-        {datesIcon && <span className="qsm__input-icon">{datesIcon}</span>}
-        <span className="qsm__label qsm__label--second-input-label">Retour</span>
-        <input type="text" id="retour" className="qsm__input" placeholder="Datum" readOnly value={toDate ? format(new Date(toDate), 'dd/MM/yyyy') : ''} />
-      </label>
-
-      {/* Desktop pop-over */}
-      {isOpen && !isSmallScreen && (
-        <div className="qsm__datepicker-popover" ref={dateInputRef}>
-          <DateRangePicker
-            fromDate={fromDate ? new Date(fromDate) : undefined}
-            toDate={toDate ? new Date(toDate) : undefined}
-            onSelectionChange={(from, to) => {
-              dispatch(setFromDate(from ? from.toISOString() : undefined));
-              dispatch(setToDate(to ? to.toISOString() : undefined));
-            }}
-            onRequestClose={() => setIsOpen(false)}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default DatePicker;
+import React, { useRef, useState, useEffect, useContext } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { setFromDate, setToDate, setMobileFilterType, setMobileDatePickerMode, setMinDate, setMaxDate, setDateFlexibility } from '../../store/qsm-slice';
+import { QSMRootState } from '../../store/qsm-store';
+import { addYears, format, startOfDay } from 'date-fns';
+import DateRangePicker from '../date-range-picker';
+import useMediaQuery from '../../../shared/utils/use-media-query-util';
+import QSMConfigurationContext from '../../qsm-configuration-context';
+
+const DatePicker: React.FC = () => {
+  const dispatch = useDispatch();
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
+
+  /* 🔑  STATE FIRST (no TDZ issues) */
+  const [isOpen, setIsOpen] = useState(false); // range pop-over
+  const [isSingleOpen, setIsSingleOpen] = useState(false); // single pop-over
+
+  const { datesIcon, showReturnDate = true, minDate, maxDate, dateFlexibility = [] } = useContext(QSMConfigurationContext);
+
+  const isSingleDate = !showReturnDate;
+
+  const dateInputWrapperRef = useRef<HTMLDivElement>(null);
+  const dateInputRef = useRef<HTMLDivElement>(null);
+
+  const today = startOfDay(new Date());
+  const effectiveMinDate = minDate ?? today;
+  const effectiveMaxDate = maxDate ?? addYears(today, 1);
+
+  const { fromDate, toDate } = useSelector((state: QSMRootState) => ({
+    fromDate: state.qsm.fromDate,
+    toDate: state.qsm.toDate
+  }));
+
+  /* ----------------------- outside click close ----------------------- */
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dateInputWrapperRef.current &&
+        !dateInputWrapperRef.current.contains(event.target as Node) &&
+        dateInputRef.current &&
+        !dateInputRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+        setIsSingleOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  /* ----------------------- min/max & flexibility sync ---------------- */
+  useEffect(() => {
+    dispatch(setMinDate(effectiveMinDate.toISOString()));
+    dispatch(setMaxDate(effectiveMaxDate.toISOString()));
+  }, [dispatch, effectiveMinDate, effectiveMaxDate]);
+
+  useEffect(() => {
+    if (dateFlexibility.length) {
+      dispatch(setDateFlexibility(dateFlexibility));
+    }
+  }, [dispatch, JSON.stringify(dateFlexibility)]);
+
+  /* =================== SINGLE DATE (only departure) ================= */
+  if (isSingleDate) {
+    return (
+      <div className="qsm__double-input" ref={dateInputWrapperRef}>
+        <div
+          className="qsm__input-wrapper"
+          onClick={() => {
+            if (isSmallScreen) {
+              dispatch(setMobileDatePickerMode('single'));
+              dispatch(setMobileFilterType('date'));
+            } else {
+              setIsSingleOpen(true);
+            }
+          }}>
+          {datesIcon && <span className="qsm__input-icon">{datesIcon}</span>}
+          <label className="qsm__label">Vertrek</label>
+          <input type="text" className="qsm__input u-ps-2" placeholder="Datum" readOnly value={fromDate ? format(new Date(fromDate), 'dd/MM/yyyy') : ''} />
+        </div>
+
+        {!isSmallScreen && isSingleOpen && (
+          <div className="qsm__datepicker-popover" ref={dateInputRef}>
+            <DateRangePicker
+              fromDate={fromDate ? new Date(fromDate) : undefined}
+              onSelectionChange={(from) => {
+                dispatch(setFromDate(from ? from.toISOString() : undefined));
+                dispatch(setToDate(undefined));
+              }}
+              onRequestClose={() => setIsSingleOpen(false)}
+              isSingleDate
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  /* ======================== RANGE PICKER ============================= */
+  const handleFromDateClick = () => {
+    if (isSmallScreen) {
+      dispatch(setMobileDatePickerMode('range'));
+      dispatch(setMobileFilterType('date'));
+    } else {
+      setIsOpen(true);
+    }
+  };
+
+  return (
+    <div className="qsm__double-input" ref={dateInputWrapperRef}>
+      {/* Departure */}
+      <label className="qsm__input-wrapper" onClick={handleFromDateClick}>
+        {datesIcon && <span className="qsm__input-icon">{datesIcon}</span>}
+        <span className="qsm__label">Vertrek</span>
+        <input
+          type="text"
+          id="vertrek"
+          className="qsm__input u-ps-2"
+          placeholder="Datum"
+          readOnly
+          value={fromDate ? format(new Date(fromDate), 'dd/MM/yyyy') : ''}
+        />
+        <div className="qsm__input-line qsm__input-line--datepicker" />
+      </label>
+
+      {/* Return */}
+      <label className="qsm__input-wrapper" onClick={handleFromDateClick}>
+        {datesIcon && <span className="qsm__input-icon">{datesIcon}</span>}
+        <span className="qsm__label qsm__label--second-input-label">Retour</span>
+        <input type="text" id="retour" className="qsm__input" placeholder="Datum" readOnly value={toDate ? format(new Date(toDate), 'dd/MM/yyyy') : ''} />
+      </label>
+
+      {/* Desktop pop-over */}
+      {isOpen && !isSmallScreen && (
+        <div className="qsm__datepicker-popover" ref={dateInputRef}>
+          <DateRangePicker
+            fromDate={fromDate ? new Date(fromDate) : undefined}
+            toDate={toDate ? new Date(toDate) : undefined}
+            onSelectionChange={(from, to) => {
+              dispatch(setFromDate(from ? from.toISOString() : undefined));
+              dispatch(setToDate(to ? to.toISOString() : undefined));
+            }}
+            onRequestClose={() => setIsOpen(false)}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DatePicker;

package/src/qsm/components/date-range-picker/calendar-day.tsx

@@ -1,49 +1,49 @@
-import React from 'react';
-import { getDate, isToday } from 'date-fns';
-
-// Props interface
-interface CalendarDayProps {
-  day: Date;
-  isSelected: boolean;
-  isDisabled: boolean;
-  isOutsideMonth: boolean;
-  extraClassNames?: string[];
-  onClick: (date: Date) => void;
-  onMouseOver: (date: Date) => void;
-}
-
-const CalendarDay: React.FC<CalendarDayProps> = ({ day, isSelected, isDisabled, isOutsideMonth, extraClassNames = [], onClick, onMouseOver }) => {
-  // Event handlers
-  const handleClick = () => {
-    if (!isDisabled) {
-      onClick(day);
-    }
-  };
-
-  const handleMouseOver = () => {
-    if (!isDisabled) {
-      onMouseOver(day);
-    }
-  };
-
-  // Dynamic class list
-  const classNames = [
-    'calendar__day',
-    isToday(day) && 'calendar__day--today',
-    isDisabled && 'calendar__day--disabled',
-    isOutsideMonth && 'calendar__day--outside-month',
-    isSelected && 'calendar__day--selected',
-    ...extraClassNames
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  // JSX
-  return (
-    <div className={classNames} onClick={handleClick} onMouseOver={handleMouseOver} role="button" tabIndex={0}>
-      {getDate(day)}
-    </div>
-  );
-};
-
-export default CalendarDay;
+import React from 'react';
+import { getDate, isToday } from 'date-fns';
+
+// Props interface
+interface CalendarDayProps {
+  day: Date;
+  isSelected: boolean;
+  isDisabled: boolean;
+  isOutsideMonth: boolean;
+  extraClassNames?: string[];
+  onClick: (date: Date) => void;
+  onMouseOver: (date: Date) => void;
+}
+
+const CalendarDay: React.FC<CalendarDayProps> = ({ day, isSelected, isDisabled, isOutsideMonth, extraClassNames = [], onClick, onMouseOver }) => {
+  // Event handlers
+  const handleClick = () => {
+    if (!isDisabled) {
+      onClick(day);
+    }
+  };
+
+  const handleMouseOver = () => {
+    if (!isDisabled) {
+      onMouseOver(day);
+    }
+  };
+
+  // Dynamic class list
+  const classNames = [
+    'calendar__day',
+    isToday(day) && 'calendar__day--today',
+    isDisabled && 'calendar__day--disabled',
+    isOutsideMonth && 'calendar__day--outside-month',
+    isSelected && 'calendar__day--selected',
+    ...extraClassNames
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  // JSX
+  return (
+    <div className={classNames} onClick={handleClick} onMouseOver={handleMouseOver} role="button" tabIndex={0}>
+      {getDate(day)}
+    </div>
+  );
+};
+
+export default CalendarDay;