@qite/tide-booking-component 1.4.95 → 1.4.97

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

@@ -1,137 +1,137 @@
-import React, { useContext, useEffect, useState } from 'react';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-
-import ItemPicker from '../item-picker';
-
-import Icon from '../icon';
-import { findSortByType, getSortingName, getTranslations } from '../../../shared/utils/localization-util';
-import FlightSelection from '../flight/flight-selection/index';
-import { useFlightSearch } from '../flight/flight-search-context';
-import FlightFilters from '../filters/flight-filters';
-import { ExtendedFlightSearchResponseItem, FlightSelectionMode } from '../../types';
-import Spinner from '../spinner/spinner';
-import { PortalQsmType } from '@qite/tide-client';
-
-interface FlightResultsContainerProps {
-  isMobile: boolean;
-}
-
-const selectionTypes: { id: FlightSelectionMode; label: string }[] = [
-  { id: 'independent', label: 'Independent Selection' },
-  { id: 'paired', label: 'Paired Selection' }
-];
-
-const FlightResultsContainer: React.FC<FlightResultsContainerProps> = ({ isMobile }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
-
-  const { flightsLoading, onFlightSearch, filteredResults, isHubReady, sortByTypes, selectedSortByType, setSelectedSortByType, searchRequestId } =
-    useFlightSearch();
-
-  const [filtersOpen, setFiltersOpen] = useState(false);
-  const [results, setResults] = React.useState<ExtendedFlightSearchResponseItem[]>([]);
-  const [flightSelectionType, setFlightSelectionType] = useState<FlightSelectionMode>('independent');
-
-  const handleSortChange = (sortKey: string, direction?: string) => {
-    setSelectedSortByType(findSortByType(sortByTypes, sortKey, direction ?? 'asc'));
-  };
-
-  useEffect(() => {
-    if (!context?.showMockup) {
-      if (context?.searchConfiguration.qsmType === PortalQsmType.Flight && isHubReady) {
-        onFlightSearch();
-      }
-    }
-  }, [location.search, isHubReady]);
-
-  useEffect(() => {
-    setResults(filteredResults.filter((item) => item.requestId === searchRequestId));
-  }, [filteredResults, searchRequestId]);
-
-  return (
-    <>
-      {context?.showFilters && <FlightFilters isOpen={filtersOpen} handleSetIsOpen={() => setFiltersOpen(!filtersOpen)} isLoading={flightsLoading} />}
-      {/* ---------------- Results ---------------- */}
-      <div className="search__results">
-        <>
-          {isMobile && (
-            <div className="search__result-row">
-              <div className="search__results__actions">
-                {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>
-                )}
-              </div>
-              {sortByTypes && sortByTypes.length > 0 && (
-                <ItemPicker
-                  items={sortByTypes}
-                  selection={selectedSortByType?.label || undefined}
-                  selectedSortByType={selectedSortByType || undefined}
-                  label={translations.SRP.SORTBY}
-                  placeholder={translations.SRP.SORTBY}
-                  classModifier="travel-class-picker__items"
-                  valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
-                  onPick={handleSortChange}
-                />
-              )}
-            </div>
-          )}
-
-          <div className="search__result-row">
-            <span className="search__result-row-text">
-              {!flightsLoading && (
-                <>
-                  {results?.length && (
-                    <>
-                      {results.length} {translations.SRP.TOTAL_RESULTS_LABEL}
-                    </>
-                  )}
-                </>
-              )}
-            </span>
-            {!isMobile && (
-              <>
-                <div className="search__result-row-filter">
-                  <ItemPicker
-                    items={selectionTypes}
-                    selection={selectionTypes.find((type) => type.id === flightSelectionType)?.label || undefined}
-                    label="Selection Type"
-                    placeholder="Selection Type"
-                    classModifier="travel-class-picker__items"
-                    valueFormatter={(value) => value}
-                    onPick={(value) => setFlightSelectionType(selectionTypes.find((type) => type.label === value)?.id || 'independent')}
-                  />
-                </div>
-                {sortByTypes && sortByTypes.length > 0 && (
-                  <div className="search__result-row-filter">
-                    <ItemPicker
-                      items={sortByTypes}
-                      selection={selectedSortByType?.label || undefined}
-                      selectedSortByType={selectedSortByType || undefined}
-                      label={translations.SRP.SORTBY}
-                      placeholder={translations.SRP.SORTBY}
-                      classModifier="travel-class-picker__items"
-                      valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
-                      onPick={handleSortChange}
-                    />
-                  </div>
-                )}
-              </>
-            )}
-          </div>
-
-          <div className="search__results__wrapper">
-            {flightsLoading && <Spinner />}
-            {context?.searchConfiguration.qsmType == PortalQsmType.Flight && context?.showFlightAccommodationResults && results && results.length > 0 && (
-              <FlightSelection searchResults={results} flightSelectionType={flightSelectionType} />
-            )}
-          </div>
-        </>
-      </div>
-    </>
-  );
-};
-
-export default FlightResultsContainer;
+import React, { useContext, useEffect, useState } from 'react';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+
+import ItemPicker from '../item-picker';
+
+import Icon from '../icon';
+import { findSortByType, getSortingName, getTranslations } from '../../../shared/utils/localization-util';
+import FlightSelection from '../flight/flight-selection/index';
+import { useFlightSearch } from '../flight/flight-search-context';
+import FlightFilters from '../filters/flight-filters';
+import { ExtendedFlightSearchResponseItem, FlightSelectionMode } from '../../types';
+import Spinner from '../spinner/spinner';
+import { PortalQsmType } from '@qite/tide-client';
+
+interface FlightResultsContainerProps {
+  isMobile: boolean;
+}
+
+const selectionTypes: { id: FlightSelectionMode; label: string }[] = [
+  { id: 'independent', label: 'Independent Selection' },
+  { id: 'paired', label: 'Paired Selection' }
+];
+
+const FlightResultsContainer: React.FC<FlightResultsContainerProps> = ({ isMobile }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  const translations = getTranslations(context?.languageCode ?? 'en-GB');
+
+  const { flightsLoading, onFlightSearch, filteredResults, isHubReady, sortByTypes, selectedSortByType, setSelectedSortByType, searchRequestId } =
+    useFlightSearch();
+
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [results, setResults] = React.useState<ExtendedFlightSearchResponseItem[]>([]);
+  const [flightSelectionType, setFlightSelectionType] = useState<FlightSelectionMode>('independent');
+
+  const handleSortChange = (sortKey: string, direction?: string) => {
+    setSelectedSortByType(findSortByType(sortByTypes, sortKey, direction ?? 'asc'));
+  };
+
+  useEffect(() => {
+    if (!context?.showMockup) {
+      if (context?.searchConfiguration.qsmType === PortalQsmType.Flight && isHubReady) {
+        onFlightSearch();
+      }
+    }
+  }, [location.search, isHubReady]);
+
+  useEffect(() => {
+    setResults(filteredResults.filter((item) => item.requestId === searchRequestId));
+  }, [filteredResults, searchRequestId]);
+
+  return (
+    <>
+      {context?.showFilters && <FlightFilters isOpen={filtersOpen} handleSetIsOpen={() => setFiltersOpen(!filtersOpen)} isLoading={flightsLoading} />}
+      {/* ---------------- Results ---------------- */}
+      <div className="search__results">
+        <>
+          {isMobile && (
+            <div className="search__result-row">
+              <div className="search__results__actions">
+                {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>
+                )}
+              </div>
+              {sortByTypes && sortByTypes.length > 0 && (
+                <ItemPicker
+                  items={sortByTypes}
+                  selection={selectedSortByType?.label || undefined}
+                  selectedSortByType={selectedSortByType || undefined}
+                  label={translations.SRP.SORTBY}
+                  placeholder={translations.SRP.SORTBY}
+                  classModifier="travel-class-picker__items"
+                  valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
+                  onPick={handleSortChange}
+                />
+              )}
+            </div>
+          )}
+
+          <div className="search__result-row">
+            <span className="search__result-row-text">
+              {!flightsLoading && (
+                <>
+                  {results?.length && (
+                    <>
+                      {results.length} {translations.SRP.TOTAL_RESULTS_LABEL}
+                    </>
+                  )}
+                </>
+              )}
+            </span>
+            {!isMobile && (
+              <>
+                <div className="search__result-row-filter">
+                  <ItemPicker
+                    items={selectionTypes}
+                    selection={selectionTypes.find((type) => type.id === flightSelectionType)?.label || undefined}
+                    label="Selection Type"
+                    placeholder="Selection Type"
+                    classModifier="travel-class-picker__items"
+                    valueFormatter={(value) => value}
+                    onPick={(value) => setFlightSelectionType(selectionTypes.find((type) => type.label === value)?.id || 'independent')}
+                  />
+                </div>
+                {sortByTypes && sortByTypes.length > 0 && (
+                  <div className="search__result-row-filter">
+                    <ItemPicker
+                      items={sortByTypes}
+                      selection={selectedSortByType?.label || undefined}
+                      selectedSortByType={selectedSortByType || undefined}
+                      label={translations.SRP.SORTBY}
+                      placeholder={translations.SRP.SORTBY}
+                      classModifier="travel-class-picker__items"
+                      valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
+                      onPick={handleSortChange}
+                    />
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+
+          <div className="search__results__wrapper">
+            {flightsLoading && <Spinner />}
+            {context?.searchConfiguration.qsmType == PortalQsmType.Flight && context?.showFlightAccommodationResults && results && results.length > 0 && (
+              <FlightSelection searchResults={results} flightSelectionType={flightSelectionType} />
+            )}
+          </div>
+        </>
+      </div>
+    </>
+  );
+};
+
+export default FlightResultsContainer;