@qite/tide-booking-component 1.4.124 → 1.4.125

package/src/booking-product/settings-context.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Settings } from './types';
-
-interface ProductSettingsContextProps extends Settings {}
-
-const SettingsContext = React.createContext<ProductSettingsContextProps>({
-  officeId: 1,
-  catalogueId: 1,
-  language: 'nl-BE',
-  basePath: 'boeken',
-  priceMode: 0,
-  displayMode: 'calendar',
-  searchType: 0
-});
-
-export default SettingsContext;

package/src/booking-product/types.ts

@@ -1,68 +0,0 @@
-export interface Settings {
-  officeId: number;
-  catalogueId: number;
-  agentId?: number;
-  basePath: string;
-  language: string;
-  includeFlights?: boolean;
-  priceMode: number;
-  icons?: string;
-  apiUrl?: string;
-  apiKey?: string;
-  addProductToQuery?: boolean;
-  isOffer?: boolean;
-  displayMode?: 'list' | 'calendar';
-  searchType?: number;
-
-  /**
-   * When true, hides the "Rooms" heading, the number-of-rooms stepper,
-   * the per-room "Room N" sub-heading and the Edit/Apply gate. The
-   * adults/children inputs are then always visible and editable. The
-   * component still tracks a single room internally so the request payload
-   * to the Tide API is unchanged.
-   */
-  disableRooms?: boolean;
-
-  /**
-   * Icon name shown next to the price whenever a price is available.
-   * Defaults to `'ui-bed'` for backwards compatibility. Customers booking
-   * non-accommodation products (courses, rentals, excursions, ...) can set
-   * this to a more appropriate icon.
-   */
-  mainIcon?: string;
-
-  /**
-   * URL of a JSON translation file that will be fetched at runtime and
-   * deep-merged over the built-in translations for the active language.
-   * The `{language}` token in the URL is replaced with the active language
-   * code, so a single setting can serve multiple languages by dropping
-   * files like `en-GB.json`, `nl-BE.json` side by side.
-   *
-   * Only the keys present in the host file are overridden; everything else
-   * falls back to the built-in translations. If the file 404s or fails to
-   * load, the component logs a warning and silently uses the built-ins.
-   */
-  customTranslationsUrl?: string;
-
-  /**
-   * Escape hatch for callers that already have the translation overrides
-   * as a JS object in memory (e.g. SSR, pre-fetched, in-tree dictionaries).
-   * Takes precedence over `customTranslationsUrl` when both are set.
-   * Most consumers should use `customTranslationsUrl` instead.
-   */
-  customTranslations?: any;
-
-  alternativeActionText?: string;
-  alternativeAction?: () => void;
-}
-
-export interface ProductRoom {
-  adults: number;
-  children: number;
-  childAges: number[];
-}
-
-export interface DateRange {
-  fromDate?: Date;
-  toDate?: Date;
-}

package/src/booking-product/utils/api.ts

@@ -1,26 +0,0 @@
-import { details, search } from '@qite/tide-client';
-import { BookingPackage, BookingPackageDetailsRequest, BookingPackageRequest, BookingPackageSearchRequest, TideResponse } from '@qite/tide-client/build/types';
-import { ApiSettingsState } from '../../shared/types';
-import { buildTideClientConfig } from '../../shared/utils/tide-api-utils';
-
-const fetchDetails = async (
-  request: BookingPackageRequest<BookingPackageDetailsRequest>,
-  signal: AbortSignal,
-  languageCode?: string,
-  apiSettings?: ApiSettingsState
-): Promise<TideResponse<BookingPackage>> => {
-  const tideClientConfig = buildTideClientConfig(apiSettings);
-  return await details(tideClientConfig, request, signal, languageCode);
-};
-
-const fetchSearch = async (request: BookingPackageRequest<BookingPackageSearchRequest>, signal: AbortSignal, apiSettings?: ApiSettingsState) => {
-  const tideClientConfig = buildTideClientConfig(apiSettings);
-  return await search(tideClientConfig, request, signal);
-};
-
-const packageApi = {
-  fetchDetails,
-  fetchSearch
-};
-
-export default packageApi;

package/src/booking-product/utils/price.ts

@@ -1,28 +0,0 @@
-import { formatPrice } from '../../shared/utils/localization-util';
-
-export const formatPriceByMode = (
-  price: number | undefined,
-  priceMode: number,
-  personCount: number,
-  duration: number,
-  perPersonLabel: string,
-  perNightLabel: string,
-  perPersonPerNightLabel: string,
-  currencyCode: string
-) => {
-  if (!price) return '';
-
-  switch (priceMode) {
-    case 0:
-      return `${formatPrice(price, currencyCode)}`;
-    case 1:
-      const perPersonPrice = price / personCount;
-      return `${formatPrice(perPersonPrice, currencyCode)} / ${perPersonLabel}`;
-    case 2:
-      const perNightPrice = price / duration;
-      return `${formatPrice(perNightPrice, currencyCode)} / ${perNightLabel}`;
-    case 3:
-      const perPersonPerNightPrice = price / duration;
-      return `${formatPrice(perPersonPerNightPrice, currencyCode)} / ${perPersonPerNightLabel}`;
-  }
-};

package/src/booking-wizard/api-settings-slice.ts

@@ -1,24 +0,0 @@
-import { PayloadAction, createSlice } from '@reduxjs/toolkit';
-import { ApiSettingsState } from '../shared/types';
-
-const initialState: ApiSettingsState = {
-  apiUrl: '',
-  apiKey: ''
-};
-
-const apiSettingsSlice = createSlice({
-  name: 'settings',
-  initialState,
-  reducers: {
-    setApiUrl(state, action: PayloadAction<string>) {
-      state.apiUrl = action.payload;
-    },
-    setApiKey(state, action: PayloadAction<string>) {
-      state.apiKey = action.payload;
-    }
-  }
-});
-
-export const { setApiUrl, setApiKey } = apiSettingsSlice.actions;
-
-export default apiSettingsSlice.reducer;

package/src/booking-wizard/components/labeled-input.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { buildClassName } from '../../shared/utils/class-util';
-import { compact } from 'lodash';
-
-interface LabeledInputProps {
-  name: string;
-  type?: string;
-  required?: boolean;
-  value?: string | number;
-  defaultValue?: string | number;
-  min?: string | number;
-  max?: string | number;
-  label?: string;
-  placeholder?: string;
-  hasError?: boolean;
-  extraClassName?: string;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
-}
-
-const LabeledInput: React.FC<LabeledInputProps> = ({
-  name,
-  type,
-  required,
-  value,
-  defaultValue,
-  min,
-  max,
-  label,
-  placeholder,
-  extraClassName,
-  hasError,
-  onChange,
-  onBlur
-}) => {
-  return (
-    <label className={buildClassName(['form__group', extraClassName, hasError && 'form__group--error'])}>
-      <span className="form__label">{compact([label, required && '*']).join(' ')}</span>
-      <input
-        name={name}
-        type={type ?? 'text'}
-        required={required}
-        className="form__input"
-        min={min}
-        max={max}
-        placeholder={placeholder}
-        onChange={onChange}
-        onBlur={onBlur}
-        value={value}
-        defaultValue={defaultValue}
-      />
-    </label>
-  );
-};
-
-export default LabeledInput;

package/src/booking-wizard/components/labeled-select.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { buildClassName } from '../../shared/utils/class-util';
-import { compact } from 'lodash';
-
-interface LabeledSelectProps {
-  name: string;
-  id?: string;
-  required?: boolean;
-  value?: string | number;
-  defaultValue?: string | number;
-  label?: string;
-  hasError?: boolean;
-  extraClassName?: string;
-  extraDropdownClassName?: string;
-  options?: {
-    key: string;
-    value: string | number | undefined;
-    label: string;
-  }[];
-  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
-  onBlur?: React.FocusEventHandler<HTMLSelectElement>;
-}
-
-const LabeledSelect: React.FC<LabeledSelectProps> = ({
-  name,
-  id,
-  required,
-  value,
-  defaultValue,
-  label,
-  extraClassName,
-  extraDropdownClassName,
-  hasError,
-  options,
-  onChange,
-  onBlur
-}) => {
-  return (
-    <label className={buildClassName(['form__group', extraClassName, hasError && 'form__group--error'])}>
-      <span className="form__label">{compact([label, required && '*']).join(' ')}</span>
-      <div className={buildClassName(['dropdown', extraDropdownClassName])}>
-        <select name={name} id={id} defaultValue={defaultValue} value={value} onBlur={onBlur} onChange={onChange}>
-          {options?.map((option) => (
-            <option key={option.key} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
-      </div>
-    </label>
-  );
-};
-
-export default LabeledSelect;

package/src/booking-wizard/components/message.tsx

@@ -1,21 +0,0 @@
-import Icon from '../../shared/components/icon';
-import React from 'react';
-import { buildClassName } from '../../shared/utils/class-util';
-
-interface MessageProps {
-  type: 'error' | 'success';
-  title: string;
-  actionComponent?: JSX.Element;
-  children?: JSX.Element | JSX.Element[];
-}
-
-const Message: React.FC<MessageProps> = ({ type, title, actionComponent, children }) => (
-  <div className={buildClassName(['booking-message', type === 'error' && 'booking-message--error', type === 'success' && 'booking-message--success'])}>
-    {type === 'error' && <Icon name="ui-error" />}
-    <h4 className="booking-message__heading">{title}</h4>
-    <div className="booking-message__text">{children}</div>
-    {actionComponent && <div className="booking-message__actions">{actionComponent}</div>}
-  </div>
-);
-
-export default Message;

package/src/booking-wizard/components/multi-range-filter.tsx

@@ -1,99 +0,0 @@
-import React, { ChangeEvent, useEffect, useState } from 'react';
-
-interface MultiRangeFilterProps {
-  min: number;
-  max: number;
-  selectedMin: number;
-  selectedMax: number;
-
-  valueFormatter: (value: number) => string;
-  onChange: (min: number, max: number) => void;
-}
-
-const MultiRangeFilter: React.FC<MultiRangeFilterProps> = ({ min, max, selectedMin, selectedMax, valueFormatter, onChange }) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const [leftPercentage, setLeftPercentage] = useState<number>(0);
-  const [rightPercentage, setRightPercentage] = useState<number>(0);
-  const [minVal, setMinVal] = useState(min);
-  const [maxVal, setMaxVal] = useState(max);
-  const minGap = 5;
-
-  useEffect(() => {
-    setSliderTrack();
-  }, [minVal, maxVal]);
-
-  const slideMin = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value, 10);
-    if (value >= min && selectedMax - value >= minGap) {
-      setMinVal(value);
-    }
-  };
-
-  const slideMax = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value, 10);
-    if (value <= max && value - selectedMin >= minGap) {
-      setMaxVal(value);
-    }
-  };
-
-  const setSliderTrack = () => {
-    const range = document.querySelector('.slider-track');
-
-    if (range) {
-      const minPercent = ((minVal - min) / (max - min)) * 100;
-      const maxPercent = ((maxVal - min) / (max - min)) * 100;
-
-      setLeftPercentage(minPercent);
-      setRightPercentage(100 - maxPercent);
-    }
-  };
-
-  const startDrag = () => {
-    setIsDragging(true);
-  };
-
-  const stopDrag = () => {
-    setIsDragging(false);
-    onChange(minVal, maxVal);
-  };
-
-  return (
-    <div className="double-slider-box">
-      <div className="input-box">
-        <div className="min-box">{valueFormatter(min)}</div>
-        <div className="max-box">{valueFormatter(max)}</div>
-      </div>
-      <div className="range-slider">
-        <div className="slider-track" style={{ left: leftPercentage + '%', right: rightPercentage + '%' }}></div>
-        <input
-          type="range"
-          min={min}
-          max={max}
-          value={minVal}
-          onChange={slideMin}
-          onMouseDown={startDrag}
-          onMouseUp={stopDrag}
-          onTouchStart={startDrag}
-          onTouchEnd={stopDrag}
-          className="min-val"
-        />
-        <input
-          type="range"
-          min={min}
-          max={max}
-          value={maxVal}
-          onChange={slideMax}
-          onMouseDown={startDrag}
-          onMouseUp={stopDrag}
-          onTouchStart={startDrag}
-          onTouchEnd={stopDrag}
-          className="max-val"
-        />
-        {isDragging && <div className="min-tooltip">{valueFormatter(minVal)}</div>}
-        {isDragging && <div className="max-tooltip">{valueFormatter(maxVal)}</div>}
-      </div>
-    </div>
-  );
-};
-
-export default MultiRangeFilter;

package/src/booking-wizard/components/phone-input.tsx

@@ -1,146 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { buildClassName } from '../../shared/utils/class-util';
-import { compact } from 'lodash';
-import { Country } from '../types';
-
-interface PhoneInputProps {
-  name: string;
-  required?: boolean;
-  value?: string | number;
-  label?: string;
-  placeholder?: string;
-  hasError?: boolean;
-  extraClassName?: string;
-  countries: Country[];
-  countryIso2?: string; // Initial country selection (ISO2 code)
-  onChange?: React.ChangeEventHandler<HTMLElement>;
-  onBlur?: React.FocusEventHandler<HTMLElement>;
-}
-
-const normalize = (v?: string | number) => (v == null ? '' : String(v));
-
-const parseCombined = (raw: string, countries: Country[]): { prefix: string; number: string } => {
-  const value = normalize(raw).trim();
-  if (!value) return { prefix: '', number: '' };
-
-  // Try to match a known prefix at the start. Prefer longest match.
-  const sorted = [...countries].sort((a, b) => b.phonePrefix.length - a.phonePrefix.length);
-  const hit = sorted.find((c) => value.startsWith(c.phonePrefix));
-  if (hit) {
-    const rest = value
-      .slice(hit.phonePrefix.length)
-      .trim()
-      .replace(/^[-\s]+/, '');
-    return { prefix: hit.phonePrefix, number: rest };
-  }
-
-  // Fallback: split on first space if it looks like a +prefix number
-  const m = value.match(/^(\+\d{1,4})[\s-]*(.*)$/);
-  if (m) return { prefix: m[1], number: m[2] };
-
-  return { prefix: '', number: value };
-};
-
-const PhoneInput: React.FC<PhoneInputProps> = ({
-  name,
-  required,
-  value,
-  label,
-  placeholder,
-  extraClassName,
-  hasError,
-  countries,
-  countryIso2,
-  onChange,
-  onBlur
-}) => {
-  // Derive initial state from `value`
-  const initialCountry = countries.find((c) => c.iso2 === countryIso2);
-
-  const initial = useMemo(() => parseCombined(normalize(value), countries), [value, countries]);
-  const [prefix, setPrefix] = useState<string>(initial.prefix);
-  const [number, setNumber] = useState<string>(initial.number);
-
-  // Keep state in sync if the parent changes `value`
-  useEffect(() => {
-    const parsed = !prefix && !number && initialCountry ? { prefix: initialCountry.phonePrefix, number: '' } : parseCombined(normalize(value), countries);
-    if (parsed.prefix) setPrefix(parsed.prefix);
-    if (parsed.number) setNumber(parsed.number);
-  }, [value, countries, countryIso2]);
-
-  const emitCombinedChange = (e: React.ChangeEvent<HTMLElement>, nextPrefix: string, nextNumber: string) => {
-    // Combine with a space, unless the number already starts with a dash or space
-    const combined = nextPrefix && nextNumber ? compact([nextPrefix, nextNumber]).join(' ') : null;
-    onChange?.({
-      ...e,
-      type: 'change',
-      target: { name, value: combined },
-      currentTarget: { name, value: combined }
-    } as any);
-  };
-
-  const handleCountryBlur = (e: React.FocusEvent<HTMLSelectElement>) => {
-    onBlur?.(e);
-  };
-
-  const onCountryChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const next = e.target.value;
-    setPrefix(next);
-    emitCombinedChange(e, next, number);
-  };
-
-  const onPhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const cleaned = e.target.value.replace(/[^\d\s-]/g, '');
-    setNumber(cleaned);
-    emitCombinedChange(e, prefix, cleaned);
-  };
-
-  const handleNumberBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    onBlur?.(e);
-  };
-
-  // Ensure the select shows a reasonable default when prefix is empty
-  const selectValue = prefix || '';
-
-  return (
-    <label className={buildClassName(['form__group', extraClassName, hasError && 'form__group--error'])}>
-      {label && <span className="form__label">{compact([label, required && '*']).join(' ')}</span>}
-
-      <div className="phone-input">
-        <div className="dropdown">
-          <select
-            aria-label={label ? `${label} – country code` : 'Country calling code'}
-            name={`${name}__country`}
-            value={selectValue}
-            onBlur={handleCountryBlur}
-            onChange={onCountryChange}>
-            <option value="" disabled></option>
-            {countries?.map((option) => (
-              <option key={option.iso2} value={option.phonePrefix}>
-                {option.name} ({option.phonePrefix})
-              </option>
-            ))}
-          </select>
-        </div>
-
-        <input
-          aria-label={label ? `${label} – number` : 'Phone number'}
-          name={`${name}__number`}
-          type="tel"
-          inputMode="tel"
-          required={required}
-          className="form__input"
-          placeholder={placeholder}
-          onChange={onPhoneChange}
-          onBlur={handleNumberBlur}
-          value={number}
-        />
-
-        {/* Hidden merged value to integrate with forms that expect a single field */}
-        <input type="hidden" name={name} value={compact([prefix, number]).join(' ')} />
-      </div>
-    </label>
-  );
-};
-
-export default PhoneInput;

package/src/booking-wizard/components/print-offer-button.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { BookingPackage, Pax } from '@qite/tide-client/build/types';
-import { useOfferPrinter } from '../use-offer-printer';
-
-interface PrintOfferButtonProps {
-  bookingPackage?: BookingPackage;
-
-  getPax: () => Pax[] | undefined;
-
-  tagIds?: number[];
-
-  printActionId?: number | null;
-
-  onPrinted?: (pdfUrl: string) => void;
-
-  labelIdle?: string;
-  labelCreating?: string;
-  labelPrinting?: string;
-  disabled?: boolean;
-  className?: string;
-  loader?: React.ReactNode;
-}
-
-const PrintOfferButton: React.FC<PrintOfferButtonProps> = ({
-  bookingPackage,
-  getPax,
-  tagIds,
-  printActionId = null,
-  onPrinted,
-  labelIdle = 'Print offer',
-  labelCreating = 'Generating offer…',
-  labelPrinting = 'Generating PDF…',
-  disabled = false,
-  className
-}) => {
-  const { handlePrint, stage, loading } = useOfferPrinter({
-    bookingPackage,
-    getPax,
-    tagIds,
-    onPrinted,
-    printActionId
-  });
-
-  const label = stage === 'creating' ? labelCreating : stage === 'printing' ? labelPrinting : labelIdle;
-
-  return (
-    <button type="button" onClick={handlePrint} disabled={disabled || loading} className={className}>
-      {label}
-    </button>
-  );
-};
-
-export default PrintOfferButton;

package/src/booking-wizard/components/step-indicator.tsx

@@ -1,36 +0,0 @@
-import React, { useContext } from 'react';
-import { useSelector } from 'react-redux';
-import { selectTranslations, selectTravelersFirstStep } from '../features/booking/selectors';
-import SettingsContext from '../settings-context';
-import SharedStepIndicators from '../../shared/booking/step-indicators';
-
-interface StepIndicatorsProps {
-  currentStep: number;
-}
-
-const StepIndicators: React.FC<StepIndicatorsProps> = ({ currentStep }) => {
-  const { flightOptions, roomOptions } = useContext(SettingsContext);
-  const translations = useSelector(selectTranslations);
-  const travelersFirstStep = useSelector(selectTravelersFirstStep);
-
-  const stepLabels: string[] = [];
-  if (travelersFirstStep) {
-    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
-  }
-  if (!flightOptions.isHidden) {
-    stepLabels.push(translations.STEPS.FLIGHT_OPTIONS);
-  }
-  if (!roomOptions.isHidden) {
-    stepLabels.push(translations.STEPS.ROOM_OPTIONS);
-  }
-  stepLabels.push(translations.STEPS.EXTRA_OPTIONS);
-  if (!travelersFirstStep) {
-    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
-  }
-  stepLabels.push(translations.STEPS.SUMMARY);
-  stepLabels.push(translations.STEPS.CONFIRMATION);
-
-  return <SharedStepIndicators currentStep={currentStep} stepLabels={stepLabels} />;
-};
-
-export default StepIndicators;

package/src/booking-wizard/components/step-route.tsx

@@ -1,51 +0,0 @@
-import React, { useContext } from 'react';
-import StepIndicators from './step-indicator';
-import BookingPanel from '../../shared/booking/booking-panel';
-import SettingsContext from '../settings-context';
-import { useSelector } from 'react-redux';
-import { selectTranslations, selectTravelersFirstStep } from '../features/booking/selectors';
-
-interface StepRouteProps {
-  number: number;
-  title: string;
-  component: JSX.Element;
-}
-
-const StepRoute: React.FC<StepRouteProps> = ({ number, title, component }) => {
-  const { flightOptions, roomOptions } = useContext(SettingsContext);
-  const translations = useSelector(selectTranslations);
-  const travelersFirstStep = useSelector(selectTravelersFirstStep);
-
-  const stepLabels: string[] = [];
-  if (travelersFirstStep) {
-    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
-  }
-  if (!flightOptions.isHidden) {
-    stepLabels.push(translations.STEPS.FLIGHT_OPTIONS);
-  }
-  if (!roomOptions.isHidden) {
-    stepLabels.push(translations.STEPS.ROOM_OPTIONS);
-  }
-  stepLabels.push(translations.STEPS.EXTRA_OPTIONS);
-  if (!travelersFirstStep) {
-    stepLabels.push(translations.STEPS.PERSONAL_DETAILS);
-  }
-  stepLabels.push(translations.STEPS.SUMMARY);
-  stepLabels.push(translations.STEPS.CONFIRMATION);
-
-  return (
-    <BookingPanel
-      currentStep={number}
-      stepLabels={stepLabels}
-      StepIndicatorsComponent={StepIndicators}
-      renderTitle={(step) => (
-        <>
-          {step + 1}. {stepLabels[step]}
-        </>
-      )}>
-      {component}
-    </BookingPanel>
-  );
-};
-
-export default StepRoute;