@qite/tide-booking-component 1.4.109 → 1.4.110

package/src/shared/booking/Sidebar.tsx

@@ -0,0 +1,432 @@
+import React, { useState } from 'react';
+import { formatPrice } from '../utils/localization-util';
+import { BookingPackageRoom, PackagingEntryLine, ServiceType } from '@qite/tide-client';
+import { buildClassName } from '../utils/class-util';
+import ProductCard from './product-card';
+import { compact, isEmpty } from 'lodash';
+import SidebarFlight from '../../booking-wizard/features/sidebar/sidebar-flight';
+import { getDatePeriodText, getPaxTypeTranslation } from '../../booking-wizard/features/sidebar/sidebar-util';
+import { PricePerPaxType } from '../../booking-wizard/types';
+
+interface SharedSidebarProps {
+  productName: string;
+  thumbnailUrl?: string;
+  isLoading?: boolean;
+  travelerRooms?: string[];
+  startDateText?: string;
+  endDateText?: string;
+  departureFlightMetaData?: any;
+  returnFlightMetaData?: any;
+  basePrice?: number;
+  commission?: number;
+  totalPrice?: number;
+  remainingAmountText?: string;
+  includedCosts?: any[];
+  extraCosts?: any[];
+  deposit?: number;
+  accommodations?: BookingPackageRoom[];
+  packagingAccommodations?: PackagingEntryLine[];
+  includedServiceTypes?: number[];
+  isOnRequest?: boolean;
+  headerComponent?: React.ReactNode;
+  footerComponent?: React.ReactNode;
+  loaderComponent?: React.ReactNode;
+  isUnavailable?: boolean;
+  basePricePerPaxType?: PricePerPaxType[];
+  seperateExtraPricePerPaxType?: PricePerPaxType[];
+  translations: any;
+  agent?: number;
+}
+
+const SharedSidebar: React.FC<SharedSidebarProps> = ({
+  productName,
+  thumbnailUrl,
+  isLoading,
+  translations,
+  headerComponent,
+  travelerRooms,
+  startDateText,
+  endDateText,
+  loaderComponent,
+  departureFlightMetaData,
+  returnFlightMetaData,
+  accommodations,
+  packagingAccommodations,
+  isOnRequest,
+  includedServiceTypes,
+  basePrice,
+  commission,
+  totalPrice,
+  includedCosts,
+  extraCosts,
+  deposit,
+  basePricePerPaxType,
+  seperateExtraPricePerPaxType,
+  isUnavailable,
+  agent,
+  footerComponent
+}) => {
+  if (!translations) return null;
+
+  const [active, setActive] = useState<boolean>(false);
+
+  const handleToggleClick = () => {
+    setActive(!active);
+  };
+
+  const isFlightOnly = includedServiceTypes?.length === 1 && includedServiceTypes.includes(ServiceType.flight);
+
+  const canShowPriceBreakdownSection = Boolean(basePrice && basePrice > 0) || !isEmpty(includedCosts) || !isEmpty(extraCosts);
+  const canShowTotalPriceSection = Boolean(totalPrice && totalPrice > 0);
+
+  const remainingAmount = Number(((totalPrice ?? 0) - (deposit ?? 0)).toFixed(2));
+
+  // TODO: Determine currency code based on the data, for now default to EUR
+  let currencyCode = 'EUR';
+
+  return (
+    <div className={buildClassName(['booking__sidebar', active && 'booking__sidebar--active'])}>
+      {headerComponent}
+
+      <div className="booking__sidebar-frame">
+        <ProductCard productName={productName} thumbnailUrl={thumbnailUrl} handleToggleClick={handleToggleClick} />
+        <div className="pricing-summary">
+          <div className="pricing-summary__wrapper">
+            <div className="pricing-summary__region pricing-summary__region--fade-in">
+              <div className="pricing-summary__group">
+                <h6 className="pricing-summary__title">{translations.SIDEBAR.TRAVEL_INFO}</h6>
+                {!isEmpty(travelerRooms) &&
+                  travelerRooms?.map((room, rIndex) => (
+                    <div className="pricing-summary__row" key={rIndex}>
+                      <div className="pricing-summary__property">
+                        {travelerRooms.length > 1 && `${translations.SHARED.ROOM} ${rIndex + 1}`}
+                        {travelerRooms.length === 1 && translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP}
+                      </div>
+
+                      <div className="pricing-summary__value">{room}</div>
+                    </div>
+                  ))}
+                {startDateText && (
+                  <div className="pricing-summary__row">
+                    <div className="pricing-summary__property">
+                      {startDateText && endDateText ? translations.SIDEBAR.DEPARTURE : translations.SIDEBAR.DEPARTURE_SINGLE}
+                    </div>
+                    <div className="pricing-summary__value">{startDateText}</div>
+                  </div>
+                )}
+
+                {endDateText && (
+                  <div className="pricing-summary__row">
+                    <div className="pricing-summary__property">{translations.SIDEBAR.ARRIVAL}</div>
+                    <div className="pricing-summary__value">{endDateText}</div>
+                  </div>
+                )}
+
+                {/* {lines.map((line: any, idx: number) => (
+                  <div className="pricing-summary__row" key={line.guid || idx}>
+                    <div className="pricing-summary__property">
+                      {line.serviceType === 3 && (
+                        <>
+                          {line.productName} <br />
+                          {line.accommodationName && <span>{line.accommodationName}</span>}
+                          <br />
+                          {line.from && line.to && (
+                            <span>
+                              {new Date(line.from).toLocaleDateString()} - {new Date(line.to).toLocaleDateString()}
+                            </span>
+                          )}
+                        </>
+                      )}
+                      {line.serviceType === 7 && line.flightInformation && (
+                        <>
+                          <strong>{line.productName}</strong>
+                          <br />
+                          {line.flightInformation.flightLines &&
+                            line.flightInformation.flightLines.map((flight: any, fIdx: number) => (
+                              <div key={fIdx} style={{ marginBottom: 4 }}>
+                                {flight.airlineDescription} {flight.flightNumber}
+                                <br />
+                                {flight.departureAirportDescription} ({flight.departureAirportCode}) {flight.departureTime} → {flight.arrivalAirportDescription}{' '}
+                                ({flight.arrivalAirportCode}) {flight.arrivalTime}
+                              </div>
+                            ))}
+                        </>
+                      )}
+                    </div>
+                  </div>
+                ))} */}
+              </div>
+              {isLoading && loaderComponent}
+
+              {!isLoading && departureFlightMetaData && (
+                <SidebarFlight title={translations.SIDEBAR.DEPARTURE_FLIGHT} flightMetaData={departureFlightMetaData} translations={translations} />
+              )}
+
+              {!isLoading && returnFlightMetaData && (
+                <SidebarFlight title={translations.SIDEBAR.ARRIVAL_FLIGHT} flightMetaData={returnFlightMetaData} translations={translations} />
+              )}
+
+              {accommodations && (
+                <div className="pricing-summary__group">
+                  <h6 className="pricing-summary__title">{translations.SIDEBAR.ACCOMMODATION}</h6>
+                  {accommodations.map((accommodation) => {
+                    let option = accommodation.options.find((x) => x.isSelected);
+                    return (
+                      <div key={accommodation.index}>
+                        <div className="pricing-summary__row">
+                          <div className="pricing-summary__property">
+                            {option?.accommodationName}
+                            {isOnRequest ? ` (${translations.SIDEBAR.ON_REQUEST})` : ''}
+                            {option?.isOnRequest ? ` (${translations.SIDEBAR.ON_REQUEST})` : ''}
+                          </div>
+                          {/*<div className="pricing-summary__value">
+                                            {option && option.price > 0 && formatPrice(option?.price)}
+                                          </div>*/}
+                        </div>
+                        <div className="pricing-summary__row">
+                          <div className="price-summarty__property">{option?.regimeName}</div>
+                          <div className="price-summary__value">{!isFlightOnly && getDatePeriodText(translations, option?.from, option?.to, true)}</div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+              {packagingAccommodations && (
+                <div className="pricing-summary__group">
+                  <h6 className="pricing-summary__title">{translations.SIDEBAR.ACCOMMODATION}</h6>
+                  {packagingAccommodations.map((accommodation) => {
+                    return (
+                      <div key={accommodation.guid}>
+                        <div className="pricing-summary__row">
+                          <div className="pricing-summary__property">
+                            {accommodation?.accommodationName}
+                            {isOnRequest ? ` (${translations.SIDEBAR.ON_REQUEST})` : ''}
+                          </div>
+                          {/*<div className="pricing-summary__value">
+                                            {option && option.price > 0 && formatPrice(option?.price)}
+                                          </div>*/}
+                        </div>
+                        <div className="pricing-summary__row">
+                          <div className="price-summarty__property">{accommodation?.regimeName}</div>
+                          <div className="price-summary__value">
+                            {!isFlightOnly && getDatePeriodText(translations, accommodation?.from, accommodation?.to, true)}
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+
+            {!isLoading && canShowPriceBreakdownSection && (
+              <div className={`pricing-summary__region ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
+                {basePrice !== undefined && basePrice > 0 && (
+                  <div className="pricing-summary__group">
+                    <div className="pricing-summary__row">
+                      <div className="pricing-summary__property">
+                        <h6 className="pricing-summary__title">{translations.SIDEBAR.BASE_PRICE}</h6>
+                      </div>
+                      <div className="pricing-summary__value">{formatPrice(basePrice, currencyCode)}</div>
+                    </div>
+                    {basePricePerPaxType &&
+                      basePricePerPaxType.map((ppt, index) => (
+                        <React.Fragment key={`${ppt.paxType}-${index}`}>
+                          <div className="pricing-summary__row">
+                            <div className="pricing-summary__property">
+                              {ppt.numberOfPax} {getPaxTypeTranslation(translations, ppt.paxType, ppt.numberOfPax)}
+                            </div>
+                            <div className="pricing-summary__value">{formatPrice(ppt.pricePerPaxType, currencyCode)}</div>
+                          </div>
+                          {ppt.details.map((detail, dIndex) => (
+                            <div className="pricing-summary__row pricing-summary__row--sub" key={`${ppt.paxType}-${index}-${dIndex}`}>
+                              <div className="pricing-summary__property">
+                                {detail.numberOfPax}x {detail.description}
+                              </div>
+                              <div className="pricing-summary__value">{formatPrice(detail.price / detail.numberOfPax, currencyCode)}</div>
+                            </div>
+                          ))}
+                        </React.Fragment>
+                      ))}
+                  </div>
+                )}
+                {!isEmpty(includedCosts) && (
+                  <div className="pricing-summary__group">
+                    <h6 className="pricing-summary__title">{translations.SIDEBAR.INCLUDED_COSTS}</h6>
+                    {includedCosts?.map((priceDetail, index) => (
+                      <React.Fragment key={compact([priceDetail.productCode, priceDetail.accommodationCode, index]).join('_')}>
+                        <div className="pricing-summary__row">
+                          <div className="pricing-summary__property">{priceDetail.productName}</div>
+                          {priceDetail.showPrice && (
+                            <div className="pricing-summary__value">{formatPrice(priceDetail.price * priceDetail.amount, currencyCode)}</div>
+                          )}
+                        </div>
+                        <div className="pricing-summary__row">
+                          <div className="price-summary__property">{priceDetail.accommodationName ?? priceDetail.accommodationCode}</div>
+                        </div>
+                      </React.Fragment>
+                    ))}
+                  </div>
+                )}
+                {!isEmpty(extraCosts) && (
+                  <div className="pricing-summary__group">
+                    <h6 className="pricing-summary__title">{translations.SIDEBAR.EXTRA_COSTS}</h6>
+                    {extraCosts?.map((priceDetail, index) => (
+                      <React.Fragment key={compact([priceDetail.productCode, priceDetail.accommodationCode, index]).join('_')}>
+                        <div className="pricing-summary__row">
+                          <div className="pricing-summary__property">{priceDetail.productName}</div>
+                          {priceDetail.showPrice && (
+                            <div className="pricing-summary__value">{formatPrice(priceDetail.price * priceDetail.amount, currencyCode)}</div>
+                          )}
+                        </div>
+                        <div className="pricing-summary__row">
+                          <div className="pricing-summary__property">{priceDetail.accommodationName ?? priceDetail.accommodationCode}</div>
+                        </div>
+                        {seperateExtraPricePerPaxType &&
+                          seperateExtraPricePerPaxType.map((ppt, index) => (
+                            <React.Fragment key={`${ppt.paxType}-${index}`}>
+                              <div className="pricing-summary__row">
+                                <div className="pricing-summary__property">
+                                  {ppt.numberOfPax} {getPaxTypeTranslation(translations, ppt.paxType, ppt.numberOfPax)}
+                                </div>
+                                <div className="pricing-summary__value">{formatPrice(ppt.pricePerPaxType, currencyCode)}</div>
+                              </div>
+                              {ppt.details.map((detail, dIndex) => (
+                                <div className="pricing-summary__row pricing-summary__row--sub" key={`${ppt.paxType}-${index}-${dIndex}`}>
+                                  <div className="pricing-summary__property">
+                                    {detail.numberOfPax}x {detail.description}
+                                  </div>
+                                  <div className="pricing-summary__value">{formatPrice(detail.price / detail.numberOfPax, currencyCode)}</div>
+                                </div>
+                              ))}
+                            </React.Fragment>
+                          ))}
+                      </React.Fragment>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {!isLoading && canShowTotalPriceSection && !isUnavailable && (
+              <div className={`pricing-summary__region pricing-summary__region--pricing ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
+                {deposit && remainingAmount > 0 ? (
+                  <div className="pricing-summary__group">
+                    {agent && (
+                      <div className="pricing-summary__row pricing-summary__row--total-price">
+                        <div className="pricing-summary__property">
+                          <h6 className="pricing-summary__title">{translations.SIDEBAR.COMMISSION}</h6>
+                        </div>
+                        <div className="pricing-summary__value">
+                          <div className="pricing">
+                            <div className="pricing__price">{formatPrice(commission ?? 0, currencyCode)}</div>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                    {totalPrice !== undefined && totalPrice > 0 && (
+                      <div className="pricing-summary__row pricing-summary__row--total-price">
+                        <div className="pricing-summary__property">
+                          <h6 className="pricing-summary__title">{translations.SHARED.TOTAL_PRICE}</h6>
+                        </div>
+                        <div className="pricing-summary__value">
+                          <div className="pricing">
+                            <div className="pricing__price">{formatPrice(totalPrice, currencyCode)}</div>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                    <div className="pricing-summary__row">
+                      <div className="pricing-summary__property">
+                        <h6 className="pricing-summary__title">{translations.SIDEBAR.DEPOSIT}</h6>
+                      </div>
+
+                      <div className="pricing-summary__value">
+                        <div className="pricing">
+                          <div className="pricing__price">{formatPrice(deposit, currencyCode)}</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="pricing-summary__row">
+                      <small>
+                        <em>
+                          {translations.SIDEBAR.DEPOSIT_TEXT1}
+                          <strong>{translations.SIDEBAR.DEPOSIT_TEXT2}</strong>
+                          {translations.SIDEBAR.DEPOSIT_TEXT3}
+                          {formatPrice(remainingAmount, currencyCode)}
+                          {translations.SIDEBAR.DEPOSIT_TEXT4}
+                          <strong>{translations.SIDEBAR.DEPOSIT_TEXT5}</strong>
+                          {translations.SIDEBAR.DEPOSIT_TEXT6}
+                        </em>
+                      </small>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="pricing-summary__group">
+                    {agent && (
+                      <div className="pricing-summary__row pricing-summary__row--total-price">
+                        <div className="pricing-summary__property">
+                          <h6 className="pricing-summary__title">{translations.SIDEBAR.COMMISSION}</h6>
+                        </div>
+                        <div className="pricing-summary__value">
+                          <div className="pricing">
+                            <div className="pricing__price">{formatPrice(commission ?? 0, currencyCode)}</div>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                    {totalPrice !== undefined && totalPrice > 0 && (
+                      <div className="pricing-summary__row pricing-summary__row--total-price">
+                        <div className="pricing-summary__property">
+                          <h6 className="pricing-summary__title">{translations.SHARED.TOTAL_PRICE}</h6>
+                        </div>
+
+                        <div className="pricing-summary__value">
+                          <div className="pricing">
+                            <div className="pricing__price">{formatPrice(totalPrice, currencyCode)}</div>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {footerComponent}
+
+            {/* <div className="pricing-summary__region pricing-summary__region--pricing pricing-summary__region--fade-in">
+              <div className="pricing-summary__group">
+                <div className="pricing-summary__row pricing-summary__row--total-price">
+                  <div className="pricing-summary__property">
+                    <h6 className="pricing-summary__title">{translations.SHARED.TOTAL_PRICE}</h6>
+                  </div>
+                  <div className="pricing-summary__value">
+                    <div className="pricing">
+                      <div className="pricing__price">{formatPrice(price || 0, 'EUR')}</div>
+                    </div>
+                  </div>
+                </div>
+                {depositAmount > 0 && (
+                  <div className="pricing-summary__row">
+                    <div className="pricing-summary__property">
+                      <h6 className="pricing-summary__title">{translations.SIDEBAR.DEPOSIT}</h6>
+                    </div>
+                    <div className="pricing-summary__value">
+                      <div className="pricing">
+                        <div className="pricing__price">{formatPrice(depositAmount, 'EUR')}</div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div> */}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SharedSidebar;

package/src/shared/booking/StepIndicators.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { buildClassName } from '../utils/class-util';
+
+interface StepIndicatorsProps {
+  currentStep: number;
+  stepLabels: string[];
+}
+
+const StepIndicators: React.FC<StepIndicatorsProps> = ({ currentStep, stepLabels }) => {
+  return (
+    <div className="step-indicators">
+      <div className="step-indicators__items">
+        {stepLabels.map((stepName, index) => (
+          <div
+            key={`${index + 1}-${stepName}`}
+            className={buildClassName([
+              'step-indicators__item',
+              currentStep === index && 'step-indicators__item--active',
+              currentStep > index && 'step-indicators__item--completed'
+            ])}>
+            <div className="step-indicators__icon">{index + 1}</div>
+            <div className="step-indicators__text">{stepName}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default StepIndicators;

package/src/shared/components/flyin/accommodation-flyin.tsx

@@ -43,14 +43,13 @@ const formatPrice = (price?: number, currencyCode?: string | null) => {
 const AccommodationFlyIn: React.FC<AccommodationFlyInProps> = ({ isLoading, handleConfirm }) => {
   const dispatch = useDispatch();
   const context = useContext(SearchResultsConfigurationContext);
+  const language = context?.languageCode ?? 'en-GB';
+  const translations = getTranslations(language);
 
   if (isLoading) {
-    return <>{context?.customSpinner ?? <Spinner />}</>;
+    return <>{context?.customSpinner ?? <Spinner label={translations.SRP.LOADING_ACCOMMODATIONS} />}</>;
   }
 
-  const language = context?.languageCode ?? 'en-GB';
-  const translations = getTranslations(language);
-
   const { packagingAccoSearchDetails, selectedPackagingAccoResultCode } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
   const selectedPackagingAccoSearchDetails = useMemo<PackagingAccommodationResponse | undefined>(() => {

package/src/shared/components/flyin/flights-flyin.tsx

@@ -151,7 +151,7 @@ const FlightsFlyIn: React.FC<FlightsFlyInProps> = ({ isOpen, setIsOpen }) => {
     <>
       <div className="flyin__content">
         {flightSearchDetailsLoading || isEmpty(flights) ? (
-          <Spinner />
+          <Spinner label={translations.SRP.LOADING_FLIGHTS} />
         ) : (
           flight && (
             <div className="flyin__content-text-row">

package/src/shared/components/flyin/flyin.tsx

@@ -38,6 +38,8 @@ type FlyInProps = {
   isPackageEditFlow?: boolean;
   sortByTypes?: SortByType[];
   activeSearchSeed?: SearchSeed | null;
+  toggleFilters?: () => void;
+  filtersOpen: boolean;
 };
 
 const FlyIn: React.FC<FlyInProps> = ({
@@ -51,7 +53,9 @@ const FlyIn: React.FC<FlyInProps> = ({
   isPackageEditFlow,
   handleConfirm,
   sortByTypes,
-  activeSearchSeed
+  activeSearchSeed,
+  toggleFilters,
+  filtersOpen
 }) => {
   const dispatch = useDispatch();
   const context = useContext(SearchResultsConfigurationContext);
@@ -166,8 +170,8 @@ const FlyIn: React.FC<FlyInProps> = ({
             <Filters
               initialFilters={initialFilters}
               filters={filters}
-              isOpen={false}
-              handleSetIsOpen={() => {}}
+              isOpen={filtersOpen}
+              handleSetIsOpen={() => toggleFilters && toggleFilters()}
               // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
               isLoading={isLoading}
               setFilters={(filters) => dispatch(setFilters(filters))}
@@ -183,6 +187,10 @@ const FlyIn: React.FC<FlyInProps> = ({
                     </>
                   )}
                 </span>
+                <div className="cta cta--filter" onClick={() => toggleFilters && toggleFilters()}>
+                  <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
+                  {translations.SRP.FILTERS}
+                </div>
                 {sortByTypes && sortByTypes.length > 0 && (
                   <div className="search__result-row-filter">
                     <ItemPicker
@@ -208,7 +216,7 @@ const FlyIn: React.FC<FlyInProps> = ({
         )}
 
         {srpType === PortalQsmType.AccommodationAndFlight && (flyInType === 'flight-outward-results' || flyInType === 'flight-return-results') && (
-          <PackageingFlightsFlyIn isOpen={isOpen} setIsOpen={setIsOpen} />
+          <PackageingFlightsFlyIn isOpen={isOpen} setIsOpen={setIsOpen} toggleFilters={toggleFilters} filtersOpen={filtersOpen} />
         )}
 
         {srpType === PortalQsmType.AccommodationAndFlight && flyInType === 'excursion-results' && (

package/src/shared/components/flyin/group-tour-flyin.tsx

@@ -36,14 +36,13 @@ const formatPrice = (price?: number, currencyCode = 'EUR') => {
 const GroupTourFlyIn: React.FC<GroupTourFlyInProps> = ({ isLoading, isOpen, setIsOpen }) => {
   const dispatch = useDispatch();
   const context = useContext(SearchResultsConfigurationContext);
+  const language = context?.languageCode ?? 'en-GB';
+  const translations = getTranslations(language);
 
   if (isLoading) {
-    return <>{context?.customSpinner ?? <Spinner />}</>;
+    return <>{context?.customSpinner ?? <Spinner label={translations.SRP.LOADING_OPTIONS} />}</>;
   }
 
-  const language = context?.languageCode ?? 'en-GB';
-  const translations = getTranslations(language);
-
   const { bookingPackageDetails } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
   const selectedBookingPackageDetails = useMemo<BookingPackageOption | undefined>(() => {

package/src/shared/components/flyin/packaging-flights-flyin.tsx

@@ -24,13 +24,16 @@ import IndependentFlightOption from '../../../search-results/components/flight/f
 import Filters from '../../../search-results/components/filters/filters';
 import { SortByType } from '../../../search-results/types';
 import ItemPicker from '../../../search-results/components/item-picker';
+import Icon from '../icon';
 
 type FlightsFlyInProps = {
   isOpen: boolean;
   setIsOpen: (open: boolean) => void;
+  toggleFilters?: () => void;
+  filtersOpen: boolean;
 };
 
-const PackageingFlightsFlyIn: React.FC<FlightsFlyInProps> = ({ isOpen, setIsOpen }) => {
+const PackageingFlightsFlyIn: React.FC<FlightsFlyInProps> = ({ isOpen, setIsOpen, toggleFilters, filtersOpen }) => {
   const context = useContext(SearchResultsConfigurationContext);
   const language = context?.languageCode ?? 'en-GB';
   const translations = getTranslations(language);
@@ -80,14 +83,14 @@ const PackageingFlightsFlyIn: React.FC<FlightsFlyInProps> = ({ isOpen, setIsOpen
     <>
       <div className="flyin__content flyin__content--columns">
         {flightsLoading ? (
-          <Spinner />
+          <Spinner label={translations.SRP.LOADING_FLIGHTS} />
         ) : (
           <>
             <Filters
               initialFilters={initialFlightFilters}
               filters={flightFilters}
-              isOpen={false}
-              handleSetIsOpen={() => {}}
+              isOpen={filtersOpen}
+              handleSetIsOpen={() => toggleFilters && toggleFilters()}
               // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
               isLoading={flightsLoading}
               setFilters={(filters) => dispatch(setFlightFilters(filters))}
@@ -99,6 +102,10 @@ const PackageingFlightsFlyIn: React.FC<FlightsFlyInProps> = ({ isOpen, setIsOpen
                   {uniqueOutwardFlights?.length && uniqueOutwardFlights.length}
                   &nbsp;{translations.FLIGHTS_FORM.FLIGHTS_FOUND_2}&nbsp;{translations.FLIGHTS_FORM.FLIGHTS_FOUND_3}
                 </span>
+                <div className="cta cta--filter" onClick={() => toggleFilters && toggleFilters()}>
+                  <Icon name="ui-filter" className="mobile-filters-button__icon" height={16} />
+                  {translations.SRP.FILTERS}
+                </div>
                 {sortByTypes && sortByTypes.length > 0 && (
                   <div className="search__result-row-filter">
                     <ItemPicker

package/src/shared/components/icon.tsx

@@ -1093,6 +1093,19 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height, fill
         </svg>
       );
 
+    case 'ui-shopping-cart':
+      return (
+        <svg
+          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
+          width={width}
+          height={height}
+          viewBox="0 0 640 512"
+          fill={fill ?? 'currentColor'}>
+          <HTMLComment text="!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
+          {title && <title>{title}</title>}
+          <path d="M24-16C10.7-16 0-5.3 0 8S10.7 32 24 32l45.3 0c3.9 0 7.2 2.8 7.9 6.6l52.1 286.3c6.2 34.2 36 59.1 70.8 59.1L456 384c13.3 0 24-10.7 24-24s-10.7-24-24-24l-255.9 0c-11.6 0-21.5-8.3-23.6-19.7l-5.1-28.3 303.6 0c30.8 0 57.2-21.9 62.9-52.2L568.9 69.9C572.6 50.2 557.5 32 537.4 32l-412.7 0-.4-2c-4.8-26.6-28-46-55.1-46L24-16zM208 512a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm224 0a48 48 0 1 0 0-96 48 48 0 1 0 0 96z" />
+        </svg>
+      );
     default:
       return null;
   }

package/src/shared/translations/ar-SA.json

@@ -348,6 +348,7 @@
     "DEPARTURE_ASC": "تاريخ المغادرة (الأقرب أولاً)",
     "FILTERS": "عوامل التصفية",
     "SHOW_ITINERARY": "عرض خط سير الرحلة",
+    "VIEW_BOOKING": "عرض الحجز",
     "ITINERARY_TITLE": "ملخص رحلتك",
     "DOSSIER_NUMBER": "رقم الملف",
     "PACKAGE_PRICE_PER_PERSON": "سعر الباقة للشخص الواحد",
@@ -381,7 +382,12 @@
     "DURATION_ASC": "المدة تصاعدياً",
     "DURATION_DESC": "المدة تنازلياً",
     "TRAVEL_GROUP": "مجموعة المسافرين",
-    "EXCURSION": "رحلة"
+    "EXCURSION": "رحلة",
+    "LOADING_EXCURSIONS": "جارٍ تحميل الرحلات...",
+    "LOADING_FLIGHTS": "جارٍ تحميل الرحلات الجوية...",
+    "LOADING_ACCOMMODATIONS": "جارٍ تحميل الإقامات...",
+    "LOADING_ITINERARY": "جارٍ تحميل خط سير الرحلة...",
+    "LOADING_OPTIONS": "جارٍ تحميل الخيارات..."
   },
   "ITINERARY": {
     "DAY": "اليوم",