@qite/tide-booking-component 1.4.74 → 1.4.76

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

@@ -1,9 +1,9 @@
 import { FlightSearchResponseItem } from '@qite/tide-client';
 import { ReactNode } from 'react';
-import { SRPType } from '../shared/types';
+import { PortalQsmType } from '../shared/types';
 export type FlightSelectionMode = 'paired' | 'independent';
 export interface SearchResultsConfiguration {
-  type: SRPType;
+  type: PortalQsmType;
   tideConnection: {
     host: string;
     apiKey: string;

package/build/build-esm/src/shared/components/flyin/flyin.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { SRPType } from '../../types';
+import { PortalQsmType } from '../../types';
 type FlyInProps = {
   title: string;
-  srpType: SRPType;
+  srpType: PortalQsmType;
   isOpen: boolean;
   setIsOpen: (open: boolean) => void;
   className?: string;

package/build/build-esm/src/shared/types.d.ts

@@ -1,16 +1,17 @@
 import { ReactNode } from 'react';
-export type SRPType =
-  | 'multidestination'
-  | 'hotel'
-  | 'roundTrip'
-  | 'flight'
-  | 'hotel-flight'
-  | 'groupTour'
-  | 'package'
-  | 'ticket'
-  | 'car'
-  | 'transfers'
-  | 'cruises';
+export declare enum PortalQsmType {
+  Multidestination = 0,
+  Accommodation = 1,
+  AccommodationAndFlight = 2,
+  Flight = 3,
+  RoundTrip = 4,
+  GroupTour = 5,
+  Package = 6,
+  Ticket = 7,
+  Car = 8,
+  Transfer = 9,
+  Cruise = 10
+}
 export interface ApiSettingsState {
   apiUrl: string;
   apiKey: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.74",
+  "version": "1.4.76",
   "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.144",
+    "@qite/tide-client": "^1.1.146",
     "@reduxjs/toolkit": "^2.8.2",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Navbar } from '../../../../src';
+import { Navbar, PortalQsmType } from '../../../../src';
 import { TideLogo, language, languages, topLinks, navItems } from '../../../../src/content/navbar/placeholderData';
 import Icon from '../../components/icon';
 import ContactForm from '../../components/contact';
@@ -53,7 +53,7 @@ const travelClasses = [
 ];
 
 let configuration: QSMConfiguration = {
-  type: 'hotel',
+  type: PortalQsmType.Accommodation,
   askTravelers: true,
   askNationality: true,
   askTravelClass: true,

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

@@ -17,7 +17,7 @@ import { DateRange } from '../../../booking-product/types';
 import { QSMState, setFromDate, setSelectedQsmType, setToDate, setTripType } from '../../store/qsm-slice';
 import { BaseFieldConfig, DoubleFieldConfig } from '../../types';
 import { getTranslations } from '../../../shared/utils/localization-util';
-import { SRPType } from '../../../shared/types';
+import { PortalQsmType } from '../../../shared/types';
 
 const QSMContainer: React.FC = () => {
   const dispatch = useDispatch();
@@ -50,7 +50,7 @@ const QSMContainer: React.FC = () => {
     let startDate = addMonths(new Date(), 1);
     let endDate = addDays(startDate, 7);
 
-    if (qsmType === 'groupTour') {
+    if (qsmType === PortalQsmType.GroupTour) {
       startDate = new Date();
       endDate = addYears(startDate, 1);
     }
@@ -77,13 +77,13 @@ const QSMContainer: React.FC = () => {
     dispatch(setTripType(value));
   };
 
-  const handleQsmTypeChange = (value: SRPType) => {
+  const handleQsmTypeChange = (value: PortalQsmType) => {
     dispatch(setSelectedQsmType(value));
 
     let startDate = addMonths(new Date(), 1);
     let endDate = addDays(startDate, 7);
 
-    if (value === 'groupTour') {
+    if (value === PortalQsmType.GroupTour) {
       startDate = new Date();
       endDate = addYears(startDate, 1);
     }
@@ -110,7 +110,7 @@ const QSMContainer: React.FC = () => {
       tripType
     } as any;
 
-    if (askRooms && qsmType !== 'flight') {
+    if (askRooms && qsmType !== PortalQsmType.Flight) {
       payload.rooms = rooms;
     } else {
       payload.travelers = { adults, kids, babies };
@@ -186,14 +186,17 @@ const QSMContainer: React.FC = () => {
         <div className="qsm__tabs">
           <button
             type="button"
-            className={`qsm__tab ${qsmType == 'multidestination' ? 'qsm__tab--active' : ''}`}
-            onClick={() => handleQsmTypeChange('multidestination')}>
+            className={`qsm__tab ${qsmType == PortalQsmType.Multidestination ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.Multidestination)}>
             <span className="qsm__tab__icons">
               <Icon name="ui-location" height={16} />
             </span>
             {translations.QSM.MULTIDESTINATION}
           </button>
-          <button type="button" className={`qsm__tab ${qsmType == 'package' ? 'qsm__tab--active' : ''}`} onClick={() => handleQsmTypeChange('package')}>
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.Package ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.Package)}>
             <span className="qsm__tab__icons">
               <Icon name="ui-suitcase" height={16} />
             </span>
@@ -201,8 +204,8 @@ const QSMContainer: React.FC = () => {
           </button>
           <button
             type="button"
-            className={`qsm__tab ${qsmType == 'hotel-flight' ? 'qsm__tab--active' : ''}`}
-            onClick={() => handleQsmTypeChange('hotel-flight')}>
+            className={`qsm__tab ${qsmType == PortalQsmType.AccommodationAndFlight ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.AccommodationAndFlight)}>
             <span className="qsm__tab__icons">
               <Icon name="ui-backforward" height={14} />
               +
@@ -210,43 +213,64 @@ const QSMContainer: React.FC = () => {
             </span>
             {translations.QSM.TRANSPORT_HOTEL}
           </button>
-          <button type="button" className={`qsm__tab ${qsmType == 'hotel' ? 'qsm__tab--active' : ''}`} onClick={() => handleQsmTypeChange('hotel')}>
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.Accommodation ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.Accommodation)}>
             <span className="qsm__tab__icons">
               <Icon name="ui-bed" height={16} />
             </span>
             {translations.QSM.ACCOMMODATION}
           </button>
-          <button type="button" className={`qsm__tab ${qsmType == 'flight' ? 'qsm__tab--active' : ''}`} onClick={() => handleQsmTypeChange('flight')}>
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.Flight ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.Flight)}>
             <span className="qsm__tab__icons">
               <Icon name="ui-flight" height={16} />
             </span>
             {translations.QSM.TRANSPORTS}
           </button>
-          <button type="button" className={`qsm__tab ${qsmType == 'groupTour' ? 'qsm__tab--active' : ''}`} onClick={() => handleQsmTypeChange('groupTour')}>
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.GroupTour ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.GroupTour)}>
             <span className="qsm__tab__icons">
               <Icon name="ui-group" height={16} />
             </span>
             {translations.QSM.GROUP_TOUR}
           </button>
-          <button type="button" className={`qsm__tab ${qsmType == 'ticket' ? 'qsm__tab--active' : ''}`} onClick={() => handleQsmTypeChange('ticket')}>
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.Ticket ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.Ticket)}>
             <span className="qsm__tab__icons">
               <Icon name="ui-ticket" height={16} />
             </span>
             {translations.QSM.TICKET_ONLY}
           </button>
-          <button type="button" className={`qsm__tab ${qsmType == 'car' ? 'qsm__tab--active' : ''}`} onClick={() => handleQsmTypeChange('car')}>
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.Car ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.Car)}>
             <span className="qsm__tab__icons">
               <Icon name="ui-car" height={16} />
             </span>
             {translations.QSM.RENT_A_CAR}
           </button>
-          <button type="button" className={`qsm__tab ${qsmType == 'transfers' ? 'qsm__tab--active' : ''}`} onClick={() => handleQsmTypeChange('transfers')}>
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.Transfer ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.Transfer)}>
             <span className="qsm__tab__icons">
               <Icon name="ui-backforward" height={16} />
             </span>
             {translations.QSM.TRANSFERS}
           </button>
-          <button type="button" className={`qsm__tab ${qsmType == 'cruises' ? 'qsm__tab--active' : ''}`} onClick={() => handleQsmTypeChange('cruises')}>
+          <button
+            type="button"
+            className={`qsm__tab ${qsmType == PortalQsmType.Cruise ? 'qsm__tab--active' : ''}`}
+            onClick={() => handleQsmTypeChange(PortalQsmType.Cruise)}>
             <span className="qsm__tab__icons">
               <Icon name="ui-ship" height={16} />
             </span>
@@ -254,7 +278,7 @@ const QSMContainer: React.FC = () => {
           </button>
         </div>
         <div className="qsm__filter">
-          {(qsmType === 'hotel' || qsmType === 'hotel-flight' || qsmType === 'groupTour') && (
+          {(qsmType === PortalQsmType.Accommodation || qsmType === PortalQsmType.AccommodationAndFlight || qsmType === PortalQsmType.GroupTour) && (
             <div className="radiobutton-group qsm__filter__inputgroup">
               <div className="radiobutton">
                 <label className="radiobutton__label">
@@ -287,7 +311,7 @@ const QSMContainer: React.FC = () => {
               </div>
             </div>
           )}
-          {qsmType === 'flight' && (
+          {qsmType === PortalQsmType.Flight && (
             <div className="radiobutton-group qsm__filter__inputgroup">
               {allowOneWay && (
                 <div className="radiobutton">
@@ -339,26 +363,32 @@ const QSMContainer: React.FC = () => {
             </div>
           )}
           <div className="qsm__filter__classgroup">
-            {qsmType !== 'hotel' &&
-              qsmType !== 'car' &&
-              qsmType !== 'ticket' &&
-              qsmType !== 'cruises' &&
-              qsmType !== 'transfers' &&
-              qsmType !== 'groupTour' &&
+            {qsmType !== PortalQsmType.Accommodation &&
+              qsmType !== PortalQsmType.Car &&
+              qsmType !== PortalQsmType.Ticket &&
+              qsmType !== PortalQsmType.Cruise &&
+              qsmType !== PortalQsmType.Transfer &&
+              qsmType !== PortalQsmType.GroupTour &&
               askTravelClass && <TravelClassPicker />}
-            {qsmType !== 'multidestination' && qsmType !== 'car' && qsmType !== 'flight' && qsmType !== 'transfers' && askTravelType && <TravelTypePicker />}
+            {qsmType !== PortalQsmType.Multidestination &&
+              qsmType !== PortalQsmType.Car &&
+              qsmType !== PortalQsmType.Flight &&
+              qsmType !== PortalQsmType.Transfer &&
+              askTravelType && <TravelTypePicker />}
             {askNationality && <TravelNationalityPicker />}
           </div>
         </div>
         <div className="qsm__input-group">
           {/* TODO, determine which fields to show for what type of QSM */}
-          {(qsmType == 'flight' || qsmType == 'hotel-flight') && originDestinationField && (
+          {(qsmType == PortalQsmType.Flight || qsmType == PortalQsmType.AccommodationAndFlight) && originDestinationField && (
             <DoubleSearchInputGroup fieldConfig={originDestinationField} showReverse={originDestinationField.showReverse} />
           )}
-          {qsmType == 'flight' && tripType == 'openjaw' && openJawReturnDestinationField && (
+          {qsmType == PortalQsmType.Flight && tripType == 'openjaw' && openJawReturnDestinationField && (
             <DoubleSearchInputGroup fieldConfig={openJawReturnDestinationField} showReverse={openJawReturnDestinationField.showReverse} />
           )}
-          {(qsmType == 'hotel' || qsmType == 'hotel-flight' || qsmType == 'groupTour') && destination && <SearchInputGroup fieldConfig={destination} />}
+          {(qsmType == PortalQsmType.Accommodation || qsmType == PortalQsmType.AccommodationAndFlight || qsmType == PortalQsmType.GroupTour) && destination && (
+            <SearchInputGroup fieldConfig={destination} />
+          )}
 
           <Dates value={dateRange} onChange={handleDateChange} />
 

package/src/qsm/components/travel-input/index.tsx

@@ -7,13 +7,14 @@ import { getTranslations } from '../../../shared/utils/localization-util';
 import TravelClassPicker from '../travel-class-picker';
 import TravelTypePicker from '../travel-type-picker';
 import Icon from '../icon';
+import { PortalQsmType } from '../../../shared/types';
 
 const TravelInput: React.FC = () => {
   const dispatch = useDispatch();
   const { askRooms, maxTravelers, defaultTravelers, maxChildAge, maxInfantAge, askTravelType, askTravelClass, languageCode } =
     useContext(QSMConfigurationContext);
   const { adults, kids, babies, rooms, qsmType } = useSelector((state: QSMRootState) => state.qsm);
-  const areTravelersInRooms = qsmType !== 'flight' && askRooms;
+  const areTravelersInRooms = qsmType !== PortalQsmType.Flight && askRooms;
 
   const translations = getTranslations(languageCode ?? 'en-GB');
 

package/src/qsm/components/travel-input-group/index.tsx

@@ -7,6 +7,7 @@ import { QSMRootState } from '../../store/qsm-store';
 import QSMConfigurationContext from '../../qsm-configuration-context';
 import Icon from '../icon';
 import { getTranslations } from '../../../shared/utils/localization-util';
+import { PortalQsmType } from '../../../shared/types';
 
 const selectTravelerSummary = (state: QSMRootState, areTravelersInRooms: boolean | undefined) => {
   const { adults, kids, babies, rooms, selectedTravelType } = state.qsm;
@@ -35,7 +36,7 @@ const TravelInputGroup: React.FC = () => {
 
   const translations = getTranslations(languageCode ?? 'en-GB');
 
-  const areTravelersInRooms = qsmType !== 'flight' && askRooms;
+  const areTravelersInRooms = qsmType !== PortalQsmType.Flight && askRooms;
 
   const initDone = useRef(false);
 

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { QSMConfiguration } from './types';
+import { PortalQsmType } from '../shared/types';
 
 const QSMConfigurationContext = React.createContext<QSMConfiguration>({
-  type: 'hotel',
+  type: PortalQsmType.Accommodation,
   askTravelers: false,
   askNationality: false,
   askTravelClass: false,

package/src/qsm/store/qsm-slice.ts

@@ -2,10 +2,10 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 import { MobileFilterType, Room, TravelerType, TypeaheadOption } from '../types';
 import { ReactNode } from 'react';
-import { TravelType, TravelClass, SRPType } from '../../shared/types';
+import { TravelType, TravelClass, PortalQsmType } from '../../shared/types';
 
 export interface QSMState {
-  qsmType?: SRPType;
+  qsmType?: PortalQsmType;
   selectedOrigin?: string;
   selectedDestination?: string;
   selectedAirport?: string;
@@ -50,7 +50,7 @@ export interface QSMState {
 }
 
 const initialState: QSMState = {
-  qsmType: 'hotel-flight',
+  qsmType: PortalQsmType.AccommodationAndFlight,
   selectedOrigin: undefined,
   selectedDestination: undefined,
   selectedAirport: undefined,
@@ -93,7 +93,7 @@ const qsmSlice = createSlice({
   name: 'qsm',
   initialState,
   reducers: {
-    setSelectedQsmType: (state, action: PayloadAction<SRPType>) => {
+    setSelectedQsmType: (state, action: PayloadAction<PortalQsmType>) => {
       state.qsmType = action.payload;
     },
     setOrigin: (state, action: PayloadAction<string>) => {

package/src/qsm/types.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { SRPType, TravelClass, TravelType } from '../shared/types';
+import { PortalQsmType, TravelClass, TravelType } from '../shared/types';
 
 export interface QSMConfiguration {
-  type?: SRPType;
+  type?: PortalQsmType;
   // Type specification and dedicated parameters
   askRooms?: boolean; // hotel || roundTrip
   askTravelType?: boolean; // hotel || roundTrip

package/src/search-results/components/filters/utility.tsx

@@ -6,12 +6,14 @@ export const enrichFiltersWithResults = (results: BookingPackageItem[], filters:
     return filters ?? [];
   }
 
-  for (const filter of filters) {
+  return filters.map((filter) => {
+    let updatedFilter = { ...filter };
+
     if (filter.property === 'price' && (filter.min == null || filter.max == null)) {
       const prices = results.map((r) => r.price ?? 0).filter((p) => p > 0);
       if (prices.length > 0) {
-        filter.min = Math.floor(Math.min(...prices));
-        filter.max = Math.ceil(Math.max(...prices));
+        updatedFilter.min = Math.floor(Math.min(...prices));
+        updatedFilter.max = Math.ceil(Math.max(...prices));
       }
     }
 
@@ -27,9 +29,7 @@ export const enrichFiltersWithResults = (results: BookingPackageItem[], filters:
         }
       });
 
-      console.log('map', map);
-
-      filter.options = Array.from(map.values()).map((accommodation) => ({
+      updatedFilter.options = Array.from(map.values()).map((accommodation) => ({
         label: accommodation.name ?? accommodation.code,
         value: accommodation.code,
         isChecked: false
@@ -48,7 +48,7 @@ export const enrichFiltersWithResults = (results: BookingPackageItem[], filters:
         }
       });
 
-      filter.options = Array.from(map.values()).map((regime) => ({
+      updatedFilter.options = Array.from(map.values()).map((regime) => ({
         label: regime.name ?? regime.code,
         value: regime.code,
         isChecked: false
@@ -67,13 +67,13 @@ export const enrichFiltersWithResults = (results: BookingPackageItem[], filters:
         });
       });
 
-      filter.options = Array.from(map.values()).map((theme) => ({
+      updatedFilter.options = Array.from(map.values()).map((theme) => ({
         label: theme.name,
         value: theme.id,
         isChecked: false
       }));
     }
-  }
 
-  return filters;
+    return updatedFilter;
+  });
 };

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

@@ -11,6 +11,7 @@ import FlightFilters from '../filters/flight-filters';
 import { ExtendedFlightSearchResponseItem, FlightSelectionMode } from '../../types';
 import { getSortingName } from '../../utils/flight-utils';
 import Spinner from '../spinner/spinner';
+import { PortalQsmType } from '../../../shared/types';
 
 interface FlightResultsContainerProps {
   isMobile: boolean;
@@ -42,7 +43,7 @@ const FlightResultsContainer: React.FC<FlightResultsContainerProps> = ({ isMobil
 
   useEffect(() => {
     if (!context?.showMockup) {
-      if (context?.type === 'flight' && isHubReady) {
+      if (context?.type === PortalQsmType.Flight && isHubReady) {
         onFlightSearch();
       }
     }
@@ -128,7 +129,7 @@ const FlightResultsContainer: React.FC<FlightResultsContainerProps> = ({ isMobil
 
           <div className="search__results__wrapper">
             {flightsLoading && <Spinner />}
-            {context?.type == 'flight' && context?.showFlightAccommodationResults && results && results.length > 0 && (
+            {context?.type == PortalQsmType.Flight && context?.showFlightAccommodationResults && results && results.length > 0 && (
               <FlightSelection searchResults={results} flightSelectionType={flightSelectionType} />
             )}
           </div>

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

@@ -44,6 +44,7 @@ import FlightResultsContainer from './flight-search-results';
 import Filters from '../filters/filters';
 import GroupTourResults from '../group-tour/group-tour-results';
 import { applyFilters } from '../../utils/search-results-utils';
+import { PortalQsmType } from '../../../shared/types';
 
 const SearchResultsContainer: React.FC = () => {
   const dispatch = useDispatch();
@@ -121,7 +122,14 @@ const SearchResultsContainer: React.FC = () => {
       officeId: 1,
       payload: {
         catalogueIds: context!.tideConnection.catalogueIds ?? [],
-        serviceType: context!.type === 'hotel' || context!.type === 'hotel-flight' ? 3 : context!.type === 'flight' ? 7 : context!.type === 'roundTrip' ? 1 : 0,
+        serviceType:
+          context!.type === PortalQsmType.Accommodation || context!.type === PortalQsmType.AccommodationAndFlight
+            ? 3
+            : context!.type === PortalQsmType.Flight
+            ? 7
+            : context!.type === PortalQsmType.RoundTrip
+            ? 1
+            : 0,
         searchType: 0,
         destination: {
           id: Number(destinationId),
@@ -192,8 +200,14 @@ const SearchResultsContainer: React.FC = () => {
       payload: {
         catalogueIds: context!.tideConnection.catalogueIds ?? [],
         serviceType:
-          context!.type === 'hotel' || context!.type === 'hotel-flight' ? 3 : context!.type === 'flight' ? 7 : context!.type === 'roundTrip' ? 1 : undefined,
-        searchType: context!.type === 'groupTour' ? 1 : 0,
+          context!.type === PortalQsmType.Accommodation || context!.type === PortalQsmType.AccommodationAndFlight
+            ? 3
+            : context!.type === PortalQsmType.Flight
+            ? 7
+            : context!.type === PortalQsmType.RoundTrip
+            ? 1
+            : undefined,
+        searchType: context!.type === PortalQsmType.GroupTour ? 1 : 0,
         destination: {
           id: Number(destinationId),
           isCountry: destinationIsCountry,
@@ -206,7 +220,7 @@ const SearchResultsContainer: React.FC = () => {
         toDate: to,
         earliestFromOffset: 0,
         latestToOffset: 0,
-        includeFlights: context!.type === 'hotel-flight' ? true : false,
+        includeFlights: context!.type === PortalQsmType.AccommodationAndFlight ? true : false,
         // regimeCodes:
         //   filters
         //     .find((f) => f.property === 'regime')
@@ -214,7 +228,7 @@ const SearchResultsContainer: React.FC = () => {
         //     .flatMap((o) => o.value.toString()) || [],
         // minPrice: filters.find((f) => f.property === 'price')?.selectedMin,
         // maxPrice: filters.find((f) => f.property === 'price')?.selectedMax,
-        useExactDates: context?.type === 'groupTour' ? false : true,
+        useExactDates: context?.type === PortalQsmType.GroupTour ? false : true,
         onlyCachedResults: false,
         includeAllAllotments: true,
         productIds: hotel ? [hotel] : [],
@@ -348,7 +362,7 @@ const SearchResultsContainer: React.FC = () => {
               dispatch(setSelectedSearchResult(matching.productId));
             }
           } else {
-            if (context.type === 'hotel-flight') {
+            if (context.type === PortalQsmType.AccommodationAndFlight) {
               dispatch(setSelectedSearchResult(packageSearchResults[0]?.productId));
             }
           }
@@ -362,7 +376,11 @@ const SearchResultsContainer: React.FC = () => {
     };
 
     if (!context?.showMockup) {
-      if (context?.type === 'hotel-flight' || context?.type === 'hotel' || context?.type === 'groupTour') {
+      if (
+        context?.type === PortalQsmType.AccommodationAndFlight ||
+        context?.type === PortalQsmType.Accommodation ||
+        context?.type === PortalQsmType.GroupTour
+      ) {
         runSearch();
       }
     }
@@ -373,7 +391,7 @@ const SearchResultsContainer: React.FC = () => {
     const fetchPackageDetails = async () => {
       if (!selectedSearchResultId || !context) return;
 
-      if (context?.type === 'hotel' || context?.type === 'groupTour') {
+      if (context?.type === PortalQsmType.Accommodation || context?.type === PortalQsmType.GroupTour) {
         handleFlyInToggle(true);
       }
 
@@ -409,7 +427,7 @@ const SearchResultsContainer: React.FC = () => {
             productCode: selectedItem.code,
             fromDate: selectedItem.fromDate,
             toDate: selectedItem.toDate,
-            includeFlights: context!.type === 'hotel-flight' ? true : false,
+            includeFlights: context!.type === PortalQsmType.AccommodationAndFlight ? true : false,
             includeHotels: true,
             includePaxTypes: true,
             checkExternalAvailability: true,
@@ -449,7 +467,7 @@ const SearchResultsContainer: React.FC = () => {
       {context && (
         <div className="search">
           <div className="search__container">
-            {context.type === 'flight' && (
+            {context.type === PortalQsmType.Flight && (
               <FlightSearchProvider tideConnection={context.tideConnection}>
                 <FlightResultsContainer isMobile={isMobile} />
                 <FlyIn
@@ -461,9 +479,12 @@ const SearchResultsContainer: React.FC = () => {
                 />
               </FlightSearchProvider>
             )}
-            {(context.type === 'hotel-flight' || context.type === 'hotel' || context.type === 'groupTour' || context.type === 'roundTrip') && (
+            {(context.type === PortalQsmType.AccommodationAndFlight ||
+              context.type === PortalQsmType.Accommodation ||
+              context.type === PortalQsmType.GroupTour ||
+              context.type === PortalQsmType.RoundTrip) && (
               <>
-                {context.type != 'hotel-flight' && context.showFilters && (
+                {context.type != PortalQsmType.AccommodationAndFlight && context.showFilters && (
                   <Filters
                     initialFilters={initialFilters}
                     filters={filters}
@@ -473,7 +494,7 @@ const SearchResultsContainer: React.FC = () => {
                     isLoading={isLoading}
                   />
                 )}
-                {context.type === 'hotel-flight' && (
+                {context.type === PortalQsmType.AccommodationAndFlight && (
                   <Itinerary isOpen={itineraryOpen} handleSetIsOpen={() => setItineraryOpen(!itineraryOpen)} isLoading={isLoading} />
                 )}
                 {/* ---------------- Results ---------------- */}
@@ -481,13 +502,13 @@ const SearchResultsContainer: React.FC = () => {
                   {isMobile && (
                     <div className="search__result-row">
                       <div className="search__results__actions">
-                        {context.type != 'hotel-flight' && context.showFilters && (
+                        {context.type != PortalQsmType.AccommodationAndFlight && context.showFilters && (
                           <div className="cta cta--filter" onClick={() => setFiltersOpen(true)}>
                             <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
                             {translations.SRP.FILTERS}
                           </div>
                         )}
-                        {context.type === 'hotel-flight' && (
+                        {context.type === PortalQsmType.AccommodationAndFlight && (
                           <div className="cta cta--filter" onClick={() => setItineraryOpen(true)}>
                             <Icon name="ui-calendar" className="mobile-filters-button__icon" height={16} />
                             {translations.SRP.SHOW_ITINERARY}
@@ -533,15 +554,15 @@ const SearchResultsContainer: React.FC = () => {
 
                     {context.showRoundTripResults && context.showMockup && <RoundTripResults />}
 
-                    {context.type === 'groupTour' && <GroupTourResults isLoading={isLoading} />}
+                    {context.type === PortalQsmType.GroupTour && <GroupTourResults isLoading={isLoading} />}
 
-                    {context.type === 'hotel-flight' && context.showFlightResults && bookingPackageDetails?.outwardFlights && (
+                    {context.type === PortalQsmType.AccommodationAndFlight && context.showFlightResults && bookingPackageDetails?.outwardFlights && (
                       <FlightResults flights={bookingPackageDetails?.outwardFlights} isDeparture={true} />
                     )}
 
                     {context.showHotelAccommodationResults && <HotelAccommodationResults isLoading={isLoading} />}
 
-                    {context.type === 'hotel-flight' && context.showFlightResults && bookingPackageDetails?.returnFlights && (
+                    {context.type === PortalQsmType.AccommodationAndFlight && context.showFlightResults && bookingPackageDetails?.returnFlights && (
                       <FlightResults flights={bookingPackageDetails?.returnFlights} isDeparture={false} />
                     )}
                   </div>