@qite/tide-booking-component 1.4.120 → 1.4.122

package/build/build-cjs/index.js

@@ -41274,7 +41274,10 @@ var HotelCard = function (_a) {
           return (e.currentTarget.style.transform = 'scale(1)');
         }
       },
-      React__default['default'].createElement('div', { dangerouslySetInnerHTML: { __html: he.decode(result.contents) } }),
+      React__default['default'].createElement('div', {
+        className: 'search__result-card__top',
+        dangerouslySetInnerHTML: { __html: he.decode(result.contents) }
+      }),
       React__default['default'].createElement(
         'div',
         { className: 'search__result-card__footer' },
@@ -42184,6 +42187,13 @@ var Filters = function (_a) {
     });
     setFilters(updated);
   };
+  var handleStarRatingFilter = function (filter, rating) {
+    var updated = filters.map(function (f) {
+      if (f.property !== filter.property) return f;
+      return __assign(__assign({}, f), { selectedRating: f.selectedRating === rating ? 0 : rating });
+    });
+    setFilters(updated);
+  };
   var handleSliderChange = function (filter, newMin, newMax) {
     var updated = filters.map(function (f) {
       if (f.property !== filter.property) return f;
@@ -42360,6 +42370,35 @@ var Filters = function (_a) {
                           handleSliderChange(filter, newMin, newMax);
                         }
                       });
+                    })(),
+                  isVisible &&
+                    filter.property === 'rating' &&
+                    filter.type === 'star-rating' &&
+                    (function () {
+                      var _a;
+                      var selectedRating = (_a = filter.selectedRating) !== null && _a !== void 0 ? _a : 0;
+                      return React__default['default'].createElement(
+                        'div',
+                        { className: 'search__filter-row star-rating-filter' },
+                        [5, 4, 3, 2, 1].map(function (star) {
+                          return React__default['default'].createElement(
+                            'span',
+                            {
+                              key: star,
+                              className: 'star '.concat(star <= selectedRating ? 'filled' : ''),
+                              onClick: function () {
+                                return handleStarRatingFilter(filter, star);
+                              },
+                              role: 'button',
+                              tabIndex: 0,
+                              onKeyDown: function (e) {
+                                if (e.key === 'Enter' || e.key === ' ') handleStarRatingFilter(filter, star);
+                              }
+                            },
+                            '\u2605'
+                          );
+                        })
+                      );
                     })()
                 );
               })
@@ -45808,6 +45847,32 @@ var enrichFiltersWithPackageAccoResults = function (results, tags) {
   priceFilter.min = Math.floor(Math.min.apply(Math, prices));
   priceFilter.max = Math.ceil(Math.max.apply(Math, prices));
   filters.push(priceFilter);
+  var starsFilter = {
+    property: 'rating',
+    label: 'Stars',
+    type: 'star-rating',
+    options: [],
+    isFrontendFilter: true
+  };
+  var ratingMap = new Map();
+  results.forEach(function (r) {
+    var stars = r.stars;
+    if (stars) {
+      ratingMap.set(stars.toString(), {
+        name: stars.toString(),
+        value: stars
+      });
+    }
+  });
+  starsFilter.options = Array.from(ratingMap.values()).map(function (rating) {
+    var _a;
+    return {
+      label: (_a = rating.name) !== null && _a !== void 0 ? _a : rating.value.toString(),
+      value: rating.value,
+      isChecked: false
+    };
+  });
+  filters.push(starsFilter);
   return filters;
 };
 var enrichFiltersWithPackageFlightResults = function (results, tags, translations) {
@@ -46120,6 +46185,12 @@ var applyFiltersToPackageAccoResults = function (results, filters, sortBy) {
         if (filter.selectedMax != null && r.price > filter.selectedMax) return false;
         return true;
       }
+      // RATING
+      if (filter.property === 'rating') {
+        if (r.stars == null) return false;
+        if (filter.selectedRating != null && r.stars < filter.selectedRating) return false;
+        return true;
+      }
       return true;
     });
   });

package/build/build-esm/index.js

@@ -41135,7 +41135,7 @@ var HotelCard = function (_a) {
           return (e.currentTarget.style.transform = 'scale(1)');
         }
       },
-      React__default.createElement('div', { dangerouslySetInnerHTML: { __html: he.decode(result.contents) } }),
+      React__default.createElement('div', { className: 'search__result-card__top', dangerouslySetInnerHTML: { __html: he.decode(result.contents) } }),
       React__default.createElement(
         'div',
         { className: 'search__result-card__footer' },
@@ -42017,6 +42017,13 @@ var Filters = function (_a) {
     });
     setFilters(updated);
   };
+  var handleStarRatingFilter = function (filter, rating) {
+    var updated = filters.map(function (f) {
+      if (f.property !== filter.property) return f;
+      return __assign(__assign({}, f), { selectedRating: f.selectedRating === rating ? 0 : rating });
+    });
+    setFilters(updated);
+  };
   var handleSliderChange = function (filter, newMin, newMax) {
     var updated = filters.map(function (f) {
       if (f.property !== filter.property) return f;
@@ -42193,6 +42200,35 @@ var Filters = function (_a) {
                           handleSliderChange(filter, newMin, newMax);
                         }
                       });
+                    })(),
+                  isVisible &&
+                    filter.property === 'rating' &&
+                    filter.type === 'star-rating' &&
+                    (function () {
+                      var _a;
+                      var selectedRating = (_a = filter.selectedRating) !== null && _a !== void 0 ? _a : 0;
+                      return React__default.createElement(
+                        'div',
+                        { className: 'search__filter-row star-rating-filter' },
+                        [5, 4, 3, 2, 1].map(function (star) {
+                          return React__default.createElement(
+                            'span',
+                            {
+                              key: star,
+                              className: 'star '.concat(star <= selectedRating ? 'filled' : ''),
+                              onClick: function () {
+                                return handleStarRatingFilter(filter, star);
+                              },
+                              role: 'button',
+                              tabIndex: 0,
+                              onKeyDown: function (e) {
+                                if (e.key === 'Enter' || e.key === ' ') handleStarRatingFilter(filter, star);
+                              }
+                            },
+                            '\u2605'
+                          );
+                        })
+                      );
                     })()
                 );
               })
@@ -45588,6 +45624,32 @@ var enrichFiltersWithPackageAccoResults = function (results, tags) {
   priceFilter.min = Math.floor(Math.min.apply(Math, prices));
   priceFilter.max = Math.ceil(Math.max.apply(Math, prices));
   filters.push(priceFilter);
+  var starsFilter = {
+    property: 'rating',
+    label: 'Stars',
+    type: 'star-rating',
+    options: [],
+    isFrontendFilter: true
+  };
+  var ratingMap = new Map();
+  results.forEach(function (r) {
+    var stars = r.stars;
+    if (stars) {
+      ratingMap.set(stars.toString(), {
+        name: stars.toString(),
+        value: stars
+      });
+    }
+  });
+  starsFilter.options = Array.from(ratingMap.values()).map(function (rating) {
+    var _a;
+    return {
+      label: (_a = rating.name) !== null && _a !== void 0 ? _a : rating.value.toString(),
+      value: rating.value,
+      isChecked: false
+    };
+  });
+  filters.push(starsFilter);
   return filters;
 };
 var enrichFiltersWithPackageFlightResults = function (results, tags, translations) {
@@ -45900,6 +45962,12 @@ var applyFiltersToPackageAccoResults = function (results, filters, sortBy) {
         if (filter.selectedMax != null && r.price > filter.selectedMax) return false;
         return true;
       }
+      // RATING
+      if (filter.property === 'rating') {
+        if (r.stars == null) return false;
+        if (filter.selectedRating != null && r.stars < filter.selectedRating) return false;
+        return true;
+      }
       return true;
     });
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.120",
+  "version": "1.4.122",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@jsonurl/jsonurl": "^1.1.4",
     "@popperjs/core": "^2.10.2",
-    "@qite/tide-client": "^1.1.174",
+    "@qite/tide-client": "^1.1.178",
     "@reduxjs/toolkit": "^2.8.2",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",

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

@@ -46,6 +46,19 @@ const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, hand
     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;
@@ -179,42 +192,29 @@ const Filters: React.FC<FiltersProps> = ({ initialFilters, filters, isOpen, hand
                         );
                       })()}
 
-                    {/* {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>
-                          );
-                        })()} */}
+                    {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>
                 );
               })}

package/src/search-results/components/hotel/hotel-card.tsx

@@ -26,7 +26,7 @@ const HotelCard: React.FC<HotelCardProps> = ({ result, translations }) => {
         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)')}>
-        <div dangerouslySetInnerHTML={{ __html: he.decode(result.contents) }}></div>
+        <div className="search__result-card__top" dangerouslySetInnerHTML={{ __html: he.decode(result.contents) }}></div>
         <div className="search__result-card__footer">
           <button
             type="button"

package/src/search-results/utils/search-results-utils.ts

@@ -132,6 +132,33 @@ export const enrichFiltersWithPackageAccoResults = (results: PackagingAccommodat
 
   filters.push(priceFilter);
 
+  const starsFilter: Filter = {
+    property: 'rating',
+    label: 'Stars',
+    type: 'star-rating',
+    options: [],
+    isFrontendFilter: true
+  };
+  const ratingMap = new Map<string, { name?: string; value: number }>();
+
+  results.forEach((r) => {
+    const stars = r.stars;
+    if (stars) {
+      ratingMap.set(stars.toString(), {
+        name: stars.toString(),
+        value: stars
+      });
+    }
+  });
+
+  starsFilter.options = Array.from(ratingMap.values()).map((rating) => ({
+    label: rating.name ?? rating.value.toString(),
+    value: rating.value,
+    isChecked: false
+  }));
+
+  filters.push(starsFilter);
+
   return filters;
 };
 
@@ -396,6 +423,14 @@ export const applyFiltersToPackageAccoResults = (results: PackagingAccommodation
         return true;
       }
 
+      // RATING
+      if (filter.property === 'rating') {
+        if (r.stars == null) return false;
+        if (filter.selectedRating != null && r.stars < filter.selectedRating) return false;
+
+        return true;
+      }
+
       return true;
     });
   });

package/styles/components/_search.scss

@@ -1053,6 +1053,14 @@
         }
       }
 
+      &__top {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        width: 100%;
+      }
+
       &__img-wrapper {
         position: relative;
         width: 100%;
@@ -1638,6 +1646,12 @@
         }
       }
 
+      &__top {
+        @include mixins.media-sm {
+          flex-direction: row;
+        }
+      }
+
       &__img-wrapper {
         @include mixins.media-sm {
           width: 40%;
@@ -1708,9 +1722,11 @@
       &__footer {
         @include mixins.media-sm {
           justify-content: flex-end;
+          align-items: flex-end;
 
           .cta {
             width: auto;
+            min-width: 150px;
           }
         }
       }
@@ -1825,6 +1841,12 @@
         }
       }
 
+      &__top {
+        @include mixins.media-sm {
+          flex-direction: row;
+        }
+      }
+
       &__img-wrapper {
         @include mixins.media-sm {
           min-width: 175px;
@@ -1902,6 +1924,7 @@
 
           .cta {
             width: auto;
+            min-width: 150px;
           }
         }
       }