@qite/tide-booking-component 1.4.123 → 1.4.125

package/rollup.config.js

@@ -1,16 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs';
-import del from 'rollup-plugin-delete';
-import json from '@rollup/plugin-json';
-import nodeResolve from '@rollup/plugin-node-resolve';
-import packageJson from './package.json';
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import typescript from 'rollup-plugin-typescript2';
-
-export default {
-  input: 'src/index.ts',
-  output: [
-    { file: packageJson.main, format: 'cjs', banner: '/* eslint-disable */', inlineDynamicImports: true },
-    { file: packageJson.module, format: 'esm', banner: '/* eslint-disable */', inlineDynamicImports: true }
-  ],
-  plugins: [peerDepsExternal(), json(), nodeResolve(), commonjs(), typescript(), del({ targets: ['build/*'] })]
-};

package/src/booking-product/components/age-select.tsx

@@ -1,35 +0,0 @@
-import { range } from 'lodash';
-import React, { useContext } from 'react';
-import { getTranslations } from '../../shared/utils/localization-util';
-import SettingsContext from '../settings-context';
-
-interface AgeSelectProps {
-  value?: number;
-  disabled?: boolean;
-  onChange?: (value: number) => void;
-}
-
-const AgeSelect: React.FC<AgeSelectProps> = ({ value, disabled, onChange }) => {
-  const { language } = useContext(SettingsContext);
-  const translations = getTranslations(language);
-
-  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
-    if (onChange) {
-      onChange(event.target.selectedIndex);
-    }
-  };
-
-  return (
-    <div className="dropdown dropdown--small">
-      <select onChange={handleChange} value={value ?? 0} disabled={disabled}>
-        {range(0, 18).map((age) => (
-          <option key={age} value={age}>
-            {age} {translations.PRODUCT.YEAR}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-};
-
-export default AgeSelect;

package/src/booking-product/components/amount-input.tsx

@@ -1,51 +0,0 @@
-import React, { useContext } from 'react';
-import { getTranslations } from '../../shared/utils/localization-util';
-import SettingsContext from '../settings-context';
-import { buildClassName } from '../../shared/utils/class-util';
-import Icon from '../../shared/components/icon';
-
-interface AmountInputProps {
-  label: string;
-  value: number;
-  disabled?: boolean;
-  min?: number;
-  onChange?: (value: number) => void;
-}
-
-const AmountInput: React.FC<AmountInputProps> = ({ label, value, disabled, min, onChange }) => {
-  const { language } = useContext(SettingsContext);
-  const translations = getTranslations(language);
-
-  const handleIncreaseClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
-    if (onChange) {
-      onChange(value + 1);
-    }
-  };
-
-  const handleDecreaseClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
-    if (onChange) {
-      onChange(Math.max(value - 1, min ?? 0));
-    }
-  };
-
-  return (
-    <div className={buildClassName(['decrement-increment', disabled && 'decrement-increment--disabled'])}>
-      <label className="decrement-increment__label">{label}</label>
-      <div className="decrement-increment__ui">
-        {!disabled && (
-          <button type="button" className="button button--decrement" title={translations.INPUT.DECREASE} disabled={disabled} onClick={handleDecreaseClick}>
-            <Icon name="ui-min" />
-          </button>
-        )}
-        <span>{value}</span>
-        {!disabled && (
-          <button type="button" className="button button--increment" title={translations.INPUT.INCREASE} disabled={disabled} onClick={handleIncreaseClick}>
-            <Icon name="ui-plus" />
-          </button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default AmountInput;

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

@@ -1,46 +0,0 @@
-import React from 'react';
-import { getDate, isToday } from 'date-fns';
-import { buildClassName } from '../../../shared/utils/class-util';
-
-interface CalendarDayProps {
-  day: Date;
-  isSelected: boolean;
-  isDisabled: boolean;
-  isOutsideMonth: boolean;
-  extraClassNames?: string[];
-  onClick: (date: Date) => void;
-  onMouseOver: (date: Date) => void;
-  children?: any;
-}
-
-const CalendarDay: React.FC<CalendarDayProps> = ({ day, isSelected, isDisabled, isOutsideMonth, extraClassNames = [], children, onClick, onMouseOver }) => {
-  const handleClick = () => {
-    if (onClick && !isDisabled) {
-      onClick(day);
-    }
-  };
-
-  const handleMouseOver = () => {
-    if (onMouseOver) {
-      onMouseOver(day);
-    }
-  };
-
-  const classNames = buildClassName([
-    'calendar__day',
-    isToday(day) && 'calendar__day--today',
-    isDisabled && 'calendar__day--disabled',
-    isOutsideMonth && 'calendar__day--outside-month',
-    isSelected && 'calendar__day--selected',
-    ...extraClassNames
-  ]);
-
-  return (
-    <div className={classNames} onClick={handleClick} onMouseOver={handleMouseOver}>
-      {getDate(day).toString().padStart(2, '0')}
-      {children}
-    </div>
-  );
-};
-
-export default CalendarDay;

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

@@ -1,155 +0,0 @@
-import {
-  addWeeks,
-  eachDayOfInterval,
-  endOfMonth,
-  endOfWeek,
-  format,
-  getISODay,
-  getISOWeek,
-  getMonth,
-  getYear,
-  isSameMonth,
-  startOfMonth,
-  startOfWeek
-} from 'date-fns';
-import { chunk, isFunction, range } from 'lodash';
-import React, { useContext } from 'react';
-import { buildClassName } from '../../../shared/utils/class-util';
-import { getLocale } from '../../../shared/utils/localization-util';
-import SettingsContext from '../../settings-context';
-import CalendarDay from './calendar-day';
-import Icon from '../../../shared/components/icon';
-
-interface CalendarProps {
-  year?: number;
-  month?: number;
-  hasPreviousButton?: boolean;
-  hasNextButton?: boolean;
-  hasFixedHeight?: boolean;
-  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  disabledDaysFunction?: (date: Date) => boolean;
-  selectedDaysFunction?: (date: Date) => boolean;
-  extraClassNamesFunction?: (date: Date) => string[];
-  dayContentFunction?: (date: Date) => JSX.Element | null | undefined;
-  onDayClick?: (date: Date) => void;
-  onDayMouseOver?: (date: Date) => void;
-  onNextClick?: (year: number, month: number) => void;
-  onPreviousClick?: (year: number, month: number) => void;
-}
-
-const Calendar: React.FC<CalendarProps> = ({
-  year = getYear(new Date()),
-  month = getMonth(new Date()),
-  hasPreviousButton = true,
-  hasNextButton = true,
-  hasFixedHeight = true,
-  weekStartsOn = 1,
-  disabledDaysFunction,
-  selectedDaysFunction,
-  extraClassNamesFunction,
-  dayContentFunction,
-  onDayClick,
-  onDayMouseOver,
-  onNextClick,
-  onPreviousClick
-}) => {
-  const { language } = useContext(SettingsContext);
-
-  const locale = getLocale(language);
-  const handleDayClick = (day: Date) => {
-    if (onDayClick) {
-      onDayClick(day);
-    }
-  };
-
-  const handleDayMouseOver = (day: Date) => {
-    if (onDayMouseOver) {
-      onDayMouseOver(day);
-    }
-  };
-
-  const handleNextClick = () => {
-    const nextMonth = (month + 1) % 12;
-    const nextMonthsYear = nextMonth < month ? year + 1 : year;
-
-    if (onNextClick) {
-      onNextClick(nextMonthsYear, nextMonth);
-    }
-  };
-
-  const handlePreviousClick = () => {
-    const previousMonth = (month - 1) % 12;
-    const previousMonthsYear = previousMonth > month ? year - 1 : year;
-
-    if (onPreviousClick) {
-      onPreviousClick(previousMonthsYear, previousMonth);
-    }
-  };
-
-  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 });
-
-  const mapDay = (day: Date) => {
-    const isoDay = getISODay(day);
-    const isDisabled = isFunction(disabledDaysFunction) && disabledDaysFunction(day);
-    const isSelected = isFunction(selectedDaysFunction) && selectedDaysFunction(day);
-    const isOutsideMonth = !isSameMonth(day, focusDate);
-    const extraClassNames = isFunction(extraClassNamesFunction) ? extraClassNamesFunction(day) : undefined;
-
-    return (
-      <CalendarDay
-        key={`day_${isoDay}`}
-        day={day}
-        isSelected={isSelected}
-        isDisabled={isDisabled}
-        isOutsideMonth={isOutsideMonth}
-        extraClassNames={extraClassNames}
-        onClick={handleDayClick}
-        onMouseOver={handleDayMouseOver}>
-        {isFunction(dayContentFunction) ? dayContentFunction(day) : undefined}
-      </CalendarDay>
-    );
-  };
-
-  const mapWeek = (weekDays: Date[]) => {
-    if (weekDays.length === 0) {
-      return null;
-    }
-
-    const isoWeek = getISOWeek(weekDays[0]);
-
-    return (
-      <div className="calendar__week" key={`week_${isoWeek}`}>
-        {weekDays.map(mapDay)}
-      </div>
-    );
-  };
-
-  return (
-    <div className="calendar">
-      <div className="calendar__header">
-        <div className="calendar__pager">
-          <div className={buildClassName(['calendar__previous', !hasPreviousButton && 'calendar__previous--disabled'])} onClick={handlePreviousClick}>
-            <Icon name="ui-chevron" />
-          </div>
-          <div className="calendar__current-month">{format(focusDate, 'MMMM yyyy', { locale })}</div>
-          <div className={buildClassName(['calendar__next', !hasNextButton && 'calendar__next--disabled'])} onClick={handleNextClick}>
-            <Icon name="ui-chevron" />
-          </div>
-        </div>
-        <div className="calendar__day-labels">
-          {range(0, 7).map((i) => (
-            <div className="calendar__day-label" key={`day_${i}`}>
-              {format(calendarDays[i], 'EEEEEE', { locale: locale })}
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="calendar__body">{chunk(calendarDays, 7).map(mapWeek)}</div>
-    </div>
-  );
-};
-
-export default Calendar;

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

@@ -1,185 +0,0 @@
-import { endOfDay, endOfMonth, getMonth, getYear, isAfter, isEqual, isWithinInterval, Locale, startOfDay } from 'date-fns';
-
-import { isNil } from 'lodash';
-import React, { useContext, useEffect, useState } from 'react';
-import Calendar from './calendar';
-import SettingsContext from '../../settings-context';
-
-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;
-  toDateByFromDate?: (fromDate?: Date) => Date | undefined;
-}
-
-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 { searchType = 0 } = useContext(SettingsContext);
-
-  const handleDayClick = (day: Date) => {
-    const { onSelectionChange } = props;
-
-    if (isWaitingForToDate && !isNil(fromDate) && isAfter(day, fromDate)) {
-      if (searchType === 1) {
-        // Only allow selecting the exact toDate
-        const expectedToDate = props.toDateByFromDate?.(fromDate);
-        if (expectedToDate && isEqual(day, expectedToDate)) {
-          setToDate(day);
-          setWaitingForToDate(false);
-
-          props.onToDateChange?.(undefined);
-          onSelectionChange?.(fromDate, day);
-        }
-      } else {
-        // searchType === 0 (original behavior)
-        setToDate(day);
-        setWaitingForToDate(false);
-
-        props.onToDateChange?.(undefined);
-        onSelectionChange?.(fromDate, day);
-      }
-    } else {
-      setFromDate(day);
-
-      if (searchType === 1 && props.toDateByFromDate) {
-        const to = props.toDateByFromDate(day);
-        setToDate(to);
-
-        if (to) {
-          onSelectionChange?.(day, to);
-        }
-      } else if (props.duration) {
-        const to = new Date(Date.UTC(day.getFullYear(), day.getMonth(), day.getDate() + props.duration));
-        setToDate(to);
-        onSelectionChange?.(day, to);
-      } else {
-        setToDate(undefined);
-        setWaitingForToDate(true);
-      }
-
-      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,153 +0,0 @@
-import { format, isBefore, startOfDay, isSameDay } 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 '../../shared/components/icon';
-
-interface DatesProps {
-  value?: DateRange;
-  duration?: number;
-  onChange?: (value: DateRange) => void;
-  availableDatePairs?: { fromDate: Date; toDate: Date }[];
-  isLoading?: boolean;
-}
-
-const Dates: React.FC<DatesProps> = ({ value, duration, onChange, availableDatePairs, isLoading }) => {
-  const { language } = useContext(SettingsContext);
-  const translations = getTranslations(language);
-  const mql = typeof window !== 'undefined' ? window.matchMedia('(min-width: 992px)') : undefined;
-  const mqm = typeof window !== 'undefined' ? window.matchMedia('(min-width: 768px)') : undefined;
-
-  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  const [panelActive, setPanelActive] = useState<boolean>(false);
-  const { searchType = 0 } = useContext(SettingsContext);
-
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: mql?.matches ? 'top' : 'bottom',
-    modifiers: [
-      {
-        name: 'flip',
-        enabled: false
-      },
-      {
-        name: 'offset',
-        options: {
-          offset: [0, -40]
-        }
-      },
-      {
-        name: 'preventOverflow',
-        options: {
-          padding: 40
-        }
-      }
-    ]
-  });
-
-  const handleInputFocus = () => {
-    if (!panelActive) setPanelActive(true);
-  };
-
-  // Only allow selecting fromDates that are in availableDatePairs
-  const disabledDaysFunction = (date: Date) => {
-    if (!availableDatePairs || availableDatePairs.length === 0) {
-      return isBefore(date, startOfDay(new Date()));
-    }
-    return !availableDatePairs.some((pair) => isSameDay(pair.fromDate, date));
-  };
-
-  // Given a fromDate, find the corresponding toDate
-  const findToDateByFromDate = (fromDate?: Date) => {
-    if (!fromDate || !availableDatePairs) return undefined;
-    const found = availableDatePairs.find((pair) => isSameDay(pair.fromDate, fromDate));
-    return found ? found.toDate : undefined;
-  };
-
-  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' +
-            ((searchType === 1 && availableDatePairs && availableDatePairs.length === 0) || isLoading ? ' form__group-input--disabled' : '')
-          }>
-          <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' + (searchType === 1 || isLoading ? ' form__group-input--disabled' : '')}>
-          <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',
-            !mqm?.matches && 'qsm__panel--mobile'
-          ])}
-          style={mqm?.matches ? (styles.popper as any) : undefined}
-          {...attributes.popper}>
-          <DateRangePicker
-            fromDate={value?.fromDate}
-            toDate={value?.toDate}
-            duration={duration}
-            disabledDaysFunction={disabledDaysFunction}
-            toDateByFromDate={findToDateByFromDate}
-            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;