@qite/tide-booking-component 1.4.103 → 1.4.105

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

@@ -328,7 +328,8 @@
     "RETURN_DATE": "تاريخ العودة",
     "CONFIRM": "تأكيد",
     "TRAVELERS": "المسافرون",
-    "GROUP_TOUR": "جولة جماعية"
+    "GROUP_TOUR": "جولة جماعية",
+    "ALL_TRAVELERS": "جميع المسافرين"
   },
   "SRP": {
     "SHOW_MORE": "عرض المزيد",
@@ -379,6 +380,7 @@
     "DEPARTURE_TIME_DESC": "وقت المغادرة تنازلياً",
     "DURATION_ASC": "المدة تصاعدياً",
     "DURATION_DESC": "المدة تنازلياً",
-    "TRAVEL_GROUP": "مجموعة المسافرين"
+    "TRAVEL_GROUP": "مجموعة المسافرين",
+    "EXCURSION": "رحلة"
   }
 }

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

@@ -328,7 +328,8 @@
     "RETURN_DATE": "Hjemrejsedato",
     "CONFIRM": "Bekræft",
     "TRAVELERS": "Rejsende",
-    "GROUP_TOUR": "Grupperejse"
+    "GROUP_TOUR": "Grupperejse",
+    "ALL_TRAVELERS": "Alle rejsende"
   },
   "SRP": {
     "SHOW_MORE": "Vis flere",
@@ -379,6 +380,7 @@
     "DEPARTURE_TIME_DESC": "Afgangstid faldende",
     "DURATION_ASC": "Varighed stigende",
     "DURATION_DESC": "Varighed faldende",
-    "TRAVEL_GROUP": "Rejseselskab"
+    "TRAVEL_GROUP": "Rejseselskab",
+    "EXCURSION": "Udflugt"
   }
 }

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

@@ -328,7 +328,8 @@
     "RETURN_DATE": "Rückreisedatum",
     "CONFIRM": "Bestätigen",
     "TRAVELERS": "Reisende",
-    "GROUP_TOUR": "Gruppentour"
+    "GROUP_TOUR": "Gruppentour",
+    "ALL_TRAVELERS": "Alle Reisenden"
   },
   "SRP": {
     "SHOW_MORE": "Mehr anzeigen",
@@ -379,6 +380,7 @@
     "DEPARTURE_AIRPORTS": "Abflughäfen",
     "ARRIVAL_AIRPORTS": "Ankunftsflughäfen",
     "PRICE": "Preis",
-    "TRAVEL_GROUP": "Reisegruppe"
+    "TRAVEL_GROUP": "Reisegruppe",
+    "EXCURSION": "Ausflug"
   }
 }

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

@@ -332,7 +332,8 @@
     "RETURN_DATE": "Return date",
     "CONFIRM": "Confirm",
     "TRAVELERS": "Travelers",
-    "GROUP_TOUR": "Group tour"
+    "GROUP_TOUR": "Group tour",
+    "ALL_TRAVELERS": "All travelers"
   },
   "SRP": {
     "SHOW_MORE": "Show more",
@@ -383,6 +384,7 @@
     "DEPARTURE_RANGE": "Departure range",
     "DEPARTURE_AIRPORTS": "Departure airports",
     "ARRIVAL_AIRPORTS": "Arrival airports",
-    "TRAVEL_GROUP": "Travel group"
+    "TRAVEL_GROUP": "Travel group",
+    "EXCURSION": "Excursion"
   }
 }

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

@@ -328,7 +328,8 @@
     "RETURN_DATE": "Fecha de regreso",
     "CONFIRM": "Confirmar",
     "TRAVELERS": "Viajeros",
-    "GROUP_TOUR": "Tour grupal"
+    "GROUP_TOUR": "Tour grupal",
+    "ALL_TRAVELERS": "Todos los viajeros"
   },
   "SRP": {
     "SHOW_MORE": "Mostrar más",
@@ -379,6 +380,7 @@
     "DEPARTURE_AIRPORTS": "Aeropuertos de salida",
     "ARRIVAL_AIRPORTS": "Aeropuertos de llegada",
     "PRICE": "Precio",
-    "TRAVEL_GROUP": "Grupo de viaje"
+    "TRAVEL_GROUP": "Grupo de viaje",
+    "EXCURSION": "Excursión"
   }
 }

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

@@ -332,7 +332,8 @@
     "RETURN_DATE": "Date de retour",
     "CONFIRM": "Confirmer",
     "TRAVELERS": "Voyageurs",
-    "GROUP_TOUR": "Tour en groupe"
+    "GROUP_TOUR": "Tour en groupe",
+    "ALL_TRAVELERS": "Tous les voyageurs"
   },
   "SRP": {
     "SHOW_MORE": "Afficher plus",
@@ -383,6 +384,7 @@
     "DEPARTURE_AIRPORTS": "Aéroports de départ",
     "ARRIVAL_AIRPORTS": "Aéroports d’arrivée",
     "PRICE": "Prix",
-    "TRAVEL_GROUP": "Groupe de voyageurs"
+    "TRAVEL_GROUP": "Groupe de voyageurs",
+    "EXCURSION": "Excursion"
   }
 }

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

@@ -328,7 +328,8 @@
     "RETURN_DATE": "Date de retour",
     "CONFIRM": "Confirmer",
     "TRAVELERS": "Voyageurs",
-    "GROUP_TOUR": "Tour en groupe"
+    "GROUP_TOUR": "Tour en groupe",
+    "ALL_TRAVELERS": "Tous les voyageurs"
   },
   "SRP": {
     "SHOW_MORE": "Afficher plus",
@@ -379,6 +380,7 @@
     "DEPARTURE_AIRPORTS": "Aéroports de départ",
     "ARRIVAL_AIRPORTS": "Aéroports d’arrivée",
     "PRICE": "Prix",
-    "TRAVEL_GROUP": "Groupe de voyageurs"
+    "TRAVEL_GROUP": "Groupe de voyageurs",
+    "EXCURSION": "Excursion"
   }
 }

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

@@ -328,7 +328,8 @@
     "RETURN_DATE": "Heimkomudagur",
     "CONFIRM": "Staðfesta",
     "TRAVELERS": "Ferðalangar",
-    "GROUP_TOUR": "Ferð í hóp"
+    "GROUP_TOUR": "Ferð í hóp",
+    "ALL_TRAVELERS": "Allir ferðalangar"
   },
   "SRP": {
     "SHOW_MORE": "Sýna meira",
@@ -379,6 +380,7 @@
     "DEPARTURE_AIRPORTS": "Brottfararflugvellir",
     "ARRIVAL_AIRPORTS": "Komuflugvellir",
     "PRICE": "Verð",
-    "TRAVEL_GROUP": "Ferðahópur"
+    "TRAVEL_GROUP": "Ferðahópur",
+    "EXCURSION": "Útflutningur"
   }
 }

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

@@ -328,7 +328,8 @@
     "RETURN_DATE": "Data di ritorno",
     "CONFIRM": "Conferma",
     "TRAVELERS": "Viaggiatori",
-    "GROUP_TOUR": "Tour di gruppo"
+    "GROUP_TOUR": "Tour di gruppo",
+    "ALL_TRAVELERS": "Tutti i viaggiatori"
   },
   "SRP": {
     "SHOW_MORE": "Mostra di più",
@@ -379,6 +380,7 @@
     "DEPARTURE_AIRPORTS": "Aeroporti di partenza",
     "ARRIVAL_AIRPORTS": "Aeroporti di arrivo",
     "PRICE": "Prezzo",
-    "TRAVEL_GROUP": "Gruppo di viaggio"
+    "TRAVEL_GROUP": "Gruppo di viaggio",
+    "EXCURSION": "Escursione"
   }
 }

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

@@ -328,7 +328,8 @@
     "RETURN_DATE": "帰着日",
     "CONFIRM": "確認",
     "TRAVELERS": "旅行者",
-    "GROUP_TOUR": "グループツアー"
+    "GROUP_TOUR": "グループツアー",
+    "ALL_TRAVELERS": "すべての旅行者"
   },
   "SRP": {
     "SHOW_MORE": "もっと見る",
@@ -379,6 +380,7 @@
     "DEPARTURE_AIRPORTS": "出発空港",
     "ARRIVAL_AIRPORTS": "到着空港",
     "PRICE": "価格",
-    "TRAVEL_GROUP": "旅行グループ"
+    "TRAVEL_GROUP": "旅行グループ",
+    "EXCURSION": "エクスカーション"
   }
 }

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

@@ -332,7 +332,8 @@
     "RETURN_DATE": "Terugkeerdatum",
     "CONFIRM": "Bevestigen",
     "TRAVELERS": "Reizigers",
-    "GROUP_TOUR": "Groepsreis"
+    "GROUP_TOUR": "Groepsreis",
+    "ALL_TRAVELERS": "Alle reizigers"
   },
   "SRP": {
     "SHOW_MORE": "Toon meer",
@@ -383,6 +384,7 @@
     "DEPARTURE_AIRPORTS": "Vertrekluchthavens",
     "ARRIVAL_AIRPORTS": "Aankomstluchthavens",
     "PRICE": "Prijs",
-    "TRAVEL_GROUP": "Reisgezelschap"
+    "TRAVEL_GROUP": "Reisgezelschap",
+    "EXCURSION": "Excursie"
   }
 }

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

@@ -328,7 +328,8 @@
     "RETURN_DATE": "Terugkeerdatum",
     "CONFIRM": "Bevestigen",
     "TRAVELERS": "Reizigers",
-    "GROUP_TOUR": "Groepsreis"
+    "GROUP_TOUR": "Groepsreis",
+    "ALL_TRAVELERS": "Alle reizigers"
   },
   "SRP": {
     "SHOW_MORE": "Toon meer",
@@ -379,6 +380,7 @@
     "DEPARTURE_AIRPORTS": "Vertrekluchthavens",
     "ARRIVAL_AIRPORTS": "Aankomstluchthavens",
     "PRICE": "Prijs",
-    "TRAVEL_GROUP": "Reisgezelschap"
+    "TRAVEL_GROUP": "Reisgezelschap",
+    "EXCURSION": "Excursie"
   }
 }

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

@@ -328,7 +328,8 @@
     "RETURN_DATE": "Returdato",
     "CONFIRM": "Bekreft",
     "TRAVELERS": "Reisende",
-    "GROUP_TOUR": "Gruppetur"
+    "GROUP_TOUR": "Gruppetur",
+    "ALL_TRAVELERS": "Alle reisende"
   },
   "SRP": {
     "SHOW_MORE": "Vis mer",
@@ -379,6 +380,7 @@
     "DEPARTURE_AIRPORTS": "Avgangsflyplasser",
     "ARRIVAL_AIRPORTS": "Ankomstflyplasser",
     "PRICE": "Pris",
-    "TRAVEL_GROUP": "Reisefølge"
+    "TRAVEL_GROUP": "Reisefølge",
+    "EXCURSION": "Utflukt"
   }
 }

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

@@ -328,7 +328,8 @@
     "RETURN_DATE": "Data powrotu",
     "CONFIRM": "Potwierdź",
     "TRAVELERS": "Podróżni",
-    "GROUP_TOUR": "Tour w grupie"
+    "GROUP_TOUR": "Tour w grupie",
+    "ALL_TRAVELERS": "Wszyscy podróżni"
   },
   "SRP": {
     "SHOW_MORE": "Pokaż więcej",
@@ -379,6 +380,7 @@
     "DEPARTURE_AIRPORTS": "Lotniska wylotu",
     "ARRIVAL_AIRPORTS": "Lotniska przylotu",
     "PRICE": "Cena",
-    "TRAVEL_GROUP": "Grupa podróżnych"
+    "TRAVEL_GROUP": "Grupa podróżnych",
+    "EXCURSION": "Wycieczka"
   }
 }

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

@@ -328,7 +328,8 @@
     "RETURN_DATE": "Data de regresso",
     "CONFIRM": "Confirmar",
     "TRAVELERS": "Viajantes",
-    "GROUP_TOUR": "Tour em grupo"
+    "GROUP_TOUR": "Tour em grupo",
+    "ALL_TRAVELERS": "All travelers"
   },
   "SRP": {
     "SHOW_MORE": "Mostrar mais",
@@ -379,6 +380,7 @@
     "DEPARTURE_AIRPORTS": "Aeroportos de partida",
     "ARRIVAL_AIRPORTS": "Aeroportos de chegada",
     "PRICE": "Preço",
-    "TRAVEL_GROUP": "Grupo de viajantes"
+    "TRAVEL_GROUP": "Grupo de viajantes",
+    "EXCURSION": "Excursão"
   }
 }

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

@@ -328,7 +328,8 @@
     "RETURN_DATE": "Hemresedatum",
     "CONFIRM": "Bekräfta",
     "TRAVELERS": "Resenärer",
-    "GROUP_TOUR": "Gruppresa"
+    "GROUP_TOUR": "Gruppresa",
+    "ALL_TRAVELERS": "All travelers"
   },
   "SRP": {
     "SHOW_MORE": "Visa mer",
@@ -379,6 +380,7 @@
     "DEPARTURE_AIRPORTS": "Avgångsflygplatser",
     "ARRIVAL_AIRPORTS": "Ankomstflygplatser",
     "PRICE": "Pris",
-    "TRAVEL_GROUP": "Resesällskap"
+    "TRAVEL_GROUP": "Resesällskap",
+    "EXCURSION": "Utflykt"
   }
 }

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

@@ -276,3 +276,17 @@ export const getSortingName = (translations: any, sortByType: SortByType): strin
 export const findSortByType = (sortByTypes: SortByType[], sortKey: string, direction: string) => {
   return sortByTypes.find((s) => s.label === sortKey && s.direction === direction) || sortByTypes[0];
 };
+
+export const getDatesBetween = (fromDate: string, toDate: string): Date[] => {
+  const dates: Date[] = [];
+
+  const current = new Date(fromDate);
+  const end = new Date(toDate);
+
+  while (current < end) {
+    dates.push(new Date(current));
+    current.setUTCDate(current.getUTCDate() + 1);
+  }
+
+  return dates;
+};

package/src/shared/utils/tide-api-utils.ts

@@ -2,6 +2,14 @@ import { TideClientConfig } from '@qite/tide-client';
 import { isNil } from 'lodash';
 import { ApiSettingsState } from '../types';
 
+export const tideConnection = {
+  host: 'https://localhost:44341',
+  // host: 'https://preview-tide.tidesoftware.be',
+  apiKey: 'e9b95d79-de4c-41d6-ab7e-3dd429873058',
+  catalogueIds: [1],
+  officeId: 1
+};
+
 export function buildTideClientConfig(settings?: ApiSettingsState): TideClientConfig {
   const HOST = settings?.apiUrl || process.env.REACT_APP_BOOKING_HOST;
   const API_KEY = settings?.apiKey || process.env.REACT_APP_BOOKING_API_KEY;

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;
@@ -764,7 +767,12 @@
 
       &__actions {
         display: flex;
-        justify-content: flex-end;
+        justify-content: space-between;
+        align-items: center;
+
+        .cta {
+          margin-left: auto;
+        }
       }
     }
 
@@ -1088,6 +1096,11 @@
           flex-direction: column;
           gap: 10px;
         }
+
+        &--extra {
+          padding: 0 15px;
+          margin-top: -20px;
+        }
       }
 
       &__header {