@qite/tide-components 1.0.10 → 1.0.13-preview.0

package/build/build-esm/src/booking-wizard/features/booking/selectors.d.ts

@@ -17,6 +17,7 @@ export declare const selectPackageOptionUnits: (state: RootState) => import("@qi
 export declare const selectPackageOptionPax: (state: RootState) => import("@qite/tide-client").BookingOptionPax[] | undefined;
 export declare const selectPackageGroups: (state: RootState) => import("@qite/tide-client").BookingOptionGroup<import("@qite/tide-client").PerBookingPackageOption>[] | undefined;
 export declare const selectPackageDetails: (state: RootState) => import("@qite/tide-client").BookingPackage | undefined;
+export declare const selectPaxFields: (state: RootState) => import("@qite/tide-client").BookingPackagePaxFieldConfig[];
 export declare const selectPackageFlights: (state: RootState) => {
     outward: import("@qite/tide-client").BookingPackageFlight[] | undefined;
     return: import("@qite/tide-client").BookingPackageFlight[] | undefined;

package/build/build-esm/src/booking-wizard/features/travelers-form/validate-form.d.ts

@@ -1,4 +1,5 @@
 import { FormikErrors } from 'formik';
+import { BookingPackagePaxFieldConfig } from '@qite/tide-client/build/types';
 import { FormField, TravelersFormValues } from '../../types';
-declare const validateForm: (values: TravelersFormValues, agentRequired?: boolean, bookingType?: string, translations?: any, formFields?: FormField[], mainBookerFormFields?: FormField[], maxChildAge?: number, maxBabyAge?: number) => FormikErrors<TravelersFormValues>;
+declare const validateForm: (values: TravelersFormValues, agentRequired?: boolean, bookingType?: string, translations?: any, formFields?: FormField[], mainBookerFormFields?: FormField[], maxChildAge?: number, maxBabyAge?: number, paxFields?: BookingPackagePaxFieldConfig[]) => FormikErrors<TravelersFormValues>;
 export default validateForm;

package/build/build-esm/src/booking-wizard/types.d.ts

@@ -1,4 +1,4 @@
-import { BookingPackageFlight } from '@qite/tide-client/build/types';
+import { BookingPackageCustomField, BookingPackageFlight } from '@qite/tide-client/build/types';
 export interface Settings {
     officeId: number;
     token?: string;
@@ -136,6 +136,13 @@ export interface SummaryCheckbox {
     text: string;
     isSelected: boolean;
 }
+export interface TravelerAddress {
+    street?: string;
+    number?: string;
+    postalCode?: string;
+    location?: string;
+    country?: string;
+}
 export interface Traveler {
     id: number;
     gender: string;
@@ -148,6 +155,27 @@ export interface Traveler {
      * form and its validation can treat the traveler as a baby instead of a child.
      */
     isBaby?: boolean;
+    weight?: number | null;
+    weightType?: number;
+    height?: number | null;
+    heightType?: number;
+    nickname?: string;
+    birthplace?: string;
+    nationality?: string;
+    preferredLanguageId?: number;
+    email?: string;
+    phone?: string;
+    mobile?: string;
+    passportNumber?: string;
+    passportIssueDate?: string;
+    passportIssuedLocation?: string;
+    passportExpiryDate?: string;
+    emergencyNumber?: string;
+    hasInsurance?: boolean;
+    insuranceName?: string;
+    info?: string;
+    address?: TravelerAddress;
+    customFields?: BookingPackageCustomField[];
 }
 export interface Room {
     adults: number;

package/build/build-esm/src/search-results/components/flight/flight-selection/independent-flight-option.d.ts

@@ -9,6 +9,8 @@ interface IndependentFlightOptionProps {
     showSelectedState?: boolean;
     currentSelectedPrice?: number;
     price?: number;
+    selectLabel?: string;
+    selectedLabel?: string;
 }
 declare const IndependentFlightOption: React.FC<IndependentFlightOptionProps>;
 export default IndependentFlightOption;

package/build/build-esm/src/search-results/components/itinerary/index.d.ts

@@ -5,6 +5,7 @@ interface ItineraryProps {
     handleSetIsOpen: () => void;
     isLoading?: boolean;
     onEditAccommodation?: (segments: PackagingEntryLine[]) => void;
+    onSaveEntry?: () => void;
 }
 declare const Itinerary: React.FC<ItineraryProps>;
 export default Itinerary;

package/build/build-esm/src/search-results/components/itinerary/itinerary-utils.d.ts

@@ -1,4 +1,5 @@
 import { PackagingEntryLine, PackagingEntryLineFlightLine, PackagingTrajectNode } from '@qite/tide-client';
+export declare const isMeaningfulItineraryLine: (line: PackagingEntryLine) => boolean;
 export declare const getFlightLines: (flight?: PackagingEntryLine) => PackagingEntryLineFlightLine[];
 export declare const getDepartureTime: (flight?: PackagingEntryLine) => string;
 export declare const getArrivalTime: (flight?: PackagingEntryLine) => string;

package/build/build-esm/src/search-results/types.d.ts

@@ -39,6 +39,14 @@ export interface SearchResultsConfiguration {
     onFlightBook?: (result: ExtendedFlightSearchResponseItem) => void;
     packagingEntry?: PackagingEntry | null;
     trajectEntry?: PackagingTrajectResponse | null;
+    /**
+     * From the website portal configuration. Lets the traveller change an already booked entry
+     * opened through its magic link: the entry lands on the day-by-day service cards (the traject
+     * results screen) where booked services can be swapped for alternatives and extras added. The
+     * booked entry needs `magicLink` set — booking merges changes into the dossier on it. Off by
+     * default: without it a booked entry only shows its full itinerary, as before.
+     */
+    allowBookedEntryChanges?: boolean;
     /**
      * From the website portal configuration. When true a traject node may also offer externally
      * sourced (API/vendor) hotels and excursions; when false only products held internally in Tide

package/build/build-esm/src/search-results/utils/booked-entry-utils.d.ts

@@ -0,0 +1,20 @@
+import { PackagingAccommodationResponse, PackagingEntry, PackagingEntryLine, PackagingFlightResponse, PackagingTrajectNode, PackagingTrajectResponse } from '@qite/tide-client';
+/**
+ * A booked entry opened through its magic link knows nothing about the traject it may once have
+ * been composed from — the dossier only keeps the lines. To give it the same day-by-day services
+ * screen a traject gets, the traject structure is rebuilt from those lines: every booked service
+ * becomes a node whose one "alternative" is the booked product itself, and the days span the trip.
+ *
+ * The synthesized response keeps the entry untouched (magic link included), which is also how the
+ * rest of the component tells this mode apart from a real traject: see isBookedEntryTraject.
+ */
+export declare const isBookedEntryTraject: (trajectEntry?: PackagingTrajectResponse | null) => boolean;
+export declare const buildBookedTrajectEntry: (entry: PackagingEntry) => PackagingTrajectResponse;
+/**
+ * The card for a booked service when no search result carries it any more (sold out, delisted).
+ * Rendered from the line, so the traveller still sees what they booked; price 0 makes the card
+ * leave its price out — the paid price lives in the price details, not on the line.
+ */
+export declare const buildBookedNodeResult: (node: PackagingTrajectNode, lines: PackagingEntryLine[]) => PackagingAccommodationResponse;
+/** The booked flight as a flight result, so the card that shows it is the card the search results use. */
+export declare const buildBookedFlightResult: (line: PackagingEntryLine) => PackagingFlightResponse;

package/build/build-esm/src/search-results/utils/traject-utils.d.ts

@@ -74,6 +74,8 @@ export declare const getPackagingRoomsFromEntry: (entry: PackagingEntry) => Pack
 export declare const pickCheapest: (results: PackagingAccommodationResponse[]) => PackagingAccommodationResponse | null;
 export declare const applyResultToLines: (lines: PackagingEntryLine[], result: PackagingAccommodationResponse) => PackagingEntryLine[];
 export declare const applyResultToLine: (line: PackagingEntryLine, result: PackagingAccommodationResponse, roomIndex?: number) => PackagingEntryLine;
+export declare const buildNodeSelectionLines: (item: TrajectNodeWithLine, result: PackagingAccommodationResponse, bookedMode: boolean) => PackagingEntryLine[];
+export declare const buildFlightSelectionLine: (item: TrajectNodeWithLine, flight: PackagingFlightResponse, bookedMode: boolean) => PackagingEntryLine;
 export declare const buildTrajectFlightRequest: ({ node, line }: TrajectNodeWithLine, context: TrajectSearchContext, pax: FlightSearchRequest["pax"]) => FlightSearchRequest;
 /**
  * The entry as the backend can price it.
@@ -87,6 +89,11 @@ export declare const buildTrajectFlightRequest: ({ node, line }: TrajectNodeWith
  * mapper gave them. This swaps in the guid of whatever each line resolved onto, leaving the
  * lines the traveller added themselves alone — those were built from a search result and already
  * carry the right one.
+ *
+ * A booked entry (the traject was rebuilt from a magic-link entry) is the other way around: its
+ * lines live in the dossier under their own guids, and only a line the traveller actually swapped
+ * (isChanged) exists in the search cache. Swapping an untouched line's guid would orphan it —
+ * the backend drops the dossier line and finds nothing to add — so those keep theirs.
  */
 export declare const withCachedEntryLineGuids: (entry: PackagingEntry, trajectEntry: PackagingTrajectResponse, nodeAvailability: Record<string, {
     results: PackagingAccommodationResponse[];

package/build/build-esm/src/shared/booking/travelers-form.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { FormikProps } from 'formik';
 import { Country, RoomTraveler, Traveler, TravelersFormValues } from '../../booking-wizard/types';
-import { CountryItem, PackagingEntry, PackagingEntryPax } from '@qite/tide-client';
+import { BookingPackageCustomField, BookingPackagePax, BookingPackagePaxFieldConfig, CountryItem, PackagingEntry, PackagingEntryPax } from '@qite/tide-client';
 export type TravelersFormField = {
     type: string;
 };
@@ -33,6 +33,7 @@ export interface SharedTravelersFormProps {
     isUnavailable?: boolean;
     useCompactForm?: boolean;
     showAllCountries?: boolean;
+    paxFields?: BookingPackagePaxFieldConfig[];
     showAgentSelection?: boolean;
     initialShowAgents?: boolean;
     renderPreviousButton?: () => ReactNode;
@@ -40,13 +41,21 @@ export interface SharedTravelersFormProps {
 }
 export declare function isBabyAge(age?: number | null, maxBabyAge?: number): boolean;
 export declare function formatBirthDate(birthDate?: string): string;
+export declare function buildEmptyCustomFields(paxFields?: BookingPackagePaxFieldConfig[]): BookingPackageCustomField[];
+export declare function getApplicablePaxCustomFields(paxFields: BookingPackagePaxFieldConfig[] | undefined, isMainBooker: boolean): BookingPackagePaxFieldConfig[];
+export declare function getApplicableBuiltInPaxFields(paxFields: BookingPackagePaxFieldConfig[] | undefined, isMainBooker: boolean): BookingPackagePaxFieldConfig[];
+export declare function getBuiltInPaxField(paxFields: BookingPackagePaxFieldConfig[] | undefined, fieldName: string, isMainBooker: boolean): BookingPackagePaxFieldConfig | undefined;
+export declare const BUILT_IN_FIELD_PATHS: Record<string, string>;
+export declare const CORE_FIELD_NAMES: Set<string>;
+export declare const ADDRESS_FIELD_NAMES: string[];
+export declare function applyTravelerToPax<T extends BookingPackagePax>(pax: T, traveler: Traveler, mainBookerId?: number): T;
 export declare function createTraveler(traveler: RoomTraveler, followNumber: {
     number: number;
-}, personTranslation?: string, isCompact?: boolean, maxBabyAge?: number): Traveler;
+}, personTranslation?: string, isCompact?: boolean, maxBabyAge?: number, paxFields?: BookingPackagePaxFieldConfig[]): Traveler;
 export declare function createInitialValuesFromRooms(formRooms: {
     adults: RoomTraveler[];
     children: RoomTraveler[];
-}[], startDate?: string, endDate?: string, agentAdressId?: number, personTranslation?: string, isCompact?: boolean, maxBabyAge?: number): TravelersFormValues;
+}[], startDate?: string, endDate?: string, agentAdressId?: number, personTranslation?: string, isCompact?: boolean, maxBabyAge?: number, paxFields?: BookingPackagePaxFieldConfig[]): TravelersFormValues;
 export declare function createInitialValuesFromEditablePackagingEntry(editablePackagingEntry: PackagingEntry, agentAdressId?: number): TravelersFormValues;
 export declare function applyTravelersFormValuesToEditablePackagingEntry(editablePackagingEntry: PackagingEntry, values: TravelersFormValues): {
     pax: PackagingEntryPax[];
@@ -70,6 +79,7 @@ export declare function applyTravelersFormValuesToEditablePackagingEntry(editabl
     price: number;
     depositAmount: number;
     rooms: import("@qite/tide-client").PackagingEntryRoom[];
+    paxFields: BookingPackagePaxFieldConfig[];
     lines: import("@qite/tide-client").PackagingEntryLine[];
     status: import("@qite/tide-client").EntryStatus;
     customStatusId?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-components",
-  "version": "1.0.10",
+  "version": "1.0.13-preview.0",
   "description": "React components for Tide (booking, product availability, form, ...)",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",
@@ -36,7 +36,7 @@
   "devDependencies": {
     "@jsonurl/jsonurl": "^1.1.4",
     "@popperjs/core": "^2.10.2",
-    "@qite/tide-client": "^2.0.18",
+    "@qite/tide-client": "^2.0.21-preview.1",
     "@reduxjs/toolkit": "^2.8.2",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",

package/styles/abstracts/_mixins.scss

@@ -1,74 +1,74 @@
-@use '../abstracts/variables' as variables;
-// MEDIA QUERIES
-@mixin media-xs {
-  @media only screen and (max-width: variables.$screen-xs) {
-    @content;
-  }
-}
-
-@mixin media-sm {
-  @media only screen and (max-width: variables.$screen-sm) {
-    @content;
-  }
-}
-
-@mixin media-md {
-  @media only screen and (max-width: variables.$screen-md) {
-    @content;
-  }
-}
-
-@mixin media-lg {
-  @media only screen and (max-width: variables.$screen-lg) {
-    @content;
-  }
-}
-
-@mixin media-xgl {
-  @media only screen and (max-width: variables.$screen-xgl) {
-    @content;
-  }
-}
-
-@mixin media-xl {
-  @media only screen and (max-width: variables.$screen-xl) {
-    @content;
-  }
-}
-
-@mixin media-xxl {
-  @media only screen and (max-width: variables.$screen-xxl) {
-    @content;
-  }
-}
-
-@mixin media-xxxl {
-  @media only screen and (max-width: variables.$screen-xxl) {
-    @content;
-  }
-}
-
-@mixin make-container($padding-x: $container-padding-x) {
-  width: 100%;
-  max-width: 1496px;
-  margin-right: auto;
-  margin-left: auto;
-
-  @include media-xl {
-    padding: 0 $padding-x;
-  }
-}
-
-@mixin container() {
-  width: 100%;
-  padding: 0 15px;
-  margin: 0 auto;
-
-  @include media-sm {
-    padding: 0 30px;
-  }
-
-  @include media-lg {
-    padding: 0 45px;
-  }
-}
+@use '../abstracts/variables' as variables;
+// MEDIA QUERIES
+@mixin media-xs {
+  @media only screen and (max-width: variables.$screen-xs) {
+    @content;
+  }
+}
+
+@mixin media-sm {
+  @media only screen and (max-width: variables.$screen-sm) {
+    @content;
+  }
+}
+
+@mixin media-md {
+  @media only screen and (max-width: variables.$screen-md) {
+    @content;
+  }
+}
+
+@mixin media-lg {
+  @media only screen and (max-width: variables.$screen-lg) {
+    @content;
+  }
+}
+
+@mixin media-xgl {
+  @media only screen and (max-width: variables.$screen-xgl) {
+    @content;
+  }
+}
+
+@mixin media-xl {
+  @media only screen and (max-width: variables.$screen-xl) {
+    @content;
+  }
+}
+
+@mixin media-xxl {
+  @media only screen and (max-width: variables.$screen-xxl) {
+    @content;
+  }
+}
+
+@mixin media-xxxl {
+  @media only screen and (max-width: variables.$screen-xxl) {
+    @content;
+  }
+}
+
+@mixin make-container($padding-x: $container-padding-x) {
+  width: 100%;
+  max-width: 1496px;
+  margin-right: auto;
+  margin-left: auto;
+
+  @include media-xl {
+    padding: 0 $padding-x;
+  }
+}
+
+@mixin container() {
+  width: 100%;
+  padding: 0 15px;
+  margin: 0 auto;
+
+  @include media-sm {
+    padding: 0 30px;
+  }
+
+  @include media-lg {
+    padding: 0 45px;
+  }
+}

package/styles/abstracts/_variables.scss

@@ -1,57 +1,57 @@
-// COLORS
-$primary-color: #25575c;
-$primary-color--light: #32686d;
-$secondary-color: #57abb2;
-$secondary-color--light: #abd5d9;
-$secondary-color--extralight: #e3f1f2;
-
-$bg-light: #f4f9fa;
-$text-color: #707070;
-$text-color-black: #202124;
-
-$white: #ffffff;
-$gray: #c6c6c6;
-$black: #000000;
-$transparent: transparent;
-
-// BUTTON COLORS XD
-$purple-color--light: #dfcce8;
-$purple-color--dark: #794e8c;
-
-$yellow-color--light: #fff9de;
-$yellow-color--dark: #b7990c;
-
-$pink-color: #d81259;
-
-$blue-color: #0e3e8d;
-
-$yellow-color: #ffde40;
-
-// MEDIA QUERIES
-$screen-xs: 576px;
-$screen-sm: 768px;
-$screen-md: 992px;
-$screen-lg: 1200px;
-$screen-xl: 1440px;
-$screen-xxl: 1700px;
-$screen-xxxl: 1920px;
-
-// Typography
-$font-family-base: 'Public Sans', Arial, sans-serif;
-$font-family-heading: 'Alfa Slab One', Arial, sans-serif;
-$font-size-base: 16px;
-$font-size-h1: 3.0625rem;
-$font-size-h2: 2.5625rem;
-$font-size-h3: 2.125rem;
-$font-size-h4: 1.75rem;
-$font-size-h5: 1.4375rem;
-$font-size-h6: 1.1875rem;
-$font-size-body: 1rem;
-$font-size-body--small: 0.875rem;
-$font-size-label: 0.75rem;
-
-$line-height-base: 1.5;
-$line-height-heading: 1.2;
-
-$font-weight-normal: 400;
-$font-weight-bold: 700;
+// COLORS
+$primary-color: #25575c;
+$primary-color--light: #32686d;
+$secondary-color: #57abb2;
+$secondary-color--light: #abd5d9;
+$secondary-color--extralight: #e3f1f2;
+
+$bg-light: #f4f9fa;
+$text-color: #707070;
+$text-color-black: #202124;
+
+$white: #ffffff;
+$gray: #c6c6c6;
+$black: #000000;
+$transparent: transparent;
+
+// BUTTON COLORS XD
+$purple-color--light: #dfcce8;
+$purple-color--dark: #794e8c;
+
+$yellow-color--light: #fff9de;
+$yellow-color--dark: #b7990c;
+
+$pink-color: #d81259;
+
+$blue-color: #0e3e8d;
+
+$yellow-color: #ffde40;
+
+// MEDIA QUERIES
+$screen-xs: 576px;
+$screen-sm: 768px;
+$screen-md: 992px;
+$screen-lg: 1200px;
+$screen-xl: 1440px;
+$screen-xxl: 1700px;
+$screen-xxxl: 1920px;
+
+// Typography
+$font-family-base: 'Public Sans', Arial, sans-serif;
+$font-family-heading: 'Alfa Slab One', Arial, sans-serif;
+$font-size-base: 16px;
+$font-size-h1: 3.0625rem;
+$font-size-h2: 2.5625rem;
+$font-size-h3: 2.125rem;
+$font-size-h4: 1.75rem;
+$font-size-h5: 1.4375rem;
+$font-size-h6: 1.1875rem;
+$font-size-body: 1rem;
+$font-size-body--small: 0.875rem;
+$font-size-label: 0.75rem;
+
+$line-height-base: 1.5;
+$line-height-heading: 1.2;
+
+$font-weight-normal: 400;
+$font-weight-bold: 700;

package/styles/base/_fonts.scss

@@ -1,2 +1,2 @@
-// @import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
-// @import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+// @import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+// @import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');