@qite/tide-booking-component 1.4.122 → 1.4.124

package/src/search-results/components/excursions/excursion-results.tsx

@@ -1,186 +1,186 @@
-import React, { useContext, useEffect, useState } from 'react';
-import Spinner from '../spinner/spinner';
-import { useDispatch, useSelector } from 'react-redux';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import { getTranslations } from '../../../shared/utils/localization-util';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import {
-  PackagingAccommodationRequest,
-  PackagingAccommodationResponse,
-  PackagingDestination,
-  searchPackagingExcursions,
-  TideClientConfig
-} from '@qite/tide-client';
-import { EXCURSION_SERVICE_TYPE } from '../../utils/query-utils';
-import { SearchSeed } from '../../types';
-import he from 'he';
-import { setFlyInType, setSelectedExcursionSearchResult } from '../../store/search-results-slice';
-
-interface ExcursionResultsProps {
-  isFlyIn?: boolean;
-  activeSearchSeed?: SearchSeed | null;
-}
-
-const ExcursionResults: React.FC<ExcursionResultsProps> = ({ isFlyIn, activeSearchSeed }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const dispatch = useDispatch();
-  const [isLoading, setIsLoading] = useState(false);
-  const [excursions, setExcursions] = useState<PackagingAccommodationResponse[] | null>(null);
-
-  const { flyInIsOpen, flyInType, excursionSearchParams, transactionId } = useSelector((state: SearchResultsRootState) => state.searchResults);
-
-  useEffect(() => {
-    if (!context || !activeSearchSeed || !excursionSearchParams) return;
-
-    (async () => {
-      try {
-        setIsLoading(true);
-        console.log('Excursion search params changed, fetching excursions...', excursionSearchParams);
-
-        const config: TideClientConfig = {
-          host: context.tideConnection.host,
-          apiKey: context.tideConnection.apiKey
-        };
-
-        const destination = excursionSearchParams.locationId
-          ? { id: Number(excursionSearchParams.locationId), type: 'location' }
-          : excursionSearchParams.oordId
-          ? { id: Number(excursionSearchParams.oordId), type: 'oord' }
-          : excursionSearchParams.regionId
-          ? { id: Number(excursionSearchParams.regionId), type: 'region' }
-          : excursionSearchParams.countryId
-          ? { id: Number(excursionSearchParams.countryId), type: 'country' }
-          : { id: 0, type: null };
-
-        const allPax = activeSearchSeed.rooms.flatMap((room) => room.pax);
-
-        const searchRequest: PackagingAccommodationRequest = {
-          transactionId: transactionId ?? '',
-          officeId: context.tideConnection.officeId ?? 1,
-          agentId: context.agentId ?? null,
-          portalId: context.portalId ?? null,
-          catalogueId: context.searchConfiguration.defaultCatalogueId ?? 0,
-          searchConfigurationId: context.searchConfiguration.id,
-          language: context.languageCode ?? 'en-GB',
-          serviceType: EXCURSION_SERVICE_TYPE,
-          fromDate: excursionSearchParams.fromDate,
-          toDate: excursionSearchParams.toDate,
-          destination: {
-            id: destination.id,
-            isCountry: destination.type === 'country',
-            isRegion: destination.type === 'region',
-            isOord: destination.type === 'oord',
-            isLocation: destination.type === 'location',
-            isAirport: false,
-            code: ''
-          } as PackagingDestination,
-          productCode: '',
-          // rooms: activeSearchSeed.rooms.map((room) => ({
-          //   travellers: room.pax.map((pax) => ({
-          //     id: pax.id,
-          //     age: pax.age,
-          //     dateOfBirth: pax.dateOfBirth
-          //   }))
-          // })),
-          rooms: [
-            {
-              travellers: allPax.map((pax) => ({
-                id: pax.id,
-                age: pax.age,
-                dateOfBirth: pax.dateOfBirth
-              }))
-            }
-          ],
-          tagIds: []
-        };
-
-        const packageExcursionSearchResults = await searchPackagingExcursions(config, searchRequest);
-        console.log('Excursion search results', packageExcursionSearchResults);
-        setExcursions(packageExcursionSearchResults);
-      } catch (err) {
-        console.error('Excursion search failed', err);
-      } finally {
-        setIsLoading(false);
-      }
-    })();
-  }, [context, activeSearchSeed, excursionSearchParams, transactionId]);
-
-  if (!context || !activeSearchSeed) {
-    return null;
-  }
-
-  if (!flyInIsOpen || flyInType !== 'excursion-results') {
-    return null;
-  }
-
-  const translations = getTranslations(context.languageCode ?? 'en-GB');
-
-  const handleChange = (excursion: PackagingAccommodationResponse): void => {
-    console.log('Selected excursion', excursion);
-    dispatch(setFlyInType('excursion-details'));
-    dispatch(setSelectedExcursionSearchResult(excursion));
-  };
-
-  return isLoading ? (
-    <Spinner label={translations.SRP.LOADING_EXCURSIONS} />
-  ) : (
-    <div className="flyin__content flyin__content--columns">
-      {/* <Filters
-                initialFilters={initialFilters}
-                filters={filters}
-                isOpen={false}
-                handleSetIsOpen={() => { }}
-                // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
-                isLoading={isLoading}
-                setFilters={(filters) => dispatch(setFilters(filters))}
-                resetFilters={(filters) => dispatch(resetFilters(filters))}
-              /> */}
-      <div className="search__results__wrapper">
-        <div className="search__result-row">
-          <span className="search__result-row-text">
-            {!isLoading && (
-              <>
-                {excursions?.length && excursions.length}
-                &nbsp;{translations.SRP.TOTAL_RESULTS_LABEL}
-              </>
-            )}
-          </span>
-          {/* {sortByTypes && sortByTypes.length > 0 && (
-                    <div className="search__result-row-filter">
-                      <ItemPicker
-                        items={sortByTypes}
-                        selection={selectedSortType?.label || undefined}
-                        selectedSortByType={selectedSortType}
-                        label={translations.SRP.SORTBY}
-                        placeholder={translations.SRP.SORTBY}
-                        classModifier="travel-class-picker__items"
-                        valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
-                        onPick={(newSortKey, direction) => handleSortChange(newSortKey, direction)}
-                      />
-                    </div>
-                  )} */}
-        </div>
-        <div className="search__results__cards search__results__cards--compact">
-          {excursions &&
-            excursions.length > 0 &&
-            excursions.map((excursion) => (
-              <div
-                key={excursion.code}
-                className="search__result-card__wrapper search__result-card__wrapper--custom"
-                onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.02)')}
-                onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
-                {excursion.contents ? <div dangerouslySetInnerHTML={{ __html: he.decode(excursion.contents) }}></div> : 'no contents'}
-                <div className="search__result-card__footer">
-                  <button type="button" className="cta cta--select" onClick={() => handleChange(excursion)}>
-                    {translations?.SHARED.SELECT}
-                  </button>
-                </div>
-              </div>
-            ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ExcursionResults;
+import React, { useContext, useEffect, useState } from 'react';
+import Spinner from '../spinner/spinner';
+import { useDispatch, useSelector } from 'react-redux';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { getTranslations } from '../../../shared/utils/localization-util';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+import {
+  PackagingAccommodationRequest,
+  PackagingAccommodationResponse,
+  PackagingDestination,
+  searchPackagingExcursions,
+  TideClientConfig
+} from '@qite/tide-client';
+import { EXCURSION_SERVICE_TYPE } from '../../utils/query-utils';
+import { SearchSeed } from '../../types';
+import he from 'he';
+import { setFlyInType, setSelectedExcursionSearchResult } from '../../store/search-results-slice';
+
+interface ExcursionResultsProps {
+  isFlyIn?: boolean;
+  activeSearchSeed?: SearchSeed | null;
+}
+
+const ExcursionResults: React.FC<ExcursionResultsProps> = ({ isFlyIn, activeSearchSeed }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  const dispatch = useDispatch();
+  const [isLoading, setIsLoading] = useState(false);
+  const [excursions, setExcursions] = useState<PackagingAccommodationResponse[] | null>(null);
+
+  const { flyInIsOpen, flyInType, excursionSearchParams, transactionId } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  useEffect(() => {
+    if (!context || !activeSearchSeed || !excursionSearchParams) return;
+
+    (async () => {
+      try {
+        setIsLoading(true);
+        console.log('Excursion search params changed, fetching excursions...', excursionSearchParams);
+
+        const config: TideClientConfig = {
+          host: context.tideConnection.host,
+          apiKey: context.tideConnection.apiKey
+        };
+
+        const destination = excursionSearchParams.locationId
+          ? { id: Number(excursionSearchParams.locationId), type: 'location' }
+          : excursionSearchParams.oordId
+          ? { id: Number(excursionSearchParams.oordId), type: 'oord' }
+          : excursionSearchParams.regionId
+          ? { id: Number(excursionSearchParams.regionId), type: 'region' }
+          : excursionSearchParams.countryId
+          ? { id: Number(excursionSearchParams.countryId), type: 'country' }
+          : { id: 0, type: null };
+
+        const allPax = activeSearchSeed.rooms.flatMap((room) => room.pax);
+
+        const searchRequest: PackagingAccommodationRequest = {
+          transactionId: transactionId ?? '',
+          officeId: context.tideConnection.officeId ?? 1,
+          agentId: context.agentId ?? null,
+          portalId: context.portalId ?? null,
+          catalogueId: context.searchConfiguration.defaultCatalogueId ?? 0,
+          searchConfigurationId: context.searchConfiguration.id,
+          language: context.languageCode ?? 'en-GB',
+          serviceType: EXCURSION_SERVICE_TYPE,
+          fromDate: excursionSearchParams.fromDate,
+          toDate: excursionSearchParams.toDate,
+          destination: {
+            id: destination.id,
+            isCountry: destination.type === 'country',
+            isRegion: destination.type === 'region',
+            isOord: destination.type === 'oord',
+            isLocation: destination.type === 'location',
+            isAirport: false,
+            code: ''
+          } as PackagingDestination,
+          productCode: '',
+          // rooms: activeSearchSeed.rooms.map((room) => ({
+          //   travellers: room.pax.map((pax) => ({
+          //     id: pax.id,
+          //     age: pax.age,
+          //     dateOfBirth: pax.dateOfBirth
+          //   }))
+          // })),
+          rooms: [
+            {
+              travellers: allPax.map((pax) => ({
+                id: pax.id,
+                age: pax.age,
+                dateOfBirth: pax.dateOfBirth
+              }))
+            }
+          ],
+          tagIds: []
+        };
+
+        const packageExcursionSearchResults = await searchPackagingExcursions(config, searchRequest);
+        console.log('Excursion search results', packageExcursionSearchResults);
+        setExcursions(packageExcursionSearchResults);
+      } catch (err) {
+        console.error('Excursion search failed', err);
+      } finally {
+        setIsLoading(false);
+      }
+    })();
+  }, [context, activeSearchSeed, excursionSearchParams, transactionId]);
+
+  if (!context || !activeSearchSeed) {
+    return null;
+  }
+
+  if (!flyInIsOpen || flyInType !== 'excursion-results') {
+    return null;
+  }
+
+  const translations = getTranslations(context.languageCode ?? 'en-GB');
+
+  const handleChange = (excursion: PackagingAccommodationResponse): void => {
+    console.log('Selected excursion', excursion);
+    dispatch(setFlyInType('excursion-details'));
+    dispatch(setSelectedExcursionSearchResult(excursion));
+  };
+
+  return isLoading ? (
+    <Spinner label={translations.SRP.LOADING_EXCURSIONS} />
+  ) : (
+    <div className="flyin__content flyin__content--columns">
+      {/* <Filters
+                initialFilters={initialFilters}
+                filters={filters}
+                isOpen={false}
+                handleSetIsOpen={() => { }}
+                // handleApplyFilters={() => setSearchTrigger((prev) => prev + 1)}
+                isLoading={isLoading}
+                setFilters={(filters) => dispatch(setFilters(filters))}
+                resetFilters={(filters) => dispatch(resetFilters(filters))}
+              /> */}
+      <div className="search__results__wrapper">
+        <div className="search__result-row">
+          <span className="search__result-row-text">
+            {!isLoading && (
+              <>
+                {excursions?.length && excursions.length}
+                &nbsp;{translations.SRP.TOTAL_RESULTS_LABEL}
+              </>
+            )}
+          </span>
+          {/* {sortByTypes && sortByTypes.length > 0 && (
+                    <div className="search__result-row-filter">
+                      <ItemPicker
+                        items={sortByTypes}
+                        selection={selectedSortType?.label || undefined}
+                        selectedSortByType={selectedSortType}
+                        label={translations.SRP.SORTBY}
+                        placeholder={translations.SRP.SORTBY}
+                        classModifier="travel-class-picker__items"
+                        valueFormatter={(value, direction) => getSortingName(translations, findSortByType(sortByTypes, value, direction ?? 'asc'))}
+                        onPick={(newSortKey, direction) => handleSortChange(newSortKey, direction)}
+                      />
+                    </div>
+                  )} */}
+        </div>
+        <div className="search__results__cards search__results__cards--compact">
+          {excursions &&
+            excursions.length > 0 &&
+            excursions.map((excursion) => (
+              <div
+                key={excursion.code}
+                className="search__result-card__wrapper search__result-card__wrapper--custom"
+                onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.02)')}
+                onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
+                {excursion.contents ? <div dangerouslySetInnerHTML={{ __html: he.decode(excursion.contents) }}></div> : 'no contents'}
+                <div className="search__result-card__footer">
+                  <button type="button" className="cta cta--select" onClick={() => handleChange(excursion)}>
+                    {translations?.SHARED.SELECT}
+                  </button>
+                </div>
+              </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ExcursionResults;