@qite/tide-booking-component 1.4.102 → 1.4.104

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

@@ -1,23 +1,31 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import Icon from '../icon';
 import { useFlightSearch } from '../../../search-results/components/flight/flight-search-context';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import {
-  setAccommodationFlyInStep,
+  resetFilters,
+  setFilters,
+  setFlyInType,
   setSelectedFlight,
   setSelectedFlightDetails,
   setSelectedPackagingAccoResult,
-  setSelectedSearchResult
+  setSelectedSearchResult,
+  setSortType
 } from '../../../search-results/store/search-results-slice';
 import FlightsFlyIn from './flights-flyin';
 import AccommodationFlyIn from './accommodation-flyin';
 import { PortalQsmType } from '@qite/tide-client';
 import GroupTourFlyIn from './group-tour-flyin';
-import { AccommodationFlyInStep } from '../../../search-results/types';
+import { FlyInType, SortByType } from '../../../search-results/types';
 import HotelAccommodationResults from '../../../search-results/components/hotel/hotel-accommodation-results';
+import PackageingFlightsFlyIn from './packaging-flights-flyin';
+import SearchResultsConfigurationContext from '../../../search-results/search-results-configuration-context';
+import { findSortByType, getSortingName, getTranslations } from '../../utils/localization-util';
+import Filters from '../../../search-results/components/filters/filters';
+import { SearchResultsRootState } from '../../../search-results/store/search-results-store';
+import ItemPicker from '../../../search-results/components/item-picker';
 
 type FlyInProps = {
-  title: string;
   srpType: PortalQsmType;
   isOpen: boolean;
   setIsOpen: (open: boolean) => void;
@@ -25,23 +33,32 @@ type FlyInProps = {
   onPanelRef?: (el: HTMLDivElement | null) => void;
   detailsLoading: boolean;
   handleConfirm?: () => void;
-  accommodationStep?: AccommodationFlyInStep;
+  flyInType?: FlyInType | null;
   isPackageEditFlow?: boolean;
+  sortByTypes?: SortByType[];
 };
 
 const FlyIn: React.FC<FlyInProps> = ({
-  title,
   srpType,
   isOpen,
   setIsOpen,
   className = '',
   onPanelRef,
   detailsLoading,
-  accommodationStep,
+  flyInType,
   isPackageEditFlow,
-  handleConfirm
+  handleConfirm,
+  sortByTypes
 }) => {
   const dispatch = useDispatch();
+  const context = useContext(SearchResultsConfigurationContext);
+  const language = context?.languageCode ?? 'en-GB';
+  const translations = getTranslations(language);
+
+  const { isLoading, initialFilters, filters, filteredPackagingAccoResults, selectedSortType } = useSelector(
+    (state: SearchResultsRootState) => state.searchResults
+  );
+
   const { onCancelSearch } = useFlightSearch();
   const panelRef = useRef<HTMLDivElement>(null);
 
@@ -81,26 +98,52 @@ const FlyIn: React.FC<FlyInProps> = ({
         dispatch(setSelectedSearchResult(null));
         dispatch(setSelectedPackagingAccoResult(null));
       }
-      dispatch(setAccommodationFlyInStep('details'));
+      dispatch(setFlyInType('acco-details'));
       setIsOpen(false);
     }
   };
 
   const handleGoBack = () => {
-    dispatch(setAccommodationFlyInStep('results'));
+    dispatch(setFlyInType('acco-results'));
+  };
+
+  const handleSortChange = (newSortKey: string, direction?: string) => {
+    if (sortByTypes === undefined) return;
+    const newSortByType = findSortByType(sortByTypes, newSortKey, direction ?? 'asc');
+    if (newSortByType) {
+      dispatch(setSortType(newSortByType));
+    }
   };
 
   return (
-    <div className={`flyin ${isOpen ? 'flyin--active' : ''} ${className} ${isPackageEditFlow ? 'flyin--large' : ''}`}>
+    <div
+      className={`flyin ${isOpen ? 'flyin--active' : ''} ${className} ${
+        isPackageEditFlow || flyInType === 'flight-outward-results' || flyInType === 'flight-return-results' || flyInType === 'acco-results'
+          ? 'flyin--large'
+          : ''
+      }`}>
       <div className={`flyin__panel ${isOpen ? 'flyin__panel--active' : ''}`} ref={panelRef}>
         <div className="flyin__content">
           <div className="flyin__content-title-row">
-            <h3 className="flyin__content-title">{title}</h3>
+            <h3 className="flyin__content-title">
+              {srpType === PortalQsmType.Flight && 'Select your fare'}
+              {srpType === PortalQsmType.Accommodation ||
+                (srpType === PortalQsmType.AccommodationAndFlight &&
+                  (flyInType === 'acco-results' || flyInType === 'acco-details') &&
+                  `${translations.SRP.SELECT} ${translations.SRP.ACCOMMODATION}`)}
+              {srpType === PortalQsmType.AccommodationAndFlight &&
+                flyInType === 'flight-outward-results' &&
+                `${translations.SRP.SELECT} ${translations.FLIGHTS_FORM.OUTWARD_FLIGHT}`}
+              {srpType === PortalQsmType.AccommodationAndFlight &&
+                flyInType === 'flight-return-results' &&
+                `${translations.SRP.SELECT} ${translations.FLIGHTS_FORM.RETURN_FLIGHT}`}
+              {srpType === PortalQsmType.AccommodationAndFlight && flyInType === 'flight-details' && 'Select your fare'}
+            </h3>
             <span className="flyin__close" onClick={() => handleClose()}>
               <Icon name="ui-close" width={30} height={30} aria-hidden="true" />
             </span>
           </div>
-          {isPackageEditFlow && accommodationStep === 'details' && (
+          {isPackageEditFlow && flyInType === 'acco-details' && (
             <div className="flyin__content-title-row">
               <div onClick={handleGoBack} className="flyin__content-title__back">
                 <Icon name="ui-chevron" width={14} height={14} aria-hidden="true" />
@@ -111,16 +154,56 @@ const FlyIn: React.FC<FlyInProps> = ({
         </div>
         {srpType === PortalQsmType.Flight && <FlightsFlyIn isOpen={isOpen} setIsOpen={setIsOpen} />}
 
-        {(srpType === PortalQsmType.Accommodation || srpType === PortalQsmType.AccommodationAndFlight) && accommodationStep === 'results' && (
-          <div className="flyin__content">
-            <HotelAccommodationResults isLoading={detailsLoading} />
+        {(srpType === PortalQsmType.Accommodation || srpType === PortalQsmType.AccommodationAndFlight) && flyInType === 'acco-results' && (
+          <div className="flyin__content flyin__content--columns">
+            <Filters
+              initialFilters={initialFilters}
+              filters={filters}
+              isOpen={false}
+              handleSetIsOpen={() => {}}
+              // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
+              isLoading={isLoading}
+              setFilters={(filters) => dispatch(setFilters(filters))}
+              resetFilters={(filters) => dispatch(resetFilters(filters))}
+            />
+            <div className="search__results__wrapper">
+              <div className="search__result-row">
+                <span className="search__result-row-text">
+                  {!isLoading && (
+                    <>
+                      {filteredPackagingAccoResults?.length && filteredPackagingAccoResults.length}
+                      &nbsp;{translations.SRP.TOTAL_RESULTS_LABEL}
+                    </>
+                  )}
+                </span>
+                {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>
+              <HotelAccommodationResults isLoading={detailsLoading} isFlyIn={true} />
+            </div>
           </div>
         )}
 
-        {(srpType === PortalQsmType.Accommodation || srpType === PortalQsmType.AccommodationAndFlight) && accommodationStep === 'details' && (
+        {(srpType === PortalQsmType.Accommodation || srpType === PortalQsmType.AccommodationAndFlight) && flyInType === 'acco-details' && (
           <AccommodationFlyIn isLoading={detailsLoading} handleConfirm={handleConfirm!} />
         )}
 
+        {srpType === PortalQsmType.AccommodationAndFlight && (flyInType === 'flight-outward-results' || flyInType === 'flight-return-results') && (
+          <PackageingFlightsFlyIn isOpen={isOpen} setIsOpen={setIsOpen} />
+        )}
+
         {srpType === PortalQsmType.GroupTour && <GroupTourFlyIn isLoading={detailsLoading} isOpen={isOpen} setIsOpen={setIsOpen} />}
       </div>
     </div>

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

@@ -0,0 +1,164 @@
+import React, { useContext, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  resetFlightFilters,
+  setFlightFilters,
+  setFlightSortType,
+  setFlyInIsOpen,
+  setFlyInType,
+  setSelectedOutwardKey,
+  setSelectedReturnKey
+} from '../../../search-results/store/search-results-slice';
+import { SearchResultsRootState } from '../../../search-results/store/search-results-store';
+import Spinner from '../../../search-results/components/spinner/spinner';
+import SearchResultsConfigurationContext from '../../../search-results/search-results-configuration-context';
+import { findSortByType, getSortingName, getTranslations } from '../../utils/localization-util';
+import { getFlightKey } from '../../../search-results/utils/flight-utils';
+import {
+  selectSelectedOutward,
+  selectSelectedReturn,
+  selectUniqueOutwardFlights,
+  selectUniqueReturnFlights
+} from '../../../search-results/store/search-results-selectors';
+import IndependentFlightOption from '../../../search-results/components/flight/flight-selection/independent-flight-option';
+import Filters from '../../../search-results/components/filters/filters';
+import { SortByType } from '../../../search-results/types';
+import ItemPicker from '../../../search-results/components/item-picker';
+
+type FlightsFlyInProps = {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+};
+
+const PackageingFlightsFlyIn: React.FC<FlightsFlyInProps> = ({ isOpen, setIsOpen }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  const language = context?.languageCode ?? 'en-GB';
+  const translations = getTranslations(language);
+
+  const dispatch = useDispatch();
+  const { flightsLoading, initialFlightFilters, flightFilters, flyInType, selectedFlightSortType } = useSelector(
+    (state: SearchResultsRootState) => state.searchResults
+  );
+  const uniqueOutwardFlights = useSelector(selectUniqueOutwardFlights);
+  const uniqueReturnFlights = useSelector(selectUniqueReturnFlights);
+  const selectedOutward = useSelector(selectSelectedOutward);
+  const selectedReturn = useSelector(selectSelectedReturn);
+
+  const [outwardStepComplete, setOutwardStepComplete] = useState<boolean>(false);
+
+  const handleConfirm = (): void => {
+    if (!outwardStepComplete) {
+      setOutwardStepComplete(true);
+      dispatch(setFlyInType('flight-return-results'));
+      return;
+    } else {
+      dispatch(setFlyInType(null));
+      setOutwardStepComplete(false);
+      dispatch(setFlyInIsOpen(false));
+    }
+  };
+
+  const sortByTypes = [
+    { direction: 'asc', label: 'default' } as SortByType,
+    { direction: 'asc', label: 'price' } as SortByType,
+    { direction: 'desc', label: 'price' } as SortByType,
+    { direction: 'asc', label: 'departureTime' } as SortByType,
+    { direction: 'desc', label: 'departureTime' } as SortByType,
+    { direction: 'asc', label: 'durationInTicks' } as SortByType,
+    { direction: 'desc', label: 'durationInTicks' } as SortByType
+  ];
+
+  const handleSortChange = (newSortKey: string, direction?: string) => {
+    if (sortByTypes === undefined) return;
+    const newSortByType = findSortByType(sortByTypes, newSortKey, direction ?? 'asc');
+    if (newSortByType) {
+      dispatch(setFlightSortType(newSortByType));
+    }
+  };
+
+  return (
+    <>
+      <div className="flyin__content flyin__content--columns">
+        {flightsLoading ? (
+          <Spinner />
+        ) : (
+          <>
+            <Filters
+              initialFilters={initialFlightFilters}
+              filters={flightFilters}
+              isOpen={false}
+              handleSetIsOpen={() => {}}
+              // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
+              isLoading={flightsLoading}
+              setFilters={(filters) => dispatch(setFlightFilters(filters))}
+              resetFilters={(filters) => dispatch(resetFlightFilters(filters))}
+            />
+            <div className="search__results__wrapper">
+              <div className="search__result-row">
+                <span className="search__result-row-text">
+                  {uniqueOutwardFlights?.length && uniqueOutwardFlights.length}
+                  &nbsp;{translations.FLIGHTS_FORM.FLIGHTS_FOUND_2}&nbsp;{translations.FLIGHTS_FORM.FLIGHTS_FOUND_3}
+                </span>
+                {sortByTypes && sortByTypes.length > 0 && (
+                  <div className="search__result-row-filter">
+                    <ItemPicker
+                      items={sortByTypes}
+                      selection={selectedFlightSortType?.label || undefined}
+                      selectedSortByType={selectedFlightSortType || undefined}
+                      label={translations.SRP.SORTBY}
+                      placeholder={translations.SRP.SORTBY}
+                      classModifier=""
+                      valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
+                      // onPick={handleSortChange}
+                      onPick={(newSortKey, direction) => handleSortChange(newSortKey, direction)}
+                    />
+                  </div>
+                )}
+              </div>
+              <div className="search__results__cards search__results__cards--extended">
+                {flyInType == 'flight-outward-results' &&
+                  uniqueOutwardFlights.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}
+                      selectedGuid={selectedOutward?.outwardGuid}
+                      showSelectedState={true}
+                    />
+                  ))}
+                {flyInType == 'flight-return-results' &&
+                  uniqueReturnFlights.map((result) => (
+                    <IndependentFlightOption
+                      key={`flight-${result.outwardGuid}`}
+                      item={result.return}
+                      onSelect={() => dispatch(setSelectedReturnKey(getFlightKey(result.return.segments)))}
+                      guid={result.outwardGuid}
+                      isOutward={false}
+                      price={result.price}
+                      currentSelectedPrice={selectedReturn?.price}
+                      selectedGuid={selectedReturn?.outwardGuid}
+                      showSelectedState={true}
+                    />
+                  ))}
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+      <div className="flyin__footer">
+        <div className="flyin__footer__price"></div>
+        <div className="flyin__button-wrapper">
+          <button className="cta cta--select" onClick={() => handleConfirm()}>
+            {translations.QSM.CONFIRM}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PackageingFlightsFlyIn;

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

@@ -331,6 +331,8 @@
     "GROUP_TOUR": "جولة جماعية"
   },
   "SRP": {
+    "SHOW_MORE": "عرض المزيد",
+    "SHOW_LESS": "عرض أقل",
     "NO_RESULTS": "لم يتم العثور على نتائج.",
     "TOTAL_RESULTS_LABEL": "تم العثور على باقات",
     "RESET": "إعادة تعيين",

package/src/shared/translations/da-DK.json

@@ -331,6 +331,8 @@
     "GROUP_TOUR": "Grupperejse"
   },
   "SRP": {
+    "SHOW_MORE": "Vis flere",
+    "SHOW_LESS": "Vis færre",
     "NO_RESULTS": "Ingen resultater fundet.",
     "TOTAL_RESULTS_LABEL": "Fundne pakker",
     "RESET": "Nulstil",

package/src/shared/translations/de-DE.json

@@ -331,6 +331,8 @@
     "GROUP_TOUR": "Gruppentour"
   },
   "SRP": {
+    "SHOW_MORE": "Mehr anzeigen",
+    "SHOW_LESS": "Weniger anzeigen",
     "NO_RESULTS": "Keine Ergebnisse gefunden.",
     "TOTAL_RESULTS_LABEL": "Gefundene Pakete",
     "RESET": "Zurücksetzen",

package/src/shared/translations/en-GB.json

@@ -335,6 +335,8 @@
     "GROUP_TOUR": "Group tour"
   },
   "SRP": {
+    "SHOW_MORE": "Show more",
+    "SHOW_LESS": "Show less",
     "NO_RESULTS": "No results found.",
     "TOTAL_RESULTS_LABEL": "Packages found",
     "RESET": "Reset",

package/src/shared/translations/es-ES.json

@@ -331,6 +331,8 @@
     "GROUP_TOUR": "Tour grupal"
   },
   "SRP": {
+    "SHOW_MORE": "Mostrar más",
+    "SHOW_LESS": "Mostrar menos",
     "NO_RESULTS": "No se han encontrado resultados.",
     "TOTAL_RESULTS_LABEL": "Paquetes encontrados",
     "RESET": "Restablecer",

package/src/shared/translations/fr-BE.json

@@ -335,6 +335,8 @@
     "GROUP_TOUR": "Tour en groupe"
   },
   "SRP": {
+    "SHOW_MORE": "Afficher plus",
+    "SHOW_LESS": "Afficher moins",
     "NO_RESULTS": "Aucun résultat trouvé.",
     "TOTAL_RESULTS_LABEL": "Forfaits trouvés",
     "RESET": "Réinitialiser",

package/src/shared/translations/fr-FR.json

@@ -331,6 +331,8 @@
     "GROUP_TOUR": "Tour en groupe"
   },
   "SRP": {
+    "SHOW_MORE": "Afficher plus",
+    "SHOW_LESS": "Afficher moins",
     "NO_RESULTS": "Aucun résultat trouvé.",
     "TOTAL_RESULTS_LABEL": "Forfaits trouvés",
     "RESET": "Réinitialiser",

package/src/shared/translations/is-IS.json

@@ -331,6 +331,8 @@
     "GROUP_TOUR": "Ferð í hóp"
   },
   "SRP": {
+    "SHOW_MORE": "Sýna meira",
+    "SHOW_LESS": "Sýna minna",
     "NO_RESULTS": "Engar niðurstöður fundust.",
     "TOTAL_RESULTS_LABEL": "Fundnar pakkar",
     "RESET": "Endurstilla",

package/src/shared/translations/it-IT.json

@@ -331,6 +331,8 @@
     "GROUP_TOUR": "Tour di gruppo"
   },
   "SRP": {
+    "SHOW_MORE": "Mostra di più",
+    "SHOW_LESS": "Mostra di meno",
     "NO_RESULTS": "Nessun risultato trovato.",
     "TOTAL_RESULTS_LABEL": "Pacchetti trovati",
     "RESET": "Reimposta",

package/src/shared/translations/ja-JP.json

@@ -331,6 +331,8 @@
     "GROUP_TOUR": "グループツアー"
   },
   "SRP": {
+    "SHOW_MORE": "もっと見る",
+    "SHOW_LESS": "閉じる",
     "NO_RESULTS": "結果が見つかりませんでした。",
     "TOTAL_RESULTS_LABEL": "見つかったパッケージ",
     "RESET": "リセット",

package/src/shared/translations/nl-BE.json

@@ -335,6 +335,8 @@
     "GROUP_TOUR": "Groepsreis"
   },
   "SRP": {
+    "SHOW_MORE": "Toon meer",
+    "SHOW_LESS": "Toon minder",
     "NO_RESULTS": "Geen resultaten gevonden.",
     "TOTAL_RESULTS_LABEL": "Gevonden pakketten",
     "RESET": "Resetten",

package/src/shared/translations/nl-NL.json

@@ -331,6 +331,8 @@
     "GROUP_TOUR": "Groepsreis"
   },
   "SRP": {
+    "SHOW_MORE": "Toon meer",
+    "SHOW_LESS": "Toon minder",
     "NO_RESULTS": "Geen resultaten gevonden.",
     "TOTAL_RESULTS_LABEL": "Gevonden pakketten",
     "RESET": "Resetten",

package/src/shared/translations/no-NO.json

@@ -331,6 +331,8 @@
     "GROUP_TOUR": "Gruppetur"
   },
   "SRP": {
+    "SHOW_MORE": "Vis mer",
+    "SHOW_LESS": "Vis mindre",
     "NO_RESULTS": "Ingen resultater funnet.",
     "TOTAL_RESULTS_LABEL": "Fant pakker",
     "RESET": "Tilbakestill",

package/src/shared/translations/pl-PL.json

@@ -331,6 +331,8 @@
     "GROUP_TOUR": "Tour w grupie"
   },
   "SRP": {
+    "SHOW_MORE": "Pokaż więcej",
+    "SHOW_LESS": "Pokaż mniej",
     "NO_RESULTS": "Nie znaleziono wyników.",
     "TOTAL_RESULTS_LABEL": "Znalezione pakiety",
     "RESET": "Resetuj",

package/src/shared/translations/pt-PT.json

@@ -331,6 +331,8 @@
     "GROUP_TOUR": "Tour em grupo"
   },
   "SRP": {
+    "SHOW_MORE": "Mostrar mais",
+    "SHOW_LESS": "Mostrar menos",
     "NO_RESULTS": "Nenhum resultado encontrado.",
     "TOTAL_RESULTS_LABEL": "Pacotes encontrados",
     "RESET": "Redefinir",

package/src/shared/translations/sv-SE.json

@@ -331,6 +331,8 @@
     "GROUP_TOUR": "Gruppresa"
   },
   "SRP": {
+    "SHOW_MORE": "Visa mer",
+    "SHOW_LESS": "Visa mindre",
     "NO_RESULTS": "Inga resultat hittades.",
     "TOTAL_RESULTS_LABEL": "Hittade paket",
     "RESET": "Återställ",

package/src/shared/utils/localization-util.ts

@@ -188,9 +188,12 @@ export const timeFromDateTime = (dateTime: Date | undefined): string => {
   if (!dateTime) {
     return '';
   }
+
   const date = new Date(dateTime);
-  const hours = date.getHours();
-  const minutes = date.getMinutes();
+
+  const hours = date.getUTCHours();
+  const minutes = date.getUTCMinutes();
+
   return `${hours}:${minutes < 10 ? '0' : ''}${minutes}`;
 };
 

package/styles/components/_flight-option.scss

@@ -110,6 +110,7 @@
       text-align: center;
       justify-content: center;
       align-self: flex-end;
+
       @include media-md {
         max-width: 162px;
         min-width: 162px;
@@ -490,6 +491,7 @@
     &__title {
       display: flex;
       flex-direction: column;
+
       h2 {
         font-size: 20px;
         font-family: var(--tide-booking-font-heading);
@@ -875,6 +877,7 @@
             width: 100%;
             text-align: center;
             justify-content: center;
+
             @include media-md {
               max-width: 162px;
             }
@@ -933,6 +936,7 @@
           width: 100%;
           text-align: center;
           justify-content: center;
+
           @include media-md {
             max-width: 162px;
           }
@@ -1268,7 +1272,8 @@
       cursor: pointer;
       box-shadow: 0 1.25px 5.625px -1.25px rgba(0, 0, 0, 0.25);
       position: relative;
-      z-index: 2; /* Ensure thumbs appear above the track */
+      z-index: 2;
+      /* Ensure thumbs appear above the track */
     }
 
     input[type='range']::-moz-range-thumb {
@@ -1336,6 +1341,14 @@
       transform: translateX(50%);
     }
   }
+
+  &--selected {
+    .flight__option {
+      border: 2px solid #29297c20;
+      box-shadow: 1px 5px 5px 4px #29297c20;
+      margin-bottom: 10px;
+    }
+  }
 }
 
 // .flight-option {

package/styles/components/_flyin.scss

@@ -537,6 +537,20 @@
         }
       }
     }
+
+    &--columns {
+      display: flex;
+      gap: 10px;
+
+      .search__results__wrapper {
+        width: 100%;
+      }
+
+      .search__results__cards {
+        grid-template-rows: auto;
+        align-content: flex-start;
+      }
+    }
   }
 
   &__button {
@@ -601,6 +615,8 @@
 
     background: var(--tide-booking-white);
 
+    z-index: 1;
+
     @include mixins.media-sm {
       margin-top: auto;
       padding: 30px;

package/styles/components/_search.scss

@@ -361,9 +361,12 @@
     }
 
     &__prices {
-      padding: 0 20px;
       display: flex;
       flex-direction: column;
+      justify-content: center;
+
+      height: 173.5px;
+      padding: 0 20px;
 
       &__wrapper {
         padding: 20px 0px;
@@ -761,6 +764,11 @@
       @include mixins.media-xgl {
         grid-template-columns: repeat(3, 1fr);
       }
+
+      &__actions {
+        display: flex;
+        justify-content: flex-end;
+      }
     }
 
     &__wrapper {