@qite/tide-booking-component 1.4.123 → 1.4.124

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

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