@qite/tide-booking-component 1.4.77 → 1.4.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.77",
+  "version": "1.4.78",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",

package/src/content/features/content-page/content-page-self-contained.tsx

@@ -6,6 +6,7 @@ import ContactForm from '../../components/contact';
 import Slider from '../../components/slider';
 import { Nationality, QSMConfiguration, TypeaheadOption } from '../../../qsm/types';
 import QSM from '../../../qsm';
+import { WebsiteConfigurationSearchConfiguration } from '@qite/tide-client';
 
 interface ContentPageSelfContainedProps {
   path: string;
@@ -52,8 +53,93 @@ const travelClasses = [
   { id: 8, label: 'First Class' }
 ];
 
+const searchConfigurations: WebsiteConfigurationSearchConfiguration[] = [
+  {
+    id: 4,
+    name: 'Search Group tour',
+    icon: '',
+    defaultSearchType: 1,
+    serviceTypes: [0],
+    defaultCatalogueId: undefined,
+    defaultDuration: undefined,
+    fromDateAmount: 0,
+    fromDateAmountType: 0,
+    toDateAmount: 12,
+    toDateAmountType: 1,
+    enableManualPackaging: false,
+    allowFlights: false,
+    allowAccommodations: false,
+    allowCarRentals: false,
+    allowTransfers: false,
+    allowExcursions: false,
+    qsmType: 5
+  },
+  {
+    id: 5,
+    name: 'Search Hotels',
+    icon: '',
+    defaultSearchType: 0,
+    serviceTypes: [3],
+    defaultCatalogueId: undefined,
+    defaultDuration: undefined,
+    fromDateAmount: 1,
+    fromDateAmountType: 1,
+    toDateAmount: 7,
+    toDateAmountType: 0,
+    enableManualPackaging: false,
+    allowFlights: false,
+    allowAccommodations: false,
+    allowCarRentals: false,
+    allowTransfers: false,
+    allowExcursions: false,
+    qsmType: 1
+  },
+  {
+    id: 6,
+    name: 'Search Flights',
+    icon: '',
+    defaultSearchType: 3,
+    serviceTypes: [7],
+    defaultCatalogueId: undefined,
+    defaultDuration: undefined,
+    fromDateAmount: 1,
+    fromDateAmountType: 1,
+    toDateAmount: 7,
+    toDateAmountType: 0,
+    enableManualPackaging: false,
+    allowFlights: false,
+    allowAccommodations: false,
+    allowCarRentals: false,
+    allowTransfers: false,
+    allowExcursions: false,
+    qsmType: 3
+  },
+  {
+    id: 7,
+    name: 'Transport + hotel',
+    icon: '',
+    defaultSearchType: 0,
+    serviceTypes: [0],
+    defaultCatalogueId: undefined,
+    defaultDuration: undefined,
+    fromDateAmount: 1,
+    fromDateAmountType: 1,
+    toDateAmount: 7,
+    toDateAmountType: 0,
+    enableManualPackaging: true,
+    allowFlights: true,
+    allowAccommodations: true,
+    allowCarRentals: false,
+    allowTransfers: false,
+    allowExcursions: false,
+    qsmType: 2
+  }
+];
+
 let configuration: QSMConfiguration = {
   type: PortalQsmType.Accommodation,
+  searchConfigurations: searchConfigurations,
+
   askTravelers: true,
   askNationality: true,
   askTravelClass: true,

package/src/qsm/components/QSMContainer/qsm-container.tsx

@@ -18,6 +18,7 @@ import { QSMState, setFromDate, setSelectedQsmType, setToDate, setTripType } fro
 import { BaseFieldConfig, DoubleFieldConfig } from '../../types';
 import { getTranslations } from '../../../shared/utils/localization-util';
 import { PortalQsmType } from '../../../shared/types';
+import { DateAmountType } from '@qite/tide-client';
 
 const QSMContainer: React.FC = () => {
   const dispatch = useDispatch();
@@ -40,7 +41,8 @@ const QSMContainer: React.FC = () => {
     destination,
     allowOneWay,
     allowRoundtrip,
-    allowOpenJaw
+    allowOpenJaw,
+    searchConfigurations
   } = useContext(QSMConfigurationContext);
   const translations = getTranslations(languageCode ?? 'en-GB');
 
@@ -80,14 +82,41 @@ const QSMContainer: React.FC = () => {
   const handleQsmTypeChange = (value: PortalQsmType) => {
     dispatch(setSelectedQsmType(value));
 
-    let startDate = addMonths(new Date(), 1);
-    let endDate = addDays(startDate, 7);
+    const now = new Date();
 
+    // Default fallback
+    let startDate = addMonths(now, 1);
+    let endDate = addDays(startDate, 7);
     if (value === PortalQsmType.GroupTour) {
-      startDate = new Date();
+      startDate = now;
       endDate = addYears(startDate, 1);
     }
 
+    const searchConfig = searchConfigurations.find((config) => config.qsmType === value);
+
+    if (searchConfig) {
+      const applyAmount = (baseDate: Date, type: DateAmountType, amount?: number) => {
+        if (!amount || type == null) return baseDate;
+
+        switch (type) {
+          case DateAmountType.days:
+            return addDays(baseDate, amount);
+          case DateAmountType.months:
+            return addMonths(baseDate, amount);
+          default:
+            return baseDate;
+        }
+      };
+
+      if (searchConfig.fromDateAmount) {
+        startDate = applyAmount(now, searchConfig.fromDateAmountType, searchConfig.fromDateAmount);
+      }
+
+      if (searchConfig.toDateAmount) {
+        endDate = applyAmount(startDate, searchConfig.toDateAmountType, searchConfig.toDateAmount);
+      }
+    }
+
     handleDateChange({
       fromDate: startDate,
       toDate: endDate
@@ -180,10 +209,77 @@ const QSMContainer: React.FC = () => {
     };
   }, [fromDate, toDate, departureAirport, returnAirport, allowOpenJaw]);
 
+  const qsmTypeMeta: Record<PortalQsmType, { icon: string | string[]; label: string }> = {
+    [PortalQsmType.Multidestination]: {
+      icon: 'ui-location',
+      label: translations.QSM.MULTIDESTINATION
+    },
+    [PortalQsmType.Package]: {
+      icon: 'ui-suitcase',
+      label: translations.QSM.PACKAGES
+    },
+    [PortalQsmType.AccommodationAndFlight]: {
+      icon: ['ui-backforward', 'ui-bed'],
+      label: translations.QSM.TRANSPORT_HOTEL
+    },
+    [PortalQsmType.Accommodation]: {
+      icon: 'ui-bed',
+      label: translations.QSM.ACCOMMODATION
+    },
+    [PortalQsmType.Flight]: {
+      icon: 'ui-flight',
+      label: translations.QSM.TRANSPORTS
+    },
+    [PortalQsmType.GroupTour]: {
+      icon: 'ui-group',
+      label: translations.QSM.GROUP_TOUR
+    },
+    [PortalQsmType.RoundTrip]: {
+      icon: 'ui-group',
+      label: translations.QSM.ROUNDTRIP
+    },
+    [PortalQsmType.Ticket]: {
+      icon: 'ui-ticket',
+      label: translations.QSM.TICKET_ONLY
+    },
+    [PortalQsmType.Car]: {
+      icon: 'ui-car',
+      label: translations.QSM.RENT_A_CAR
+    },
+    [PortalQsmType.Transfer]: {
+      icon: 'ui-backforward',
+      label: translations.QSM.TRANSFERS
+    },
+    [PortalQsmType.Cruise]: {
+      icon: 'ui-ship',
+      label: translations.QSM.CRUISES
+    }
+  };
+
   return (
     <div className="qsm">
       <div className="qsm__content">
         <div className="qsm__tabs">
+          {searchConfigurations.map((searchConfig, index) => {
+            const meta = qsmTypeMeta[searchConfig.qsmType];
+
+            if (!meta) return null; // safety guard
+
+            return (
+              <button
+                key={`qsm-type-${index}`}
+                type="button"
+                className={`qsm__tab ${qsmType === searchConfig.qsmType ? 'qsm__tab--active' : ''}`}
+                onClick={() => handleQsmTypeChange(searchConfig.qsmType)}>
+                <span className="qsm__tab__icons">
+                  {Array.isArray(meta.icon) ? meta.icon.map((icon, i) => <Icon key={i} name={icon} height={14} />) : <Icon name={meta.icon} height={16} />}
+                </span>
+
+                {meta.label}
+              </button>
+            );
+          })}
+          {/* 
           <button
             type="button"
             className={`qsm__tab ${qsmType == PortalQsmType.Multidestination ? 'qsm__tab--active' : ''}`}
@@ -275,7 +371,7 @@ const QSMContainer: React.FC = () => {
               <Icon name="ui-ship" height={16} />
             </span>
             {translations.QSM.CRUISES}
-          </button>
+          </button> */}
         </div>
         <div className="qsm__filter">
           {(qsmType === PortalQsmType.Accommodation || qsmType === PortalQsmType.AccommodationAndFlight || qsmType === PortalQsmType.GroupTour) && (

package/src/qsm/qsm-configuration-context.ts

@@ -4,6 +4,7 @@ import { PortalQsmType } from '../shared/types';
 
 const QSMConfigurationContext = React.createContext<QSMConfiguration>({
   type: PortalQsmType.Accommodation,
+  searchConfigurations: [],
   askTravelers: false,
   askNationality: false,
   askTravelClass: false,

package/src/qsm/types.ts

@@ -1,9 +1,12 @@
 import { ReactNode } from 'react';
 import { PortalQsmType, TravelClass, TravelType } from '../shared/types';
+import { WebsiteConfigurationSearchConfiguration } from '@qite/tide-client';
 
 export interface QSMConfiguration {
   type?: PortalQsmType;
-  // Type specification and dedicated parameters
+
+  searchConfigurations: WebsiteConfigurationSearchConfiguration[];
+
   askRooms?: boolean; // hotel || roundTrip
   askTravelType?: boolean; // hotel || roundTrip
   allowOneWay?: boolean; // flight