@qite/tide-booking-component 1.4.124 → 1.4.126

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

@@ -1,186 +0,0 @@
-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;

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

@@ -1,229 +0,0 @@
-import React, { useContext, useState } from 'react';
-import { Filter, FilterOption } from '../../types';
-import MultiRangeFilter from '../multi-range-filter';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import Spinner from '../spinner/spinner';
-import Icon from '../../../shared/components/icon';
-import { getTranslations } from '../../../shared/utils/localization-util';
-
-interface FiltersProps {
-  initialFilters: Filter[];
-  filters: Filter[];
-  isOpen: boolean;
-  handleSetIsOpen: () => void;
-  isLoading?: boolean;
-  setFilters: (filters: Filter[]) => void;
-  resetFilters: (filters: Filter[]) => void;
-}
-
-const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, handleSetIsOpen, isLoading, setFilters, resetFilters }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-
-  if (!context || !context.showFilters) {
-    return null;
-  }
-
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
-  const [visibleFilters, setVisibleFilters] = useState<Record<string, boolean>>({});
-
-  const toggleFilterVisibility = (filterId: string) => {
-    setVisibleFilters((prev) => ({
-      ...prev,
-      [filterId]: !prev[filterId]
-    }));
-  };
-
-  const handleCheckBoxFilter = (filter: Filter, option: FilterOption) => {
-    const updated = filters.map((f) => {
-      if (f.property !== filter.property) return f;
-
-      return {
-        ...f,
-        options: f.options?.map((opt) => (opt.value === option.value ? { ...opt, isChecked: !opt.isChecked } : opt))
-      };
-    });
-
-    setFilters(updated);
-  };
-
-  const handleStarRatingFilter = (filter: Filter, rating: number) => {
-    const updated = filters.map((f) => {
-      if (f.property !== filter.property) return f;
-
-      return {
-        ...f,
-        selectedRating: f.selectedRating === rating ? 0 : rating
-      };
-    });
-
-    setFilters(updated);
-  };
-
-  const handleSliderChange = (filter: Filter, newMin: number, newMax: number) => {
-    const updated = filters.map((f) => {
-      if (f.property !== filter.property) return f;
-
-      return {
-        ...f,
-        selectedMin: newMin,
-        selectedMax: newMax
-      };
-    });
-
-    setFilters(updated);
-  };
-
-  const handleFullReset = () => {
-    if (!isLoading) {
-      resetFilters(initialFilters);
-    }
-  };
-
-  return (
-    <div className={`search__filters--modal ${isOpen ? 'is-open' : ''}`}>
-      <div className="search__filters--background" onClick={() => handleSetIsOpen()}></div>
-      <button className="search__filters--close" onClick={() => handleSetIsOpen()}>
-        <Icon name="ui-close" height={24} />
-      </button>
-      <div className="search__filters">
-        <div className="search__filter-row search__filter__header">
-          <div className="search__filter-row-flex-title">
-            <p className="search__filter-small-title">{translations.SRP.FILTERS}</p>
-          </div>
-          {!isLoading && (
-            <a className="search__filter-reset" onClick={() => handleFullReset()}>
-              {translations.SRP.RESET}
-            </a>
-          )}
-        </div>
-        {isLoading ? (
-          <Spinner />
-        ) : (
-          <>
-            <div className="search__filters__group-container">
-              {filters.map((filter, index) => {
-                const isVisible = visibleFilters[filter.property] ?? true;
-
-                return (
-                  <div key={`${filter.property}-${index}`} className="search__filter-group">
-                    <div
-                      className="search__filter-row search__filter-row--underline"
-                      onClick={() => toggleFilterVisibility(filter.property)}
-                      role="button"
-                      tabIndex={0}>
-                      <h6 className="search__filter-large-title">{filter.label}</h6>
-                      <svg
-                        id="search-chevron-up-icon"
-                        className={`search__filter-chevron-icon ${isVisible ? 'search__filter-chevron-icon--flipped' : ''} `}
-                        viewBox="0 0 10 6.063"
-                        width={10}
-                        height={6.063}>
-                        <path
-                          id="Path_62"
-                          data-name="Path 62"
-                          d="M245-617.937l-5-5L241.063-624,245-620.062,248.938-624,250-622.937Z"
-                          transform="translate(-240 624)"
-                          fill="#707070"
-                        />
-                      </svg>
-                    </div>
-
-                    {isVisible && filter.type === 'checkbox' && (
-                      <div className="search__filter-rows">
-                        {filter.options &&
-                          filter.options.map((option: FilterOption, optionIndex) => (
-                            <div className="search__filter-row search__filter-row--checkbox" key={`${option.label}-${optionIndex}`}>
-                              <div className="checkbox">
-                                <label className="checkbox__label">
-                                  <input
-                                    type="checkbox"
-                                    className="checkbox__input checkbox__input--parent"
-                                    checked={option.isChecked}
-                                    onChange={(e) => handleCheckBoxFilter(filter, option)}
-                                  />
-                                  <span className="radiobutton__label-text">{option.label}</span>
-                                </label>
-                              </div>
-                            </div>
-                          ))}
-                      </div>
-                    )}
-
-                    {isVisible && filter.type === 'toggle' && (
-                      <div className="search__filter-rows">
-                        {filter.options?.map((option: FilterOption, optionIndex) => (
-                          <div className="search__filter-row" key={`${option.label}-${optionIndex}`}>
-                            <span className="search__filter-toggle-label">{option.label}</span>
-                            <div className="checkbox"></div>
-                            <label className="checkbox__label">
-                              <input
-                                type="checkbox"
-                                className="checkbox__input"
-                                checked={option.isChecked}
-                                onChange={() => handleCheckBoxFilter(filter, option)}
-                              />
-                            </label>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-
-                    {isVisible &&
-                      filter &&
-                      filter.type === 'slider' &&
-                      (() => {
-                        const min = filter.min ?? 0;
-                        const max = filter.max ?? 100;
-                        const selectedMin = filter.selectedMin ?? min;
-                        const selectedMax = filter.selectedMax ?? max;
-                        const range = max - min || 1;
-
-                        return (
-                          <MultiRangeFilter
-                            min={min}
-                            max={max}
-                            selectedMin={selectedMin}
-                            selectedMax={selectedMax}
-                            valueFormatter={(value) => `${value}`}
-                            onChange={(newMin, newMax) => {
-                              handleSliderChange(filter, newMin, newMax);
-                            }}
-                          />
-                        );
-                      })()}
-
-                    {isVisible &&
-                      filter.property === 'rating' &&
-                      filter.type === 'star-rating' &&
-                      (() => {
-                        const selectedRating = filter.selectedRating ?? 0;
-                        return (
-                          <div className="search__filter-row star-rating-filter">
-                            {[5, 4, 3, 2, 1].map((star) => (
-                              <span
-                                key={star}
-                                className={`star ${star <= selectedRating ? 'filled' : ''}`}
-                                onClick={() => handleStarRatingFilter(filter, star)}
-                                role="button"
-                                tabIndex={0}
-                                onKeyDown={(e) => {
-                                  if (e.key === 'Enter' || e.key === ' ') handleStarRatingFilter(filter, star);
-                                }}>
-                                ★
-                              </span>
-                            ))}
-                          </div>
-                        );
-                      })()}
-                  </div>
-                );
-              })}
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Filters;