@qite/tide-components 1.0.6 → 1.0.7

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

@@ -0,0 +1,12 @@
+import { PackagingEntryLine, PackagingEntryLineFlightLine, PackagingTrajectNode } from '@qite/tide-client';
+export declare const getFlightLines: (flight?: PackagingEntryLine) => PackagingEntryLineFlightLine[];
+export declare const getDepartureTime: (flight?: PackagingEntryLine) => string;
+export declare const getArrivalTime: (flight?: PackagingEntryLine) => string;
+export declare const getDuration: (flight?: PackagingEntryLine) => string;
+export declare const numberOfNights: (segment: PackagingEntryLine) => number;
+/** Icon per service type, so every node on the itinerary reads at a glance. */
+export declare const getServiceTypeIcon: (serviceType?: number) => string;
+export declare const getServiceTypeBadgeModifier: (serviceType?: number) => string;
+export declare const POI_TRAJECT_NODE_TYPE = 2;
+export declare const getTrajectNodeIcon: (node: PackagingTrajectNode) => string;
+export declare const getTrajectNodeBadgeModifier: (node: PackagingTrajectNode) => string;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PackagingEntry, PackagingTrajectResponse } from '@qite/tide-client';
+interface TrajectItineraryProps {
+    trajectEntry: PackagingTrajectResponse;
+    packagingEntry: PackagingEntry;
+    translations: any;
+}
+declare const TrajectItinerary: React.FC<TrajectItineraryProps>;
+export default TrajectItinerary;

package/build/build-esm/src/search-results/components/traject/traject-day-activities-flyin.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TrajectDayActivitiesFlyInProps {
+    isLoading?: boolean;
+}
+declare const TrajectDayActivitiesFlyIn: React.FC<TrajectDayActivitiesFlyInProps>;
+export default TrajectDayActivitiesFlyIn;

package/build/build-esm/src/search-results/components/traject/traject-flights-flyin.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface TrajectFlightsFlyInProps {
+    isLoading?: boolean;
+}
+/**
+ * Every flight found for one traject leg, shown in the fly-in.
+ *
+ * A one-way search can return far more options than belong in the results column, so the column
+ * keeps three and hands the rest to this list — the same shape the regular flight results use.
+ * Each leg is searched on its own, so the single leg of a result always sits in `outward`.
+ */
+declare const TrajectFlightsFlyIn: React.FC<TrajectFlightsFlyInProps>;
+export default TrajectFlightsFlyIn;

package/build/build-esm/src/search-results/components/traject/traject-node-card.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { PackagingAccommodationResponse } from '@qite/tide-client';
-import { TrajectNodeWithLine } from '../../utils/traject-utils';
+import { PackagingAccommodationResponse, PackagingTrajectNode } from '@qite/tide-client';
 interface TrajectNodeCardProps {
-    item: TrajectNodeWithLine;
+    /** The traject node this result answers, where there is one. A suggestion has none. */
+    node?: PackagingTrajectNode;
     result: PackagingAccommodationResponse;
     isSelected: boolean;
     languageCode?: string;
@@ -10,6 +10,9 @@ interface TrajectNodeCardProps {
     onSelect: () => void;
     onEditOptions?: () => void;
     showNights?: boolean;
+    /** Wording for the button. Defaults to select/selected; suggestions say add/remove instead. */
+    selectLabel?: string;
+    selectedLabel?: string;
 }
 declare const TrajectNodeCard: React.FC<TrajectNodeCardProps>;
 export default TrajectNodeCard;

package/build/build-esm/src/search-results/hooks/use-traject-day-activities.d.ts

@@ -0,0 +1,6 @@
+export interface TrajectDay {
+    order: number;
+    date: string;
+}
+declare const useTrajectDayActivities: () => (day: TrajectDay) => Promise<void>;
+export default useTrajectDayActivities;

package/build/build-esm/src/search-results/store/search-results-slice.d.ts

@@ -42,7 +42,9 @@ export interface SearchResultsState {
     trajectNodeAvailability: Record<string, TrajectNodeAvailability>;
     /** Per-flight-node one-way search results, keyed by the entry line guid. */
     trajectFlightAvailability: Record<string, TrajectFlightAvailability>;
+    trajectDaySuggestions: Record<number, TrajectDaySuggestions>;
     trajectEditLineGuid: string | null;
+    trajectActivitiesDayOrder: number | null;
 }
 export type TrajectNodeStatus = 'idle' | 'loading' | 'resolved' | 'unavailable';
 export interface TrajectNodeAvailability {
@@ -52,6 +54,11 @@ export interface TrajectNodeAvailability {
     selectedCode: string | null;
     preferredUnavailable: boolean;
 }
+export interface TrajectDaySuggestions {
+    dayOrder: number;
+    status: TrajectNodeStatus;
+    results: PackagingAccommodationResponse[];
+}
 export interface TrajectFlightAvailability {
     lineGuid: string;
     status: TrajectNodeStatus;
@@ -86,7 +93,10 @@ export declare const setResults: import("@reduxjs/toolkit").ActionCreatorWithPay
 }, "searchResults/setTrajectFlightAvailability">, setTrajectFlightSelection: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     lineGuid: string;
     guid: string;
-}, "searchResults/setTrajectFlightSelection">, setTrajectEditLineGuid: import("@reduxjs/toolkit").ActionCreatorWithPayload<string | null, "searchResults/setTrajectEditLineGuid">, updateTrajectNodeResult: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+}, "searchResults/setTrajectFlightSelection">, setTrajectEditLineGuid: import("@reduxjs/toolkit").ActionCreatorWithPayload<string | null, "searchResults/setTrajectEditLineGuid">, setTrajectActivitiesDayOrder: import("@reduxjs/toolkit").ActionCreatorWithPayload<number | null, "searchResults/setTrajectActivitiesDayOrder">, setTrajectDaySuggestionsLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, "searchResults/setTrajectDaySuggestionsLoading">, setTrajectDaySuggestions: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
+    dayOrder: number;
+    results: PackagingAccommodationResponse[];
+}, "searchResults/setTrajectDaySuggestions">, addEditableEntryLines: import("@reduxjs/toolkit").ActionCreatorWithPayload<PackagingEntryLine[], "searchResults/addEditableEntryLines">, updateTrajectNodeResult: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
     lineGuid: string;
     result: PackagingAccommodationResponse;
 }, "searchResults/updateTrajectNodeResult">, resetTrajectAvailability: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"searchResults/resetTrajectAvailability">, updateEditableEntryLine: import("@reduxjs/toolkit").ActionCreatorWithPayload<PackagingEntryLine, "searchResults/updateEditableEntryLine">, removeEditableEntryLines: import("@reduxjs/toolkit").ActionCreatorWithPayload<string[], "searchResults/removeEditableEntryLines">;

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

@@ -39,7 +39,17 @@ export interface SearchResultsConfiguration {
     onFlightBook?: (result: ExtendedFlightSearchResponseItem) => void;
     packagingEntry?: PackagingEntry | null;
     trajectEntry?: PackagingTrajectResponse | null;
-    showNonPreferredItems?: 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
+     * are searched and shown.
+     */
+    showApiItems?: boolean;
+    /**
+     * From the website portal configuration. Hides the "show more" button that opens a traject
+     * node's remaining results in the fly-in.
+     */
+    hideShowMoreResults?: boolean;
     generatePaymentUrl?: boolean;
     entryStatus?: number;
     customEntryStatusId?: number;
@@ -166,7 +176,7 @@ export type SearchSeed = {
     destinationAirport?: string | null;
     rooms: BookingPackageRequestRoom[];
 };
-export type FlyInType = 'flight-outward-results' | 'flight-return-results' | 'flight-details' | 'acco-results' | 'acco-details' | 'excursion-results' | 'excursion-details';
+export type FlyInType = 'flight-outward-results' | 'flight-return-results' | 'flight-details' | 'acco-results' | 'acco-details' | 'excursion-results' | 'excursion-details' | 'traject-flight-results' | 'traject-day-activities';
 export interface ExcursionSearchParams {
     date: string;
     fromDate: string;

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

@@ -1,4 +1,5 @@
-import { FlightSearchRequest, PackagingAccommodationRequest, PackagingAccommodationResponse, PackagingEntry, PackagingEntryLine, PackagingFlightResponse, PackagingRoom, PackagingTrajectAlternative, PackagingTrajectNode, PackagingTrajectResponse } from '@qite/tide-client';
+import { FlightSearchRequest, TideClientConfig, PackagingAccommodationRequest, PackagingAccommodationResponse, PackagingDestination, PackagingEntry, PackagingEntryLine, PackagingFlightResponse, PackagingRoom, PackagingTrajectAlternative, PackagingTrajectNode, PackagingTrajectResponse } from '@qite/tide-client';
+import { SearchResultsConfiguration } from '../types';
 export declare const REGULAR_TRAJECT_NODE_TYPE = 0;
 export declare const CONNECTING_TRAJECT_NODE_TYPE = 1;
 export interface TrajectNodeWithLine {
@@ -9,6 +10,7 @@ export interface TrajectNodeWithLine {
 export declare const isSearchableTrajectNode: (node: PackagingTrajectNode) => boolean;
 export declare const isTrajectFlightNode: (node: PackagingTrajectNode) => boolean;
 export declare const getTrajectNodesWithLines: (trajectEntry: PackagingTrajectResponse) => TrajectNodeWithLine[];
+export declare const hasDestination: (destination: PackagingDestination | null) => boolean;
 export interface TrajectSearchContext {
     transactionId: string;
     officeId: number;
@@ -19,7 +21,34 @@ export interface TrajectSearchContext {
     language: string;
     rooms: PackagingAccommodationRequest['rooms'];
 }
+export declare const buildTrajectClientConfig: (context: SearchResultsConfiguration) => TideClientConfig;
+export declare const buildTrajectSearchContext: (context: SearchResultsConfiguration, trajectEntry: PackagingTrajectResponse) => TrajectSearchContext;
 export declare const buildTrajectNodeRequest: ({ node, line }: TrajectNodeWithLine, context: TrajectSearchContext, productCode: string) => PackagingAccommodationRequest;
+export declare const getDayDestinationItem: (items: TrajectNodeWithLine[], dayOrder: number) => TrajectNodeWithLine | null;
+export declare const getDayDestination: (items: TrajectNodeWithLine[], availability: Record<string, {
+    results: PackagingAccommodationResponse[];
+    selectedCode: string | null;
+}>, dayOrder: number) => PackagingDestination | null;
+export declare const buildTrajectDayExcursionRequest: (date: string, destination: PackagingDestination, context: TrajectSearchContext) => PackagingAccommodationRequest;
+/**
+ * Entry lines for an excursion the traveller picked out of the suggestions.
+ *
+ * A traject node already has its lines and only needs stamping; a suggestion has none, so this
+ * builds them — one per selected option, as the regular day-by-day excursion flow does, since an
+ * excursion's options are ticket types (adult, child) rather than rooms. Where the search marks no
+ * default, the first option of each room stands in.
+ */
+export declare const buildTrajectExcursionLines: (result: PackagingAccommodationResponse) => PackagingEntryLine[];
+export interface DayActivityCard {
+    result: PackagingAccommodationResponse;
+    /** The traject node this result answers, where it is one of the trip's own excursions. */
+    item?: TrajectNodeWithLine;
+}
+export declare const buildDayActivityCards: (items: TrajectNodeWithLine[], availability: Record<string, {
+    results: PackagingAccommodationResponse[];
+    selectedCode: string | null;
+}>, suggestions: PackagingAccommodationResponse[]) => DayActivityCard[];
+export declare const getConfiguredExcursionCodes: (items: TrajectNodeWithLine[], dayOrder: number) => Set<string>;
 export declare const getNodeCandidates: (node: PackagingTrajectNode) => PackagingTrajectAlternative[];
 export declare const findCandidateForResult: (node: PackagingTrajectNode, result: PackagingAccommodationResponse) => PackagingTrajectAlternative | null;
 export declare const matchesCode: (result: PackagingAccommodationResponse, code: string) => boolean;
@@ -30,3 +59,10 @@ export declare const applyResultToLine: (line: PackagingEntryLine, result: Packa
 export declare const buildTrajectFlightRequest: ({ node, line }: TrajectNodeWithLine, context: TrajectSearchContext, pax: FlightSearchRequest["pax"]) => FlightSearchRequest;
 export declare const pickCheapestFlight: (flights: PackagingFlightResponse[]) => PackagingFlightResponse | null;
 export declare const applyFlightToLine: (line: PackagingEntryLine, flight: PackagingFlightResponse) => PackagingEntryLine;
+/**
+ * Externally sourced products carry a vendor configuration; products held internally in Tide have
+ * none. `vendorType` is not a reliable signal — the packaging service nulls it out when the search
+ * configuration has ExposeProvider off — so the vendor ids are what we go on.
+ */
+export declare const isExternalResult: (result: PackagingAccommodationResponse) => boolean;
+export declare const isExternalCandidate: (candidate: PackagingTrajectAlternative) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-components",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "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.15",
+    "@qite/tide-client": "^2.0.16",
     "@reduxjs/toolkit": "^2.8.2",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",

package/styles/booking-search-results-variables.scss

@@ -545,6 +545,12 @@
   --tide-booking-search-itinerary-filter-segment-badge--secondary-icon-background-color: orangered;
   --tide-booking-search-itinerary-filter-segment-badge--secondary-icon-color: var(--tide-booking-white);
 
+  --tide-booking-search-itinerary-service-flight-color: #99a9ff;
+  --tide-booking-search-itinerary-service-hotel-color: #3f9bff;
+  --tide-booking-search-itinerary-service-excursion-color: #f39c12;
+  --tide-booking-search-itinerary-service-poi-color: #3ec758;
+  --tide-booking-search-itinerary-service-restaurant-color: #ffcc00;
+
   --tide-booking-search-itinerary-filter-segment-date-day-font-weight: 600;
   --tide-booking-search-itinerary-filter-segment-date-day-color: var(--tide-booking-black);
 

package/styles/components/_search.scss

@@ -505,6 +505,7 @@
 
         &-date {
           min-width: 26px;
+          max-width: 26px;
 
           p {
             margin: 0px;
@@ -535,6 +536,36 @@
           align-items: center;
           justify-content: center;
           color: var(--tide-booking-search-itinerary-filter-transport-badge-icon-color);
+
+          &--default {
+            background-color: var(--tide-booking-search-itinerary-filter-segment-badge-icon-background-color);
+            color: var(--tide-booking-search-itinerary-filter-segment-badge-icon-color);
+          }
+
+          &--flight {
+            background-color: var(--tide-booking-search-itinerary-service-flight-color);
+            color: var(--tide-booking-white);
+          }
+
+          &--hotel {
+            background-color: var(--tide-booking-search-itinerary-service-hotel-color);
+            color: var(--tide-booking-white);
+          }
+
+          &--excursion {
+            background-color: var(--tide-booking-search-itinerary-service-excursion-color);
+            color: var(--tide-booking-white);
+          }
+
+          &--poi {
+            background-color: var(--tide-booking-search-itinerary-service-poi-color);
+            color: var(--tide-booking-white);
+          }
+
+          &--restaurant {
+            background-color: var(--tide-booking-search-itinerary-service-restaurant-color);
+            color: var(--tide-booking-white);
+          }
         }
 
         &-details {
@@ -668,6 +699,26 @@
             background: var(--tide-booking-search-itinerary-filter-segment-badge--secondary-icon-background-color);
             color: var(--tide-booking-search-itinerary-filter-segment-badge--secondary-icon-color);
           }
+
+          &--flight {
+            background: var(--tide-booking-search-itinerary-service-flight-color);
+          }
+
+          &--hotel {
+            background: var(--tide-booking-search-itinerary-service-hotel-color);
+          }
+
+          &--excursion {
+            background: var(--tide-booking-search-itinerary-service-excursion-color);
+          }
+
+          &--poi {
+            background: var(--tide-booking-search-itinerary-service-poi-color);
+          }
+
+          &--restaurant {
+            background: var(--tide-booking-search-itinerary-service-restaurant-color);
+          }
         }
 
         &-date {
@@ -691,6 +742,10 @@
           display: flex;
           align-items: center;
           flex-flow: row nowrap;
+        }
+
+        &-nights,
+        &-date {
           min-width: 26px;
           max-width: 26px;
 
@@ -744,11 +799,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    grid-column: span 12;
-
-    @include mixins.media-md {
-      grid-column: auto;
-    }
+    min-width: 0;
 
     &__cards {
       display: grid;
@@ -783,6 +834,43 @@
       }
     }
 
+    &__cards--scroll {
+      display: flex;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      overflow-y: hidden;
+      scroll-snap-type: x proximity;
+      -webkit-overflow-scrolling: touch;
+      padding-bottom: 5px;
+
+      @include mixins.media-sm {
+        grid-template-columns: none;
+      }
+
+      @include mixins.media-md {
+        grid-template-columns: none;
+      }
+
+      @include mixins.media-lg {
+        grid-template-columns: none;
+      }
+
+      @include mixins.media-xgl {
+        grid-template-columns: none;
+      }
+
+      > * {
+        flex: 0 0 auto;
+        scroll-snap-align: start;
+        width: 280px;
+        max-width: 85vw;
+
+        @include mixins.media-md {
+          width: 320px;
+        }
+      }
+    }
+
     &__wrapper {
       display: flex;
       flex-direction: column;
@@ -1124,6 +1212,7 @@
       }
 
       &__header {
+        position: relative;
         display: flex;
         justify-content: space-between;
         gap: 5px;