@qite/tide-booking-component 1.4.92 → 1.4.93

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/components/step-indicator.tsx

@@ -1,57 +1,57 @@
-import React, { useContext } from 'react';
-import { useSelector } from 'react-redux';
-import { buildClassName } from '../../shared/utils/class-util';
-import { selectTranslations, selectTravelersFirstStep } from '../features/booking/selectors';
-import SettingsContext from '../settings-context';
-
-interface StepIndicatorsProps {
-  currentStep: number;
-}
-
-const StepIndicators: React.FC<StepIndicatorsProps> = ({ currentStep }) => {
-  const { flightOptions, roomOptions } = useContext(SettingsContext);
-
-  const translations = useSelector(selectTranslations);
-  const travelersFirstStep = useSelector(selectTravelersFirstStep);
-
-  const allSteps = [];
-
-  if (travelersFirstStep) {
-    allSteps.push(translations.STEPS.PERSONAL_DETAILS);
-  }
-  if (!flightOptions.isHidden) {
-    allSteps.push(translations.STEPS.FLIGHT_OPTIONS);
-  }
-  if (!roomOptions.isHidden) {
-    allSteps.push(translations.STEPS.ROOM_OPTIONS);
-  }
-
-  allSteps.push(translations.STEPS.EXTRA_OPTIONS);
-
-  if (!travelersFirstStep) {
-    allSteps.push(translations.STEPS.PERSONAL_DETAILS);
-  }
-  allSteps.push(translations.STEPS.SUMMARY);
-  allSteps.push(translations.STEPS.CONFIRMATION);
-
-  return (
-    <div className="step-indicators">
-      <div className="step-indicators__items">
-        {allSteps.map((stepName, index) => (
-          <div
-            key={`${index + 1}-${stepName}`}
-            className={buildClassName([
-              'step-indicators__item',
-              currentStep === index + 1 && 'step-indicators__item--active',
-              currentStep > index + 1 && 'step-indicators__item--completed'
-            ])}>
-            <div className="step-indicators__icon step-indicators__icon">{index + 1}</div>
-            <div className="step-indicators__text">{stepName}</div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default StepIndicators;
+import React, { useContext } from 'react';
+import { useSelector } from 'react-redux';
+import { buildClassName } from '../../shared/utils/class-util';
+import { selectTranslations, selectTravelersFirstStep } from '../features/booking/selectors';
+import SettingsContext from '../settings-context';
+
+interface StepIndicatorsProps {
+  currentStep: number;
+}
+
+const StepIndicators: React.FC<StepIndicatorsProps> = ({ currentStep }) => {
+  const { flightOptions, roomOptions } = useContext(SettingsContext);
+
+  const translations = useSelector(selectTranslations);
+  const travelersFirstStep = useSelector(selectTravelersFirstStep);
+
+  const allSteps = [];
+
+  if (travelersFirstStep) {
+    allSteps.push(translations.STEPS.PERSONAL_DETAILS);
+  }
+  if (!flightOptions.isHidden) {
+    allSteps.push(translations.STEPS.FLIGHT_OPTIONS);
+  }
+  if (!roomOptions.isHidden) {
+    allSteps.push(translations.STEPS.ROOM_OPTIONS);
+  }
+
+  allSteps.push(translations.STEPS.EXTRA_OPTIONS);
+
+  if (!travelersFirstStep) {
+    allSteps.push(translations.STEPS.PERSONAL_DETAILS);
+  }
+  allSteps.push(translations.STEPS.SUMMARY);
+  allSteps.push(translations.STEPS.CONFIRMATION);
+
+  return (
+    <div className="step-indicators">
+      <div className="step-indicators__items">
+        {allSteps.map((stepName, index) => (
+          <div
+            key={`${index + 1}-${stepName}`}
+            className={buildClassName([
+              'step-indicators__item',
+              currentStep === index + 1 && 'step-indicators__item--active',
+              currentStep > index + 1 && 'step-indicators__item--completed'
+            ])}>
+            <div className="step-indicators__icon step-indicators__icon">{index + 1}</div>
+            <div className="step-indicators__text">{stepName}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default StepIndicators;

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

@@ -1,26 +1,26 @@
-import React from 'react';
-import StepIndicators from './step-indicator';
-
-interface StepRoute {
-  number: number;
-  title: string;
-  component: JSX.Element;
-}
-
-const StepRoute: React.FC<StepRoute> = ({ number, title, component }) => {
-  return (
-    <>
-      <StepIndicators currentStep={number} />
-      <div className="booking__panel-frame booking__panel-frame--transparent">
-        <div className="booking__panel-heading">
-          <h4 className="booking__panel-title">
-            {number}. {title}
-          </h4>
-        </div>
-        <div className="booking__panel-body">{component}</div>
-      </div>
-    </>
-  );
-};
-
-export default StepRoute;
+import React from 'react';
+import StepIndicators from './step-indicator';
+
+interface StepRoute {
+  number: number;
+  title: string;
+  component: JSX.Element;
+}
+
+const StepRoute: React.FC<StepRoute> = ({ number, title, component }) => {
+  return (
+    <>
+      <StepIndicators currentStep={number} />
+      <div className="booking__panel-frame booking__panel-frame--transparent">
+        <div className="booking__panel-heading">
+          <h4 className="booking__panel-title">
+            {number}. {title}
+          </h4>
+        </div>
+        <div className="booking__panel-body">{component}</div>
+      </div>
+    </>
+  );
+};
+
+export default StepRoute;

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;
+}