@qite/tide-booking-component 1.4.98 → 1.4.99

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

@@ -1,8 +1,10 @@
 import React from 'react';
+import { PackagingEntryLine } from '@qite/tide-client';
 interface ItineraryProps {
   isOpen: boolean;
   handleSetIsOpen: () => void;
   isLoading?: boolean;
+  onEditAccommodation?: (segments: PackagingEntryLine[]) => void;
 }
 declare const Itinerary: React.FC<ItineraryProps>;
 export default Itinerary;

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

@@ -1,5 +1,5 @@
-import { ExtendedFlightSearchResponseItem, Filter, SortByType } from '../types';
-import { BookingPackage, BookingPackageItem, EntryLight, PackagingAccommodationResponse } from '@qite/tide-client/build/types';
+import { AccommodationFlyInStep, ExtendedFlightSearchResponseItem, Filter, SortByType } from '../types';
+import { BookingPackage, BookingPackageItem, PackagingAccommodationResponse, PackagingEntry } from '@qite/tide-client/build/types';
 export interface SearchResultsState {
   results: BookingPackageItem[];
   filteredResults: BookingPackageItem[];
@@ -11,13 +11,15 @@ export interface SearchResultsState {
   selectedFlight: ExtendedFlightSearchResponseItem | null;
   selectedFlightDetails: ExtendedFlightSearchResponseItem | null;
   bookingPackageDetails: BookingPackage | null;
-  entry: EntryLight | null;
   isLoading: boolean;
   filters: Filter[];
   selectedSortType: SortByType | null;
   activeTab: string | null;
   currentPage: number;
   flyInIsOpen: boolean;
+  editablePackagingEntry: PackagingEntry | null;
+  transactionId: string | null;
+  accommodationFlyInStep: AccommodationFlyInStep;
 }
 export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setResults'>,
   setFilteredResults: import('@reduxjs/toolkit').ActionCreatorWithPayload<BookingPackageItem[], 'searchResults/setFilteredResults'>,
@@ -43,12 +45,6 @@ export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPay
     },
     'searchResults/setBookingPackageDetails'
   >,
-  setEntry: import('@reduxjs/toolkit').ActionCreatorWithPayload<
-    {
-      entry: EntryLight;
-    },
-    'searchResults/setEntry'
-  >,
   selectFlight: import('@reduxjs/toolkit').ActionCreatorWithPayload<
     {
       flightOptionId: string;
@@ -63,6 +59,9 @@ export declare const setResults: import('@reduxjs/toolkit').ActionCreatorWithPay
   setActiveTab: import('@reduxjs/toolkit').ActionCreatorWithPayload<string | null, 'searchResults/setActiveTab'>,
   setCurrentPage: import('@reduxjs/toolkit').ActionCreatorWithPayload<number, 'searchResults/setCurrentPage'>,
   resetSearchState: import('@reduxjs/toolkit').ActionCreatorWithoutPayload<'searchResults/resetSearchState'>,
-  setFlyInIsOpen: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, 'searchResults/setFlyInIsOpen'>;
+  setFlyInIsOpen: import('@reduxjs/toolkit').ActionCreatorWithPayload<boolean, 'searchResults/setFlyInIsOpen'>,
+  setEditablePackagingEntry: import('@reduxjs/toolkit').ActionCreatorWithPayload<PackagingEntry | null, 'searchResults/setEditablePackagingEntry'>,
+  setTransactionId: import('@reduxjs/toolkit').ActionCreatorWithPayload<string | null, 'searchResults/setTransactionId'>,
+  setAccommodationFlyInStep: import('@reduxjs/toolkit').ActionCreatorWithPayload<AccommodationFlyInStep, 'searchResults/setAccommodationFlyInStep'>;
 declare const _default: import('@reduxjs/toolkit').Reducer<SearchResultsState>;
 export default _default;

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

@@ -1,4 +1,10 @@
-import { BookingPackage, FlightSearchResponseItem, PackagingEntry, WebsiteConfigurationSearchConfiguration } from '@qite/tide-client';
+import {
+  BookingPackage,
+  BookingPackageRequestRoom,
+  FlightSearchResponseItem,
+  PackagingEntry,
+  WebsiteConfigurationSearchConfiguration
+} from '@qite/tide-client';
 import { ReactNode } from 'react';
 export type FlightSelectionMode = 'paired' | 'independent';
 export interface SearchResultsConfiguration {
@@ -143,3 +149,19 @@ export interface TideTag {
   id: number;
   name: string;
 }
+export type SearchSeed = {
+  fromDate: string;
+  toDate: string;
+  country?: number | null;
+  region?: number | null;
+  oord?: number | null;
+  location?: number | null;
+  hotel?: number | null;
+  hotelCode?: string | null;
+  tagId?: number | null;
+  departureAirport?: string | null;
+  returnAirport?: string | null;
+  destinationAirport?: string | null;
+  rooms: BookingPackageRequestRoom[];
+};
+export type AccommodationFlyInStep = 'results' | 'details';

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

@@ -0,0 +1,7 @@
+import { BookingPackageRequestRoom, PackagingAccommodationResponse, PackagingEntry, PackagingEntryLine } from '@qite/tide-client';
+export declare const getSelectedOptionsPerRoom: (details: PackagingAccommodationResponse[]) => {
+  roomIndex: number;
+  option: import('@qite/tide-client').PackageMainOption;
+}[];
+export declare const getRoomIndexFromLine: (line: PackagingEntryLine) => number;
+export declare const getRequestRoomsFromPackagingSegments: (entry: PackagingEntry, segments: PackagingEntryLine[]) => BookingPackageRequestRoom[];

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

@@ -0,0 +1,11 @@
+import { PackagingEntryLine, PackagingEntry, BookingPackageRequestRoom, PackagingRoom } from '@qite/tide-client';
+export declare const GROUP_TOUR_SERVICE_TYPE = 1;
+export declare const ACCOMMODATION_SERVICE_TYPE = 3;
+export declare const FLIGHT_SERVICE_TYPE = 7;
+export declare const toDateOnlyString: (value: string | Date) => string;
+export declare const getPrimaryAccommodationLine: (lines: PackagingEntryLine[]) => PackagingEntryLine | undefined;
+export declare const getDepartureAirportFromEntry: (lines: PackagingEntryLine[]) => string | null;
+export declare const getDestinationAirportFromEntry: (lines: PackagingEntryLine[]) => string | null;
+export declare const getRequestRoomsFromPackagingEntry: (entry: PackagingEntry) => BookingPackageRequestRoom[];
+export declare const parseHotelId: (line?: PackagingEntryLine) => number | null;
+export declare const getPackagingRequestRoomsFromBookingRooms: (rooms: BookingPackageRequestRoom[] | null) => PackagingRoom[];

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

@@ -1,8 +1,7 @@
 import React from 'react';
 type AccommodationFlyInProps = {
   isLoading: boolean;
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
+  handleConfirm: () => void;
 };
 declare const AccommodationFlyIn: React.FC<AccommodationFlyInProps>;
 export default AccommodationFlyIn;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { PortalQsmType } from '@qite/tide-client';
+import { AccommodationFlyInStep } from '../../../search-results/types';
 type FlyInProps = {
   title: string;
   srpType: PortalQsmType;
@@ -8,6 +9,9 @@ type FlyInProps = {
   className?: string;
   onPanelRef?: (el: HTMLDivElement | null) => void;
   detailsLoading: boolean;
+  handleConfirm?: () => void;
+  accommodationStep?: AccommodationFlyInStep;
+  isPackageEditFlow?: boolean;
 };
 declare const FlyIn: React.FC<FlyInProps>;
 export default FlyIn;

package/build/build-esm/src/shared/utils/localization-util.d.ts

@@ -134,6 +134,7 @@ export declare const getTranslations: (language: string) => {
     FLIGHT_ARRIVAL: string;
     ON_REQUEST: string;
     CHANGES: string;
+    COMMISSION: string;
   };
   TRAVELERS_FORM: {
     AGE: string;

package/package.json

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

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

@@ -77,7 +77,6 @@ const SearchInputGroup: React.FC<Props> = ({
   );
 
   useEffect(() => {
-    console.log('options updated, resetting loading state');
     setIsLoading(false);
   }, [options]);
 

package/src/search-results/components/itinerary/index.tsx

@@ -1,22 +1,21 @@
 import React, { useContext, useMemo } from 'react';
 import { differenceInCalendarDays, format } from 'date-fns';
-import { first, isEmpty, last } from 'lodash';
+import { first, groupBy, isEmpty, last } from 'lodash';
 import { PackagingEntryLine, PackagingEntryLineFlightLine } from '@qite/tide-client';
-
 import Icon from '../icon';
-import Spinner from '../spinner/spinner';
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
 import { formatPrice, getTranslations } from '../../../shared/utils/localization-util';
+import { useSelector } from 'react-redux';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { ACCOMMODATION_SERVICE_TYPE, FLIGHT_SERVICE_TYPE } from '../../utils/query-utils';
 
 interface ItineraryProps {
   isOpen: boolean;
   handleSetIsOpen: () => void;
   isLoading?: boolean;
+  onEditAccommodation?: (segments: PackagingEntryLine[]) => void;
 }
 
-const FLIGHT_SERVICE_TYPE = 7;
-const ACCOMMODATION_SERVICE_TYPE = 3;
-
 const getFlightLines = (flight?: PackagingEntryLine): PackagingEntryLineFlightLine[] => {
   return flight?.flightInformation?.flightLines ?? [];
 };
@@ -57,30 +56,57 @@ const numberOfNights = (segment: PackagingEntryLine) => {
 const getSegmentIcon = (segment: PackagingEntryLine) => {
   switch (segment.serviceType) {
     case 3:
-      return <Icon name="ui-bed" width={15} height={15} />;
+      return (
+        <div className="search__filter__itinerary__segment-badge search__filter__itinerary__segment-badge--secondary">
+          <Icon name="ui-bed" width={15} height={15} />
+        </div>
+      );
     case 4:
-      return <Icon name="ui-ticket" width={15} height={15} />;
+      return (
+        <div className="search__filter__itinerary__segment-badge search__filter__itinerary__segment-badge--secondary">
+          <Icon name="ui-ticket" width={15} height={15} />
+        </div>
+      );
     case 11:
-      return <Icon name="ui-ship" width={15} height={15} />;
+      return (
+        <div className="search__filter__itinerary__segment-badge search__filter__itinerary__segment-badge--secondary">
+          <Icon name="ui-ship" width={15} height={15} />
+        </div>
+      );
     case 13:
     case 17:
     case 22:
-      return <Icon name="ui-car" width={15} height={15} />;
+      return (
+        <div className="search__filter__itinerary__transport-badge">
+          <Icon name="ui-car" width={15} height={15} />
+        </div>
+      );
     default:
-      return <Icon name="ui-location" width={15} height={15} />;
+      return (
+        <div className="search__filter__itinerary__segment-badge">
+          <Icon name="ui-location" width={15} height={15} />
+        </div>
+      );
+  }
+};
+
+const canEdit = (segment: PackagingEntryLine) => {
+  if (segment.serviceType === ACCOMMODATION_SERVICE_TYPE) {
+    return true;
   }
+  return false;
 };
 
 const getSegmentTitle = (segment: PackagingEntryLine) => {
-  if (segment.accommodationName) return segment.accommodationName;
-  return segment.productName;
+  return segment.productName ?? segment.accommodationName;
 };
 
-const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoading }) => {
+const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoading, onEditAccommodation }) => {
   const context = useContext(SearchResultsConfigurationContext);
   const translations = getTranslations(context?.languageCode ?? 'en-GB');
+  const { editablePackagingEntry } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
-  const packagingEntry = context?.packagingEntry;
+  const packagingEntry = editablePackagingEntry ?? context?.packagingEntry;
 
   const sortedLines = useMemo(() => {
     return [...(packagingEntry?.lines ?? [])].sort((a, b) => {
@@ -114,8 +140,15 @@ const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoadin
   const returnFlight = flightSegments.length > 1 ? last(flightSegments) : undefined;
 
   const otherSegments = sortedLines.filter((item) => item.serviceType !== FLIGHT_SERVICE_TYPE);
-
-  console.log('other segments', otherSegments);
+  const grouped = groupBy(otherSegments, (segment) => {
+    return `${segment.productCode}-${segment.from}-${segment.to}`;
+  });
+  const groupedOtherSegments = Object.entries(grouped).map(([key, segments]) => ({
+    key,
+    segments
+  }));
+  console.log('otherSegments', otherSegments);
+  console.log('groupedOtherSegments', groupedOtherSegments);
 
   const numberOfPax = packagingEntry.pax?.length || 1;
   const totalPrice = packagingEntry.price || 0;
@@ -221,68 +254,97 @@ const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoadin
               </div>
             )}
 
-            {!isEmpty(otherSegments) && (
-              <div className="search__filter__itinerary__segments">
-                {otherSegments.map((segment, index) => (
-                  <div className="search__filter__itinerary__segments__wrapper" key={`segment-${index}`}>
-                    <div className="search__filter__itinerary__segments-timeline">
-                      <div className="search__filter__itinerary__segments-timeline-line"></div>
-                    </div>
+            {!isEmpty(groupedOtherSegments) &&
+              groupedOtherSegments.map((group) => {
+                const firstSegment = first(group.segments);
+                if (!firstSegment) return null;
 
-                    <div className="search__filter__itinerary__segment">
-                      <div className="search__filter__itinerary__segment-item search__filter__itinerary__segment-item--start">
-                        <div className="search__filter__itinerary__transport-date">
-                          <p className="search__filter__itinerary__transport-date-date">
-                            <strong>{format(new Date(segment.from), 'd')}</strong>
-                          </p>
-                          <p>{format(new Date(segment.from), 'MMM')}</p>
-                        </div>
-
-                        <div className="search__filter__itinerary__segment-badge">
-                          <Icon name="ui-location" width={15} height={15} />
-                        </div>
-
-                        <div className="search__filter__itinerary__segment-details">
-                          <h6>
-                            {segment.location?.name || segment.oord?.name || segment.region?.name}
-                            {(segment.location?.name || segment.oord?.name || segment.region?.name) && segment.country?.name ? ', ' : ''}
-                            {segment.country?.name}
-                          </h6>
-                          <p className="search__filter__itinerary__segment-details-text">
-                            {format(new Date(segment.from), 'EEE. d MMM yyyy')}
-                            &gt; {format(new Date(segment.to), 'EEE. d MMM yyyy')}
-                          </p>
-                        </div>
+                return (
+                  <div className="search__filter__itinerary__segments">
+                    <div className="search__filter__itinerary__segments__wrapper" key={group.key}>
+                      <div className="search__filter__itinerary__segments-timeline">
+                        <div className="search__filter__itinerary__segments-timeline-line"></div>
                       </div>
-                    </div>
 
-                    <div className="search__filter__itinerary__segment">
-                      <div className="search__filter__itinerary__segment-item">
-                        <div className="search__filter__itinerary__segment-date search__filter__itinerary__segment-nights">
-                          {segment.serviceType === ACCOMMODATION_SERVICE_TYPE && (
-                            <>
-                              <p className="search__filter__itinerary__segment-date-date">
-                                <strong>{numberOfNights(segment)}</strong>
-                              </p>
-                              <Icon name="ui-moon" width={16} height={16} />
-                            </>
-                          )}
-                        </div>
-
-                        <div className="search__filter__itinerary__segment-badge search__filter__itinerary__segment-badge--secondary">
-                          {getSegmentIcon(segment)}
+                      <div className="search__filter__itinerary__segment">
+                        <div className="search__filter__itinerary__segment-item search__filter__itinerary__segment-item--start">
+                          <div className="search__filter__itinerary__transport-date">
+                            <p className="search__filter__itinerary__transport-date-date">
+                              <strong>{format(new Date(firstSegment.from), 'd')}</strong>
+                            </p>
+                            <p>{format(new Date(firstSegment.from), 'MMM')}</p>
+                          </div>
+
+                          <div className="search__filter__itinerary__segment-badge">
+                            <Icon name="ui-location" width={15} height={15} />
+                          </div>
+
+                          <div className="search__filter__itinerary__segment-details">
+                            <h6>
+                              {firstSegment.location?.name || firstSegment.oord?.name || firstSegment.region?.name}
+                              {(firstSegment.location?.name || firstSegment.oord?.name || firstSegment.region?.name) && firstSegment.country?.name ? ', ' : ''}
+                              {firstSegment.country?.name}
+                            </h6>
+                            <p className="search__filter__itinerary__segment-details-text">
+                              {format(new Date(firstSegment.from), 'EEE. d MMM yyyy')}
+                              &gt; {format(new Date(firstSegment.to), 'EEE. d MMM yyyy')}
+                            </p>
+                          </div>
                         </div>
+                      </div>
 
-                        <div className="search__filter__itinerary__segment-details">
-                          <h6>{getSegmentTitle(segment)}</h6>
-                          {segment.regimeName && <p>{segment.regimeName}</p>}
+                      <div className="search__filter__itinerary__segment">
+                        <div
+                          className={`search__filter__itinerary__segment-item ${
+                            canEdit(firstSegment) ? 'search__filter__itinerary__segment-item--editable' : ''
+                          }`}
+                          onClick={() => {
+                            if (canEdit(firstSegment) && onEditAccommodation) {
+                              onEditAccommodation(group.segments);
+                            }
+                          }}>
+                          <div className="search__filter__itinerary__segment-date search__filter__itinerary__segment-nights">
+                            {firstSegment.serviceType === ACCOMMODATION_SERVICE_TYPE && (
+                              <>
+                                <p className="search__filter__itinerary__segment-date-date">
+                                  <strong>{numberOfNights(firstSegment)}</strong>
+                                </p>
+                                <Icon name="ui-moon" width={16} height={16} />
+                              </>
+                            )}
+                          </div>
+
+                          {getSegmentIcon(firstSegment)}
+
+                          <div className="search__filter__itinerary__segment-details">
+                            <h6>{getSegmentTitle(firstSegment)}</h6>
+                            {firstSegment.serviceType === ACCOMMODATION_SERVICE_TYPE &&
+                              group.segments.map((segment, index) => (
+                                <React.Fragment key={segment.guid}>
+                                  <strong>
+                                    {translations.SHARED.ROOM}&nbsp;{index + 1}
+                                  </strong>
+                                  {segment.productName && segment.accommodationName && (
+                                    <div className="search__filter__itinerary__segment-details__room">
+                                      <Icon name="ui-bed" width={12} height={12} />
+                                      {segment.accommodationName}
+                                    </div>
+                                  )}
+                                  {segment.regimeName && (
+                                    <div className="search__filter__itinerary__segment-details__room">
+                                      <Icon name="ui-utensils" width={12} height={12} />
+                                      {segment.regimeName}
+                                    </div>
+                                  )}
+                                </React.Fragment>
+                              ))}
+                          </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                ))}
-              </div>
-            )}
+                );
+              })}
 
             {returnFlight && returnFlight !== outboundFlight && (
               <div className="search__filter__itinerary__transport">