@qite/tide-booking-component 1.4.95 → 1.4.97

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

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