@qite/tide-booking-component 1.4.95 → 1.4.97

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

@@ -1,220 +1,220 @@
-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 '../../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;
+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 '../../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 +1,65 @@
-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;
+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;