@qite/tide-booking-component 1.4.124 → 1.4.125

package/src/search-results/components/spinner/spinner.tsx

@@ -1,24 +0,0 @@
-import React, { useContext } from 'react';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import { getTranslations } from '../../../shared/utils/localization-util';
-
-type SpinnerProps = {
-  label?: string;
-};
-
-const Spinner: React.FC<SpinnerProps> = ({ label }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
-  return (
-    <div className="loader__container">
-      <div className="loader__line">
-        <li className="loader__ball loader__ball--1"></li>
-        <li className="loader__ball loader__ball--2"></li>
-        <li className="loader__ball loader__ball--3"></li>
-      </div>
-      <div data-text={label ?? translations.SRP.LOADING} className="loader__line__text"></div>
-    </div>
-  );
-};
-
-export default Spinner;

package/src/search-results/components/tab-views/index.tsx

@@ -1,53 +0,0 @@
-import React, { useContext } 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';
-import { getTranslations } from '../../../shared/utils/localization-util';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import { PortalQsmType } from '@qite/tide-client';
-
-interface TabViewsProps {}
-
-const TabViews: React.FC<TabViewsProps> = () => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
-
-  const dispatch = useDispatch();
-
-  const { activeTab } = useSelector((state: SearchResultsRootState) => state.searchResults);
-
-  const handleSortChange = (tab: string) => {
-    dispatch(setActiveTab(tab));
-  };
-
-  return (
-    <div className="search__results__tab-views">
-      <button
-        type="button"
-        className={`search__results__tab-view ${activeTab === 'extended' ? 'search__results__tab-view--active' : ''}`}
-        onClick={() => handleSortChange('extended')}>
-        <Icon name="ui-extended" height={16} />
-        {translations.SRP.EXTENDED}
-      </button>
-      {context?.searchConfiguration.qsmType !== PortalQsmType.GroupTour && (
-        <button
-          type="button"
-          className={`search__results__tab-view ${activeTab === 'compact' ? 'search__results__tab-view--active' : ''}`}
-          onClick={() => handleSortChange('compact')}>
-          <Icon name="ui-compact" height={16} />
-          {translations.SRP.COMPACT}
-        </button>
-      )}
-      <button
-        type="button"
-        className={`search__results__tab-view ${activeTab === 'list' ? 'search__results__tab-view--active' : ''}`}
-        onClick={() => handleSortChange('list')}>
-        <Icon name="ui-list" height={16} />
-        {translations.SRP.LIST}
-      </button>
-    </div>
-  );
-};
-
-export default TabViews;

package/src/search-results/features/flights/flight-search-results-self-contained.tsx

@@ -1,294 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Filter, SearchResult, SearchResultsConfiguration } from '../../types';
-import SearchResults from '../..';
-import { Footer, Navbar } from '../../../../src';
-import { TideLogo, language, languages, topLinks, navItems } from '../../../../src/content/navbar/placeholderData';
-import Icon from '../../../shared/components/icon';
-
-interface FlightSearchResultsSelfContainedProps {}
-
-const FlightSearchResultsSelfContained: React.FC<FlightSearchResultsSelfContainedProps> = () => {
-  // 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 'flight':
-        return <p>This should not be here...</p>;
-      case 'hotel':
-        // const formatDateTime = (date: Date) =>
-        //   new Intl.DateTimeFormat('en-US', {
-        //     hour: '2-digit',
-        //     minute: '2-digit',
-        //     hour12: false
-        //   }).format(new Date(date));
-
-        // const { outbound, return: returnLeg, price, ctaText, title, tags } = result;
-
-        return (
-          <>
-            <div className="flight">
-              <div className="flight__option">
-                <div className="flight__content">
-                  <div className="flight__flights">
-                    <div className="flight__flight">
-                      <div className="flight__flight__header">
-                        <div className="flight__status__container"></div>
-                        <div className="flight__price">
-                          <span className="price price--increase">- € 375,98</span>
-                          <button type="button" className="cta cta--select">
-                            Select
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                    {/* <FlightOptionFlight details={item.outward} isOptionsVisible={outwardVisible} />
-                    <FlightOptionFlight details={item.return} isOptionsVisible={returnVisible} /> */}
-                    <div className="flight__flight">
-                      <div className="flight__flight__container">
-                        <div className="flight__flight__wrapper">
-                          <div className="flight__logo__wrapper">
-                            <img src="https://media.tidesoftware.be/media/shared/Airlines/XX.png?height=256" alt="" className="flight__logo" />
-                            <span>Example Airline</span>
-                          </div>
-                          <div className="flight__info">
-                            <div className="flight__info__times">
-                              <strong>08:30 JFK</strong>
-                              <p>Mon 12 Feb 2025</p>
-                            </div>
-                            <div className="flight__info__duration">
-                              <p>7h 45m</p>
-                              <div className="flight__info__duration__stops">
-                                <div className="flight__info__duration__stop" />
-                              </div>
-                              <span>1 stop</span>
-                            </div>
-                            <div className="flight__info__times flight__info__times--arrival">
-                              <strong>22:15 AMS</strong>
-                              <p>Tue 13 Feb 2025</p>
-                              <span className="flight__info__times__days">+1 day</span>
-                            </div>
-                          </div>
-                        </div>
-
-                        <div className="flight__detail__btn__wrapper">
-                          <div className="flight__detail__btn">
-                            {/* Static icon, no click logic */}
-                            <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
-                          </div>
-                        </div>
-                      </div>
-
-                      {/* Detail section, always visible in this static version */}
-                      <div className="flight__detail">
-                        {/* Flight Line 1 */}
-                        <div className="flight__info">
-                          <div className="flight__info__times__wrapper">
-                            <div className="flight__info__times">
-                              <p>08:30</p>
-                              <strong>JFK</strong>
-                              <p>Mon 12 Feb 2025</p>
-                            </div>
-                            <div>
-                              <Icon name="ui-plane-depart" width={30} height={20} />
-                            </div>
-                          </div>
-                          <div className="flight__info__duration">
-                            <p>6h 20m</p>
-                            <div className="flight__info__duration__stops" />
-                            <span>Example Airline</span>
-                            <strong>EA123</strong>
-                          </div>
-                          <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
-                            <div>
-                              <Icon name="ui-plane-arrive" width={30} height={20} />
-                            </div>
-                            <div className="flight__info__times flight__info__times--arrival">
-                              <p>20:50</p>
-                              <strong>LHR</strong>
-                              <p>Mon 12 Feb 2025</p>
-                            </div>
-                          </div>
-                        </div>
-
-                        {/* Wait time */}
-                        <div className="flight__info">
-                          <div className="flight__info__times" />
-                          <div className="flight__info__duration flight__info__duration--waittime">
-                            <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
-                              <Icon name="ui-clock" width={24} height={24} />
-                            </div>
-                            <div className="flight__info__duration__stoptime">
-                              <span>Stop time</span>
-                              <strong>1h 15m</strong>
-                            </div>
-                          </div>
-                          <div className="flight__info__times flight__info__times--arrival" />
-                        </div>
-
-                        {/* Flight Line 2 */}
-                        <div className="flight__info">
-                          <div className="flight__info__times__wrapper">
-                            <div className="flight__info__times">
-                              <p>22:05</p>
-                              <strong>LHR</strong>
-                              <p>Mon 12 Feb 2025</p>
-                            </div>
-                            <div>
-                              <Icon name="ui-plane-depart" width={30} height={20} />
-                            </div>
-                          </div>
-                          <div className="flight__info__duration">
-                            <p>1h 10m</p>
-                            <div className="flight__info__duration__stops" />
-                            <span>Example Airline</span>
-                            <strong>EA456</strong>
-                          </div>
-                          <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
-                            <div>
-                              <Icon name="ui-plane-arrive" width={30} height={20} />
-                            </div>
-                            <div className="flight__info__times flight__info__times--arrival">
-                              <p>23:15</p>
-                              <strong>AMS</strong>
-                              <p>Mon 12 Feb 2025</p>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-
-                      {/* Rate section kept empty (original code was commented out) */}
-                      <div className="flight__rate">{/* Add static rate cards here if you want them rendered */}</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </>
-        );
-      default:
-        return null;
-    }
-  };
-
-  const configuration: SearchResultsConfiguration = {
-    searchConfiguration: {
-      id: 6,
-      name: 'Search Flights',
-      icon: '',
-      defaultSearchType: 3,
-      serviceTypes: [7],
-      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: 3
-    },
-    tideConnection: {
-      host: 'https://tide-default3468-acceptance.tidesoftware.be',
-      apiKey: 'e9b95d79-de4c-41d6-ab7e-3dd429873058',
-      catalogueIds: [1, 2]
-    }, // no backend needed for static content
-    showFilters: true,
-    showFlightResults: false,
-    showHotelAccommodationResults: false,
-    showFlightAccommodationResults: true,
-    showRoundTripResults: false,
-    showTabViews: true,
-    // results,
-    // customCards,
-    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" />
-      </svg>
-    ),
-    useGlobalApplyFilterButton: true,
-    onFilterChange: (updatedFilters) => {
-      console.log('Filters changed:', updatedFilters);
-    },
-
-    // ---- Static results + custom renderer ----
-    showCustomCards: true,
-    customCardRenderer,
-
-    filters,
-
-    // Map View
-    showMapView: false,
-
-    // Pagination
-
-    // 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 FlightSearchResultsSelfContained;

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

@@ -1,143 +0,0 @@
-import React, { ReactNode } from 'react';
-import { 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 HotelFlightSearchResultsSelfContainedProps {}
-
-const HotelFlightSearchResultsSelfContained: React.FC<HotelFlightSearchResultsSelfContainedProps> = () => {
-  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: 7,
-      name: 'Transport + hotel',
-      icon: '',
-      defaultSearchType: 0,
-      serviceTypes: [0],
-      defaultCatalogueId: 1,
-      defaultDuration: undefined,
-      fromDateAmount: 1,
-      fromDateAmountType: 1,
-      toDateAmount: 7,
-      toDateAmountType: 0,
-      enableManualPackaging: true,
-      allowFlights: true,
-      allowAccommodations: true,
-      allowCarRentals: false,
-      allowTransfers: false,
-      allowExcursions: false,
-      qsmType: 2
-    },
-    showFilters: false,
-    tideConnection: {
-      host: 'https://tide-default3468-acceptance.tidesoftware.be',
-      apiKey: 'e9b95d79-de4c-41d6-ab7e-3dd429873058',
-      catalogueIds: [1, 2]
-    },
-    showTabViews: true,
-    showFlightResults: true,
-    showHotelAccommodationResults: true,
-    showCustomCards: true,
-    customCardRenderer,
-    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 HotelFlightSearchResultsSelfContained;