@qite/tide-booking-component 1.4.124 → 1.4.126

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

@@ -1,447 +0,0 @@
-import JsonURL from '@jsonurl/jsonurl';
-import {
-  BookingPackageDetailsRequest,
-  BookingPackageItem,
-  BookingPackagePax,
-  BookingPackageRequest,
-  BookingPackageRequestRoom,
-  BookingPackageSearchRequest
-} from '@qite/tide-client/build/types';
-import { addDays, addMonths, addYears, format, formatISO } from 'date-fns';
-import { isEmpty, now, omit } from 'lodash';
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import { ApiSettingsState } from '../../shared/types';
-import { getTranslations } from '../../shared/utils/localization-util';
-import { getDateAsDateFromParams, getRoomsFromParams } from '../../shared/utils/query-string-util';
-import SettingsContext from '../settings-context';
-import { DateRange, ProductRoom } from '../types';
-import packageApi from '../utils/api';
-import { formatPriceByMode } from '../utils/price';
-import Dates from './dates';
-import Footer from './footer';
-import Header from './header';
-import ListView from './list-view';
-import Rooms from './rooms';
-import { DATE_FORMAT } from '../constants';
-
-interface ProductProps {
-  productCode: string;
-  productName: string;
-  duration?: number;
-  rating?: number;
-}
-
-const Product: React.FC<ProductProps> = ({ productCode, productName, duration, rating }) => {
-  const settings = useContext(SettingsContext);
-  const {
-    apiKey,
-    apiUrl,
-    officeId,
-    agentId,
-    catalogueId,
-    includeFlights,
-    language,
-    basePath,
-    priceMode,
-    addProductToQuery,
-    isOffer,
-    displayMode = 'calendar',
-    searchType = 0,
-    customTranslations,
-    customTranslationsUrl
-  } = settings;
-
-  // If the host gave a `customTranslationsUrl`, fetch it at runtime and use
-  // the result as translation overrides. If they passed `customTranslations`
-  // (in-memory dict) instead, that takes precedence and we skip the fetch.
-  //
-  // `translationsReady` gates the entire render so the user never sees a
-  // flash of built-in copy that then "jumps" to the override once the fetch
-  // resolves. It starts `true` if no fetch is needed, and flips to `true`
-  // only after the fetch either succeeds or definitively fails.
-  const needsTranslationsFetch = !customTranslations && !!customTranslationsUrl;
-  const [fetchedTranslations, setFetchedTranslations] = useState<any | undefined>(undefined);
-  const [translationsReady, setTranslationsReady] = useState<boolean>(!needsTranslationsFetch);
-
-  useEffect(() => {
-    if (customTranslations) {
-      setTranslationsReady(true);
-      return;
-    }
-    if (!customTranslationsUrl) {
-      setTranslationsReady(true);
-      return;
-    }
-    // URL is set and no inline dict — fetch and suppress render until we know.
-    setTranslationsReady(false);
-    const url = customTranslationsUrl.replace('{language}', language);
-    let cancelled = false;
-    (async () => {
-      try {
-        const response = await fetch(url);
-        if (!response.ok) {
-          console.warn(`[tide-product] Custom translations not found at ${url} (status ${response.status}). Falling back to built-in translations.`);
-          return;
-        }
-        const json = await response.json();
-        if (!cancelled) setFetchedTranslations(json);
-      } catch (err) {
-        console.warn(`[tide-product] Failed to load custom translations from ${url}. Falling back to built-in translations.`, err);
-      } finally {
-        // Always unblock the render — success uses the fetched overrides,
-        // failure silently falls back to built-ins, both happen after this.
-        if (!cancelled) setTranslationsReady(true);
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [customTranslationsUrl, customTranslations, language]);
-
-  const effectiveOverrides = customTranslations ?? fetchedTranslations;
-  const translations = getTranslations(language, effectiveOverrides);
-
-  const [loaded, setLoaded] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [roomsIsDisabled, setRoomsIsDisabled] = useState<boolean>(true);
-  const [price, setPrice] = useState<number>();
-  const [hasFlight, setHasFlight] = useState<boolean>(false);
-  const [hasTransfer, setHasTransfer] = useState<boolean>(false);
-  const [rooms, setRooms] = useState<ProductRoom[]>([{ adults: 2, children: 0, childAges: [] }]);
-  const [searchResponse, setSearchResponse] = useState<BookingPackageItem[]>([]);
-  const [detailResponse, setDetailResponse] = useState<any>();
-  const [dateRange, setDateRange] = useState<DateRange>();
-  const [urlDateRange, setUrlDateRange] = useState<{ from: Date | null; to: Date | null }>({ from: null, to: null });
-  const [packageProductName, setPackageProductName] = useState<string>(productName);
-  const [currencyCode, setCurrencyCode] = useState<string>('');
-  const [searchResults, setSearchResults] = useState<BookingPackageItem[]>([]);
-  const skipNextFetchRef = useRef(false);
-
-  const fetchPackage = async (signal: AbortSignal) => {
-    if (displayMode === 'list' && searchType !== 1) {
-      console.error('The combination of searchType and displayMode is not supported.' + " Please set searchType to 1 when using displayMode 'list'.");
-      return;
-    }
-
-    if (loaded && productCode && dateRange?.fromDate && dateRange?.toDate && rooms) {
-      const apiSettingsState =
-        apiKey && apiUrl
-          ? ({
-              apiKey: apiKey,
-              apiUrl: apiUrl
-            } as ApiSettingsState)
-          : undefined;
-
-      const startDate = formatISO(dateRange?.fromDate, { representation: 'date' }) + 'T00:00:00Z';
-      const endDate = formatISO(dateRange?.toDate, { representation: 'date' }) + 'T00:00:00Z';
-
-      const requestRooms = rooms.map((room, i) => {
-        const requestRoom = {
-          index: i,
-          pax: []
-        } as BookingPackageRequestRoom;
-
-        for (var a = 0; a < room.adults; a++) {
-          requestRoom.pax.push({
-            age: 30
-          } as BookingPackagePax);
-        }
-
-        for (var c = 0; c < room.children; c++) {
-          requestRoom.pax.push({
-            age: room.childAges[c]
-          } as BookingPackagePax);
-        }
-
-        return requestRoom;
-      });
-
-      const detailsRequest: BookingPackageRequest<BookingPackageDetailsRequest> = {
-        officeId: officeId,
-        agentId: agentId,
-        payload: {
-          searchType: 0,
-          catalogueId: catalogueId,
-          productCode: productCode,
-          fromDate: startDate,
-          toDate: endDate,
-          includeFlights: includeFlights,
-          rooms: requestRooms
-        }
-      };
-
-      const searchRequest: BookingPackageRequest<BookingPackageSearchRequest> = {
-        officeId: officeId,
-        agentId: agentId,
-        payload: {
-          searchType: 1,
-          useExactDates: false,
-          earliestFromOffset: 0,
-          latestToOffset: 0,
-          catalogueIds: [catalogueId],
-          productCodes: [productCode],
-          fromDate: (urlDateRange.from ?? new Date(now())).toISOString(),
-          toDate: (urlDateRange.to ?? addYears(new Date(now()), 1)).toISOString(),
-          includeFlights: includeFlights,
-          rooms: requestRooms
-        }
-      };
-
-      setIsLoading(true);
-
-      if (displayMode === 'calendar' && searchType === 0) {
-        setDetailResponse(await packageApi.fetchDetails(detailsRequest, signal, language, apiSettingsState));
-      }
-
-      if (searchType === 1) {
-        setSearchResponse(await packageApi.fetchSearch(searchRequest, signal, apiSettingsState));
-      }
-
-      setIsLoading(false);
-    }
-  };
-
-  const handleBookClick = () => {
-    const params: Record<string, string> = {};
-
-    if (rooms) {
-      const serialized = JsonURL.stringify(
-        rooms.map((room) => omit(room, ['children'])),
-        { AQF: true }
-      );
-
-      if (serialized) {
-        params['rooms'] = serialized;
-      }
-    }
-
-    if (dateRange?.fromDate) {
-      params['startDate'] = format(dateRange.fromDate, DATE_FORMAT);
-    }
-
-    if (dateRange?.toDate) {
-      params['endDate'] = format(dateRange.toDate, DATE_FORMAT);
-    }
-
-    params['catalogueId'] = catalogueId.toString();
-
-    if (addProductToQuery) {
-      params['productCode'] = productCode;
-      params['productName'] = encodeURI(packageProductName)!;
-    }
-
-    const path = window.location.pathname;
-    const paramString = Object.keys(params)
-      .map((key) => `${key}=${params[key]}`)
-      .join('&');
-
-    window.location.href = basePath.startsWith('/')
-      ? `${window.location.protocol}//${window.location.host}${basePath}?${paramString}`
-      : `${path}${path.endsWith('/') ? '' : '/'}${basePath}?${paramString}`;
-  };
-
-  const handleRoomChange = (rooms: ProductRoom[]) => {
-    setRooms(rooms);
-  };
-
-  const handleDateChange = (value: DateRange) => {
-    if (searchType === 1) {
-      skipNextFetchRef.current = true;
-    }
-    setDateRange(value);
-
-    if (value.fromDate && value.toDate && searchType === 1 && searchResults.length > 0) {
-      const from = format(value.fromDate, DATE_FORMAT);
-      const to = format(value.toDate, DATE_FORMAT);
-
-      const selectedItem = searchResults.find((item) => {
-        const itemFrom = format(new Date(item.fromDate), DATE_FORMAT);
-        const itemTo = format(new Date(item.toDate), DATE_FORMAT);
-
-        return itemFrom === from && itemTo === to;
-      });
-
-      if (selectedItem) {
-        setPrice(selectedItem.price);
-        setPackageProductName(selectedItem.name);
-      }
-    }
-  };
-
-  const handleDateSelect = (selectedItem: BookingPackageItem) => {
-    if (searchType === 1) {
-      skipNextFetchRef.current = true;
-    }
-    const fromDate = new Date(selectedItem.fromDate);
-    const toDate = new Date(selectedItem.toDate);
-
-    setDateRange({ fromDate, toDate });
-    setPrice(selectedItem.price);
-    setPackageProductName(selectedItem.name);
-  };
-
-  useEffect(() => {
-    if (searchResponse && !isEmpty(searchResponse)) {
-      setSearchResults(searchResponse);
-      const selectedItem = searchResponse.find(
-        (item) => new Date(item.fromDate).getTime() === dateRange?.fromDate?.getTime() && new Date(item.toDate).getTime() === dateRange?.toDate?.getTime()
-      );
-      if (selectedItem) {
-        setPrice(selectedItem.price);
-        setPackageProductName(selectedItem.name);
-        setCurrencyCode(selectedItem.currencyCode);
-      } else {
-        setPrice(searchResponse[0].price);
-        setPackageProductName(searchResponse[0].name);
-        setCurrencyCode(searchResponse[0].currencyCode);
-      }
-    } else {
-      setSearchResults([]);
-      setIsLoading(false);
-      setPackageProductName(translations.PRODUCT.NOT_AVAILABLE);
-    }
-  }, [searchResponse]);
-
-  useEffect(() => {
-    if (detailResponse && !detailResponse.errorCode && detailResponse.payload) {
-      const selectedOption = detailResponse.payload.options.find((x: any) => x.isSelected);
-
-      if (selectedOption) {
-        const hasFlight = selectedOption.includedServiceTypes.some((x: any) => x === 7);
-        const hasTranfer = selectedOption.includedServiceTypes.some((x: any) => x === 13);
-
-        setPrice(selectedOption.price);
-        setHasFlight(hasFlight);
-        setHasTransfer(hasTranfer);
-        setCurrencyCode(detailResponse.payload.currencyCode);
-        setPackageProductName(selectedOption.name);
-      }
-    } else if (detailResponse !== undefined) {
-      setPrice(undefined);
-      setHasFlight(false);
-      setHasTransfer(false);
-      setCurrencyCode('');
-    }
-  }, [detailResponse]);
-
-  useEffect(() => {
-    if (searchType === 1 && skipNextFetchRef.current) {
-      skipNextFetchRef.current = false;
-      return;
-    }
-
-    const controller = new AbortController();
-    const { signal } = controller;
-
-    (async () => {
-      fetchPackage(signal);
-    })();
-    return () => {
-      controller.abort();
-    };
-  }, [dateRange?.fromDate?.valueOf(), dateRange?.toDate?.valueOf(), JSON.stringify(rooms)]);
-
-  useEffect(() => {
-    const params = new URLSearchParams(location.search);
-    const rooms = getRoomsFromParams(params, 'rooms');
-    const from = getDateAsDateFromParams(params, 'from') || getDateAsDateFromParams(params, 'startDate');
-    const to = getDateAsDateFromParams(params, 'to') || getDateAsDateFromParams(params, 'endDate');
-
-    setUrlDateRange({ from, to });
-
-    if (rooms) {
-      setRooms(rooms);
-    }
-
-    if (from && duration) {
-      const durationTo = new Date(Date.UTC(from.getFullYear(), from.getMonth(), from.getDate() + duration));
-
-      setDateRange({ fromDate: from, toDate: durationTo });
-    } else if (from && to) {
-      setDateRange({ fromDate: from, toDate: to });
-    } else if (duration) {
-      const now = new Date();
-
-      const durationFrom = new Date(Date.UTC(now.getFullYear(), now.getMonth() + 3, now.getDate()));
-      const durationTo = new Date(Date.UTC(durationFrom.getFullYear(), durationFrom.getMonth(), durationFrom.getDate() + duration));
-
-      setDateRange({ fromDate: durationFrom, toDate: durationTo });
-    } else {
-      const now = new Date();
-      const startDate = addMonths(now, 1);
-      const endDate = addDays(startDate, 7);
-
-      setDateRange({ fromDate: startDate, toDate: endDate });
-    }
-
-    setLoaded(true);
-  }, [location]);
-
-  useEffect(() => {
-    if (searchType === 1 && searchResults.length > 0) {
-      const first = searchResults[0];
-
-      setDateRange({
-        fromDate: new Date(first.fromDate),
-        toDate: new Date(first.toDate)
-      });
-
-      setPackageProductName(first.name);
-      setPrice(first.price);
-      setCurrencyCode(first.currencyCode);
-
-      skipNextFetchRef.current = true;
-    }
-  }, [searchResults, searchType]);
-
-  const personCount = rooms.reduce((s, r) => s + r.adults + r.children, 0);
-  const durationCount = 0;
-  const priceText = formatPriceByMode(
-    price,
-    priceMode,
-    personCount,
-    durationCount,
-    translations.PRODUCT.PER_PERSON,
-    translations.PRODUCT.PER_NIGHT,
-    translations.PRODUCT.PER_PERSON_PER_NIGHT,
-    currencyCode
-  );
-
-  // Re-provide the context so children see the loaded translation overrides
-  // regardless of whether they came from a runtime fetch or an in-memory dict.
-  const childSettings = effectiveOverrides === customTranslations ? settings : { ...settings, customTranslations: effectiveOverrides };
-
-  // Suppress the entire render until the translation override fetch has
-  // resolved — otherwise host-side end users would briefly see the built-in
-  // labels and watch them "jump" to the customer-specific copy.
-  if (!translationsReady) {
-    return null;
-  }
-
-  return (
-    <SettingsContext.Provider value={childSettings}>
-      <div className="booking-product">
-        <Header name={packageProductName} rating={rating} priceText={priceText} isLoading={isLoading} hasFlight={hasFlight} hasTransfer={hasTransfer} />
-        <div className="booking-product__body">
-          <Rooms rooms={rooms} isDisabled={roomsIsDisabled} setIsDisabled={setRoomsIsDisabled} onChange={handleRoomChange} />
-          {displayMode === 'calendar' && (
-            <Dates
-              value={dateRange}
-              duration={duration}
-              isLoading={isLoading}
-              onChange={handleDateChange}
-              availableDatePairs={searchResults.map((item) => ({
-                fromDate: new Date(item.fromDate),
-                toDate: new Date(item.toDate)
-              }))}
-            />
-          )}
-          {displayMode === 'list' && <ListView searchResults={searchResults} onSelect={handleDateSelect} />}
-        </div>
-        <Footer priceText={priceText} isLoading={isLoading} isOffer={isOffer} roomsIsDisabled={roomsIsDisabled} handleBookClick={handleBookClick} />
-      </div>
-    </SettingsContext.Provider>
-  );
-};
-
-export default Product;

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import { clamp, range } from 'lodash';
-import Icon from '../../shared/components/icon';
-
-interface RatingProps {
-  rating: number;
-}
-
-const Rating: React.FC<RatingProps> = ({ rating }) => {
-  const clampedRating = clamp(rating, 0, 5);
-  return (
-    <div className="rating">
-      {range(0, Math.floor(clampedRating)).map((i) => (
-        <Icon name="ui-star" key={`rating-star-${i}`} width={25} height={25} />
-      ))}
-      {rating % 1 > 0 && <Icon name="ui-halfstar" width={25} height={25} />}
-    </div>
-  );
-};
-
-export default Rating;

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

@@ -1,192 +0,0 @@
-import { range } from 'lodash';
-import React, { useContext, useEffect, useState } from 'react';
-import { buildClassName } from '../../shared/utils/class-util';
-import { getTranslations } from '../../shared/utils/localization-util';
-import SettingsContext from '../settings-context';
-import { ProductRoom } from '../types';
-import AgeSelect from './age-select';
-import AmountInput from './amount-input';
-import Icon from '../../shared/components/icon';
-
-interface RoomsProps {
-  rooms: ProductRoom[];
-  isDisabled: boolean;
-  setIsDisabled: (isOpen: boolean) => void;
-  onChange: (rooms: ProductRoom[]) => void;
-}
-
-const Rooms: React.FC<RoomsProps> = ({ rooms, isDisabled, setIsDisabled, onChange }) => {
-  const [isTouched, setIsTouched] = useState<boolean>(false);
-  const [currentRooms, setRoomState] = useState<ProductRoom[]>(rooms);
-
-  useEffect(() => {
-    setRoomState(rooms);
-  }, [rooms]);
-
-  const { language, customTranslations, disableRooms } = useContext(SettingsContext);
-  const translations = getTranslations(language, customTranslations);
-
-  // When `disableRooms` is set, the adults/children inputs are always editable
-  // (no edit/apply gate) and changes are propagated immediately.
-  const effectiveIsDisabled = disableRooms ? false : isDisabled;
-
-  // Notify parent that the form is always "applied" when rooms editing is
-  // disabled — otherwise the Book button would never enable (it watches
-  // `roomsIsDisabled`).
-  useEffect(() => {
-    if (disableRooms && !isDisabled) {
-      setIsDisabled(true);
-    }
-  }, [disableRooms]);
-
-  const commitIfDisabledMode = (nextRooms: ProductRoom[]) => {
-    if (disableRooms) {
-      onChange(nextRooms);
-    } else {
-      setIsTouched(true);
-    }
-  };
-
-  const handleCloseClick = () => {
-    setIsDisabled(true);
-    if (isTouched) onChange(currentRooms);
-  };
-
-  return (
-    <div className="booking-product__rooms">
-      <div className="booking-product__rooms-title">
-        <Icon name="ui-user" width={25} height={25} />
-        {translations.PRODUCT.WHO_YOU_TRAVELING_WITH}
-      </div>
-      <div className="booking-product__rooms__container">
-        <div className="booking-product__rooms__wrapper">
-          {!disableRooms && (
-            <div className="booking-product__rooms__header">
-              <div className="booking-product__rooms__heading">{translations.SHARED.ROOMS}</div>
-              <div className="booking-product__rooms__actions">
-                <AmountInput
-                  label={translations.PRODUCT.NUMBER_OF_ROOMS}
-                  value={currentRooms.length}
-                  disabled={effectiveIsDisabled}
-                  min={1}
-                  onChange={(value) => {
-                    setRoomState(
-                      range(0, value).map(
-                        (roomIndex) =>
-                          currentRooms[roomIndex] ?? {
-                            adults: 2,
-                            children: 0,
-                            childAges: []
-                          }
-                      )
-                    );
-
-                    setIsTouched(true);
-                  }}
-                />
-              </div>
-            </div>
-          )}
-          <div className="booking-product__rooms-body">
-            {currentRooms.map((room, roomIndex) => (
-              <div className="booking-product__room" key={roomIndex}>
-                <div className="booking-product__room__header">
-                  {!disableRooms && <h3 className="booking-product__room__heading">{translations.SHARED.ROOM + ' ' + (roomIndex + 1)}</h3>}
-                  <div className="booking-product__room__actions">
-                    <AmountInput
-                      label={translations.SHARED.ADULTS}
-                      value={room.adults}
-                      disabled={effectiveIsDisabled}
-                      min={1}
-                      onChange={(value) => {
-                        const next = currentRooms.map((room, i) => (i === roomIndex ? { ...room, adults: value } : room));
-                        setRoomState(next);
-                        commitIfDisabledMode(next);
-                      }}
-                    />
-                    <AmountInput
-                      label={translations.SHARED.CHILDREN}
-                      value={room.children}
-                      disabled={effectiveIsDisabled}
-                      onChange={(value) => {
-                        const next = currentRooms.map((room, i) =>
-                          i === roomIndex
-                            ? {
-                                ...room,
-                                children: value,
-                                childAges: range(0, value).map((childIndex) => room.childAges[childIndex] ?? 0)
-                              }
-                            : room
-                        );
-                        setRoomState(next);
-                        commitIfDisabledMode(next);
-                      }}
-                    />
-                  </div>
-                </div>
-                {room.children > 0 && (
-                  <div className="booking-product__room-children">
-                    <label className="booking-product__room-children-label">{translations.PRODUCT.AGE_BY_DEPARTURE_DATE}</label>
-                    <div className="booking-product__room-children-ages">
-                      {range(0, room.children).map((childIndex) => (
-                        <AgeSelect
-                          key={childIndex}
-                          value={room.childAges[childIndex]}
-                          disabled={effectiveIsDisabled}
-                          onChange={(value) => {
-                            const next = currentRooms.map((room, selectorRoomIndex) =>
-                              roomIndex === selectorRoomIndex
-                                ? {
-                                    ...room,
-                                    childAges: room.childAges.map((age, i) => (childIndex === i ? value : age)).sort((a, b) => b - a)
-                                  }
-                                : room
-                            );
-                            setRoomState(next);
-                            commitIfDisabledMode(next);
-                          }}
-                        />
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-        {!disableRooms && (
-          <div className="booking-product__rooms-footer">
-            {isDisabled ? (
-              <button
-                type="button"
-                className={buildClassName(['cta--secondary', 'cta--add'])}
-                title={translations.PRODUCT.EDIT}
-                onClick={() => {
-                  setIsDisabled(false);
-                  setIsTouched(false);
-                }}>
-                <span>
-                  <Icon name="ui-pencil" width={25} height={25} />
-                  {translations.PRODUCT.EDIT}
-                </span>
-              </button>
-            ) : (
-              <button
-                type="button"
-                className={buildClassName(['cta', isTouched ? 'cta--secondary' : 'cta--secondary', 'cta--add'])}
-                title={translations.PRODUCT.APPLY}
-                onClick={handleCloseClick}>
-                <span>
-                  <Icon name="ui-check" />
-                  {translations.PRODUCT.APPLY}
-                </span>
-              </button>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Rooms;

package/src/booking-product/constants.ts

@@ -1 +0,0 @@
-export const DATE_FORMAT = 'yyyy-MM-dd';

package/src/booking-product/index.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import Product from './components/product';
-import SettingsContext from './settings-context';
-import { Settings } from './types';
-
-interface BookingProductProps {
-  productCode: string;
-  productName: string;
-  rating?: number;
-  settings: Settings;
-}
-
-const BookingProduct: React.FC<BookingProductProps> = ({ productCode, productName, rating, settings }) => {
-  return (
-    <SettingsContext.Provider value={settings}>
-      <Product productCode={productCode} productName={productName} rating={rating}></Product>
-    </SettingsContext.Provider>
-  );
-};
-
-export default BookingProduct;