@qite/tide-booking-component 1.4.93 → 1.4.95

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

@@ -1,146 +1,146 @@
-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;
+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 +1,53 @@
-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;
+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/product-card.tsx

@@ -1,23 +1,23 @@
-import React from 'react';
-
-interface ProductCardProps {
-  productName: string;
-  thumbnailUrl?: string;
-  handleToggleClick: () => void;
-}
-
-const ProductCard: React.FC<ProductCardProps> = ({ productName, thumbnailUrl, handleToggleClick }) => {
-  return (
-    <div className="booking__product">
-      <div className="booking__product-image">
-        {thumbnailUrl && <img src={`${thumbnailUrl}?height=400&width=400`} alt={productName} className="mediacontent" />}
-      </div>
-      <div className="booking__product-text">
-        <h3 className="booking__product-heading">{productName}</h3>
-      </div>
-      <button type="button" className="booking__product-toggle" onClick={handleToggleClick}></button>
-    </div>
-  );
-};
-
-export default ProductCard;
+import React from 'react';
+
+interface ProductCardProps {
+  productName: string;
+  thumbnailUrl?: string;
+  handleToggleClick: () => void;
+}
+
+const ProductCard: React.FC<ProductCardProps> = ({ productName, thumbnailUrl, handleToggleClick }) => {
+  return (
+    <div className="booking__product">
+      <div className="booking__product-image">
+        {thumbnailUrl && <img src={`${thumbnailUrl}?height=400&width=400`} alt={productName} className="mediacontent" />}
+      </div>
+      <div className="booking__product-text">
+        <h3 className="booking__product-heading">{productName}</h3>
+      </div>
+      <button type="button" className="booking__product-toggle" onClick={handleToggleClick}></button>
+    </div>
+  );
+};
+
+export default ProductCard;

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

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

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

@@ -22,6 +22,7 @@ import {
   setLanguageCode,
   setOfficeId,
   setProductAttributes,
+  setShowCommission,
   setSkipPayment,
   setTagIds,
   setTranslations
@@ -74,6 +75,7 @@ const BookingSelfContained: React.FC<BookingProps> = ({ productCode, productName
     officeId,
     bookingOptions,
     showSidebarDeposit,
+    showCommission,
     includeFlights,
     skipPaymentWithAgent,
     generatePaymentUrl,
@@ -199,6 +201,7 @@ const BookingSelfContained: React.FC<BookingProps> = ({ productCode, productName
     dispatch(setLanguageCode(language));
     dispatch(setBookingOptions(bookingOptions));
     dispatch(setCalculateDeposit(showSidebarDeposit));
+    dispatch(setShowCommission(showCommission));
     if (tagIds && tagIds.length > 0) {
       dispatch(setTagIds(tagIds ?? undefined));
     }
@@ -209,7 +212,19 @@ const BookingSelfContained: React.FC<BookingProps> = ({ productCode, productName
     if (accommodationViewId && accommodationViewId != 0) {
       dispatch(setAccommodationViewId(accommodationViewId));
     }
-  }, [officeId, language, bookingOptions, showSidebarDeposit, setOfficeId, setLanguageCode, setCalculateDeposit, tagIds, agentAdressId, accommodationViewId]);
+  }, [
+    officeId,
+    language,
+    bookingOptions,
+    showSidebarDeposit,
+    showCommission,
+    setOfficeId,
+    setLanguageCode,
+    setCalculateDeposit,
+    tagIds,
+    agentAdressId,
+    accommodationViewId
+  ]);
 
   useEffect(() => {
     if (!productAttributes || !bookingAttributes || !rooms?.length || !isNil(bookingNumber) || !isNil(packageDetails)) {

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

@@ -29,6 +29,7 @@ import packageApi from './api';
 import { BookingStep, OPTIONS_FORM_STEP } from './constants';
 import {
   selectAccommodationCodes,
+  selectAgentAdressId,
   selectBookingAttributes,
   selectBookingRooms,
   selectLanguageCode,
@@ -43,6 +44,7 @@ export interface BookingState {
   productAttributes?: ProductAttributes;
   bookingAttributes?: BookingAttributes;
   calculateDeposit: boolean;
+  showCommission?: boolean;
   bookingNumber?: string;
   isRetry: boolean;
   package?: BookingPackage;
@@ -95,6 +97,7 @@ const initialState: BookingState = {
   productAttributes: undefined,
   bookingAttributes: undefined,
   calculateDeposit: false,
+  showCommission: false,
   bookingNumber: undefined,
   isRetry: false,
   package: undefined,
@@ -137,6 +140,7 @@ const fetchPackageDetails = createAsyncThunk('booking/details', async (_, { disp
   const productAttributes = selectProductAttributes(state);
   const bookingAttributes = selectBookingAttributes(state);
   const agentId = selectAgentId(state);
+  const agentAdressId = selectAgentAdressId(state);
   const rooms = selectBookingRooms(state);
   const languageCode = selectLanguageCode(state);
 
@@ -206,7 +210,7 @@ const fetchPackageDetails = createAsyncThunk('booking/details', async (_, { disp
 
   const request = {
     officeId: officeId,
-    agentId: agentId,
+    agentId: agentId ?? agentAdressId,
     payload: {
       searchType: searchType,
       catalogueId: bookingAttributes.catalogueId,
@@ -380,6 +384,9 @@ const bookingSlice = createSlice({
     setCalculateDeposit(state, action: PayloadAction<boolean>) {
       state.calculateDeposit = action.payload;
     },
+    setShowCommission(state, action: PayloadAction<boolean | undefined>) {
+      state.showCommission = action.payload;
+    },
     setBookingNumber(state, action: PayloadAction<string>) {
       state.bookingNumber = action.payload;
     },
@@ -596,6 +603,7 @@ export const {
   setProductAttributes,
   setBookingAttributes,
   setCalculateDeposit,
+  setShowCommission,
   setBookingNumber,
   setIsRetry,
   setFetchingPackage,

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

@@ -25,6 +25,7 @@ import {
   setOfficeId,
   setPackage,
   setProductAttributes,
+  setShowCommission,
   setSkipPayment,
   setTagIds,
   setTranslations,
@@ -76,6 +77,7 @@ const Booking: React.FC<BookingProps> = ({ productCode, productName, thumbnailUr
     confirmation,
     error,
     showSidebarDeposit,
+    showCommission,
     includeFlights,
     loaderComponent,
     skipPaymentWithAgent,
@@ -232,6 +234,7 @@ const Booking: React.FC<BookingProps> = ({ productCode, productName, thumbnailUr
     dispatch(setLanguageCode(language));
     dispatch(setBookingOptions(bookingOptions));
     dispatch(setCalculateDeposit(showSidebarDeposit));
+    dispatch(setShowCommission(showCommission));
     if (tagIds && tagIds.length > 0) {
       dispatch(setTagIds(tagIds ?? undefined));
     }
@@ -242,7 +245,19 @@ const Booking: React.FC<BookingProps> = ({ productCode, productName, thumbnailUr
     if (accommodationViewId && accommodationViewId != 0) {
       dispatch(setAccommodationViewId(accommodationViewId));
     }
-  }, [officeId, language, bookingOptions, showSidebarDeposit, setOfficeId, setLanguageCode, setCalculateDeposit, tagIds, agentAdressId, accommodationViewId]);
+  }, [
+    officeId,
+    language,
+    bookingOptions,
+    showSidebarDeposit,
+    showCommission,
+    setOfficeId,
+    setLanguageCode,
+    setCalculateDeposit,
+    tagIds,
+    agentAdressId,
+    accommodationViewId
+  ]);
 
   useEffect(() => {
     if (!productAttributes || !bookingAttributes || !rooms?.length || !isNil(bookingNumber) || !isNil(packageDetails)) {

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

@@ -151,6 +151,8 @@ export const selectVoucherCodes = (state: RootState) => state.booking.voucherCod
 
 export const selectCalculateDeposit = (state: RootState) => state.booking.calculateDeposit;
 
+export const selectShowCommission = (state: RootState) => state.booking.showCommission;
+
 export const selectIsRetry = (state: RootState) => state.booking.isRetry;
 
 export const selectStartDate = (state: RootState) => state.booking.package?.options.find((x) => x.isSelected)?.fromDate;
@@ -289,6 +291,7 @@ export const selectBookingPackageBookRequest = createSelector(
   selectBookingAddress,
   selectPackageDetails,
   selectCalculateDeposit,
+  selectShowCommission,
   selectAgentId,
   selectGeneratePaymentUrl,
   selectSkipPaymentWithAgent,
@@ -304,6 +307,7 @@ export const selectBookingPackageBookRequest = createSelector(
     address,
     packageDetails,
     calculateDeposit,
+    showCommission,
     agentId,
     generatePaymentUrl,
     skipPaymentWithAgent,
@@ -367,6 +371,7 @@ export const selectBookingPackageBookRequest = createSelector(
       pax: pax?.length != 0 ? pax : packageDetails.options[0].requestRooms.flatMap((x) => x.pax),
       nonTravelPax: [],
       calculateDeposit: calculateDeposit,
+      showCommission: showCommission,
       returnPaymentUrl: returnPaymentUrl,
       notifications: notifications,
       tagIds: tagIds,