@qite/tide-booking-component 1.4.124 → 1.4.126

package/src/search-results/features/hotels/hotel-search-results-self-contained.tsx

@@ -1,220 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Filter, SearchResult, SearchResultsConfiguration } from '../../types';
-import SearchResults from '../..';
-import { Navbar, Footer } from '../../../../src';
-import { TideLogo, language, languages, topLinks, navItems } from '../../../../src/content/navbar/placeholderData';
-import Icon from '../../../shared/components/icon';
-
-interface HotelSearchResultsSelfContainedProps {}
-
-const HotelSearchResultsSelfContained: React.FC<HotelSearchResultsSelfContainedProps> = () => {
-  // Filters
-  const filters: Filter[] = [
-    {
-      property: 'regime',
-      label: 'Regime',
-      type: 'checkbox',
-      options: [
-        { label: 'Room only', value: ['RO', 'LO', 'OB'], isChecked: false },
-        { label: 'Bed & Beakfast', value: ['BB', 'KO'], isChecked: false },
-        { label: 'Half board', value: ['HB'], isChecked: false },
-        { label: 'Full board', value: ['FB'], isChecked: false }
-      ],
-      isFrontendFilter: false
-    },
-    {
-      property: 'price',
-      label: 'Prijs',
-      type: 'slider',
-      isFrontendFilter: false
-    },
-    {
-      property: 'rating',
-      label: 'Rating',
-      type: 'star-rating',
-      isFrontendFilter: true
-    },
-    {
-      property: 'theme',
-      label: "Thema's",
-      type: 'toggle',
-      options: [
-        { label: 'Adults', value: 1, isChecked: false },
-        { label: 'Luxury', value: 2, isChecked: false },
-        { label: 'Welness & Spa', value: 3, isChecked: false },
-        { label: 'familie', value: 4, isChecked: false }
-      ],
-      isFrontendFilter: false
-    }
-  ];
-
-  const customCardRenderer = (result: SearchResult): ReactNode => {
-    switch (result.type) {
-      case 'hotel':
-        return (
-          <div
-            key={result.id}
-            className="search__result-card__wrapper"
-            onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.02)')}
-            onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
-            <div className="search__result-card__img-wrapper">
-              <img src={result.image} alt={result.title} className="search__result-card__img" />
-              <div className="search__result-card__price__wrapper">
-                <span className="search__result-card__price__label">Total price</span>
-                <span className="search__result-card__price">{result.price}</span>
-              </div>
-            </div>
-            <div className="search__result-card__content">
-              <div className="search__result-card__content__wrapper">
-                <div className="search__result-card__header">
-                  <div className="search__result-card__header__wrapper">
-                    <div className="rating">
-                      <Icon name="ui-star" key={`rating-star-1`} width={14} height={14} />
-                      <Icon name="ui-star" key={`rating-star-2`} width={14} height={14} />
-                      <Icon name="ui-star" key={`rating-star-3`} width={14} height={14} />
-                      <Icon name="ui-star" key={`rating-star-4`} width={14} height={14} />
-                      <Icon name="ui-star" key={`rating-star-5`} width={14} height={14} />
-                    </div>
-                    <h3 className="search__result-card__title">
-                      {/* {result.title} */}
-                      hallo world!
-                    </h3>
-                  </div>
-                </div>
-                <a className="search__result-card__location">
-                  <Icon name="ui-location" height={16} />
-                  Amsterdam -Show on map &gt; 1.1 km from Center
-                </a>
-                <div className="search__result-card__options">
-                  <div className="search__result-card__option">
-                    <Icon name="ui-wifi" height={16} />
-                    Free Wi-Fi
-                  </div>
-                  <div className="search__result-card__option">
-                    <Icon name="ui-bed" height={16} />
-                    Comfort Room
-                  </div>
-                </div>
-                {/* {result.description && (
-                  <p
-                    style={{
-                      fontSize: '0.95rem',
-                      color: '#666',
-                      marginBottom: '12px'
-                    }}>
-                    {result.description}
-                  </p>
-                )} */}
-                <p className="search__result-card__description">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-                  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                </p>
-              </div>
-              <div className="search__result-card__footer">
-                <button type="button" className="cta cta--select" onClick={() => console.log('Clicked on customCard with id:', result.id)}>
-                  {result.ctaText}
-                </button>
-              </div>
-            </div>
-          </div>
-        );
-      case 'flight':
-        return <p>This should not be here...</p>;
-      default:
-        return null;
-    }
-  };
-
-  const configuration: SearchResultsConfiguration = {
-    searchConfiguration: {
-      id: 5,
-      name: 'Search Hotels',
-      icon: '',
-      defaultSearchType: 0,
-      serviceTypes: [3],
-      defaultCatalogueId: 1,
-      defaultDuration: undefined,
-      fromDateAmount: 1,
-      fromDateAmountType: 1,
-      toDateAmount: 7,
-      toDateAmountType: 0,
-      enableManualPackaging: false,
-      allowFlights: false,
-      allowAccommodations: false,
-      allowCarRentals: false,
-      allowTransfers: false,
-      allowExcursions: false,
-      qsmType: 1
-    },
-    tideConnection: {
-      host: 'https://tide-default3468-acceptance.tidesoftware.be',
-      apiKey: 'e9b95d79-de4c-41d6-ab7e-3dd429873058',
-      catalogueIds: [1, 2]
-    },
-    showFilters: true,
-    showFlightResults: false,
-    showHotelAccommodationResults: true,
-    showFlightAccommodationResults: false,
-    showRoundTripResults: false,
-    showTabViews: true,
-    filterIcon: (
-      <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor">
-        <path
-          d="M7.429 16v-5.714h1.714v2H16V14h-6.857v2ZM0 14v-1.714h5.714V14Zm3.429-3.143v-2H0v-1.715h3.429v-2h1.714v5.715Zm3.428-2v-1.715H16v1.715Zm3.429-3.143V0H12v2h4v1.715h-4v2Zm-10.286-2V2h9.143v1.715Z"
-          transform="translate(0 0)"
-        />
-      </svg>
-    ),
-    filters,
-    useGlobalApplyFilterButton: true,
-    onFilterChange: (updatedFilters) => {
-      console.log('Filters changed:', updatedFilters);
-    },
-
-    // Results
-    // results,
-    showCustomCards: true,
-    // customCards,
-    customCardRenderer,
-
-    // Map View
-    showMapView: false,
-
-    // Pagination
-    // pagination: {
-    //   totalResults: 50,
-    //   currentPage: 1,
-    //   onPaginationChange: (page: number) => {
-    //     console.log("Pagination changed to page:", page);
-    //   },
-    // },
-
-    // State & UI
-    isLoading: false,
-    customSpinner: null,
-
-    languageCode: 'en-GB',
-    destinationImage: {
-      url: 'https://images.unsplash.com/photo-1534292425621-6fbc5c09219a?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8dGVuZXJpZmV8ZW58MHx8MHx8fDA%3D',
-      alt: 'Tenerife'
-    }
-  };
-
-  return (
-    <div id="tide-content">
-      <Navbar
-        logo={<TideLogo />}
-        topLinks={topLinks}
-        items={navItems}
-        language={language}
-        languages={languages}
-        onLanguageChange={(lang) => console.log('Language changed:', lang)}
-        onSearch={(query) => console.log('Search:', query)}
-      />
-      <SearchResults configuration={configuration} />
-      <Footer />
-    </div>
-  );
-};
-
-export default HotelSearchResultsSelfContained;

package/src/search-results/features/roundtrips/roundtrip-search-results-self-contained.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { SearchResultsConfiguration } from '../../types';
-import SearchResults from '../..';
-import { Navbar, Footer } from '../../../../src';
-import { TideLogo, language, languages, topLinks, navItems } from '../../../../src/content/navbar/placeholderData';
-
-interface RoundtripSearchResultsSelfContainedProps {}
-
-const RoundtripSearchResultsSelfContained: React.FC<RoundtripSearchResultsSelfContainedProps> = () => {
-  const configuration: SearchResultsConfiguration = {
-    searchConfiguration: {
-      id: 4,
-      name: 'Search roundtrip',
-      icon: '',
-      defaultSearchType: 1,
-      serviceTypes: [0],
-      defaultCatalogueId: 1,
-      defaultDuration: undefined,
-      fromDateAmount: 1,
-      fromDateAmountType: 1,
-      toDateAmount: 7,
-      toDateAmountType: 0,
-      enableManualPackaging: false,
-      allowFlights: false,
-      allowAccommodations: false,
-      allowCarRentals: false,
-      allowTransfers: false,
-      allowExcursions: false,
-      qsmType: 4
-    },
-    showFilters: true,
-    tideConnection: {
-      host: 'https://tide-default3468-acceptance.tidesoftware.be',
-      apiKey: 'e9b95d79-de4c-41d6-ab7e-3dd429873058',
-      catalogueIds: [1, 2]
-    },
-    showTabViews: false,
-    showFlightResults: false,
-    showHotelAccommodationResults: false,
-    showRoundTripResults: true,
-    showCustomCards: false,
-    destinationImage: {
-      url: 'https://images.unsplash.com/photo-1534292425621-6fbc5c09219a?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8dGVuZXJpZmV8ZW58MHx8MHx8fDA%3D',
-      alt: 'Tenerife'
-    }
-  };
-
-  return (
-    <div id="tide-content">
-      <Navbar
-        logo={<TideLogo />}
-        topLinks={topLinks}
-        items={navItems}
-        language={language}
-        languages={languages}
-        onLanguageChange={(lang) => console.log('Language changed:', lang)}
-        onSearch={(query) => console.log('Search:', query)}
-      />
-      <SearchResults configuration={configuration} />
-      <Footer />
-    </div>
-  );
-};
-
-export default RoundtripSearchResultsSelfContained;

package/src/search-results/index.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-import SearchResultsConfigurationContext from './search-results-configuration-context';
-import { SearchResultsConfiguration } from './types';
-import SearchResultsContainer from './components/search-results-container/search-results-container';
-import { createSearchResultsStore } from './store/search-results-store';
-
-interface SearchResultsProps {
-  configuration: SearchResultsConfiguration;
-  onBookingStarted?: () => void;
-}
-
-const SearchResults: React.FC<SearchResultsProps> = ({ configuration, onBookingStarted }) => {
-  const store = React.useMemo(() => createSearchResultsStore(), []);
-
-  return (
-    <Provider store={store}>
-      <SearchResultsConfigurationContext.Provider value={configuration}>
-        <SearchResultsContainer onBookingStarted={onBookingStarted} />
-      </SearchResultsConfigurationContext.Provider>
-    </Provider>
-  );
-};
-
-export default SearchResults;

package/src/search-results/store/search-results-selectors.ts

@@ -1,84 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { SearchResultsRootState } from './search-results-store';
-import { getFlightKey } from '../utils/flight-utils';
-import { PackagingFlightResponse } from '@qite/tide-client';
-
-const selectSearchResultsState = (state: SearchResultsRootState) => state.searchResults;
-
-export const selectPackagingAccoResults = createSelector([selectSearchResultsState], (state) => state.packagingAccoResults);
-export const selectSelectedPackagingAccoResultCode = createSelector([selectSearchResultsState], (state) => state.selectedPackagingAccoResultCode);
-export const selectSelectedPackagingAccoResult = createSelector(
-  [selectPackagingAccoResults, selectSelectedPackagingAccoResultCode],
-  (packagingAccoResults, selectedPackagingAccoResultCode) => {
-    if (!selectedPackagingAccoResultCode) return null;
-
-    return packagingAccoResults.find((accoResult) => accoResult.code === selectedPackagingAccoResultCode) ?? null;
-  }
-);
-
-export const selectPackagingFlightResults = createSelector([selectSearchResultsState], (state) => state.packagingFlightResults);
-export const selectFilteredPackagingFlightResults = createSelector([selectSearchResultsState], (state) => state.filteredPackagingFlightResults);
-
-export const selectSelectedOutwardKey = createSelector([selectSearchResultsState], (state) => state.selectedOutwardKey);
-
-export const selectSelectedReturnKey = createSelector([selectSearchResultsState], (state) => state.selectedReturnKey);
-
-export const selectUniqueOutwardFlights = createSelector([selectFilteredPackagingFlightResults], (packagingFlightResults): PackagingFlightResponse[] => {
-  const map = new Map<string, PackagingFlightResponse>();
-
-  packagingFlightResults.forEach((flight) => {
-    const key = getFlightKey(flight.outward.segments);
-
-    if (!map.has(key)) {
-      map.set(key, flight);
-    }
-  });
-
-  return Array.from(map.values());
-});
-
-export const selectUniqueReturnFlights = createSelector(
-  [selectFilteredPackagingFlightResults, selectSelectedOutwardKey],
-  (packagingFlightResults, selectedOutwardKey): PackagingFlightResponse[] => {
-    if (!selectedOutwardKey) return [];
-
-    const matchingCombinations = packagingFlightResults.filter((flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey);
-
-    const map = new Map<string, PackagingFlightResponse>();
-
-    matchingCombinations.forEach((flight) => {
-      const key = getFlightKey(flight.return.segments);
-
-      if (!map.has(key)) {
-        map.set(key, flight);
-      }
-    });
-
-    return Array.from(map.values());
-  }
-);
-
-export const selectSelectedOutward = createSelector([selectPackagingFlightResults, selectSelectedOutwardKey], (packagingFlightResults, selectedOutwardKey) => {
-  if (!selectedOutwardKey) return null;
-
-  return packagingFlightResults.find((flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey) ?? null;
-});
-
-export const selectSelectedReturn = createSelector([selectPackagingFlightResults, selectSelectedReturnKey], (packagingFlightResults, selectedReturnKey) => {
-  if (!selectedReturnKey) return null;
-
-  return packagingFlightResults.find((flight) => getFlightKey(flight.return.segments) === selectedReturnKey) ?? null;
-});
-
-export const selectSelectedCombinationFlight = createSelector(
-  [selectPackagingFlightResults, selectSelectedOutwardKey, selectSelectedReturnKey],
-  (packagingFlightResults, selectedOutwardKey, selectedReturnKey) => {
-    if (!selectedOutwardKey || !selectedReturnKey) return null;
-
-    return (
-      packagingFlightResults.find(
-        (flight) => getFlightKey(flight.outward.segments) === selectedOutwardKey && getFlightKey(flight.return.segments) === selectedReturnKey
-      ) ?? null
-    );
-  }
-);