@qite/tide-booking-component 1.4.124 → 1.4.126

package/src/search-results/components/round-trip/round-trip-results.tsx

@@ -1,199 +0,0 @@
-import React, { useEffect } from 'react';
-import Icon from '../../../shared/components/icon';
-import { useDispatch, useSelector } from 'react-redux';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import { setActiveTab } from '../../store/search-results-slice';
-
-interface RoundTripResultsProps {}
-
-const RoundTripResults: React.FC<RoundTripResultsProps> = () => {
-  const { activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    if (activeTab === 'compact') {
-      dispatch(setActiveTab('list'));
-    }
-  }, [activeTab]);
-
-  return (
-    <div className={`search__results__cards search__results__cards--${activeTab}`}>
-      <div className="search__result-card">
-        <div className="search__result-card__allotment">
-          <div className="search__result-card__allotment__img-wrapper">
-            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
-          </div>
-          <div className="search__result-card__allotment__title__wrapper">
-            <h3 className="search__result-card__allotment__title">
-              Rondreis Noord-India: Rajasthan
-              <span className="search__result-card__allotment__badge">
-                <Icon name="ui-circle-check" width={14} height={14} />
-                GAR
-              </span>
-            </h3>
-
-            <div className="search__result-card__allotment__container">
-              <div className="search__result-card__allotment__header">
-                <div className="search__result-card__allotment__wrapper">
-                  <div className="search__result-card__allotment__date">
-                    <Icon name="ui-plane" height={16} />
-                    <div className="search__result-card__allotment__date--from">05-04-2026</div>
-                  </div>
-                  <div className="search__result-card__allotment__info">
-                    <span>
-                      <Icon name="ui-calendar" height={16} />
-                    </span>{' '}
-                    8 dagen -{' '}
-                    <span>
-                      <Icon name="ui-moon" height={16} />
-                    </span>
-                    7 nachten
-                  </div>
-                </div>
-              </div>
-              <div className="search__result-card__allotment__info">
-                <a href="#" type="button" className="search__result-card__allotment__info__group">
-                  Group
-                </a>
-                <div className="search__result-card__allotment__persons">
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-men" width={16} height={16} />
-                    <span>2 p.</span>
-                  </div>
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-women" width={16} height={16} />
-                    <span>3 p.</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="search__result-card__allotment__footer">
-            <div className="search__result-card__allotment__price__wrapper">
-              <div className="search__result-card__allotment__price">€ 1.250,00 p.p.</div>
-              <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div>
-            </div>
-            <button className="cta cta--select">Bekijk reis</button>
-          </div>
-        </div>
-      </div>
-      <div className="search__result-card">
-        <div className="search__result-card__allotment">
-          <div className="search__result-card__allotment__img-wrapper">
-            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
-          </div>
-          <div className="search__result-card__allotment__title__wrapper">
-            <h3 className="search__result-card__allotment__title">
-              Rondreis Thailand
-              <span className="search__result-card__allotment__badge search__result-card__allotment__badge--secondary">
-                <Icon name="ui-circle-half" width={14} height={14} />
-                BIJNA GAR
-              </span>
-            </h3>
-            <p className="search__result-card__allotment__description">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quis explicabo, animi illum expedita molestias quae atque laboriosam consequatur
-              nulla error non delectus nesciunt id voluptatem quia nobis? Debitis, rerum!
-            </p>
-            <div className="search__result-card__allotment__container">
-              <div className="search__result-card__allotment__header">
-                <div className="search__result-card__allotment__wrapper">
-                  <div className="search__result-card__allotment__date">
-                    <Icon name="ui-plane" height={16} />
-                    <div className="search__result-card__allotment__date--from">05-04-2026</div>
-                  </div>
-                  <div className="search__result-card__allotment__info">
-                    <span>
-                      <Icon name="ui-calendar" height={16} />
-                    </span>{' '}
-                    8 dagen -{' '}
-                    <span>
-                      <Icon name="ui-moon" height={16} />
-                    </span>
-                    7 nachten
-                  </div>
-                </div>
-              </div>
-              <div className="search__result-card__allotment__info">
-                <a href="#" type="button" className="search__result-card__allotment__info__group">
-                  Group
-                </a>
-                <div className="search__result-card__allotment__persons">
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-men" width={16} height={16} />
-                    <span>2 p.</span>
-                  </div>
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-women" width={16} height={16} />
-                    <span>3 p.</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="search__result-card__allotment__footer">
-            <div className="search__result-card__allotment__price__wrapper">
-              <div className="search__result-card__allotment__price">€ 1.250,00 p.p.</div>
-              <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div>
-            </div>
-            <button className="cta cta--select">Bekijk reis</button>
-          </div>
-        </div>
-      </div>
-      <div className="search__result-card">
-        <div className="search__result-card__allotment">
-          <div className="search__result-card__allotment__img-wrapper">
-            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
-          </div>
-          <div className="search__result-card__allotment__title__wrapper">
-            <h3 className="search__result-card__allotment__title">Rondreis Timboektoe</h3>
-
-            <div className="search__result-card__allotment__container">
-              <div className="search__result-card__allotment__header">
-                <div className="search__result-card__allotment__wrapper">
-                  <div className="search__result-card__allotment__date">
-                    <Icon name="ui-plane" height={16} />
-                    <div className="search__result-card__allotment__date--from">05-04-2026</div>
-                  </div>
-                  <div className="search__result-card__allotment__info">
-                    <span>
-                      <Icon name="ui-calendar" height={16} />
-                    </span>{' '}
-                    8 dagen -{' '}
-                    <span>
-                      <Icon name="ui-moon" height={16} />
-                    </span>
-                    7 nachten
-                  </div>
-                </div>
-              </div>
-              <div className="search__result-card__allotment__info">
-                <a href="#" type="button" className="search__result-card__allotment__info__group">
-                  Group
-                </a>
-                <div className="search__result-card__allotment__persons">
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-men" width={16} height={16} />
-                    <span>2 p.</span>
-                  </div>
-                  <div className="search__result-card__allotment__person">
-                    <Icon name="ui-women" width={16} height={16} />
-                    <span>3 p.</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="search__result-card__allotment__footer">
-            <div className="search__result-card__allotment__price__wrapper">
-              <div className="search__result-card__allotment__price">€ 1.250,00 p.p.</div>
-              <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div>
-            </div>
-            <button className="cta cta--select">Bekijk reis</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default RoundTripResults;

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

@@ -1,137 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-
-import ItemPicker from '../item-picker';
-
-import Icon from '../../../shared/components/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 label={translations.SRP.LOADING_FLIGHTS} />}
-            {context?.searchConfiguration.qsmType == PortalQsmType.Flight && context?.showFlightAccommodationResults && results && results.length > 0 && (
-              <FlightSelection searchResults={results} flightSelectionType={flightSelectionType} />
-            )}
-          </div>
-        </>
-      </div>
-    </>
-  );
-};
-
-export default FlightResultsContainer;