@qite/tide-booking-component 1.4.124 → 1.4.126

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, customTranslations } = useContext(SettingsContext);
-  const translations = getTranslations(language, customTranslations);
-  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;

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

@@ -1,54 +0,0 @@
-import React, { useContext } from 'react';
-import Loader from '../../shared/components/loader';
-import { getTranslations } from '../../shared/utils/localization-util';
-import SettingsContext from '../settings-context';
-import { buildClassName } from '../../shared/utils/class-util';
-
-interface FooterProps {
-  priceText: string | undefined;
-  isLoading: boolean;
-  isOffer: boolean | undefined;
-  roomsIsDisabled: boolean;
-  handleBookClick: () => void;
-}
-
-const Footer: React.FC<FooterProps> = ({ priceText, isLoading, isOffer, roomsIsDisabled, handleBookClick }) => {
-  const { language, customTranslations, alternativeActionText, alternativeAction } = useContext(SettingsContext);
-  const translations = getTranslations(language, customTranslations);
-
-  return (
-    <div className="booking-product__footer">
-      {isLoading ? (
-        <Loader loaderText={translations.PRODUCT.LOADING_PRICE} />
-      ) : (
-        <>
-          {priceText && (
-            <div className="booking-product__footer-total">
-              <div className="booking-product__footer-label">{translations.SHARED.TOTAL_PRICE}</div>
-              <div className="booking-product__footer-price">{priceText}</div>
-            </div>
-          )}
-          <div className="booking-product__footer-actions">
-            {priceText ? (
-              <button
-                type="button"
-                className={buildClassName(['cta', !roomsIsDisabled && 'cta--disabled'])}
-                onClick={handleBookClick}
-                disabled={!roomsIsDisabled}>
-                {isOffer ? translations.PRODUCT.TO_YOUR_OFFER : translations.PRODUCT.BOOK_NOW}
-              </button>
-            ) : alternativeActionText && alternativeAction ? (
-              <a href="#offer-form" className="cta" onClick={alternativeAction}>
-                {alternativeActionText}
-              </a>
-            ) : (
-              <>{translations.PRODUCT.NOT_AVAILABLE}</>
-            )}
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default Footer;

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

@@ -1,58 +0,0 @@
-import React, { useContext } from 'react';
-import Loader from '../../shared/components/loader';
-import Rating from './rating';
-import { getTranslations } from '../../shared/utils/localization-util';
-import SettingsContext from '../settings-context';
-import Icon from '../../shared/components/icon';
-
-interface HeaderProps {
-  name: string;
-  rating: number | undefined;
-  priceText: string | undefined;
-  hasFlight: boolean;
-  hasTransfer: boolean;
-  isLoading: boolean;
-}
-
-const Header: React.FC<HeaderProps> = ({ name, rating, priceText, isLoading, hasFlight, hasTransfer }) => {
-  const { language, customTranslations, mainIcon } = useContext(SettingsContext);
-  const translations = getTranslations(language, customTranslations);
-  const resolvedMainIcon = mainIcon ?? 'ui-bed';
-
-  return (
-    <div className="booking-product__header">
-      <div className="booking-product__hotel">
-        {rating && <Rating rating={rating} />}
-        <div className="booking-product__title">{name}</div>
-      </div>
-      <div className="booking-product__price">
-        {isLoading ? (
-          <Loader loaderText={translations.PRODUCT.LOADING_PRICE} />
-        ) : (
-          <>
-            <div className="pricing__header pricing__price">{priceText}</div>
-            <div className="package-icons">
-              {priceText && (
-                <div className="package-icons__icon">
-                  <Icon name={resolvedMainIcon} title={translations.PRODUCT.STAY_INCLUDED} width={25} height={25} />
-                </div>
-              )}
-              {hasFlight && (
-                <div className="package-icons__icon">
-                  <Icon name="ui-flight" title={translations.PRODUCT.FLIGHT_INCLUDED} width={25} height={25} />
-                </div>
-              )}
-              {hasTransfer && (
-                <div className="package-icons__icon">
-                  <Icon name="ui-transfer" title={translations.PRODUCT.TRANSFER_INCLUDED} width={25} height={25} />
-                </div>
-              )}
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Header;

package/src/booking-product/components/list-view.tsx

@@ -1,54 +0,0 @@
-import { BookingPackageItem } from '@qite/tide-client';
-import React, { useContext } from 'react';
-import { getTranslations } from '../../shared/utils/localization-util';
-import SettingsContext from '../settings-context';
-import { differenceInCalendarDays } from 'date-fns';
-import { isEmpty } from 'lodash';
-
-interface ListViewProps {
-  searchResults: BookingPackageItem[];
-  onSelect?: (selectedItem: BookingPackageItem) => void;
-}
-
-const ListView: React.FC<ListViewProps> = ({ searchResults, onSelect }) => {
-  const { language, customTranslations } = useContext(SettingsContext);
-  const translations = getTranslations(language, customTranslations);
-
-  const formatDate = (dateString: string) => {
-    return new Intl.DateTimeFormat(language).format(new Date(dateString));
-  };
-
-  const handleOptionChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const selectedDate = event.target.value;
-    const selectedItem = searchResults.find((item) => item.fromDate === selectedDate);
-    if (selectedItem && onSelect) {
-      onSelect(selectedItem);
-    }
-  };
-
-  const getNightsAndDays = (result: BookingPackageItem) => {
-    const nights = differenceInCalendarDays(new Date(result.toDate), new Date(result.fromDate));
-    return `${nights} ${translations.PRODUCT.NIGHTS}, ${nights + 1} ${translations.PRODUCT.DAYS}`;
-  };
-
-  const getDayLongFormat = (dateString: string) => {
-    const day = new Date(dateString).toLocaleDateString(language, { weekday: 'long' });
-    return day.charAt(0).toUpperCase() + day.slice(1);
-  };
-
-  return (
-    <div className="dropdown">
-      <select name="selectDate" id="selectDate" onChange={handleOptionChange}>
-        {!isEmpty(searchResults) &&
-          searchResults.map((result, index) => (
-            <option key={index} value={result.fromDate}>
-              {getDayLongFormat(result.fromDate)} {formatDate(result.fromDate)} - {getDayLongFormat(result.toDate)} {formatDate(result.toDate)} ({' '}
-              {getNightsAndDays(result)} ) - {result.price.toFixed(2)} {result.currencyCode}
-            </option>
-          ))}
-      </select>
-    </div>
-  );
-};
-
-export default ListView;