@qite/tide-booking-component 1.4.123 → 1.4.124

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

@@ -1,153 +1,153 @@
-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;
+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 +1,54 @@
-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, alternativeActionText, alternativeAction } = useContext(SettingsContext);
-  const translations = getTranslations(language);
-
-  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;
+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,57 +1,58 @@
-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 } = useContext(SettingsContext);
-  const translations = getTranslations(language);
-
-  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="ui-bed" 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;
+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 +1,54 @@
-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 } = useContext(SettingsContext);
-  const translations = getTranslations(language);
-
-  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;
+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;