@qite/tide-booking-component 1.4.123 → 1.4.125

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

@@ -1,404 +0,0 @@
-import React, { useLayoutEffect, useEffect, useState, useRef, useMemo, useCallback } from 'react';
-import { getMonth, getYear, isAfter, isEqual, isWithinInterval, startOfDay, endOfDay, addYears, addDays, startOfToday } from 'date-fns';
-import { useSelector, useDispatch } from 'react-redux';
-import { QSMRootState } from '../../store/qsm-store';
-import { nl } from 'date-fns/locale';
-import Calendar from './calendar';
-import useMediaQuery from '../../../shared/utils/use-media-query-util';
-import { setSelectedFlexRange } from '../../store/qsm-slice';
-
-interface DateRangePickerProps {
-  fromDate?: Date;
-  toDate?: Date;
-  onSelectionChange?: (fromDate?: Date, toDate?: Date) => void;
-  isSingleDate?: boolean;
-  onRequestClose?: () => void;
-}
-
-const DateRangePicker: React.FC<DateRangePickerProps> = ({
-  fromDate: initialFromDate,
-  toDate: initialToDate,
-  onSelectionChange,
-  onRequestClose,
-  isSingleDate = false
-}) => {
-  // ---------------------------------------------------------------------------
-  // Local state
-  // ---------------------------------------------------------------------------
-  const [fromDate, setFromDate] = useState<Date | undefined>(initialFromDate);
-  const [toDate, setToDate] = useState<Date | undefined>(initialToDate);
-  const [waitingForToDate, setWaitingForToDate] = useState(false);
-  const [flexibleRangeDatePicker, setFlexibleRangeDatePicker] = useState<{
-    start: Date;
-    end: Date;
-  } | null>(null);
-  const [focusMonth, setFocusMonth] = useState<{
-    month: number;
-    year: number;
-  }>({
-    month: getMonth(initialFromDate || new Date()),
-    year: getYear(initialFromDate || new Date())
-  });
-
-  // ---------------------------------------------------------------------------
-  // Redux & context
-  // ---------------------------------------------------------------------------
-  const dispatch = useDispatch();
-  const { minDate, maxDate, dateFlexibility, selectedFlexRange } = useSelector((state: QSMRootState) => ({
-    minDate: state.qsm.minDate ? new Date(state.qsm.minDate) : undefined,
-    maxDate: state.qsm.maxDate ? new Date(state.qsm.maxDate) : undefined,
-    dateFlexibility: state.qsm.dateFlexibility ?? [],
-    selectedFlexRange: state.qsm.selectedFlexRange
-  }));
-
-  // ---------------------------------------------------------------------------
-  // Constants & helpers
-  // ---------------------------------------------------------------------------
-  const today = startOfToday();
-
-  const subtractOneMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth() - 1, d.getDate());
-
-  const safeMinDate = minDate ? subtractOneMonth(minDate) : today;
-  const safeMaxDate = maxDate ? subtractOneMonth(maxDate) : addYears(today, 1);
-  const isMobile = useMediaQuery('(max-width: 768px)');
-  const rootRef = useRef<HTMLDivElement>(null);
-  const [alignRight, setAlignRight] = useState(false);
-
-  // Default flex option (exact date)
-  const DEFAULT_FLEX_OPTION = useMemo(() => ({ name: 'exacte datum', before: 0, after: 0 }), []);
-
-  const emitSelection = useCallback(
-    (start: Date | undefined, end?: Date) => {
-      onSelectionChange?.(start, isSingleDate ? undefined : end);
-    },
-    [onSelectionChange, isSingleDate]
-  );
-  // Merge default + server‑side flex options
-  const combinedFlexibility = useMemo(() => {
-    const withoutZeroZero = dateFlexibility.filter((opt) => opt.before !== 0 || opt.after !== 0);
-    return [DEFAULT_FLEX_OPTION, ...withoutZeroZero];
-  }, [dateFlexibility, DEFAULT_FLEX_OPTION]);
-
-  const isSameFlexRange = useCallback(
-    (a: { before: number; after: number } | undefined, b: { before: number; after: number }) => a?.before === b.before && a?.after === b.after,
-    []
-  );
-
-  // ---------------------------------------------------------------------------
-  // Flex option auto‑select (only once)
-  // ---------------------------------------------------------------------------
-  useEffect(() => {
-    if (combinedFlexibility.length > 0 && !selectedFlexRange) {
-      dispatch(setSelectedFlexRange(DEFAULT_FLEX_OPTION));
-    }
-  }, [combinedFlexibility, selectedFlexRange]);
-
-  // ---------------------------------------------------------------------------
-  // Keep internal state in sync with parent props
-  // ---------------------------------------------------------------------------
-  useEffect(() => {
-    setFromDate(initialFromDate);
-    setToDate(initialToDate);
-  }, [initialFromDate, initialToDate]);
-
-  // ---------------------------------------------------------------------------
-  // Build flexible window (works for single & range)
-  // ---------------------------------------------------------------------------
-  useEffect(() => {
-    if (!selectedFlexRange || !fromDate) {
-      setFlexibleRangeDatePicker(null);
-      return;
-    }
-
-    // Determine chronological first & last selected dates
-    const firstSelected = toDate && isAfter(fromDate, toDate) ? toDate : fromDate;
-    const lastSelected = toDate && isAfter(fromDate, toDate) ? fromDate : toDate ?? fromDate;
-
-    // Expand with flex option
-    const flexStart = addDays(firstSelected, -selectedFlexRange.before);
-    const flexEnd = addDays(lastSelected, selectedFlexRange.after);
-
-    setFlexibleRangeDatePicker({
-      start: flexStart,
-      end: flexEnd
-    });
-  }, [fromDate, toDate, selectedFlexRange]);
-
-  // ---------------------------------------------------------------------------
-  // Calendar navigation handlers
-  // ---------------------------------------------------------------------------
-  const handlePreviousClick = useCallback(() => {
-    setFocusMonth((prev) => {
-      const month = (prev.month - 1 + 12) % 12;
-      const year = month > prev.month ? prev.year - 1 : prev.year;
-      return { month, year };
-    });
-  }, []);
-
-  const handleNextClick = useCallback(() => {
-    setFocusMonth((prev) => {
-      const month = (prev.month + 1) % 12;
-      const year = month < prev.month ? prev.year + 1 : prev.year;
-      return { month, year };
-    });
-  }, []);
-
-  // ---------------------------------------------------------------------------
-  // Date selection logic
-  // ---------------------------------------------------------------------------
-  const isOutOfBounds = useCallback(
-    (date: Date) => {
-      const start = safeMinDate ? startOfDay(safeMinDate) : undefined;
-      const end = safeMaxDate ? startOfDay(safeMaxDate) : undefined;
-      return (start && date < start) || (end && date > end);
-    },
-    [safeMinDate, safeMaxDate]
-  );
-
-  const handleDayClick = useCallback(
-    (day: Date) => {
-      if (isOutOfBounds(day)) return;
-
-      if (isSingleDate) {
-        setFromDate(day);
-        setToDate(undefined);
-        setWaitingForToDate(false);
-        emitSelection(day);
-        return;
-      }
-
-      if (waitingForToDate && fromDate && isAfter(day, fromDate)) {
-        setToDate(day);
-        setWaitingForToDate(false);
-        emitSelection(fromDate, day);
-      } else {
-        setFromDate(day);
-        setToDate(undefined);
-        setWaitingForToDate(true);
-        emitSelection(day, undefined);
-      }
-    },
-    [fromDate, waitingForToDate, isSingleDate, isOutOfBounds]
-  );
-
-  const handleDayMouseOver = useCallback(
-    (day: Date) => {
-      if (!isSingleDate && waitingForToDate && fromDate && (isEqual(day, fromDate) || isAfter(day, fromDate))) {
-        setToDate(day);
-      }
-    },
-    [isSingleDate, waitingForToDate, fromDate]
-  );
-
-  // ---------------------------------------------------------------------------
-  // Flex option click
-  // ---------------------------------------------------------------------------
-  const handleFlexSearchClick = useCallback(
-    (index: number) => {
-      const option = combinedFlexibility[index];
-      if (!option) return;
-      dispatch(
-        setSelectedFlexRange({
-          before: option.before,
-          after: option.after
-        })
-      );
-    },
-    [combinedFlexibility]
-  );
-
-  // ---------------------------------------------------------------------------
-  // Confirm / clear
-  // ---------------------------------------------------------------------------
-  const handleClear = useCallback(() => {
-    setFromDate(undefined);
-    setToDate(undefined);
-    setWaitingForToDate(false);
-    dispatch(setSelectedFlexRange(DEFAULT_FLEX_OPTION));
-    onSelectionChange?.(undefined, undefined);
-    onRequestClose?.();
-  }, [onSelectionChange, onRequestClose]);
-
-  const handleConfirm = useCallback(() => {
-    if (!fromDate) {
-      return;
-    }
-    onSelectionChange?.(fromDate, isSingleDate ? undefined : toDate);
-
-    onRequestClose?.();
-  }, [fromDate, toDate, onSelectionChange, isSingleDate]);
-
-  // ---------------------------------------------------------------------------
-  // Utility helpers for Calendar rendering
-  // ---------------------------------------------------------------------------
-  const checkIfDateIsInRange = useCallback(
-    (date: Date) => {
-      if (isSingleDate || !fromDate || !toDate) {
-        return false;
-      }
-
-      return isWithinInterval(date, {
-        start: startOfDay(fromDate),
-        end: endOfDay(toDate)
-      });
-    },
-    [isSingleDate, fromDate, toDate]
-  );
-
-  const checkIfDateIsInFlexibleRange = useCallback(
-    (date: Date) => {
-      if (!flexibleRangeDatePicker) {
-        return false;
-      }
-
-      const [flexStart, flexEnd] =
-        flexibleRangeDatePicker.start < flexibleRangeDatePicker.end
-          ? [startOfDay(flexibleRangeDatePicker.start), endOfDay(flexibleRangeDatePicker.end)]
-          : [startOfDay(flexibleRangeDatePicker.end), endOfDay(flexibleRangeDatePicker.start)];
-
-      const isInFlexRange = isWithinInterval(date, {
-        start: flexStart,
-        end: flexEnd
-      });
-
-      if (isSingleDate) {
-        return isInFlexRange;
-      }
-
-      const isInSelectedRange =
-        fromDate &&
-        toDate &&
-        isWithinInterval(date, {
-          start: startOfDay(fromDate),
-          end: endOfDay(toDate)
-        });
-
-      return !isInSelectedRange && isInFlexRange;
-    },
-    [flexibleRangeDatePicker, isSingleDate, fromDate, toDate]
-  );
-
-  const isStart = useCallback((date: Date) => !!fromDate && isEqual(startOfDay(date), startOfDay(fromDate)), [fromDate]);
-  const isEnd = useCallback((date: Date) => !isSingleDate && !!toDate && isEqual(startOfDay(date), startOfDay(toDate)), [isSingleDate, toDate]);
-
-  const extraClassNamesFunction = useCallback(
-    (date: Date) => {
-      const classes: string[] = [];
-      if (checkIfDateIsInFlexibleRange(date)) {
-        classes.push('date-range-picker__flexible-range');
-      }
-      return classes;
-    },
-    [checkIfDateIsInFlexibleRange]
-  );
-
-  // ---------------------------------------------------------------------------
-  // Layout alignment (desktop popover)
-  // ---------------------------------------------------------------------------
-  useLayoutEffect(() => {
-    const el = rootRef.current;
-    if (!el) {
-      return;
-    }
-
-    setAlignRight(false);
-    // Delay until browser paints so we have up‑to‑date bounding box
-    const id = window.requestAnimationFrame(() => {
-      const rect = el.getBoundingClientRect();
-      if (rect.right > window.innerWidth) {
-        setAlignRight(true);
-      }
-    });
-
-    return () => window.cancelAnimationFrame(id);
-  }, [focusMonth, isMobile]);
-
-  // ---------------------------------------------------------------------------
-  // Derived calendar months (memoised)
-  // ---------------------------------------------------------------------------
-  const firstMonth = focusMonth.month;
-  const firstYear = focusMonth.year;
-  const secondMonth = (firstMonth + 1) % 12;
-  const secondYear = secondMonth === 0 && firstMonth === 11 ? firstYear + 1 : firstMonth === 11 ? firstYear + 1 : firstYear;
-
-  // ---------------------------------------------------------------------------
-  // Render
-  // ---------------------------------------------------------------------------
-  return (
-    <div ref={rootRef} className={`date-range-picker${alignRight ? ' date-range-picker--align-right' : ''}`}>
-      {/* -------------------------------------------------------------- Months */}
-      {/* <div className="date-range-picker__months"> */}
-      <div className="date-range-picker__from">
-        <Calendar
-          year={firstYear}
-          month={firstMonth}
-          onDayClick={handleDayClick}
-          onDayMouseOver={handleDayMouseOver}
-          onPreviousClick={handlePreviousClick}
-          onNextClick={isMobile ? handleNextClick : undefined}
-          hasNextButton={isMobile}
-          hasPreviousButton
-          isStartDate={isStart}
-          isEndDate={isEnd}
-          isInRange={checkIfDateIsInRange}
-          minDate={safeMinDate}
-          maxDate={safeMaxDate}
-          locale={nl}
-          extraClassNamesFunction={extraClassNamesFunction}
-          isMobile={isMobile}
-        />
-      </div>
-
-      {!isMobile && (
-        <div className="date-range-picker__to">
-          <Calendar
-            year={secondYear}
-            month={secondMonth}
-            onDayClick={handleDayClick}
-            onDayMouseOver={handleDayMouseOver}
-            onNextClick={handleNextClick}
-            hasPreviousButton={false}
-            hasNextButton
-            isStartDate={isStart}
-            isEndDate={isEnd}
-            isInRange={checkIfDateIsInRange}
-            minDate={safeMinDate}
-            maxDate={safeMaxDate}
-            locale={nl}
-            extraClassNamesFunction={extraClassNamesFunction}
-            isMobile={false}
-          />
-        </div>
-      )}
-
-      {/* ------------------------------------------------------------ Flex tags */}
-      {/* {combinedFlexibility.length > 1 && (
-        <div className="date-range-picker-flex-days">
-          {combinedFlexibility.map((option, index) => (
-            <span
-              key={index}
-              className={`date-range-picker-flex-days__tag ${isSameFlexRange(selectedFlexRange, option) ? 'date-range-picker-flex-days__tag--active' : ''}`}
-              onClick={() => handleFlexSearchClick(index)}>
-              {option.name}
-            </span>
-          ))}
-        </div>
-      )} */}
-
-      {/* ----------------------------------------------------------- Actions */}
-      {/* <div className="date-range-picker__actions">
-        <div
-          className={`date-range-picker__actions-button${!fromDate || (!isSingleDate && !toDate) ? ' date-range-picker__actions-button--disabled' : ''}`}
-          onClick={handleConfirm}>
-          Opslaan
-        </div>
-
-        <div className="date-range-picker__actions-button date-range-picker__actions-button--clear" onClick={handleClear}>
-          Wis
-        </div>
-      </div> */}
-    </div>
-  );
-};
-
-export default DateRangePicker;

package/src/qsm/components/double-search-input-group/index.tsx

@@ -1,78 +0,0 @@
-import React, { useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { QSMRootState } from '../../store/qsm-store';
-import { setFieldValue } from '../../store/qsm-slice';
-import SearchInputGroup from '../search-input-group';
-import { FieldConfig, DoubleFieldConfig } from '../../types';
-
-const isDouble = (f: FieldConfig): f is DoubleFieldConfig => f.type === 'double';
-
-interface Props {
-  fieldConfig: DoubleFieldConfig;
-  showReverse?: boolean;
-}
-
-const DoubleSearchInputGroup: React.FC<Props> = ({ fieldConfig, showReverse = false }) => {
-  const dispatch = useDispatch();
-
-  if (!fieldConfig || !isDouble(fieldConfig)) {
-    return null;
-  }
-
-  const [firstCfg, secondCfg] = fieldConfig.fields;
-
-  const firstSelector = useMemo(() => (s: QSMRootState) => (s.qsm as any)[firstCfg.fieldKey] ?? '', [firstCfg.fieldKey]);
-  const secondSelector = useMemo(() => (s: QSMRootState) => (s.qsm as any)[secondCfg.fieldKey] ?? '', [secondCfg.fieldKey]);
-  const firstValue = useSelector(firstSelector);
-  const secondValue = useSelector(secondSelector);
-
-  const reverse = () => {
-    dispatch(
-      setFieldValue({
-        fieldKey: firstCfg.fieldKey,
-        value: secondValue
-      })
-    );
-    dispatch(
-      setFieldValue({
-        fieldKey: secondCfg.fieldKey,
-        value: firstValue
-      })
-    );
-  };
-
-  return (
-    <div className="qsm__double-input qsm__double-input--splittable">
-      <div className="qsm__input-wrapper qsm__input-wrapper--splittable">
-        <SearchInputGroup fieldConfig={firstCfg} isDoubleInput />
-      </div>
-
-      {showReverse ? (
-        <div className="qsm__reverse-wrapper">
-          <button type="button" onClick={reverse} className="qsm__input-line--reverse-button" tabIndex={-1}>
-            <svg id="qsm-planes-icon" viewBox="0 0 18 18" width={18} height={18}>
-              <path
-                d="M98.994-878.02l1.642-3.992H98.578l-1.081,1.5H96l1-2.744L96-886h1.5l1.081,1.5h1.85L98.994-888h1.5l2.6,3.493h3.139a1.2,1.2,0,0,1,.884.364,1.2,1.2,0,0,1,.364.884,1.2,1.2,0,0,1-.364.884,1.2,1.2,0,0,1-.884.364h-2.765l-2.973,3.992Zm7.984,6.986-2.245-3.493h-2.994a1.2,1.2,0,0,1-.884-.364,1.2,1.2,0,0,1-.364-.884,1.2,1.2,0,0,1,.364-.884,1.2,1.2,0,0,1,.884-.364H104.4l2.578-3.992h1.5l-1.247,3.992h2.162l1.081-1.5h1.5l-1,2.744,1,2.744h-1.5l-1.081-1.5h-2l1.081,3.493Z"
-                transform="translate(-95 889)"
-              />
-            </svg>
-          </button>
-        </div>
-      ) : (
-        <div className="qsm__input-line qsm__input-line--splittable" />
-      )}
-
-      <div className="qsm__input-wrapper qsm__input-wrapper--splittable">
-        <SearchInputGroup
-          fieldConfig={secondCfg}
-          isSecondInput
-          isDoubleInput
-          isDisabled={fieldConfig.disableReturnField}
-          readOnlyForced={fieldConfig.disableReturnField}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default DoubleSearchInputGroup;

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

@@ -1,65 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { PickerItem } from '../../../shared/types';
-
-interface ItemPickerProps {
-  items: PickerItem[];
-  selection: string | undefined;
-  label: string;
-  placeholder: string;
-  classModifier: string;
-  valueFormatter?: (id: string, label: string) => string;
-  onPick: (picked: string, id?: string) => void;
-}
-
-const ItemPicker: React.FC<ItemPickerProps> = ({ items, selection, label, placeholder, classModifier, valueFormatter, onPick }) => {
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
-
-  const handlePick = (picked: string, id?: string) => {
-    setIsDropdownOpen(false);
-    onPick(picked, id);
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsDropdownOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  return (
-    <div className={'dropdown__input ' + classModifier}>
-      <span className="dropdown__label">{label}</span>
-      <div className="dropdown" ref={dropdownRef}>
-        <button className={`dropdown-toggle ${isDropdownOpen ? 'dropdown-toggle--open' : ''}`} onClick={() => setIsDropdownOpen((prev) => !prev)}>
-          <span>{selection || placeholder}</span>
-          <span className="arrow">&#9662;</span>
-        </button>
-        {isDropdownOpen && (
-          <ul className="dropdown-menu">
-            {items.map(({ id, label, icon }) => (
-              <li
-                key={label}
-                onClick={(e) => {
-                  handlePick(label, id);
-                  e.stopPropagation();
-                }}
-                className={`dropdown-menu__item${selection === label ? ' dropdown-menu__item--selected' : ''}`}>
-                {icon && <span className="travel-class-icon">{icon}</span>}
-                {valueFormatter ? valueFormatter(id, label) : label}
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ItemPicker;