@qite/tide-booking-component 1.4.109 → 1.4.111

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

@@ -29,7 +29,8 @@ import {
   setInitialFlightFilters,
   resetFlightFilters,
   setFilters,
-  setInitialFilters
+  setInitialFilters,
+  setBookPackagingEntry
 } from '../../store/search-results-slice';
 import { FlyInType, SearchSeed, SortByType } from '../../types';
 import useMediaQuery from '../../../shared/utils/use-media-query-util';
@@ -58,7 +59,10 @@ import {
   PackagingFlightResponse,
   PackagingAccommodationResponse,
   FlightSearchResponseFlightSegment,
-  PackagingEntryLineFlightLine
+  PackagingEntryLineFlightLine,
+  PackagingEntryAddress,
+  PackagingEntryPax,
+  PackagingEntryRoom
 } from '@qite/tide-client';
 import { getDateFromParams, getNumberFromParams, getRoomsFromParams, getStringFromParams } from '../../../shared/utils/query-string-util';
 import { concat, first, isEmpty, last, range } from 'lodash';
@@ -99,7 +103,6 @@ import FullItinerary from '../itinerary/full-itinerary';
 import { getFlightKey } from '../../utils/flight-utils';
 import IndependentFlightOption from '../flight/flight-selection/independent-flight-option';
 import { Spinner } from '../../..';
-import { PackagingRequestBase } from '@qite/tide-client/build/types/booking-v2/request/packaging/packaging-request-base';
 import {
   selectSelectedCombinationFlight,
   selectSelectedOutward,
@@ -110,6 +113,11 @@ import {
   selectUniqueReturnFlights
 } from '../../store/search-results-selectors';
 import DayByDayExcursions from '../excursions/day-by-day-excursions';
+import BookPackagingEntry from '../book-packaging-entry';
+import { format } from 'date-fns';
+
+// TODO; fix import
+import { PackagingRequestBase } from '@qite/tide-client/build/types/booking-v2/request/packaging/packaging-request-base';
 
 type BuildPackagingEntryPartialArgs = {
   sourceEntry: PackagingEntry | null | undefined;
@@ -149,9 +157,9 @@ const SearchResultsContainer: React.FC = () => {
     editablePackagingEntry,
     transactionId,
     flyInType,
-    itinerary,
     packagingFlightResults,
-    confirmedExcursionsByDay
+    confirmedExcursionsByDay,
+    bookPackagingEntry
   } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
   const isMobile = useMediaQuery('(max-width: 1200px)');
@@ -165,6 +173,7 @@ const SearchResultsContainer: React.FC = () => {
   const [itineraryIsLoading, setItineraryIsLoading] = useState(false);
 
   const [itineraryOpen, setItineraryOpen] = useState(false);
+  const [isBookingConfirmation, setIsBookingConfirmation] = useState(false);
 
   const [selectedAccommodationSeed, setSelectedAccommodationSeed] = useState<SearchSeed | null>(null);
 
@@ -470,7 +479,6 @@ const SearchResultsContainer: React.FC = () => {
   const handleConfirmHotelSwap = () => {
     const updatedEntry = swapHotelInPackagingEntry();
     if (!updatedEntry) return;
-
     dispatch(setEditablePackagingEntry(updatedEntry));
     handleFlyInToggle(false);
   };
@@ -795,6 +803,14 @@ const SearchResultsContainer: React.FC = () => {
     if (context?.packagingEntry) {
       dispatch(setEditablePackagingEntry(structuredClone(context.packagingEntry)));
       dispatch(setTransactionId(context.packagingEntry.transactionId));
+
+      const params = new URLSearchParams(location.search);
+      const bookingConfirmation = getStringFromParams(params, 'bookingConfirmation');
+      console.log('bookingConfirmation', bookingConfirmation);
+      if (bookingConfirmation == 'true') {
+        setIsBookingConfirmation(true);
+        dispatch(setBookPackagingEntry(true));
+      }
     }
   }, [context?.packagingEntry]);
 
@@ -1109,7 +1125,6 @@ const SearchResultsContainer: React.FC = () => {
     });
 
     if (!nextEntry) return;
-
     dispatch(setEditablePackagingEntry(nextEntry));
 
     if (selectedCombinationFlight) {
@@ -1416,28 +1431,43 @@ const SearchResultsContainer: React.FC = () => {
     }
 
     let paxId = 0;
+    const pax: PackagingEntryPax[] = [];
+    const rooms: PackagingEntryRoom[] = [];
 
-    const pax =
-      seed.rooms?.flatMap((room, roomIndex) =>
-        room.pax.map((_, paxIndex) => ({
-          id: paxId++,
+    seed.rooms?.forEach((room, roomIndex) => {
+      const paxIds = room.pax.map((_, paxIndex) => {
+        const id = paxId++;
+
+        pax.push({
+          id,
           firstName: '',
           lastName: '',
           dateOfBirth: null,
           isMainBooker: roomIndex === 0 && paxIndex === 0
-        }))
-      ) ?? [];
+        });
+
+        return id;
+      });
+
+      rooms.push({
+        id: roomIndex,
+        paxIds
+      });
+    });
 
     return {
       language,
       transactionId,
       dossierNumber: '',
-      status: 0,
+      status: context?.entryStatus,
+      customStatusId: context?.customEntryStatusId,
       bookingDate: null,
       price: 0,
       depositAmount: 0,
       pax,
-      lines: []
+      rooms,
+      lines: [],
+      address: {} as PackagingEntryAddress
     } as PackagingEntry;
   };
 
@@ -1450,91 +1480,67 @@ const SearchResultsContainer: React.FC = () => {
     <div id="tide-booking" className="search__bg">
       {context && (
         <div className="search">
-          <div className="search__container">
-            {context.searchConfiguration.qsmType === PortalQsmType.Flight && (
-              <FlightSearchProvider tideConnection={context.tideConnection}>
-                <FlightResultsContainer isMobile={isMobile} />
-                <FlyIn
-                  srpType={context.searchConfiguration.qsmType}
-                  isOpen={flyInIsOpen}
-                  setIsOpen={handleFlyInToggle}
-                  onPanelRef={(el) => (panelRef.current = el)}
-                  detailsLoading={detailsIsLoading}
-                />
-              </FlightSearchProvider>
-            )}
-            {(context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight ||
-              context.searchConfiguration.qsmType === PortalQsmType.Accommodation ||
-              context.searchConfiguration.qsmType === PortalQsmType.GroupTour ||
-              context.searchConfiguration.qsmType === PortalQsmType.RoundTrip) && (
-              <>
-                {context.searchConfiguration.qsmType != PortalQsmType.AccommodationAndFlight && context.showFilters && (
-                  <Filters
-                    initialFilters={initialFilters}
-                    filters={filters}
-                    isOpen={filtersOpen}
-                    handleSetIsOpen={() => setFiltersOpen(!filtersOpen)}
-                    // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
-                    isLoading={isLoading}
-                    setFilters={(filters) => dispatch(setFilters(filters))}
-                    resetFilters={(filters) => dispatch(resetFilters(filters))}
+          {bookPackagingEntry ? (
+            <BookPackagingEntry activeSearchSeed={activeSearchSeed} isConfirmationPage={isBookingConfirmation} />
+          ) : (
+            <div className="search__container">
+              {context.searchConfiguration.qsmType === PortalQsmType.Flight && (
+                <FlightSearchProvider tideConnection={context.tideConnection}>
+                  <FlightResultsContainer isMobile={isMobile} />
+                  <FlyIn
+                    srpType={context.searchConfiguration.qsmType}
+                    isOpen={flyInIsOpen}
+                    setIsOpen={handleFlyInToggle}
+                    onPanelRef={(el) => (panelRef.current = el)}
+                    detailsLoading={detailsIsLoading}
+                    filtersOpen={filtersOpen}
                   />
-                )}
-                {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && (
-                  <Itinerary
-                    isOpen={itineraryOpen}
-                    handleSetIsOpen={() => setItineraryOpen(!itineraryOpen)}
-                    isLoading={pricesAreLoading}
-                    onEditAccommodation={handleEditAccommodation}
-                  />
-                )}
-                {/* ---------------- Results ---------------- */}
-                <div className="search__results">
-                  {isMobile && (
-                    <div className="search__result-row">
-                      <div className="search__results__actions">
-                        {context.searchConfiguration.qsmType != 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.searchConfiguration.qsmType === 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}
-                          </div>
-                        )}
-                      </div>
-                      {sortByTypes && sortByTypes.length > 0 && (
-                        <ItemPicker
-                          items={sortByTypes}
-                          selection={selectedSortType?.label || undefined}
-                          selectedSortByType={selectedSortType}
-                          label={translations.SRP.SORTBY}
-                          placeholder={translations.SRP.SORTBY}
-                          classModifier="travel-class-picker__items"
-                          valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
-                          onPick={(newSortKey, direction) => handleSortChange(newSortKey, direction)}
-                        />
-                      )}
-                    </div>
+                </FlightSearchProvider>
+              )}
+              {(context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight ||
+                context.searchConfiguration.qsmType === PortalQsmType.Accommodation ||
+                context.searchConfiguration.qsmType === PortalQsmType.GroupTour ||
+                context.searchConfiguration.qsmType === PortalQsmType.RoundTrip) && (
+                <>
+                  {context.searchConfiguration.qsmType != PortalQsmType.AccommodationAndFlight && context.showFilters && (
+                    <Filters
+                      initialFilters={initialFilters}
+                      filters={filters}
+                      isOpen={filtersOpen}
+                      handleSetIsOpen={() => setFiltersOpen(!filtersOpen)}
+                      // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
+                      isLoading={isLoading}
+                      setFilters={(filters) => dispatch(setFilters(filters))}
+                      resetFilters={(filters) => dispatch(resetFilters(filters))}
+                    />
                   )}
-                  {context.searchConfiguration.qsmType !== PortalQsmType.AccommodationAndFlight && (
-                    <div className="search__result-row">
-                      <span className="search__result-row-text">
-                        {!isLoading && (
-                          <>
-                            {context.searchConfiguration.qsmType === PortalQsmType.Accommodation &&
-                              filteredPackagingAccoResults?.length &&
-                              filteredPackagingAccoResults?.length}
-                            {context.searchConfiguration.qsmType !== PortalQsmType.Accommodation && filteredResults?.length && filteredResults.length}
-                            &nbsp;{translations.SRP.TOTAL_RESULTS_LABEL}
-                          </>
-                        )}
-                      </span>
-                      {!context.packagingEntry && !isMobile && sortByTypes && sortByTypes.length > 0 && (
-                        <div className="search__result-row-filter">
+                  {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && (
+                    <Itinerary
+                      isOpen={itineraryOpen}
+                      handleSetIsOpen={() => setItineraryOpen(!itineraryOpen)}
+                      isLoading={isLoading || pricesAreLoading || flightsLoading || itineraryIsLoading}
+                      onEditAccommodation={handleEditAccommodation}
+                    />
+                  )}
+                  {/* ---------------- Results ---------------- */}
+                  <div className="search__results">
+                    {isMobile && (
+                      <div className="search__result-row">
+                        <div className="search__results__actions">
+                          {context.searchConfiguration.qsmType != 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.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && (
+                            <div className="cta cta--filter" onClick={() => setItineraryOpen(true)}>
+                              <Icon name="ui-shopping-cart" className="mobile-filters-button__icon" height={16} />
+                              {translations.SRP.VIEW_BOOKING}
+                            </div>
+                          )}
+                        </div>
+                        {sortByTypes && sortByTypes.length > 0 && (
                           <ItemPicker
                             items={sortByTypes}
                             selection={selectedSortType?.label || undefined}
@@ -1545,139 +1551,196 @@ const SearchResultsContainer: React.FC = () => {
                             valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
                             onPick={(newSortKey, direction) => handleSortChange(newSortKey, direction)}
                           />
-                        </div>
-                      )}
-                    </div>
-                  )}
+                        )}
+                      </div>
+                    )}
+                    {context.searchConfiguration.qsmType !== PortalQsmType.AccommodationAndFlight && (
+                      <div className="search__result-row">
+                        <span className="search__result-row-text">
+                          {!isLoading && (
+                            <>
+                              {context.searchConfiguration.qsmType === PortalQsmType.Accommodation &&
+                                filteredPackagingAccoResults?.length &&
+                                filteredPackagingAccoResults?.length}
+                              {context.searchConfiguration.qsmType !== PortalQsmType.Accommodation && filteredResults?.length && filteredResults.length}
+                              &nbsp;{translations.SRP.TOTAL_RESULTS_LABEL}
+                            </>
+                          )}
+                        </span>
+                        {!context.packagingEntry && !isMobile && sortByTypes && sortByTypes.length > 0 && (
+                          <div className="search__result-row-filter">
+                            <ItemPicker
+                              items={sortByTypes}
+                              selection={selectedSortType?.label || undefined}
+                              selectedSortByType={selectedSortType}
+                              label={translations.SRP.SORTBY}
+                              placeholder={translations.SRP.SORTBY}
+                              classModifier="travel-class-picker__items"
+                              valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
+                              onPick={(newSortKey, direction) => handleSortChange(newSortKey, direction)}
+                            />
+                          </div>
+                        )}
+                      </div>
+                    )}
 
-                  <div className="search__results__wrapper">
-                    {context.showTabViews &&
-                      (context.searchConfiguration.qsmType === PortalQsmType.GroupTour ||
-                        context.searchConfiguration.qsmType === PortalQsmType.Accommodation) && <TabViews />}
+                    <div className="search__results__wrapper">
+                      {context.showTabViews &&
+                        (context.searchConfiguration.qsmType === PortalQsmType.GroupTour ||
+                          context.searchConfiguration.qsmType === PortalQsmType.Accommodation) && <TabViews />}
 
-                    {context.showRoundTripResults && context.showMockup && <RoundTripResults />}
+                      {context.showRoundTripResults && context.showMockup && <RoundTripResults />}
 
-                    {context.searchConfiguration.qsmType === PortalQsmType.GroupTour && <GroupTourResults isLoading={isLoading} />}
+                      {context.searchConfiguration.qsmType === PortalQsmType.GroupTour && <GroupTourResults isLoading={isLoading} />}
 
-                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && context.showFlightResults && (
-                      <>
-                        <div className="search__results__label search__results__label--secondary">
-                          <div className="search__results__label__date">
-                            <Icon name="ui-flight" height={16} fill="white" />
-                          </div>
-                          <div className="search__results__label__text">
-                            <h3>
-                              {translations.SRP.SELECT} <strong> {translations.SRP.DEPARTURE}</strong>
-                            </h3>
-                          </div>
-                        </div>
+                      {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && context.showFlightResults && (
+                        <>
+                          <div className="search__results__label search__results__label--secondary">
+                            <div className="search__results__label__date">
+                              {(() => {
+                                const firstResultDate = uniqueOutwardFlights.length > 0 ? uniqueOutwardFlights[0].outward.segments[0].departureDateTime : null;
 
-                        {flightsLoading ? (
-                          <Spinner />
-                        ) : (
-                          <>
-                            <div className="search__results__cards search__results__cards--extended">
-                              {selectedOutwardKey && selectedOutward && (
-                                <IndependentFlightOption
-                                  key={`flight-${selectedOutwardKey}`}
-                                  item={selectedOutward.outward}
-                                  guid={selectedOutward.outwardGuid}
-                                  onSelect={() => dispatch(setSelectedOutwardKey(null))}
-                                  selectedGuid={selectedOutward.outwardGuid}
-                                  isOutward={true}
-                                  showSelectedState={true}
-                                  price={selectedOutward.price}
-                                />
-                              )}
-                              {visibleOutwardFlights.map((result) => (
-                                <IndependentFlightOption
-                                  key={`flight-${result.outwardGuid}`}
-                                  item={result.outward}
-                                  onSelect={() => dispatch(setSelectedOutwardKey(getFlightKey(result.outward.segments)))}
-                                  guid={result.outwardGuid}
-                                  isOutward={true}
-                                  price={result.price}
-                                  currentSelectedPrice={selectedOutward?.price}
-                                />
-                              ))}
+                                const firstResultDay = firstResultDate ? format(firstResultDate, 'd') : null;
+                                const firstResultMonth = firstResultDate ? format(firstResultDate, 'MMM') : null;
+
+                                return (
+                                  <>
+                                    <p className="search__results__label__date-date">{firstResultDay}</p>
+                                    <p>{firstResultMonth}</p>
+                                  </>
+                                );
+                              })()}
                             </div>
-                            {uniqueOutwardFlights && uniqueOutwardFlights.length > 3 && (
-                              <div className="search__results__cards__actions">
-                                <button className="cta cta--secondary" onClick={() => handleShowMoreFlights('flight-outward-results')}>
-                                  {translations.SRP.SHOW_MORE}
-                                </button>
+                            <div className="search__results__label__text">
+                              <Icon name="ui-flight" height={16} />
+                              <h3>
+                                {translations.SRP.SELECT} <strong> {translations.SRP.DEPARTURE}</strong>
+                              </h3>
+                            </div>
+                          </div>
+
+                          {flightsLoading ? (
+                            <Spinner label={translations.SRP.LOADING_FLIGHTS} />
+                          ) : (
+                            <>
+                              <div className="search__results__cards search__results__cards--extended">
+                                {selectedOutwardKey && selectedOutward && (
+                                  <IndependentFlightOption
+                                    key={`flight-${selectedOutwardKey}`}
+                                    item={selectedOutward.outward}
+                                    guid={selectedOutward.outwardGuid}
+                                    onSelect={() => dispatch(setSelectedOutwardKey(null))}
+                                    selectedGuid={selectedOutward.outwardGuid}
+                                    isOutward={true}
+                                    showSelectedState={true}
+                                    price={selectedOutward.price}
+                                  />
+                                )}
+                                {visibleOutwardFlights.map((result) => (
+                                  <IndependentFlightOption
+                                    key={`flight-${result.outwardGuid}`}
+                                    item={result.outward}
+                                    onSelect={() => dispatch(setSelectedOutwardKey(getFlightKey(result.outward.segments)))}
+                                    guid={result.outwardGuid}
+                                    isOutward={true}
+                                    price={result.price}
+                                    currentSelectedPrice={selectedOutward?.price}
+                                  />
+                                ))}
                               </div>
-                            )}
-                          </>
-                        )}
-                      </>
-                    )}
+                              {uniqueOutwardFlights && uniqueOutwardFlights.length > 3 && (
+                                <div className="search__results__cards__actions">
+                                  <button className="cta cta--secondary" onClick={() => handleShowMoreFlights('flight-outward-results')}>
+                                    {translations.SRP.SHOW_MORE}
+                                  </button>
+                                </div>
+                              )}
+                            </>
+                          )}
+                        </>
+                      )}
 
-                    {context.showHotelAccommodationResults && !context.packagingEntry && <HotelAccommodationResults isLoading={isLoading} />}
+                      {context.showHotelAccommodationResults && !context.packagingEntry && <HotelAccommodationResults isLoading={isLoading} />}
 
-                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && <DayByDayExcursions />}
+                      {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && <DayByDayExcursions />}
 
-                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && context.showFlightResults && (
-                      <>
-                        <div className="search__results__label search__results__label--secondary">
-                          <div className="search__results__label__date">
-                            <Icon name="ui-flight" height={16} fill="white" />
-                          </div>
-                          <div className="search__results__label__text">
-                            <h3>
-                              {translations.SRP.SELECT} <strong> {translations.SRP.RETURN}</strong>
-                            </h3>
+                      {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && !context.packagingEntry && context.showFlightResults && (
+                        <>
+                          <div className="search__results__label search__results__label--secondary">
+                            <div className="search__results__label__date">
+                              {(() => {
+                                const firstResultDate = uniqueReturnFlights.length > 0 ? uniqueReturnFlights[0].return.segments[0].departureDateTime : null;
+
+                                const firstResultDay = firstResultDate ? format(firstResultDate, 'd') : null;
+                                const firstResultMonth = firstResultDate ? format(firstResultDate, 'MMM') : null;
+
+                                return (
+                                  <>
+                                    <p className="search__results__label__date-date">{firstResultDay}</p>
+                                    <p>{firstResultMonth}</p>
+                                  </>
+                                );
+                              })()}
+                            </div>
+                            <div className="search__results__label__text">
+                              <Icon name="ui-flight" height={16} />
+                              <h3>
+                                {translations.SRP.SELECT} <strong> {translations.SRP.RETURN}</strong>
+                              </h3>
+                            </div>
                           </div>
-                        </div>
 
-                        <div className="search__results__cards search__results__cards--extended">
-                          {selectedReturnKey && selectedReturn && (
-                            <IndependentFlightOption
-                              key={`flight-${selectedReturnKey}`}
-                              item={selectedReturn.return}
-                              guid={selectedReturn.outwardGuid}
-                              selectedGuid={selectedReturn.outwardGuid}
-                              isOutward={false}
-                              showSelectedState={true}
-                              price={selectedReturn.price}
-                            />
-                          )}
-                          {uniqueReturnFlights.map((result) => (
-                            <IndependentFlightOption
-                              key={`flight-${result.outwardGuid}`}
-                              item={result.return}
-                              onSelect={() => dispatch(setSelectedReturnKey(getFlightKey(result.return.segments)))}
-                              guid={result.outwardGuid}
-                              isOutward={false}
-                              currentSelectedPrice={selectedReturn?.price}
-                              price={result.price}
-                            />
-                          ))}
-                        </div>
-                      </>
-                    )}
+                          <div className="search__results__cards search__results__cards--extended">
+                            {selectedReturnKey && selectedReturn && (
+                              <IndependentFlightOption
+                                key={`flight-${selectedReturnKey}`}
+                                item={selectedReturn.return}
+                                guid={selectedReturn.outwardGuid}
+                                selectedGuid={selectedReturn.outwardGuid}
+                                isOutward={false}
+                                showSelectedState={true}
+                                price={selectedReturn.price}
+                              />
+                            )}
+                            {uniqueReturnFlights.map((result) => (
+                              <IndependentFlightOption
+                                key={`flight-${result.outwardGuid}`}
+                                item={result.return}
+                                onSelect={() => dispatch(setSelectedReturnKey(getFlightKey(result.return.segments)))}
+                                guid={result.outwardGuid}
+                                isOutward={false}
+                                currentSelectedPrice={selectedReturn?.price}
+                                price={result.price}
+                              />
+                            ))}
+                          </div>
+                        </>
+                      )}
 
-                    {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.packagingEntry && (
-                      <FullItinerary isLoading={itineraryIsLoading} />
-                    )}
+                      {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && context.packagingEntry && (
+                        <FullItinerary isLoading={itineraryIsLoading} />
+                      )}
+                    </div>
                   </div>
-                </div>
-                {/* <button onClick={() => handleFlyInToggle(!flyInIsOpen)}>Toggle FlyIn</button> */}
-                <FlyIn
-                  srpType={context.searchConfiguration.qsmType}
-                  isOpen={flyInIsOpen}
-                  setIsOpen={handleFlyInToggle}
-                  handleConfirm={() => handleConfirmHotelSwap()}
-                  onPanelRef={(el) => (panelRef.current = el)}
-                  detailsLoading={detailsIsLoading}
-                  flyInType={flyInType}
-                  isPackageEditFlow={!!context.packagingEntry}
-                  sortByTypes={sortByTypes}
-                  activeSearchSeed={activeSearchSeed}
-                />
-              </>
-            )}
-          </div>
+                  {/* <button onClick={() => handleFlyInToggle(!flyInIsOpen)}>Toggle FlyIn</button> */}
+                  <FlyIn
+                    srpType={context.searchConfiguration.qsmType}
+                    isOpen={flyInIsOpen}
+                    setIsOpen={handleFlyInToggle}
+                    handleConfirm={() => handleConfirmHotelSwap()}
+                    onPanelRef={(el) => (panelRef.current = el)}
+                    detailsLoading={detailsIsLoading}
+                    flyInType={flyInType}
+                    isPackageEditFlow={!!context.packagingEntry}
+                    sortByTypes={sortByTypes}
+                    activeSearchSeed={activeSearchSeed}
+                    toggleFilters={() => setFiltersOpen(!filtersOpen)}
+                    filtersOpen={filtersOpen}
+                  />
+                </>
+              )}
+            </div>
+          )}
         </div>
       )}
     </div>

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

@@ -2,13 +2,21 @@ import React, { useContext } from 'react';
 import SearchResultsConfigurationContext from '../../search-results-configuration-context';
 import { getTranslations } from '../../../shared/utils/localization-util';
 
-const Spinner: React.FC = () => {
+type SpinnerProps = {
+  label?: string;
+};
+
+const Spinner: React.FC<SpinnerProps> = ({ label }) => {
   const context = useContext(SearchResultsConfigurationContext);
   const translations = getTranslations(context?.languageCode ?? 'en-GB');
   return (
-    <div className="spinner__container">
-      <span className="spinner__icon" />
-      <span className="spinner__label">{translations?.SRP.LOADING}</span>
+    <div className="loader__container">
+      <div className="loader__line">
+        <li className="loader__ball loader__ball--1"></li>
+        <li className="loader__ball loader__ball--2"></li>
+        <li className="loader__ball loader__ball--3"></li>
+      </div>
+      <div data-text={label ?? translations.SRP.LOADING} className="loader__line__text"></div>
     </div>
   );
 };