@qite/tide-booking-component 1.4.91 → 1.4.93

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

@@ -1,230 +1,230 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { Filter, FilterOption } from '../../types';
-import MultiRangeFilter from '../multi-range-filter';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import { resetFilters, setFilters } from '../../store/search-results-slice';
-import { useDispatch } from 'react-redux';
-import Spinner from '../spinner/spinner';
-import Icon from '../icon';
-import { getTranslations } from '../../../shared/utils/localization-util';
-
-interface FiltersProps {
-  initialFilters: Filter[];
-  filters: Filter[];
-  isOpen: boolean;
-  handleSetIsOpen: () => void;
-  isLoading?: boolean;
-}
-
-const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, handleSetIsOpen, isLoading }) => {
-  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 dispatch = useDispatch();
-
-  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))
-      };
-    });
-
-    dispatch(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
-      };
-    });
-
-    dispatch(setFilters(updated));
-  };
-
-  const handleFullReset = () => {
-    if (!isLoading) {
-      dispatch(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;
-
-                          const handleRatingChange = (rating: number) => {
-                            const updatedFilter = {
-                              ...filter,
-                              selectedRating: rating
-                            };
-                            updatePendingFilter(updatedFilter);
-
-                            if (!context?.useGlobalApplyFilterButton && !filter.useApplyFilterButton) {
-                              applyFilters();
-                            }
-                          };
-
-                          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={() => handleRatingChange(star)}
-                                  role="button"
-                                  tabIndex={0}
-                                  onKeyDown={(e) => {
-                                    if (e.key === 'Enter' || e.key === ' ') handleRatingChange(star);
-                                  }}>
-                                  ★
-                                </span>
-                              ))}
-                            </div>
-                          );
-                        })()} */}
-                  </div>
-                );
-              })}
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Filters;
+import React, { useContext, useEffect, useState } from 'react';
+import { Filter, FilterOption } from '../../types';
+import MultiRangeFilter from '../multi-range-filter';
+import SearchResultsConfigurationContext from '../../search-results-configuration-context';
+import { resetFilters, setFilters } from '../../store/search-results-slice';
+import { useDispatch } from 'react-redux';
+import Spinner from '../spinner/spinner';
+import Icon from '../icon';
+import { getTranslations } from '../../../shared/utils/localization-util';
+
+interface FiltersProps {
+  initialFilters: Filter[];
+  filters: Filter[];
+  isOpen: boolean;
+  handleSetIsOpen: () => void;
+  isLoading?: boolean;
+}
+
+const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, handleSetIsOpen, isLoading }) => {
+  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 dispatch = useDispatch();
+
+  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))
+      };
+    });
+
+    dispatch(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
+      };
+    });
+
+    dispatch(setFilters(updated));
+  };
+
+  const handleFullReset = () => {
+    if (!isLoading) {
+      dispatch(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;
+
+                          const handleRatingChange = (rating: number) => {
+                            const updatedFilter = {
+                              ...filter,
+                              selectedRating: rating
+                            };
+                            updatePendingFilter(updatedFilter);
+
+                            if (!context?.useGlobalApplyFilterButton && !filter.useApplyFilterButton) {
+                              applyFilters();
+                            }
+                          };
+
+                          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={() => handleRatingChange(star)}
+                                  role="button"
+                                  tabIndex={0}
+                                  onKeyDown={(e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') handleRatingChange(star);
+                                  }}>
+                                  ★
+                                </span>
+                              ))}
+                            </div>
+                          );
+                        })()} */}
+                  </div>
+                );
+              })}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Filters;