@qite/tide-booking-component 1.4.124 → 1.4.126

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

@@ -1,152 +0,0 @@
-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 +0,0 @@
-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;

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

@@ -1,211 +0,0 @@
-import React from 'react';
-
-// date-fns
-import { addWeeks, eachDayOfInterval, endOfMonth, endOfWeek, format, getMonth, getYear, isSameMonth, startOfDay, startOfMonth, startOfWeek } from 'date-fns';
-import { Locale } from 'date-fns';
-import { enUS } from 'date-fns/locale';
-import { nl } from 'date-fns/locale';
-import { fr } from 'date-fns/locale';
-
-// redux
-import { useSelector } from 'react-redux';
-import { QSMRootState } from '../../store/qsm-store';
-
-// internal component
-import CalendarDay from './calendar-day';
-
-// Props interface
-interface CalendarProps {
-  year?: number;
-  month?: number;
-  hasPreviousButton?: boolean;
-  hasNextButton?: boolean;
-  hasFixedHeight?: boolean;
-  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  isStartDate?: (date: Date) => boolean;
-  isEndDate?: (date: Date) => boolean;
-  isInRange?: (date: Date) => boolean;
-  onDayClick?: (date: Date) => void;
-  onDayMouseOver?: (date: Date) => void;
-  onNextClick?: (year: number, month: number) => void;
-  onPreviousClick?: (year: number, month: number) => void;
-  locale?: Locale;
-  extraClassNamesFunction?: (date: Date) => string[];
-  isMobile?: boolean;
-  minDate?: Date;
-  maxDate?: Date;
-}
-
-const Calendar: React.FC<CalendarProps> = ({
-  year = getYear(new Date()),
-  month = getMonth(new Date()),
-  hasPreviousButton = true,
-  hasNextButton = true,
-  hasFixedHeight = true,
-  weekStartsOn = 1,
-  isStartDate,
-  isEndDate,
-  isInRange,
-  onDayClick,
-  onDayMouseOver,
-  onNextClick,
-  onPreviousClick,
-  extraClassNamesFunction,
-  isMobile = false,
-  minDate,
-  maxDate
-}) => {
-  const language = useSelector((state: QSMRootState) => state.qsm.language);
-  const languageCode = language.split('-')[0];
-
-  const localeMap: Record<string, Locale> = {
-    en: enUS,
-    nl: nl,
-    fr: fr
-  };
-  const currentLocale = localeMap[languageCode] || enUS;
-
-  // Date range setup
-  const focusDate = new Date(year, month);
-  const firstDay = startOfWeek(startOfMonth(focusDate), {
-    weekStartsOn
-  });
-  const lastDay = hasFixedHeight ? endOfWeek(addWeeks(firstDay, 5), { weekStartsOn }) : endOfWeek(endOfMonth(focusDate), { weekStartsOn });
-
-  const calendarDays = eachDayOfInterval({
-    start: firstDay,
-    end: lastDay
-  });
-
-  // Event handlers
-  const handleDayClick = (day: Date) => onDayClick?.(day);
-  const handleDayMouseOver = (day: Date) => onDayMouseOver?.(day);
-
-  const handlePreviousClick = () => {
-    const prevMonth = (month - 1 + 12) % 12;
-    const prevYear = prevMonth > month ? year - 1 : year;
-    onPreviousClick?.(prevYear, prevMonth);
-  };
-
-  const handleNextClick = () => {
-    const baseMonth = isMobile ? month + 2 : month + 1;
-    const nextMonth = baseMonth % 12;
-    const nextYear = nextMonth < month ? year + 1 : year;
-    onNextClick?.(nextYear, nextMonth);
-  };
-
-  const isBeforeMin = (date: Date) => (minDate ? startOfDay(date) < startOfDay(minDate) : false);
-  const isAfterMax = (date: Date) => (maxDate ? startOfDay(date) > startOfDay(maxDate) : false);
-  const isOutOfBounds = (date: Date) => isBeforeMin(date) || isAfterMax(date);
-
-  // Build weeks for rendering
-  const weekRows = [];
-  for (let i = 0; i < calendarDays.length; i += 7) {
-    weekRows.push(calendarDays.slice(i, i + 7));
-  }
-
-  return (
-    <div className="calendar">
-      {/* Header */}
-      <div className="calendar__header">
-        <div className="calendar__pager">
-          {hasPreviousButton && (
-            <svg
-              onClick={handlePreviousClick}
-              className="calendar__pager-icon"
-              width={16}
-              height={10.667}
-              id="datepicker-arrow-left-icon"
-              viewBox="0 0 16 10.667">
-              <path
-                id="Path_60"
-                data-name="Path 60"
-                d="M202.667-661.333l-1.417-1.417,2.917-2.917H192v-2h12.167l-2.917-2.917L202.667-672,208-666.667Z"
-                transform="translate(208 -661.333) rotate(180)"
-                fill="#abd5d9"
-              />
-            </svg>
-          )}
-
-          <div className="calendar__current-month">
-            {format(focusDate, 'MMMM yyyy', {
-              locale: currentLocale
-            }).replace(/^(.)(.*)$/, (_, a, b) => `${a.toUpperCase()}${b}`)}
-          </div>
-
-          {hasNextButton && (
-            <svg
-              onClick={handleNextClick}
-              className="calendar__pager-icon calendar__pager-icon--right"
-              width={16}
-              height={10.667}
-              id="datepicker-arrow-left-icon"
-              viewBox="0 0 16 10.667">
-              <path
-                id="Path_60"
-                data-name="Path 60"
-                d="M202.667-661.333l-1.417-1.417,2.917-2.917H192v-2h12.167l-2.917-2.917L202.667-672,208-666.667Z"
-                transform="translate(208 -661.333) rotate(180)"
-                fill="#abd5d9"
-              />
-            </svg>
-          )}
-        </div>
-
-        {/* Week day labels */}
-        <div className="calendar__day-labels">
-          {[0, 1, 2, 3, 4, 5, 6].map((i) => (
-            <div className="calendar__day-label" key={`label-${i}`}>
-              {format(calendarDays[i], 'eee', {
-                locale: currentLocale
-              })
-                .slice(0, 2)
-                .replace(/^(.)(.)$/, (_, a, b) => `${a.toUpperCase()}${b.toLowerCase()}`)}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Calendar grid */}
-      <div className="calendar__body">
-        {weekRows.map((week, index) => (
-          <div className="calendar__week" key={`week-${index}`}>
-            {week.map((day) => {
-              const isDisabled = isOutOfBounds(day);
-
-              const isSelected = isStartDate?.(day) || isEndDate?.(day);
-              const inRange = isInRange?.(day) ?? false;
-              const isOutsideMonth = !isSameMonth(day, focusDate);
-
-              let extraClassNames: string[] = [];
-              if (inRange) extraClassNames.push('calendar__day--range');
-              if (isSelected) extraClassNames.push('calendar__day--selected');
-
-              if (extraClassNamesFunction) {
-                const additional = extraClassNamesFunction(day);
-                if (Array.isArray(additional)) {
-                  extraClassNames = extraClassNames.concat(additional);
-                }
-              }
-
-              return (
-                <CalendarDay
-                  key={day.toISOString()}
-                  day={day}
-                  isSelected={isSelected || false}
-                  isDisabled={isDisabled}
-                  isOutsideMonth={isOutsideMonth}
-                  extraClassNames={extraClassNames}
-                  onClick={handleDayClick}
-                  onMouseOver={handleDayMouseOver}
-                />
-              );
-            })}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default Calendar;