@qite/tide-booking-component 1.4.108 → 1.4.110

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

@@ -110,6 +110,8 @@ 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';
 
 type BuildPackagingEntryPartialArgs = {
   sourceEntry: PackagingEntry | null | undefined;
@@ -149,9 +151,9 @@ const SearchResultsContainer: React.FC = () => {
     editablePackagingEntry,
     transactionId,
     flyInType,
-    itinerary,
     packagingFlightResults,
-    confirmedExcursionsByDay
+    confirmedExcursionsByDay,
+    bookPackagingEntry
   } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
   const isMobile = useMediaQuery('(max-width: 1200px)');
@@ -1450,91 +1452,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))}
-                  />
-                )}
-                {context.searchConfiguration.qsmType === PortalQsmType.AccommodationAndFlight && (
-                  <Itinerary
-                    isOpen={itineraryOpen}
-                    handleSetIsOpen={() => setItineraryOpen(!itineraryOpen)}
-                    isLoading={pricesAreLoading}
-                    onEditAccommodation={handleEditAccommodation}
+          {bookPackagingEntry ? (
+            <BookPackagingEntry activeSearchSeed={activeSearchSeed} />
+          ) : (
+            <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}
                   />
-                )}
-                {/* ---------------- 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 +1523,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>
+                            <div className="search__results__label__text">
+                              <Icon name="ui-flight" height={16} />
+                              <h3>
+                                {translations.SRP.SELECT} <strong> {translations.SRP.DEPARTURE}</strong>
+                              </h3>
                             </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>
+
+                          {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>
   );
 };

package/src/search-results/store/search-results-slice.ts

@@ -56,6 +56,9 @@ export interface SearchResultsState {
   excursionSearchParams: ExcursionSearchParams | null;
   selectedExcursionSearchResult: PackagingAccommodationResponse | null;
   confirmedExcursionsByDay: Record<string, PackagingAccommodationResponse[]>;
+
+  bookPackagingEntry: boolean;
+  currentStep: number;
 }
 
 const initialState: SearchResultsState = {
@@ -103,7 +106,10 @@ const initialState: SearchResultsState = {
 
   excursionSearchParams: null,
   selectedExcursionSearchResult: null,
-  confirmedExcursionsByDay: {}
+  confirmedExcursionsByDay: {},
+
+  bookPackagingEntry: false,
+  currentStep: 0
 };
 
 const searchResultsSlice = createSlice({
@@ -280,6 +286,12 @@ const searchResultsSlice = createSlice({
     },
     clearConfirmedExcursionsForDay: (state, action: PayloadAction<{ dayKey: string }>) => {
       delete state.confirmedExcursionsByDay[action.payload.dayKey];
+    },
+    setBookPackagingEntry(state, action: PayloadAction<boolean>) {
+      state.bookPackagingEntry = action.payload;
+    },
+    setCurrentStep(state, action: PayloadAction<number>) {
+      state.currentStep = action.payload;
     }
   }
 });
@@ -325,7 +337,9 @@ export const {
   setSelectedExcursionSearchResult,
   confirmExcursionForDay,
   removeConfirmedExcursionForDay,
-  clearConfirmedExcursionsForDay
+  clearConfirmedExcursionsForDay,
+  setBookPackagingEntry,
+  setCurrentStep
 } = searchResultsSlice.actions;
 
 export default searchResultsSlice.reducer;

package/src/shared/booking/BookingPanel.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface BookingPanelProps {
+  currentStep: number;
+  stepLabels: string[];
+  renderTitle: (step: number) => React.ReactNode;
+  children: React.ReactNode;
+  StepIndicatorsComponent: React.ComponentType<{ currentStep: number; stepLabels: string[] }>;
+}
+
+const BookingPanel: React.FC<BookingPanelProps> = ({ currentStep, stepLabels, renderTitle, children, StepIndicatorsComponent }) => {
+  return (
+    <div className="booking__panel">
+      <StepIndicatorsComponent currentStep={currentStep} stepLabels={stepLabels} />
+      <div className="booking__panel-frame booking__panel-frame--transparent">
+        <div className="booking__panel-heading">
+          <h4 className="booking__panel-title">{renderTitle(currentStep)}</h4>
+        </div>
+        <div className="booking__panel-body">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default BookingPanel;