@qite/tide-booking-component 1.4.103 → 1.4.104

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/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;