@qite/tide-booking-component 1.4.123 → 1.4.125

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;

package/src/booking-wizard/declarations.d.ts

@@ -1,4 +0,0 @@
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}

package/src/booking-wizard/features/booking/api.ts

@@ -1,44 +0,0 @@
-import { agents, details, generateBookingAccommodations, getCountries } from '@qite/tide-client';
-import {
-  BookingPackage,
-  BookingPackageDetailsRequest,
-  BookingPackageRequest,
-  BookingTravelAgent,
-  GenerateBookingAccommodationRequest,
-  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 fetchAgents = async (signal: AbortSignal, apiSettings?: ApiSettingsState): Promise<BookingTravelAgent[]> => {
-  const tideClientConfig = buildTideClientConfig(apiSettings);
-  return await agents(tideClientConfig, signal);
-};
-
-const fetchAccommodationViews = async (request: GenerateBookingAccommodationRequest, signal: AbortSignal, apiSettings?: ApiSettingsState) => {
-  const tideClientConfig = buildTideClientConfig(apiSettings);
-  return await generateBookingAccommodations(tideClientConfig, request, signal);
-};
-
-const fetchCountries = async (signal: AbortSignal, apiSettings?: ApiSettingsState) => {
-  const tideClientConfig = buildTideClientConfig(apiSettings);
-  return await getCountries(tideClientConfig, signal);
-};
-
-const packageApi = {
-  fetchDetails,
-  fetchAgents,
-  fetchAccommodationViews,
-  fetchCountries
-};
-export default packageApi;

package/src/booking-wizard/features/booking/booking-self-contained.tsx

@@ -1,318 +0,0 @@
-import React, { useContext } from 'react';
-import { useSelector } from 'react-redux';
-import {
-  getDateFromParams,
-  getFlightsFromParams,
-  getNumberFromParams,
-  getNumbersFromParams,
-  getRoomsFromParams,
-  getStringFromParams
-} from '../../../shared/utils/query-string-util';
-import {
-  fetchPackage,
-  setAccommodationViewId,
-  setAgentAdressId,
-  setBookingAttributes,
-  setBookingNumber,
-  setBookingOptions,
-  setBookingType,
-  setCalculateDeposit,
-  setCurrentStep,
-  setGeneratePaymentUrl,
-  setLanguageCode,
-  setOfficeId,
-  setProductAttributes,
-  setShowCommission,
-  setSkipPayment,
-  setTagIds,
-  setTranslations
-} from './booking-slice';
-
-import { isNil } from 'lodash';
-import { useEffect } from 'react';
-import Loader from '../../../shared/components/loader';
-import { setApiKey, setApiUrl } from '../../api-settings-slice';
-import StepRoute from '../../components/step-route';
-import SettingsContext from '../../settings-context';
-import { useAppDispatch } from '../../store';
-import Confirmation from '../confirmation/confirmation';
-import Error from '../error/error';
-import FlightOptionsForm from '../flight-options';
-import OptionsForm from '../product-options/options-form';
-import RoomOptionsForm from '../room-options';
-import Sidebar from '../sidebar';
-import Summary from '../summary/summary';
-import TravelersForm from '../travelers-form/travelers-form';
-import {
-  CONFIRMATION_STEP,
-  ERROR_STEP,
-  FLIGHT_OPTIONS_FORM_STEP,
-  OPTIONS_FORM_STEP,
-  ROOM_OPTIONS_FORM_STEP,
-  SUMMARY_STEP,
-  TRAVELERS_FORM_STEP
-} from './constants';
-import {
-  selectApiSettings,
-  selectBookingAttributes,
-  selectBookingNumber,
-  selectBookingRooms,
-  selectCurrentStep,
-  selectIsUnavailable,
-  selectPackageDetails,
-  selectProductAttributes,
-  selectTranslations
-} from './selectors';
-
-interface BookingProps {
-  productCode: string;
-  productName: string;
-  thumbnailUrl?: string;
-}
-
-const BookingSelfContained: React.FC<BookingProps> = ({ productCode, productName, thumbnailUrl }) => {
-  const {
-    officeId,
-    bookingOptions,
-    showSidebarDeposit,
-    showCommission,
-    includeFlights,
-    skipPaymentWithAgent,
-    generatePaymentUrl,
-    tagIds,
-    agentAdressId,
-    language,
-    apiUrl,
-    apiKey,
-    translationFiles,
-    roomOptions,
-    flightOptions,
-    accommodationViewId,
-    isOffer,
-    allowOption,
-    travellers
-  } = useContext(SettingsContext);
-
-  const dispatch = useAppDispatch();
-
-  const productAttributes = useSelector(selectProductAttributes);
-  const bookingAttributes = useSelector(selectBookingAttributes);
-  const rooms = useSelector(selectBookingRooms);
-  const bookingNumber = useSelector(selectBookingNumber);
-  const packageDetails = useSelector(selectPackageDetails);
-  const isUnvailable = useSelector(selectIsUnavailable);
-  const currentStep = useSelector(selectCurrentStep);
-  const apiSettings = useSelector(selectApiSettings);
-  const translations = useSelector(selectTranslations);
-
-  useEffect(() => {
-    dispatch(setSkipPayment(skipPaymentWithAgent ?? false));
-    dispatch(setGeneratePaymentUrl(generatePaymentUrl ?? false));
-  }, [skipPaymentWithAgent, generatePaymentUrl]);
-
-  useEffect(() => {
-    if (!isNil(apiUrl) && !isNil(apiKey)) {
-      dispatch(setApiUrl(apiUrl));
-      dispatch(setApiKey(apiKey));
-    }
-  }, [apiUrl, apiKey]);
-
-  useEffect(() => {
-    const params = new URLSearchParams(location.search);
-    const startDate = getDateFromParams(params, 'startDate');
-    const endDate = getDateFromParams(params, 'endDate');
-    const catalogueId = getNumberFromParams(params, 'catalogueId') ?? getNumberFromParams(params, 'catalog');
-    const rooms = getRoomsFromParams(params, 'rooms');
-    const flight = getFlightsFromParams(params, 'flight');
-    const flightRouteId = getStringFromParams(params, 'flightRouteId');
-    const vendorConfigurationId = getNumberFromParams(params, 'vendorConfigurationId');
-    const allotmentName = getStringFromParams(params, 'allotmentName');
-    const allotmentIds = getNumbersFromParams(params, 'allotmentId');
-    const tourCode = getStringFromParams(params, 'tourCode');
-    const bookingNumber = params.get('bookingNr') ?? undefined;
-
-    if (typeof window !== 'undefined') {
-      window.scrollTo(0, 0);
-    }
-
-    if (!isNil(bookingNumber)) {
-      dispatch(setBookingNumber(bookingNumber));
-      dispatch(setCurrentStep(CONFIRMATION_STEP));
-    } else if (travellers.travelersFirstStep) {
-      dispatch(setCurrentStep(TRAVELERS_FORM_STEP));
-    } else if (!flightOptions.isHidden) {
-      dispatch(setCurrentStep(FLIGHT_OPTIONS_FORM_STEP));
-    } else if (!roomOptions.isHidden) {
-      dispatch(setCurrentStep(ROOM_OPTIONS_FORM_STEP));
-    }
-
-    if (!isNil(startDate) && !isNil(endDate) && !isNil(catalogueId) && !isNil(rooms)) {
-      dispatch(
-        setBookingAttributes({
-          startDate,
-          endDate,
-          catalogueId,
-          rooms,
-          flight,
-          includeFlights,
-          allotmentName,
-          allotmentIds,
-          tourCode,
-          flightRouteId,
-          vendorConfigurationId
-        })
-      );
-    } else {
-      console.error('Failure when setting booking attributes', startDate, endDate, catalogueId, rooms);
-    }
-  }, [location.search, setBookingAttributes, setBookingNumber, includeFlights]);
-
-  useEffect(() => {
-    if (!isNil(productCode) && !isNil(productName)) {
-      dispatch(
-        setProductAttributes({
-          productCode,
-          productName
-        })
-      );
-    } else {
-      console.error('Failure when setting product attributes', productCode, productName);
-    }
-  }, [productCode, productName, setProductAttributes]);
-
-  const getTranslations = async () => {
-    const translations = translationFiles?.map((x) =>
-      fetch(x.path)
-        .then((y) => y.json())
-        .then((z) => ({ language: x.language, value: z }))
-    );
-    return translations && (await Promise.all(translations));
-  };
-
-  useEffect(() => {
-    const loadTranslations = async () => {
-      const translations = await getTranslations();
-      dispatch(setTranslations(translations)); // Now dispatch the resolved value
-    };
-
-    loadTranslations();
-
-    dispatch(setOfficeId(officeId));
-    dispatch(setLanguageCode(language));
-    dispatch(setBookingOptions(bookingOptions));
-    dispatch(setCalculateDeposit(showSidebarDeposit));
-    dispatch(setShowCommission(showCommission));
-    if (tagIds && tagIds.length > 0) {
-      dispatch(setTagIds(tagIds ?? undefined));
-    }
-    dispatch(setAgentAdressId(agentAdressId ?? undefined));
-    if (agentAdressId && agentAdressId != 0) {
-      dispatch(setBookingType('b2b'));
-    }
-    if (accommodationViewId && accommodationViewId != 0) {
-      dispatch(setAccommodationViewId(accommodationViewId));
-    }
-  }, [
-    officeId,
-    language,
-    bookingOptions,
-    showSidebarDeposit,
-    showCommission,
-    setOfficeId,
-    setLanguageCode,
-    setCalculateDeposit,
-    tagIds,
-    agentAdressId,
-    accommodationViewId
-  ]);
-
-  useEffect(() => {
-    if (!productAttributes || !bookingAttributes || !rooms?.length || !isNil(bookingNumber) || !isNil(packageDetails)) {
-      return;
-    }
-
-    // Fetch data
-    const promise = dispatch(fetchPackage());
-    return () => {
-      promise.abort();
-    };
-  }, [productAttributes, bookingAttributes, rooms, bookingNumber, packageDetails, apiSettings.apiUrl, apiSettings.apiKey]);
-
-  const renderStep = () => {
-    switch (currentStep) {
-      case FLIGHT_OPTIONS_FORM_STEP:
-        return <StepRoute number={1} title={translations.STEPS.FLIGHT_OPTIONS} component={<FlightOptionsForm />} />;
-      case ROOM_OPTIONS_FORM_STEP:
-        return <StepRoute number={1 + (flightOptions.isHidden ? 0 : 1)} title={translations.STEPS.ROOM_OPTIONS} component={<RoomOptionsForm />} />;
-      case OPTIONS_FORM_STEP:
-        return (
-          <StepRoute
-            number={1 + (roomOptions.isHidden ? 0 : 1) + (flightOptions.isHidden ? 0 : 1)}
-            title={translations.STEPS.EXTRA_OPTIONS}
-            component={<OptionsForm />}
-          />
-        );
-      case TRAVELERS_FORM_STEP:
-        return (
-          <StepRoute
-            number={2 + (roomOptions.isHidden ? 0 : 1) + (flightOptions.isHidden ? 0 : 1)}
-            title={translations.STEPS.PERSONAL_DETAILS}
-            component={<TravelersForm />}
-          />
-        );
-      case SUMMARY_STEP:
-        return (
-          <StepRoute
-            number={3 + (roomOptions.isHidden ? 0 : 1) + (flightOptions.isHidden ? 0 : 1)}
-            title={translations.STEPS.SUMMARY}
-            component={<Summary />}
-          />
-        );
-      case CONFIRMATION_STEP:
-        return (
-          <StepRoute
-            number={4 + (roomOptions.isHidden ? 0 : 1) + (flightOptions.isHidden ? 0 : 1)}
-            title={translations.STEPS.CONFIRMATION}
-            component={<Confirmation />}
-          />
-        );
-      case ERROR_STEP:
-        return (
-          <StepRoute number={5 + (roomOptions.isHidden ? 0 : 1) + (flightOptions.isHidden ? 0 : 1)} title={translations.STEPS.ERROR} component={<Error />} />
-        );
-    }
-  };
-
-  return (
-    <>
-      {((productAttributes && bookingAttributes && packageDetails) || bookingNumber) && (
-        <div className="booking">
-          <div className="booking__content">
-            <div className="booking__panel">{renderStep()}</div>
-            <div className="backdrop" id="backdrop"></div>
-            {packageDetails && <Sidebar productName={productName} thumbnailUrl={thumbnailUrl} />}
-          </div>
-        </div>
-      )}
-      {!packageDetails && !bookingNumber && !isUnvailable && (
-        <div className="booking">
-          <div className="booking__loader">
-            <Loader />
-            <p className="booking__loader-text">
-              {allowOption ? translations.MAIN.PREPARING_DOSSIER : isOffer ? translations.MAIN.PREPARING_OFFER : translations.MAIN.PREPARING_BOOKING}
-            </p>
-          </div>
-        </div>
-      )}
-      {isUnvailable && (
-        <div className="booking">
-          <div className="booking__loader">
-            <p className="booking__loader-text">{translations.MAIN.PRODUCT_UNAVAILABLE}</p>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default BookingSelfContained;