@qite/tide-booking-component 1.4.112 → 1.4.113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.112",
+  "version": "1.4.113",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@jsonurl/jsonurl": "^1.1.4",
     "@popperjs/core": "^2.10.2",
-    "@qite/tide-client": "^1.1.172",
+    "@qite/tide-client": "^1.1.173",
     "@reduxjs/toolkit": "^2.8.2",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",

package/src/search-results/components/book-packaging-entry/index.tsx

@@ -52,6 +52,7 @@ const travellersSettings: SharedTravelersSettings = {
 const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSeed, isConfirmationPage }) => {
   const context = useContext(SearchResultsConfigurationContext);
   const dispatch = useDispatch();
+
   const { editablePackagingEntry, priceDetails, currentStep, bookingNumber } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
   const [countries, setCountries] = useState<CountryItem[]>([]);
@@ -59,44 +60,56 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
   const [remarks, setRemarks] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  if (!context || !editablePackagingEntry || !priceDetails) return null;
-
-  const config: TideClientConfig = {
-    host: context.tideConnection.host,
-    apiKey: context.tideConnection.apiKey
-  };
+  const translations = useMemo(() => getTranslations(context?.languageCode ?? 'en-GB'), [context?.languageCode]);
 
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
   const stepLabels = [translations.STEPS.PERSONAL_DETAILS, translations.STEPS.SUMMARY, translations.STEPS.CONFIRMATION];
 
-  console.log('editablePackagingEntry in WLSidebar:', editablePackagingEntry);
-  console.log('priceDetails in WLSidebar:', priceDetails);
+  const config: TideClientConfig | null = useMemo(() => {
+    if (!context) return null;
 
-  const initialValues = useMemo(() => createInitialValuesFromEditablePackagingEntry(editablePackagingEntry), [editablePackagingEntry?.transactionId]);
+    return {
+      host: context.tideConnection.host,
+      apiKey: context.tideConnection.apiKey
+    };
+  }, [context]);
+
+  const initialValues = useMemo(() => {
+    if (!editablePackagingEntry) {
+      return {} as TravelersFormValues;
+    }
+
+    return createInitialValuesFromEditablePackagingEntry(editablePackagingEntry);
+  }, [editablePackagingEntry?.transactionId]);
 
   const formik = useFormik<TravelersFormValues>({
     initialValues,
     enableReinitialize: true,
     validate: (values) => validateForm(values, false, 'b2c', translations, travellersSettings.formFields, travellersSettings.mainBookerFormFields),
     onSubmit: (values) => {
+      if (!editablePackagingEntry) return;
+
       dispatch(setEditablePackagingEntry(applyTravelersFormValuesToEditablePackagingEntry(editablePackagingEntry, values)));
+
       dispatch(setCurrentStep(1));
     }
   });
 
   useEffect(() => {
-    if (!context) return;
+    if (!context || !config) return;
+
     const controller = new AbortController();
 
     (async () => {
       try {
         const result = await getCountries(config, controller.signal);
         setCountries(result.items);
-      } catch {}
+      } catch {
+        // optionally handle error
+      }
     })();
 
     return () => controller.abort();
-  }, []);
+  }, [context, config]);
 
   useEffect(() => {
     if (isConfirmationPage) {
@@ -104,6 +117,8 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
     }
   }, [isConfirmationPage, dispatch]);
 
+  if (!context || !editablePackagingEntry || !priceDetails || !config) return null;
+
   const handleSummarySubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
     e.preventDefault();
 
@@ -141,6 +156,7 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
         agentId: context.agentId,
         payload: updatedEditablePackagingEntry
       } as PackagingRequestBase<PackagingEntry>;
+
       const bookingResponse = await bookPackagingEntry(config, request);
 
       dispatch(setBookingNumber(bookingResponse.number));
@@ -188,6 +204,7 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
                 translations={translations}
                 travelerFormValues={formik.values}
                 isSubmitting={isSubmitting}
+                skipPayment={!context.generatePaymentUrl}
                 userValidated={userValidated}
                 remarks={remarks}
                 enableVoucher={false}
@@ -204,21 +221,22 @@ const BookPackagingEntry: React.FC<BookPackagingEntryProps> = ({ activeSearchSee
                 )}
               />
             )}
+
             {currentStep === 2 && (
               <SharedConfirmation
                 bookingNumber={bookingNumber ?? editablePackagingEntry?.dossierNumber ?? ''}
                 isOption={false}
                 isOffer={false}
                 translations={translations.CONFIRMATION}
-                // companyContactPhone={context?.companyContactPhone || ''}
-                // companyContactEmail={context?.companyContactEmail || ''}
-                // homeUrl={context?.homeUrl || '/'}
               />
             )}
+
             {currentStep === 3 && <div>{/* error */}</div>}
           </BookingPanel>
         </div>
+
         <div className="backdrop" id="backdrop"></div>
+
         <WLSidebar activeSearchSeed={activeSearchSeed} />
       </div>
     </div>

package/src/search-results/components/search-results-container/search-results-container.tsx

@@ -128,7 +128,11 @@ type BuildPackagingEntryPartialArgs = {
   language: string;
 };
 
-const SearchResultsContainer: React.FC = () => {
+interface SearchResultsContainerProps {
+  onBookingStarted?: () => void;
+}
+
+const SearchResultsContainer: React.FC<SearchResultsContainerProps> = ({ onBookingStarted }) => {
   const currentSearch = typeof window !== 'undefined' ? window.location.search : '';
 
   const dispatch = useDispatch();
@@ -361,8 +365,8 @@ const SearchResultsContainer: React.FC = () => {
     if (typeof window !== 'undefined') {
       window.scrollTo(0, 0);
     }
-    var adults = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! >= 18).length;
-    var kids = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! >= 2 && x.age! < 18).length;
+    var adults = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! >= 12).length;
+    var kids = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! >= 2 && x.age! < 12).length;
     var babies = seed.rooms.flatMap((x) => x.pax).filter((x) => x.age! < 2).length;
 
     return {
@@ -812,6 +816,12 @@ const SearchResultsContainer: React.FC = () => {
     }
   }, [context?.packagingEntry]);
 
+  useEffect(() => {
+    if (bookPackagingEntry && onBookingStarted) {
+      onBookingStarted();
+    }
+  }, [bookPackagingEntry, onBookingStarted]);
+
   // separate detailsCall
   useEffect(() => {
     const fetchDetails = async () => {
@@ -1435,12 +1445,12 @@ const SearchResultsContainer: React.FC = () => {
     seed.rooms?.forEach((room, roomIndex) => {
       const paxIds = room.pax.map((_, paxIndex) => {
         const id = paxId++;
-
         pax.push({
           id,
-          firstName: '',
-          lastName: '',
-          dateOfBirth: null,
+          firstName: _.firstName || '',
+          lastName: _.lastName || '',
+          dateOfBirth: _.dateOfBirth || null,
+          age: _.age || null,
           isMainBooker: roomIndex === 0 && paxIndex === 0
         });
 

package/src/search-results/index.tsx

@@ -7,15 +7,16 @@ import { createSearchResultsStore } from './store/search-results-store';
 
 interface SearchResultsProps {
   configuration: SearchResultsConfiguration;
+  onBookingStarted?: () => void;
 }
 
-const SearchResults: React.FC<SearchResultsProps> = ({ configuration }) => {
+const SearchResults: React.FC<SearchResultsProps> = ({ configuration, onBookingStarted }) => {
   const store = React.useMemo(() => createSearchResultsStore(), []);
 
   return (
     <Provider store={store}>
       <SearchResultsConfigurationContext.Provider value={configuration}>
-        <SearchResultsContainer />
+        <SearchResultsContainer onBookingStarted={onBookingStarted} />
       </SearchResultsConfigurationContext.Provider>
     </Provider>
   );

package/src/shared/booking/summary.tsx

@@ -4,6 +4,7 @@ import { SummaryCheckbox, TravelersFormValues } from '../../booking-wizard/types
 import Loader from '../components/loader';
 import { buildClassName } from '../utils/class-util';
 import Icon from '../components/icon';
+import Spinner from '../../search-results/components/spinner/spinner';
 
 export interface SummaryNotification {
   id: number;
@@ -32,6 +33,7 @@ export interface SharedSummaryProps {
   isOffer?: boolean;
   customValidateText?: string;
   isSubmitting?: boolean;
+  skipPayment?: boolean;
   userValidated?: boolean;
   renderOptions: () => ReactNode;
   renderPreviousButton: () => ReactNode;
@@ -66,6 +68,7 @@ const SharedSummary: React.FC<SharedSummaryProps> = ({
   isOffer = false,
   customValidateText,
   isSubmitting = false,
+  skipPayment = false,
   userValidated = true,
   renderOptions,
   renderPreviousButton,
@@ -122,7 +125,7 @@ const SharedSummary: React.FC<SharedSummaryProps> = ({
 
   return (
     <>
-      {isSubmitting && (renderLoader?.() || <Loader />)}
+      {isSubmitting && <Spinner label={skipPayment ? translations.SUMMARY.PROCESS_BOOKING : translations.SUMMARY.REDIRECT} />}
       {!isSubmitting && (
         <form className="form" name="booking--summary" id="booking--summary" onSubmit={onSubmit}>
           <div className="form__booking--summary">

package/src/shared/booking/travelers-form.tsx

@@ -98,13 +98,13 @@ export function createInitialValuesFromRooms(
 }
 
 export function createInitialValuesFromEditablePackagingEntry(editablePackagingEntry: PackagingEntry, agentAdressId?: number): TravelersFormValues {
-  console.log('editablePackagingEntry?.pax:', editablePackagingEntry?.pax);
   const pax = editablePackagingEntry?.pax ?? [];
   const rooms = editablePackagingEntry.rooms.map((room) => {
     const roomPax = pax.filter((x: PackagingEntryPax) => room.paxIds.includes(x.id));
-    // TODO children/dateofbirth is missing at this point
+    const adults = roomPax.filter((x: PackagingEntryPax) => x.age! >= 18);
+    const children = roomPax.filter((x: PackagingEntryPax) => x.age! < 18);
     return {
-      adults: roomPax.map((roomTraveler: PackagingEntryPax) => {
+      adults: adults.map((roomTraveler: PackagingEntryPax) => {
         return {
           id: roomTraveler.id,
           firstName: roomTraveler.firstName ?? '',
@@ -113,7 +113,15 @@ export function createInitialValuesFromEditablePackagingEntry(editablePackagingE
           gender: ''
         } as Traveler;
       }),
-      children: [] as Traveler[]
+      children: children.map((roomTraveler: PackagingEntryPax) => {
+        return {
+          id: roomTraveler.id,
+          firstName: roomTraveler.firstName ?? '',
+          lastName: roomTraveler.lastName ?? '',
+          birthDate: roomTraveler.dateOfBirth ? format(new Date(roomTraveler.dateOfBirth), 'yyyy-MM-dd') : '',
+          gender: ''
+        } as Traveler;
+      })
     };
   });
 
@@ -144,8 +152,6 @@ export function createInitialValuesFromEditablePackagingEntry(editablePackagingE
 
 export function applyTravelersFormValuesToEditablePackagingEntry(editablePackagingEntry: PackagingEntry, values: TravelersFormValues) {
   const travelers = values.rooms.flatMap((room) => [...room.adults, ...room.children]);
-  console.log('Applying form values:', values);
-  console.log('editablePackagingEntry:', editablePackagingEntry);
 
   return {
     ...editablePackagingEntry,

package/src/shared/translations/ar-SA.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "تحقق من القسيمة",
     "ADD_VOUCHER": "إضافة قسيمة",
     "VOUCHER_VALID": "القسيمة صالحة",
-    "VOUCHER_INVALID": "القسيمة غير صالحة"
+    "VOUCHER_INVALID": "القسيمة غير صالحة",
+    "REDIRECT": "إعادة التوجيه إلى مزود الدفع...",
+    "PROCESS_BOOKING": "يرجى الانتظار، جاري معالجة حجزك"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "تم طلب عرضك رقم {0}",

package/src/shared/translations/da-DK.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Valider voucher",
     "ADD_VOUCHER": "Tilføj voucher",
     "VOUCHER_VALID": "Voucher er gyldig",
-    "VOUCHER_INVALID": "Voucher er ikke gyldig"
+    "VOUCHER_INVALID": "Voucher er ikke gyldig",
+    "REDIRECT": "Omdirigerer til betalingsudbyder...",
+    "PROCESS_BOOKING": "Vent venligst, din booking behandles"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Dit tilbud med nummer {0} er blevet anmodet",

package/src/shared/translations/de-DE.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Gutschein prüfen",
     "ADD_VOUCHER": "Gutschein hinzufügen",
     "VOUCHER_VALID": "Gutschein ist gültig",
-    "VOUCHER_INVALID": "Gutschein ist ungültig"
+    "VOUCHER_INVALID": "Gutschein ist ungültig",
+    "REDIRECT": "Weiterleitung zum Zahlungsanbieter...",
+    "PROCESS_BOOKING": "Bitte warten Sie, Ihre Buchung wird bearbeitet"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Ihr Angebot mit der Nummer {0} wurde angefordert",

package/src/shared/translations/en-GB.json

@@ -229,7 +229,9 @@
     "VOUCHER_VALIDATE": "Validate voucher",
     "ADD_VOUCHER": "Add voucher",
     "VOUCHER_VALID": "Voucher is valid",
-    "VOUCHER_INVALID": "Voucher is not valid"
+    "VOUCHER_INVALID": "Voucher is not valid",
+    "REDIRECT": "Redirecting to payment provider...",
+    "PROCESS_BOOKING": "Please wait, your booking is being processed"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Your quote with number {0} has been requested",

package/src/shared/translations/es-ES.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Validar vale",
     "ADD_VOUCHER": "Agregar vale",
     "VOUCHER_VALID": "Vale válido",
-    "VOUCHER_INVALID": "Vale no válido"
+    "VOUCHER_INVALID": "Vale no válido",
+    "REDIRECT": "Redirigiendo al proveedor de pagos...",
+    "PROCESS_BOOKING": "Por favor, espere, su reserva se está procesando"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Su presupuesto con número {0} ha sido solicitado",

package/src/shared/translations/fr-BE.json

@@ -229,7 +229,9 @@
     "VOUCHER_VALIDATE": "Valider le bon",
     "ADD_VOUCHER": "Ajouter un bon",
     "VOUCHER_VALID": "Bon valide",
-    "VOUCHER_INVALID": "Bon invalide"
+    "VOUCHER_INVALID": "Bon invalide",
+    "REDIRECT": "Redirection vers le fournisseur de paiement...",
+    "PROCESS_BOOKING": "Veuillez patienter, votre réservation est en cours de traitement"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Votre devis numéro {0} a été demandé",

package/src/shared/translations/fr-FR.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Valider le bon",
     "ADD_VOUCHER": "Ajouter un bon",
     "VOUCHER_VALID": "Bon valide",
-    "VOUCHER_INVALID": "Bon invalide"
+    "VOUCHER_INVALID": "Bon invalide",
+    "REDIRECT": "Redirection vers le fournisseur de paiement...",
+    "PROCESS_BOOKING": "Veuillez patienter, votre réservation est en cours de traitement"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Votre devis numéro {0} a été demandé",

package/src/shared/translations/is-IS.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Staðfesta miða",
     "ADD_VOUCHER": "Bæta við miða",
     "VOUCHER_VALID": "Miðinn er gildur",
-    "VOUCHER_INVALID": "Miðinn er ógildur"
+    "VOUCHER_INVALID": "Miðinn er ógildur",
+    "REDIRECT": "Beinir á greiðsluaðila...",
+    "PROCESS_BOOKING": "Vinsamlegast bíðið, pöntunin þín er í vinnslu"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Tilboð þitt nr. {0} hefur verið beðið um",

package/src/shared/translations/it-IT.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Valida voucher",
     "ADD_VOUCHER": "Aggiungi voucher",
     "VOUCHER_VALID": "Voucher valido",
-    "VOUCHER_INVALID": "Voucher non valido"
+    "VOUCHER_INVALID": "Voucher non valido",
+    "REDIRECT": "Reindirizzamento al fornitore di pagamento...",
+    "PROCESS_BOOKING": "Attendere prego, la tua prenotazione è in fase di elaborazione"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Il tuo preventivo numero {0} è stato richiesto",

package/src/shared/translations/ja-JP.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "バウチャーを確認",
     "ADD_VOUCHER": "バウチャーを追加",
     "VOUCHER_VALID": "バウチャーは有効です",
-    "VOUCHER_INVALID": "バウチャーは無効です"
+    "VOUCHER_INVALID": "バウチャーは無効です",
+    "REDIRECT": "支払いプロバイダーにリダイレクト中...",
+    "PROCESS_BOOKING": "お待ちください、予約を処理中です"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "見積もり番号 {0} の依頼を受け付けました",

package/src/shared/translations/nl-BE.json

@@ -229,7 +229,9 @@
     "VOUCHER_VALIDATE": "Valideer voucher",
     "ADD_VOUCHER": "Voucher toevoegen",
     "VOUCHER_VALID": "Voucher is geldig",
-    "VOUCHER_INVALID": "Voucher is niet geldig"
+    "VOUCHER_INVALID": "Voucher is niet geldig",
+    "REDIRECT": "Redirecten naar betalingsprovider...",
+    "PROCESS_BOOKING": "Even geduld, we verwerken je boeking"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Je offerte met nummer {0} is aangevraagd",

package/src/shared/translations/nl-NL.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Voucher valideren",
     "ADD_VOUCHER": "Voucher toevoegen",
     "VOUCHER_VALID": "Voucher is geldig",
-    "VOUCHER_INVALID": "Voucher is ongeldig"
+    "VOUCHER_INVALID": "Voucher is ongeldig",
+    "REDIRECT": "Redirecten naar betalingsprovider...",
+    "PROCESS_BOOKING": "Even geduld, we verwerken je boeking"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Uw offerte met nummer {0} is aangevraagd",

package/src/shared/translations/no-NO.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Valider verdikupong",
     "ADD_VOUCHER": "Legg til verdikupong",
     "VOUCHER_VALID": "Verdikupongen er gyldig",
-    "VOUCHER_INVALID": "Verdikupongen er ugyldig"
+    "VOUCHER_INVALID": "Verdikupongen er ugyldig",
+    "REDIRECT": "Omdirigerer til betalingsleverandør...",
+    "PROCESS_BOOKING": "Vennligst vent, bestillingen din behandles"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Tilbudet ditt med nummer {0} er forespurt",

package/src/shared/translations/pl-PL.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Zweryfikuj voucher",
     "ADD_VOUCHER": "Dodaj voucher",
     "VOUCHER_VALID": "Voucher jest ważny",
-    "VOUCHER_INVALID": "Voucher jest nieważny"
+    "VOUCHER_INVALID": "Voucher jest nieważny",
+    "REDIRECT": "Przekierowanie do dostawcy płatności...",
+    "PROCESS_BOOKING": "Proszę czekać, Twoja rezerwacja jest przetwarzana"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Twoja wycena o numerze {0} została wysłana",

package/src/shared/translations/pt-PT.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Validar voucher",
     "ADD_VOUCHER": "Adicionar voucher",
     "VOUCHER_VALID": "O voucher é válido",
-    "VOUCHER_INVALID": "O voucher não é válido"
+    "VOUCHER_INVALID": "O voucher não é válido",
+    "REDIRECT": "Redirecionando para o provedor de pagamento...",
+    "PROCESS_BOOKING": "Por favor, aguarde, sua reserva está sendo processada"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "O seu orçamento com o número {0} foi solicitado",

package/src/shared/translations/sv-SE.json

@@ -225,7 +225,9 @@
     "VOUCHER_VALIDATE": "Validera voucher",
     "ADD_VOUCHER": "Lägg till voucher",
     "VOUCHER_VALID": "Vouchern är giltig",
-    "VOUCHER_INVALID": "Vouchern är ogiltig"
+    "VOUCHER_INVALID": "Vouchern är ogiltig",
+    "REDIRECT": "Omdirigerar till betalningsleverantör...",
+    "PROCESS_BOOKING": "Vänligen vänta, din bokning behandlas"
   },
   "CONFIRMATION": {
     "TITLE_TEXT_OFFER": "Din offert med nummer {0} har begärts",

package/styles/components/_booking.scss

@@ -65,6 +65,7 @@
 
     .cta--secondary {
       width: 100%;
+
       @include media-xs {
         width: auto;
         margin-right: auto;
@@ -161,6 +162,12 @@
     display: flex;
     align-items: center;
     background: var(--tide-booking-sidebar-header-background);
+
+    min-height: 80px;
+
+    @include media-xl {
+      min-height: 100px;
+    }
   }
 
   &__product-body {
@@ -626,6 +633,7 @@
 
       .tree {
         padding-bottom: 0;
+
         @include media-lg {
           padding-bottom: 7.5px;
         }
@@ -638,6 +646,7 @@
 
       tr:last-child .tree {
         padding-bottom: 7.5px;
+
         @include media-lg {
           // empty but transition inherited
         }
@@ -869,6 +878,7 @@
         color: var(--tide-booking-invalid);
       }
     }
+
     .icon {
       width: 50px;
       height: 50px;