@qite/tide-booking-component 1.4.69 → 1.4.71

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

@@ -9,96 +9,21 @@ import Icon from '../icon';
 import { getTranslations } from '../../../shared/utils/localization-util';
 
 interface FiltersProps {
+  initialFilters: Filter[];
   filters: Filter[];
   isOpen: boolean;
   handleSetIsOpen: () => void;
-  handleApplyFilters: () => void;
   isLoading?: boolean;
 }
 
-const initialFilters: 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,
-    min: 2244,
-    max: 6785
-  },
-  {
-    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 Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, handleSetIsOpen, isLoading }) => {
+  const context = useContext(SearchResultsConfigurationContext);
+  if (!context || !context.showFilters) {
+    return null;
   }
-] as Filter[];
 
-const Filters: React.FC<FiltersProps> = ({ filters, isOpen, handleSetIsOpen, handleApplyFilters, isLoading }) => {
-  const context = useContext(SearchResultsConfigurationContext);
   const translations = getTranslations(context?.languageCode ?? 'en-GB');
   const [visibleFilters, setVisibleFilters] = useState<Record<string, boolean>>({});
-  const [pendingFilters, setPendingFilters] = useState<Filter[]>([]);
-  useEffect(() => {
-    if (initialFilters.length > 0) {
-      setPendingFilters(initialFilters);
-    }
-  }, [initialFilters]);
 
   const dispatch = useDispatch();
 
@@ -109,218 +34,153 @@ const Filters: React.FC<FiltersProps> = ({ filters, isOpen, handleSetIsOpen, han
     }));
   };
 
-  const updatePendingFilter = (updatedFilter: Filter) => {
-    setPendingFilters((prevFilters) => {
-      const index = prevFilters.findIndex((f) => f.property === updatedFilter.property);
-      if (index !== -1) {
-        const newFilters = [...prevFilters];
-        newFilters[index] = updatedFilter;
-        return newFilters;
-      } else {
-        return [...prevFilters, updatedFilter];
-      }
-    });
-  };
-
   const handleCheckBoxFilter = (filter: Filter, option: FilterOption) => {
-    setPendingFilters((prev) => {
-      const updated = prev.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))
-        };
-      });
-
-      if (!context?.useGlobalApplyFilterButton && !filter.useApplyFilterButton) {
-        dispatch(setFilters(updated));
-        context?.onFilterChange?.(updated);
-      }
-
-      return updated;
-    });
-  };
+    const updated = filters.map((f) => {
+      if (f.property !== filter.property) return f;
 
-  const handleSliderMinChange = (filter: Filter, value: number) => {
-    if (value < (filter.selectedMax ?? filter.max ?? 100)) {
-      const updatedFilter = {
-        ...filter,
-        selectedMin: value
+      return {
+        ...f,
+        options: f.options?.map((opt) => (opt.value === option.value ? { ...opt, isChecked: !opt.isChecked } : opt))
       };
+    });
 
-      updatePendingFilter(updatedFilter);
-      if (!context?.useGlobalApplyFilterButton && !filter.useApplyFilterButton) {
-        applyFilters();
-      }
-    }
+    dispatch(setFilters(updated));
   };
 
-  const handleSliderMaxChange = (filter: Filter, value: number) => {
-    if (value > (filter.selectedMin ?? filter.min ?? 0)) {
-      const updatedFilter = {
-        ...filter,
-        selectedMax: value
-      };
+  const handleSliderChange = (filter: Filter, newMin: number, newMax: number) => {
+    const updated = filters.map((f) => {
+      if (f.property !== filter.property) return f;
 
-      updatePendingFilter(updatedFilter);
-      if (!context?.useGlobalApplyFilterButton && !filter.useApplyFilterButton) {
-        applyFilters();
-      }
-    }
-  };
-
-  const applyFilters = () => {
-    dispatch(setFilters(pendingFilters));
-    context?.onFilterChange?.(pendingFilters);
-    handleApplyFilters();
+      return {
+        ...f,
+        selectedMin: newMin,
+        selectedMax: newMax
+      };
+    });
 
-    if (isOpen) {
-      handleSetIsOpen();
-    }
+    dispatch(setFilters(updated));
   };
 
   const handleFullReset = () => {
     if (!isLoading) {
-      setPendingFilters(initialFilters);
       dispatch(resetFilters(initialFilters));
     }
   };
 
-  const handleResetPendingChanges = () => {
-    setPendingFilters(filters); // ← back to last applied
-  };
-
-  const hasPendingChanges = (): boolean => {
-    return JSON.stringify(pendingFilters) !== JSON.stringify(filters);
-  };
-
-  if (!context || !context.showFilters) {
-    return null;
-  }
-
   return (
-    <>
-      {/* ---------------- Filters ---------------- */}
-
-      {/* ---------------- Filters desktop ---------------- */}
-      <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>
-            )}
-            {/* <Icon name="ui-info" height={16} /> */}
+    <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 ? (
-            <Spinner />
-          ) : (
-            <>
-              <div className="search__filters__group-container">
-                {pendingFilters.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>
+          {!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>
+                    {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>
-                      )}
-
-                      {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) => {
-                                handleSliderMinChange(filter, newMin);
-                                handleSliderMaxChange(filter, newMax);
-                              }}
-                            />
-                          );
-                        })()}
+                      </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 &&
+                    {/* {isVisible &&
                         filter.property === 'rating' &&
                         filter.type === 'star-rating' &&
                         (() => {
@@ -355,32 +215,15 @@ const Filters: React.FC<FiltersProps> = ({ filters, isOpen, handleSetIsOpen, han
                               ))}
                             </div>
                           );
-                        })()}
-                    </div>
-                  );
-                })}
-                {context.useGlobalApplyFilterButton && hasPendingChanges() && (
-                  <div className="search__filters__actions">
-                    <button
-                      className="cta--secondary "
-                      onClick={() => {
-                        handleResetPendingChanges();
-                        handleSetIsOpen();
-                      }}
-                      disabled={isLoading}>
-                      {translations.SRP.CANCEL}
-                    </button>
-                    <button className="cta" onClick={() => applyFilters()} disabled={isLoading}>
-                      {translations.SRP.APPLY}
-                    </button>
+                        })()} */}
                   </div>
-                )}
-              </div>
-            </>
-          )}
-        </div>
+                );
+              })}
+            </div>
+          </>
+        )}
       </div>
-    </>
+    </div>
   );
 };
 

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

@@ -1,7 +1,7 @@
 import { BookingPackageItem } from '@qite/tide-client/build/types';
-import { Filter } from '../../types';
+import { Filter, TideTag } from '../../types';
 
-export const enrichFiltersWithResults = (results: BookingPackageItem[], filters: Filter[] | undefined): Filter[] => {
+export const enrichFiltersWithResults = (results: BookingPackageItem[], filters: Filter[] | undefined, tags: TideTag[]): Filter[] => {
   if (!results || results.length === 0 || !filters) {
     return filters ?? [];
   }
@@ -14,6 +14,65 @@ export const enrichFiltersWithResults = (results: BookingPackageItem[], filters:
         filter.max = Math.ceil(Math.max(...prices));
       }
     }
+
+    if (filter.property === 'accommodation') {
+      const map = new Map<string, { name?: string; code: string }>();
+
+      results.forEach((r) => {
+        if (r.accommodationCode) {
+          map.set(r.accommodationCode, {
+            name: r.accommodationName,
+            code: r.accommodationCode
+          });
+        }
+      });
+
+      console.log('map', map);
+
+      filter.options = Array.from(map.values()).map((accommodation) => ({
+        label: accommodation.name ?? accommodation.code,
+        value: accommodation.code,
+        isChecked: false
+      }));
+    }
+
+    if (filter.property === 'regime') {
+      const map = new Map<string, { name?: string; code: string }>();
+
+      results.forEach((r) => {
+        if (r.regimeCode) {
+          map.set(r.regimeCode, {
+            name: r.regimeName,
+            code: r.regimeCode
+          });
+        }
+      });
+
+      filter.options = Array.from(map.values()).map((regime) => ({
+        label: regime.name ?? regime.code,
+        value: regime.code,
+        isChecked: false
+      }));
+    }
+
+    if (filter.property === 'theme') {
+      const map = new Map<number, { name: string; id: number }>();
+
+      results.forEach((r) => {
+        r.tagIds?.forEach((tagId) => {
+          const tag = tags.find((t) => t.id === tagId);
+          if (tag && tag.id != null && tag.name != null) {
+            map.set(tag.id, { name: tag.name, id: tag.id });
+          }
+        });
+      });
+
+      filter.options = Array.from(map.values()).map((theme) => ({
+        label: theme.name,
+        value: theme.id,
+        isChecked: false
+      }));
+    }
   }
 
   return filters;

package/src/search-results/components/group-tour/group-tour-card.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import Icon from '../icon';
+import { BookingPackageItem } from '@qite/tide-client';
+import { format } from 'date-fns';
+import { calculateDays, calculateNights, formatPrice, getTranslations } from '../../../shared/utils/localization-util';
+import { SearchResultsRootState } from '../../store/search-results-store';
+import { useDispatch, useSelector } from 'react-redux';
+import { setSelectedSearchResult } from '../../store/search-results-slice';
+
+interface GroupTourCardProps {
+  result: BookingPackageItem;
+  languageCode?: string;
+}
+
+const GroupTourCard: React.FC<GroupTourCardProps> = ({ result, languageCode }) => {
+  const dispatch = useDispatch();
+  const translations = getTranslations(languageCode ?? 'en-GB');
+  const { selectedSearchResultId } = useSelector((state: SearchResultsRootState) => state.searchResults);
+
+  const genders = result.allotment?.travellerGenders || [];
+  const maleCount = genders.filter((g) => g === 0).length;
+  const femaleCount = genders.filter((g) => g === 1).length;
+  const otherCount = genders.filter((g) => g === 2).length;
+
+  const handleChange = (productId: number) => {
+    dispatch(setSelectedSearchResult(productId));
+  };
+
+  return (
+    <div className="search__result-card">
+      <div className="search__result-card__allotment">
+        <div className="search__result-card__allotment__title__wrapper">
+          <h3 className="search__result-card__allotment__title">
+            {result.name}
+            <span className="search__result-card__allotment__badge">
+              <Icon name="ui-circle-check" width={14} height={14} />
+              GAR
+            </span>
+          </h3>
+
+          <div className="search__result-card__allotment__container">
+            <div className="search__result-card__allotment__header">
+              <div className="search__result-card__allotment__wrapper">
+                <div className="search__result-card__allotment__date">
+                  <Icon name="ui-plane" height={16} />
+                  <div className="search__result-card__allotment__date--from">{format(new Date(result.fromDate), 'dd/MM/yyyy')}</div>
+                </div>
+                <div className="search__result-card__allotment__info">
+                  <span>
+                    <Icon name="ui-calendar" height={16} />
+                  </span>{' '}
+                  {calculateDays(result.stayFromDate, result.stayToDate)} {translations.PRODUCT.DAYS} -{' '}
+                  <span>
+                    <Icon name="ui-moon" height={16} />
+                  </span>
+                  {calculateNights(result.stayFromDate, result.stayToDate)} {translations.SRP.NIGHTS}
+                </div>
+              </div>
+            </div>
+            {result.allotment && (
+              <div className="search__result-card__allotment__info">
+                <span className="search__result-card__allotment__info__group">{translations?.SRP.TRAVEL_GROUP}</span>
+                <div className="search__result-card__allotment__persons">
+                  <div className="search__result-card__allotment__person">
+                    <Icon name="ui-men" width={16} height={16} />
+                    <span>{maleCount} p.</span>
+                  </div>
+                  <div className="search__result-card__allotment__person">
+                    <Icon name="ui-women" width={16} height={16} />
+                    <span>{femaleCount} p.</span>
+                  </div>
+                  <div className="search__result-card__allotment__person">
+                    <Icon name="ui-other" width={16} height={16} />
+                    <span>{otherCount} p.</span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="search__result-card__allotment__footer">
+          <div className="search__result-card__allotment__price__wrapper">
+            <div className="search__result-card__allotment__price">
+              {formatPrice(result.price, result.currencyCode, languageCode)} {translations.PRODUCT.PER_PERSON}
+            </div>
+            {/* <div className="search__result-card__allotment__price__info">Gelieve € 450,00 zakgeld mee te nemen</div> */}
+          </div>
+          <button
+            type="button"
+            className={`cta ${selectedSearchResultId === result.productId ? 'cta--selected' : 'cta--select'}`}
+            onClick={() => handleChange(result.productId)}>
+            {selectedSearchResultId === result.productId ? translations?.SHARED.SELECTED : translations?.SHARED.SELECT}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GroupTourCard;