@qite/tide-booking-component 1.4.81 → 1.4.82

package/build/build-cjs/index.js

@@ -13222,6 +13222,9 @@ PERFORMANCE OF THIS SOFTWARE.
   var ENDPOINT_WEBSITE_CONFIGURATION = function (portalId) {
     return ENDPOINT$3 + '/website/' + portalId + '/configuration';
   };
+  var ENDPOINT_WEBSITE_STYLESHEET = function (styleSheetId) {
+    return ENDPOINT$3 + '/style-sheet/' + styleSheetId;
+  };
   /**
    * api/web/crmcontact
    * Creates a CRM contact.
@@ -13284,6 +13287,11 @@ PERFORMANCE OF THIS SOFTWARE.
     var apiKey = config.apiKey;
     return get(url, apiKey, config.token, signal, true);
   };
+  var getStyleSheet = function (config, id, signal) {
+    var url = '' + config.host + ENDPOINT_WEBSITE_STYLESHEET(id);
+    var apiKey = config.apiKey;
+    return get(url, apiKey, config.token, signal, true);
+  };
 
   var ENDPOINT$2 = '/api/web/contact';
   var ENDPOINT_CONTACT_FORM = ENDPOINT$2 + '/contact-form';
@@ -13403,6 +13411,7 @@ PERFORMANCE OF THIS SOFTWARE.
   exports.getMolliePayment = getMolliePayment;
   exports.getPortal = getPortal;
   exports.getPrintActions = getPrintActions;
+  exports.getStyleSheet = getStyleSheet;
   exports.getTranslationDictionary = getTranslationDictionary;
   exports.getWebsiteConfiguration = getWebsiteConfiguration;
   exports.login = login;
@@ -38118,7 +38127,7 @@ var HotelCard = function (_a) {
       'div',
       {
         key: result.id,
-        className: 'search__result-card__wrapper',
+        className: 'search__result-card__wrapper search__result-card__wrapper--custom',
         onMouseEnter: function (e) {
           return (e.currentTarget.style.transform = 'scale(1.02)');
         },
@@ -38495,6 +38504,7 @@ var HotelAccommodationResults = function (_a) {
 //   return <div className="search__results__cards">{renderedResults}</div>;
 // };
 
+// search__results__cards--list
 var RoundTripResults = function () {
   return React__default['default'].createElement(
     'div',
@@ -38505,6 +38515,15 @@ var RoundTripResults = function () {
       React__default['default'].createElement(
         'div',
         { className: 'search__result-card__allotment' },
+        React__default['default'].createElement(
+          'div',
+          { className: 'search__result-card__allotment__img-wrapper' },
+          React__default['default'].createElement('img', {
+            src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
+            alt: 'river',
+            className: 'search__result-card__allotment__img'
+          })
+        ),
         React__default['default'].createElement(
           'div',
           { className: 'search__result-card__allotment__title__wrapper' },
@@ -38592,6 +38611,15 @@ var RoundTripResults = function () {
       React__default['default'].createElement(
         'div',
         { className: 'search__result-card__allotment' },
+        React__default['default'].createElement(
+          'div',
+          { className: 'search__result-card__allotment__img-wrapper' },
+          React__default['default'].createElement('img', {
+            src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
+            alt: 'river',
+            className: 'search__result-card__allotment__img'
+          })
+        ),
         React__default['default'].createElement(
           'div',
           { className: 'search__result-card__allotment__title__wrapper' },
@@ -38606,6 +38634,11 @@ var RoundTripResults = function () {
               'BIJNA GAR'
             )
           ),
+          React__default['default'].createElement(
+            'p',
+            { className: 'search__result-card__allotment__description' },
+            'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quis explicabo, animi illum expedita molestias quae atque laboriosam consequatur nulla error non delectus nesciunt id voluptatem quia nobis? Debitis, rerum!'
+          ),
           React__default['default'].createElement(
             'div',
             { className: 'search__result-card__allotment__container' },
@@ -38679,6 +38712,15 @@ var RoundTripResults = function () {
       React__default['default'].createElement(
         'div',
         { className: 'search__result-card__allotment' },
+        React__default['default'].createElement(
+          'div',
+          { className: 'search__result-card__allotment__img-wrapper' },
+          React__default['default'].createElement('img', {
+            src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
+            alt: 'river',
+            className: 'search__result-card__allotment__img'
+          })
+        ),
         React__default['default'].createElement(
           'div',
           { className: 'search__result-card__allotment__title__wrapper' },
@@ -41810,12 +41852,15 @@ var SearchResultsContainer = function () {
     }),
     results = _b.results,
     filteredResults = _b.filteredResults,
+    packagingAccoResults = _b.packagingAccoResults,
+    filteredPackagingAccoResults = _b.filteredPackagingAccoResults,
     bookingPackageDetails = _b.bookingPackageDetails,
     entry = _b.entry,
     isLoading = _b.isLoading,
     filters = _b.filters,
     sortKey = _b.sortKey,
     selectedSearchResultId = _b.selectedSearchResultId,
+    selectedPackagingAccoResultCode = _b.selectedPackagingAccoResultCode,
     flyInIsOpen = _b.flyInIsOpen;
   var isMobile = useMediaQuery('(max-width: 1200px)');
   var _c = React.useState(false),
@@ -42270,6 +42315,7 @@ var SearchResultsContainer = function () {
                   throw new Error('Invalid search parameters');
                 }
                 searchRequest = rq;
+                searchRequest.portalId = context.portalId;
                 return [4 /*yield*/, build.searchPackagingAccommodations(config, searchRequest)];
               case 2:
                 packageAccoSearchResults = _b.sent();
@@ -42324,7 +42370,7 @@ var SearchResultsContainer = function () {
           return __generator(this, function (_c) {
             switch (_c.label) {
               case 0:
-                if (!selectedSearchResultId || !context) return [2 /*return*/];
+                if ((!selectedSearchResultId && !selectedPackagingAccoResultCode) || !context) return [2 /*return*/];
                 if (
                   (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.Accommodation ||
                   (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.GroupTour
@@ -42417,14 +42463,19 @@ var SearchResultsContainer = function () {
       };
       fetchPackageDetails();
     },
-    [selectedSearchResultId]
+    [selectedSearchResultId, selectedPackagingAccoResultCode]
   );
   React.useEffect(
     function () {
-      var filteredResults = applyFilters(results, filters);
-      dispatch(setFilteredResults(filteredResults));
+      if ((context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.Accommodation) {
+        var filteredPackageAccoResults = applyFiltersToPackageAccoResults(packagingAccoResults, filters);
+        dispatch(setFilteredPackagingAccoResults(filteredPackageAccoResults));
+      } else {
+        var filteredResults_1 = applyFilters(results, filters);
+        dispatch(setFilteredResults(filteredResults_1));
+      }
     },
-    [filters, results]
+    [filters, results, packagingAccoResults]
   );
   return React__default['default'].createElement(
     'div',
@@ -42535,8 +42586,13 @@ var SearchResultsContainer = function () {
                       React__default['default'].createElement(
                         React__default['default'].Fragment,
                         null,
-                        (filteredResults === null || filteredResults === void 0 ? void 0 : filteredResults.length) && filteredResults.length,
-                        ' ',
+                        context.searchConfiguration.qsmType === build.PortalQsmType.Accommodation &&
+                          (filteredPackagingAccoResults === null || filteredPackagingAccoResults === void 0 ? void 0 : filteredPackagingAccoResults.length) &&
+                          (filteredPackagingAccoResults === null || filteredPackagingAccoResults === void 0 ? void 0 : filteredPackagingAccoResults.length),
+                        context.searchConfiguration.qsmType !== build.PortalQsmType.Accommodation &&
+                          (filteredResults === null || filteredResults === void 0 ? void 0 : filteredResults.length) &&
+                          filteredResults.length,
+                        '\u00A0',
                         translations.SRP.TOTAL_RESULTS_LABEL
                       )
                   ),
@@ -46075,15 +46131,19 @@ var FeaturedTripCard = function (_a) {
     React__default['default'].createElement(
       'div',
       { className: 'image-card__content' },
-      React__default['default'].createElement('h3', { className: 'image-card__title' }, title),
       React__default['default'].createElement(
         'div',
-        { className: 'image-card__options' },
+        { className: 'image-card__top' },
+        React__default['default'].createElement('h3', { className: 'image-card__title' }, title),
         React__default['default'].createElement(
           'div',
-          { className: 'image-card__option' },
-          React__default['default'].createElement(Icon$3, { name: 'ui-location', width: 16, height: 16 }),
-          React__default['default'].createElement('span', null, location)
+          { className: 'image-card__options' },
+          React__default['default'].createElement(
+            'div',
+            { className: 'image-card__option' },
+            React__default['default'].createElement(Icon$3, { name: 'ui-location', width: 16, height: 16 }),
+            React__default['default'].createElement('span', null, location)
+          )
         )
       ),
       React__default['default'].createElement(

package/build/build-cjs/src/search-results/types.d.ts

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 export type FlightSelectionMode = 'paired' | 'independent';
 export interface SearchResultsConfiguration {
   searchConfiguration: WebsiteConfigurationSearchConfiguration;
+  portalId?: number;
   tideConnection: {
     host: string;
     apiKey: string;

package/build/build-esm/index.js

@@ -13254,6 +13254,9 @@ PERFORMANCE OF THIS SOFTWARE.
   var ENDPOINT_WEBSITE_CONFIGURATION = function (portalId) {
     return ENDPOINT$3 + '/website/' + portalId + '/configuration';
   };
+  var ENDPOINT_WEBSITE_STYLESHEET = function (styleSheetId) {
+    return ENDPOINT$3 + '/style-sheet/' + styleSheetId;
+  };
   /**
    * api/web/crmcontact
    * Creates a CRM contact.
@@ -13316,6 +13319,11 @@ PERFORMANCE OF THIS SOFTWARE.
     var apiKey = config.apiKey;
     return get(url, apiKey, config.token, signal, true);
   };
+  var getStyleSheet = function (config, id, signal) {
+    var url = '' + config.host + ENDPOINT_WEBSITE_STYLESHEET(id);
+    var apiKey = config.apiKey;
+    return get(url, apiKey, config.token, signal, true);
+  };
 
   var ENDPOINT$2 = '/api/web/contact';
   var ENDPOINT_CONTACT_FORM = ENDPOINT$2 + '/contact-form';
@@ -13435,6 +13443,7 @@ PERFORMANCE OF THIS SOFTWARE.
   exports.getMolliePayment = getMolliePayment;
   exports.getPortal = getPortal;
   exports.getPrintActions = getPrintActions;
+  exports.getStyleSheet = getStyleSheet;
   exports.getTranslationDictionary = getTranslationDictionary;
   exports.getWebsiteConfiguration = getWebsiteConfiguration;
   exports.login = login;
@@ -37937,7 +37946,7 @@ var HotelCard = function (_a) {
       'div',
       {
         key: result.id,
-        className: 'search__result-card__wrapper',
+        className: 'search__result-card__wrapper search__result-card__wrapper--custom',
         onMouseEnter: function (e) {
           return (e.currentTarget.style.transform = 'scale(1.02)');
         },
@@ -38302,6 +38311,7 @@ var HotelAccommodationResults = function (_a) {
 //   return <div className="search__results__cards">{renderedResults}</div>;
 // };
 
+// search__results__cards--list
 var RoundTripResults = function () {
   return React__default.createElement(
     'div',
@@ -38312,6 +38322,15 @@ var RoundTripResults = function () {
       React__default.createElement(
         'div',
         { className: 'search__result-card__allotment' },
+        React__default.createElement(
+          'div',
+          { className: 'search__result-card__allotment__img-wrapper' },
+          React__default.createElement('img', {
+            src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
+            alt: 'river',
+            className: 'search__result-card__allotment__img'
+          })
+        ),
         React__default.createElement(
           'div',
           { className: 'search__result-card__allotment__title__wrapper' },
@@ -38395,6 +38414,15 @@ var RoundTripResults = function () {
       React__default.createElement(
         'div',
         { className: 'search__result-card__allotment' },
+        React__default.createElement(
+          'div',
+          { className: 'search__result-card__allotment__img-wrapper' },
+          React__default.createElement('img', {
+            src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
+            alt: 'river',
+            className: 'search__result-card__allotment__img'
+          })
+        ),
         React__default.createElement(
           'div',
           { className: 'search__result-card__allotment__title__wrapper' },
@@ -38409,6 +38437,11 @@ var RoundTripResults = function () {
               'BIJNA GAR'
             )
           ),
+          React__default.createElement(
+            'p',
+            { className: 'search__result-card__allotment__description' },
+            'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quis explicabo, animi illum expedita molestias quae atque laboriosam consequatur nulla error non delectus nesciunt id voluptatem quia nobis? Debitis, rerum!'
+          ),
           React__default.createElement(
             'div',
             { className: 'search__result-card__allotment__container' },
@@ -38478,6 +38511,15 @@ var RoundTripResults = function () {
       React__default.createElement(
         'div',
         { className: 'search__result-card__allotment' },
+        React__default.createElement(
+          'div',
+          { className: 'search__result-card__allotment__img-wrapper' },
+          React__default.createElement('img', {
+            src: 'https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg',
+            alt: 'river',
+            className: 'search__result-card__allotment__img'
+          })
+        ),
         React__default.createElement(
           'div',
           { className: 'search__result-card__allotment__title__wrapper' },
@@ -41552,12 +41594,15 @@ var SearchResultsContainer = function () {
     }),
     results = _b.results,
     filteredResults = _b.filteredResults,
+    packagingAccoResults = _b.packagingAccoResults,
+    filteredPackagingAccoResults = _b.filteredPackagingAccoResults,
     bookingPackageDetails = _b.bookingPackageDetails,
     entry = _b.entry,
     isLoading = _b.isLoading,
     filters = _b.filters,
     sortKey = _b.sortKey,
     selectedSearchResultId = _b.selectedSearchResultId,
+    selectedPackagingAccoResultCode = _b.selectedPackagingAccoResultCode,
     flyInIsOpen = _b.flyInIsOpen;
   var isMobile = useMediaQuery('(max-width: 1200px)');
   var _c = useState(false),
@@ -42012,6 +42057,7 @@ var SearchResultsContainer = function () {
                   throw new Error('Invalid search parameters');
                 }
                 searchRequest = rq;
+                searchRequest.portalId = context.portalId;
                 return [4 /*yield*/, build.searchPackagingAccommodations(config, searchRequest)];
               case 2:
                 packageAccoSearchResults = _b.sent();
@@ -42066,7 +42112,7 @@ var SearchResultsContainer = function () {
           return __generator(this, function (_c) {
             switch (_c.label) {
               case 0:
-                if (!selectedSearchResultId || !context) return [2 /*return*/];
+                if ((!selectedSearchResultId && !selectedPackagingAccoResultCode) || !context) return [2 /*return*/];
                 if (
                   (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.Accommodation ||
                   (context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.GroupTour
@@ -42159,14 +42205,19 @@ var SearchResultsContainer = function () {
       };
       fetchPackageDetails();
     },
-    [selectedSearchResultId]
+    [selectedSearchResultId, selectedPackagingAccoResultCode]
   );
   useEffect(
     function () {
-      var filteredResults = applyFilters(results, filters);
-      dispatch(setFilteredResults(filteredResults));
+      if ((context === null || context === void 0 ? void 0 : context.searchConfiguration.qsmType) === build.PortalQsmType.Accommodation) {
+        var filteredPackageAccoResults = applyFiltersToPackageAccoResults(packagingAccoResults, filters);
+        dispatch(setFilteredPackagingAccoResults(filteredPackageAccoResults));
+      } else {
+        var filteredResults_1 = applyFilters(results, filters);
+        dispatch(setFilteredResults(filteredResults_1));
+      }
     },
-    [filters, results]
+    [filters, results, packagingAccoResults]
   );
   return React__default.createElement(
     'div',
@@ -42277,8 +42328,13 @@ var SearchResultsContainer = function () {
                       React__default.createElement(
                         React__default.Fragment,
                         null,
-                        (filteredResults === null || filteredResults === void 0 ? void 0 : filteredResults.length) && filteredResults.length,
-                        ' ',
+                        context.searchConfiguration.qsmType === build.PortalQsmType.Accommodation &&
+                          (filteredPackagingAccoResults === null || filteredPackagingAccoResults === void 0 ? void 0 : filteredPackagingAccoResults.length) &&
+                          (filteredPackagingAccoResults === null || filteredPackagingAccoResults === void 0 ? void 0 : filteredPackagingAccoResults.length),
+                        context.searchConfiguration.qsmType !== build.PortalQsmType.Accommodation &&
+                          (filteredResults === null || filteredResults === void 0 ? void 0 : filteredResults.length) &&
+                          filteredResults.length,
+                        '\u00A0',
                         translations.SRP.TOTAL_RESULTS_LABEL
                       )
                   ),
@@ -45804,15 +45860,19 @@ var FeaturedTripCard = function (_a) {
     React__default.createElement(
       'div',
       { className: 'image-card__content' },
-      React__default.createElement('h3', { className: 'image-card__title' }, title),
       React__default.createElement(
         'div',
-        { className: 'image-card__options' },
+        { className: 'image-card__top' },
+        React__default.createElement('h3', { className: 'image-card__title' }, title),
         React__default.createElement(
           'div',
-          { className: 'image-card__option' },
-          React__default.createElement(Icon$3, { name: 'ui-location', width: 16, height: 16 }),
-          React__default.createElement('span', null, location)
+          { className: 'image-card__options' },
+          React__default.createElement(
+            'div',
+            { className: 'image-card__option' },
+            React__default.createElement(Icon$3, { name: 'ui-location', width: 16, height: 16 }),
+            React__default.createElement('span', null, location)
+          )
         )
       ),
       React__default.createElement(

package/build/build-esm/src/search-results/types.d.ts

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 export type FlightSelectionMode = 'paired' | 'independent';
 export interface SearchResultsConfiguration {
   searchConfiguration: WebsiteConfigurationSearchConfiguration;
+  portalId?: number;
   tideConnection: {
     host: string;
     apiKey: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.81",
+  "version": "1.4.82",
   "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.148",
+    "@qite/tide-client": "^1.1.150",
     "@reduxjs/toolkit": "^2.8.2",
     "@rollup/plugin-commonjs": "^19.0.1",
     "@rollup/plugin-json": "^4.1.0",

package/src/content/featured-trips/featured-trip-card.tsx

@@ -10,24 +10,26 @@ const FeaturedTripCard: React.FC<FeaturedTrip> = ({ imageSrc, imageAlt, title, l
     <div className="image-card">
       <img src={imageSrc} alt={imageAlt} className="image-card__image" />
       <div className="image-card__content">
-        <h3 className="image-card__title">{title}</h3>
-        <div className="image-card__options">
-          <div className="image-card__option">
-            <Icon name="ui-location" width={16} height={16} />
-            <span>{location}</span>
+        <div className="image-card__top">
+          <h3 className="image-card__title">{title}</h3>
+          <div className="image-card__options">
+            <div className="image-card__option">
+              <Icon name="ui-location" width={16} height={16} />
+              <span>{location}</span>
+            </div>
+            {/* <div className="image-card__option">
+              <Icon name="ui-moon" width={16} height={16} />
+              <span>2 nights</span>
+            </div>
+            <div className="image-card__option">
+              <Icon name="ui-plane" width={16} height={16} />
+              <span>3 transports</span>
+            </div> */}
           </div>
-          {/* <div className="image-card__option">
-            <Icon name="ui-moon" width={16} height={16} />
-            <span>2 nights</span>
-          </div>
-          <div className="image-card__option">
-            <Icon name="ui-plane" width={16} height={16} />
-            <span>3 transports</span>
-          </div> */}
+          {/* <p className="image__card__description">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nulla aliquam, quis accusantium quae inventore, accusamus cumque culpa, quasi officia magnam suscipit laboriosam. Velit eveniet, id modi aperiam natus veritatis.
+          </p> */}
         </div>
-        {/* <p className="image__card__description">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nulla aliquam, quis accusantium quae inventore, accusamus cumque culpa, quasi officia magnam suscipit laboriosam. Velit eveniet, id modi aperiam natus veritatis.
-        </p> */}
         <div className="image-card__bottom">
           {/* <div className="image-card__price">
             From

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

@@ -22,7 +22,7 @@ const HotelCard: React.FC<HotelCardProps> = ({ result, translations }) => {
     return (
       <div
         key={result.id}
-        className="search__result-card__wrapper"
+        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

package/src/search-results/components/round-trip/round-trip-results.tsx

@@ -3,11 +3,16 @@ import Icon from '../icon';
 
 interface RoundTripResultsProps {}
 
+// search__results__cards--list
+
 const RoundTripResults: React.FC<RoundTripResultsProps> = () => {
   return (
     <div className="search__results__cards search__results__cards--list">
       <div className="search__result-card">
         <div className="search__result-card__allotment">
+          <div className="search__result-card__allotment__img-wrapper">
+            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
+          </div>
           <div className="search__result-card__allotment__title__wrapper">
             <h3 className="search__result-card__allotment__title">
               Rondreis Noord-India: Rajasthan
@@ -64,6 +69,9 @@ const RoundTripResults: React.FC<RoundTripResultsProps> = () => {
       </div>
       <div className="search__result-card">
         <div className="search__result-card__allotment">
+          <div className="search__result-card__allotment__img-wrapper">
+            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
+          </div>
           <div className="search__result-card__allotment__title__wrapper">
             <h3 className="search__result-card__allotment__title">
               Rondreis Thailand
@@ -72,7 +80,10 @@ const RoundTripResults: React.FC<RoundTripResultsProps> = () => {
                 BIJNA GAR
               </span>
             </h3>
-
+            <p className="search__result-card__allotment__description">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quis explicabo, animi illum expedita molestias quae atque laboriosam consequatur
+              nulla error non delectus nesciunt id voluptatem quia nobis? Debitis, rerum!
+            </p>
             <div className="search__result-card__allotment__container">
               <div className="search__result-card__allotment__header">
                 <div className="search__result-card__allotment__wrapper">
@@ -120,6 +131,9 @@ const RoundTripResults: React.FC<RoundTripResultsProps> = () => {
       </div>
       <div className="search__result-card">
         <div className="search__result-card__allotment">
+          <div className="search__result-card__allotment__img-wrapper">
+            <img src="https://cdn.pixabay.com/photo/2024/05/15/12/31/lake-8763490_1280.jpg" alt="river" className="search__result-card__allotment__img" />
+          </div>
           <div className="search__result-card__allotment__title__wrapper">
             <h3 className="search__result-card__allotment__title">Rondreis Timboektoe</h3>
 

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

@@ -67,9 +67,20 @@ const SearchResultsContainer: React.FC = () => {
   const context = useContext(SearchResultsConfigurationContext);
   const translations = getTranslations(context?.languageCode ?? 'en-GB');
 
-  const { results, filteredResults, bookingPackageDetails, entry, isLoading, filters, sortKey, selectedSearchResultId, flyInIsOpen } = useSelector(
-    (state: SearchResultsRootState) => state.searchResults
-  );
+  const {
+    results,
+    filteredResults,
+    packagingAccoResults,
+    filteredPackagingAccoResults,
+    bookingPackageDetails,
+    entry,
+    isLoading,
+    filters,
+    sortKey,
+    selectedSearchResultId,
+    selectedPackagingAccoResultCode,
+    flyInIsOpen
+  } = useSelector((state: SearchResultsRootState) => state.searchResults);
 
   const isMobile = useMediaQuery('(max-width: 1200px)');
 
@@ -509,6 +520,7 @@ const SearchResultsContainer: React.FC = () => {
         }
 
         searchRequest = rq;
+        searchRequest.portalId = context.portalId;
 
         const packageAccoSearchResults = await searchPackagingAccommodations(config, searchRequest);
 
@@ -545,7 +557,7 @@ const SearchResultsContainer: React.FC = () => {
   // Seperate detailsCall
   useEffect(() => {
     const fetchPackageDetails = async () => {
-      if (!selectedSearchResultId || !context) return;
+      if ((!selectedSearchResultId && !selectedPackagingAccoResultCode) || !context) return;
 
       if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation || context?.searchConfiguration.qsmType === PortalQsmType.GroupTour) {
         handleFlyInToggle(true);
@@ -611,12 +623,17 @@ const SearchResultsContainer: React.FC = () => {
     };
 
     fetchPackageDetails();
-  }, [selectedSearchResultId]);
+  }, [selectedSearchResultId, selectedPackagingAccoResultCode]);
 
   useEffect(() => {
-    const filteredResults = applyFilters(results, filters);
-    dispatch(setFilteredResults(filteredResults));
-  }, [filters, results]);
+    if (context?.searchConfiguration.qsmType === PortalQsmType.Accommodation) {
+      const filteredPackageAccoResults = applyFiltersToPackageAccoResults(packagingAccoResults, filters);
+      dispatch(setFilteredPackagingAccoResults(filteredPackageAccoResults));
+    } else {
+      const filteredResults = applyFilters(results, filters);
+      dispatch(setFilteredResults(filteredResults));
+    }
+  }, [filters, results, packagingAccoResults]);
 
   return (
     <div id="tide-booking" className="search__bg">
@@ -687,7 +704,11 @@ const SearchResultsContainer: React.FC = () => {
                     <span className="search__result-row-text">
                       {!isLoading && (
                         <>
-                          {filteredResults?.length && filteredResults.length} {translations.SRP.TOTAL_RESULTS_LABEL}
+                          {context.searchConfiguration.qsmType === PortalQsmType.Accommodation &&
+                            filteredPackagingAccoResults?.length &&
+                            filteredPackagingAccoResults?.length}
+                          {context.searchConfiguration.qsmType !== PortalQsmType.Accommodation && filteredResults?.length && filteredResults.length}
+                          &nbsp;{translations.SRP.TOTAL_RESULTS_LABEL}
                         </>
                       )}
                     </span>

package/src/search-results/types.ts

@@ -5,6 +5,7 @@ export type FlightSelectionMode = 'paired' | 'independent';
 
 export interface SearchResultsConfiguration {
   searchConfiguration: WebsiteConfigurationSearchConfiguration;
+  portalId?: number;
   // Tide connection
   tideConnection: {
     host: string;

package/styles/booking-search-results-variables.scss

@@ -643,7 +643,7 @@
   //SEARCH HOTEL CARD ALLOTMENTS
   --tide-booking-search-hotel-card-allotments-background: var(--tide-booking-white);
   --tide-booking-search-hotel-card-allotments-border: none;
-  --tide-booking-search-hotel-card-allotments-border-radius: 10px;
+  --tide-booking-search-hotel-card-allotments-border-radius: 24px;
   --tide-booking-search-hotel-card-allotments-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
   --tide-booking-search-hotel-card-allotments-font-weight: 400;
   --tide-booking-search-hotel-card-allotments-color: var(--tide-booking-invalid);

package/styles/components/_content.scss

@@ -197,10 +197,17 @@
     padding: 20px;
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
     gap: 10px;
     flex-grow: 1;
   }
 
+  &__top {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
   &__title {
     color: var(--tide-booking-image-card-title-color);
     font-family: var(--tide-booking-image-card-title-font-family);

package/styles/components/_search.scss

@@ -998,6 +998,14 @@
         box-shadow: var(--tide-booking-search-hotel-card-box-shadow);
         background-color: var(--tide-booking-search-hotel-card-background);
         transition: transform 0.3s ease-in-out;
+
+        &--custom {
+          gap: 20px;
+          .search__result-card__footer {
+            padding: 20px;
+            padding-top: 0px;
+          }
+        }
       }
 
       &__img-wrapper {
@@ -1189,6 +1197,39 @@
           }
         }
 
+        &__img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+
+        &__img-wrapper {
+          border-radius: 16px 16px 0 0;
+          position: relative;
+          width: 100%;
+          height: 200px;
+          overflow: hidden;
+          background-color: #f5f5f5;
+
+          @include mixins.media-md {
+            width: 40%;
+            height: auto;
+            border-radius: 16px 0 0 16px;
+          }
+
+          @include mixins.media-lg {
+            width: 100%;
+            height: 200px;
+            border-radius: 16px 16px 0 0;
+          }
+
+          @include mixins.media-xl {
+            width: 40%;
+            height: auto;
+            border-radius: 16px 0 0 16px;
+          }
+        }
+
         &__title {
           font-weight: var(--tide-booking-search-hotel-card-allotments-title-font-weight);
           color: var(--tide-booking-search-hotel-card-allotments-title-color);
@@ -1297,6 +1338,9 @@
           @include mixins.media-sm {
             align-items: flex-end;
             flex-direction: column;
+          }
+
+          @include mixins.media-lg {
             min-width: 288px;
           }
 
@@ -1522,449 +1566,8 @@
         }
       }
     }
-
-    // &-banner {
-    //   display: flex;
-    //   justify-content: space-between;
-    //   align-items: center;
-    //   margin-top: 0;
-    //   background: lightblue;
-    //   padding: 0 30px 0 15px;
-    //   border-radius: 3px;
-    //   height: 40px;
-
-    //   @include mixins.media-sm {
-    //     flex-wrap: wrap;
-
-    //     padding: 8px;
-
-    //     &>.search__flight-card-banner-info:first-of-type {
-    //       order: 1;
-    //       flex: 1 1 auto;
-    //     }
-
-    //     // Second info (Bagage inbegrepen) moves below
-    //     &>.search__flight-card-banner-info:nth-of-type(2) {
-    //       order: 3;
-    //       width: 100%;
-    //       margin-top: 4px;
-    //       margin-left: 4px;
-    //     }
-
-    //     // Link (Vluchtdetails) stays top-right
-    //     &-link {
-    //       order: 2;
-    //     }
-
-    //     &-text {
-    //       margin: 0;
-    //     }
-    //   }
-
-    //   &-info {
-    //     display: flex;
-    //     align-items: center;
-    //     gap: 12px;
-    //   }
-
-    //   &-link {
-    //     color: red;
-    //     font-size: 14px;
-    //     font-weight: 400;
-    //     transition: all 0.3s;
-    //     cursor: pointer;
-    //     text-decoration: underline;
-
-    //     &:hover {
-    //       color: blue;
-    //     }
-    //   }
-
-    //   &-text {
-    //     font-size: 14px;
-    //     font-weight: 400;
-    //     color: gray;
-    //   }
-
-    //   &-expanded {
-    //     display: flex;
-    //     flex-direction: column;
-    //     border-radius: 3px;
-    //     border: 1px solid lightblue;
-    //     border-top: none;
-
-    //     &-row {
-    //       padding: 1rem 2rem 1rem 1rem;
-    //       background: gainsboro;
-    //       border-top: 1px solid lightblue;
-    //       display: flex;
-    //       align-items: center;
-    //       justify-content: space-between;
-
-    //       &-left {
-    //         display: flex;
-    //         align-items: center;
-    //         gap: 15px;
-    //       }
-
-    //       &-data {
-    //         color: black;
-    //         font-size: 16px;
-    //         font-weight: 400;
-    //       }
-
-    //       &-location {
-    //         display: flex;
-    //         gap: 0.5rem;
-    //         align-items: center;
-    //       }
-    //     }
-
-    //     &-middle {
-    //       display: flex;
-    //       flex-direction: column;
-    //       align-items: flex-end;
-    //       position: relative;
-
-    //       &-timeline {
-    //         position: absolute;
-    //         width: 1px;
-    //         background: blue;
-    //         top: 0;
-    //         left: 6%;
-    //         height: 100%;
-
-    //         &::before,
-    //         &::after {
-    //           content: '';
-    //           position: absolute;
-    //           width: 7px;
-    //           height: 7px;
-    //           background: white;
-    //           border: 1px solid blue;
-    //           border-radius: 50%;
-    //           left: 0.5px;
-    //         }
-
-    //         &::before {
-    //           top: 0;
-    //           transform: translate(-50%, -50%);
-    //         }
-
-    //         &::after {
-    //           bottom: 0;
-    //           transform: translate(-50%, 50%);
-    //         }
-    //       }
-
-    //       &-4-col-grid {
-    //         display: grid;
-    //         grid-template-columns: repeat(14, 1fr);
-    //         width: 100%;
-
-    //         @include mixins.media-sm {
-    //           grid-template-columns: repeat(5, 1fr);
-    //         }
-
-    //         &-item {
-    //           grid-column: span 3;
-    //           display: flex;
-    //           align-items: center;
-    //           border-bottom: 1px dashed lightblue;
-    //           padding: 1rem 0;
-    //           font-size: 14px;
-    //           color: gray;
-
-    //           &:first-child {
-    //             grid-column: 3 / span 3;
-    //           }
-
-    //           &:nth-child(even) {
-    //             color: black;
-    //           }
-
-    //           @include mixins.media-sm {
-    //             grid-column: span 2; // Base for mobile: span 2 columns
-
-    //             &:nth-child(odd) {
-    //               grid-column: 2 / span 2; // Odd items in cols 2 & 3
-    //             }
-
-    //             &:nth-child(even) {
-    //               grid-column: 4 / span 2; // Even items in cols 4 & 5
-    //             }
-    //           }
-    //         }
-    //       }
-
-    //       &-3-col-grid {
-    //         display: grid;
-    //         grid-template-columns: repeat(14, 1fr);
-    //         width: 100%;
-
-    //         @include mixins.media-sm {
-    //           grid-template-columns: repeat(12, 1fr);
-    //           padding: 8px;
-    //         }
-
-    //         &-item {
-    //           grid-column: span 8;
-    //           display: flex;
-    //           align-items: flex-start;
-    //           padding: 15px 0;
-    //           font-size: 14px;
-    //           color: gray;
-
-    //           &:first-child {
-    //             grid-column: 3 / span 3;
-    //           }
-
-    //           &:nth-child(2) {
-    //             grid-column: span 1;
-    //           }
-
-    //           @include mixins.media-sm {
-    //             &:first-child {
-    //               grid-column: span 3;
-    //             }
-
-    //             grid-column: span 8;
-    //           }
-
-    //           &-text {
-    //             display: flex;
-    //             flex-direction: column;
-    //             gap: 4px;
-    //             margin-bottom: 12px;
-    //           }
-
-    //           &-underline {
-    //             border-bottom: 1px solid lightblue;
-    //             width: 100%;
-
-    //             &:last-child {
-    //               padding-bottom: 16px;
-    //             }
-    //           }
-
-    //           &-title {
-    //             color: black;
-    //           }
-
-    //           &--pb-0 {
-    //             padding-bottom: 0;
-    //           }
-
-    //           &--economy {
-    //             color: black;
-    //           }
-    //         }
-    //       }
-    //     }
-    //   }
-    // }
   }
 
-  // &__price-card {
-  //   padding: 1rem;
-  //   border-radius: 20px;
-  //   background: variables.$white;
-  //   border: 1px solid variables.$secondary-color--extralight;
-
-  //   max-height: 25.25rem;
-  //   display: flex;
-  //   flex-direction: column;
-  //   justify-content: space-between;
-  //   position: relative;
-
-  //   &--full-height {
-  //     max-height: 100%;
-  //   }
-
-  //   @include mixins.media-sm {
-  //     flex-direction: row;
-  //     align-items: center;
-  //   }
-
-  //   @include mixins.media-lg {
-  //     width: 100%;
-  //     padding: 1rem;
-  //   }
-
-  //   @include mixins.media-xl {
-  //     max-height: 28rem;
-  //   }
-
-  //   &-bg-price {
-  //     background: variables.$secondary-color--extralight;
-  //     border-radius: 20px;
-  //     height: calc(81% - 2rem);
-  //     width: calc(100% - 2rem);
-  //     position: absolute;
-  //     top: 1rem;
-  //     right: 1rem;
-  //     z-index: 1;
-
-  //     @include mixins.media-sm {
-  //       height: calc(100% - 1rem);
-  //       width: calc(100% - 1rem);
-  //       top: 0.5rem;
-  //       right: 0.5rem;
-  //       border-radius: 14px;
-  //     }
-  //   }
-
-  //   &-best-price {
-  //     font-size: variables.$font-size-label;
-  //     color: variables.$white;
-  //     background: variables.$primary-color;
-  //     padding: 0.5rem 1rem;
-  //     border-radius: 2rem;
-  //     font-weight: 400;
-  //     position: absolute;
-  //     top: 1rem;
-  //     right: 1rem;
-  //     z-index: 10;
-
-  //     display: flex;
-  //     align-items: center;
-  //     gap: 0.5rem;
-
-  //     @include mixins.media-sm {
-  //       top: 0.5rem;
-  //       left: 0.5rem;
-  //       right: auto;
-  //       font-size: variables.$font-size-body--small;
-  //     }
-  //   }
-
-  //   &-content {
-  //     display: flex;
-  //     flex-direction: column;
-  //     align-items: center;
-  //     z-index: 10;
-
-  //     @include mixins.media-sm {
-  //       align-items: flex-start;
-  //       justify-content: space-between;
-  //     }
-  //   }
-
-  //   &-price {
-  //     font-size: variables.$font-size-h3;
-  //     font-weight: 400;
-  //     color: variables.$text-color;
-  //     margin-bottom: 1rem;
-
-  //     @include mixins.media-lg {
-  //       margin-top: 0.75rem;
-  //       font-size: variables.$font-size-h4;
-  //     }
-
-  //     @include mixins.media-sm {
-  //       margin-top: 1.125rem;
-  //     }
-
-  //     &-wrapper {
-  //       display: flex;
-  //       justify-content: center;
-  //       margin: auto 0;
-
-  //       @include mixins.media-sm {
-  //         margin: 0;
-  //         height: 100%;
-  //       }
-  //     }
-  //   }
-
-  //   &-button {
-  //     width: 100%;
-  //     min-width: 9.2rem;
-  //     height: 3.5rem;
-  //     padding: 1rem 0;
-  //     background: variables.$secondary-color;
-  //     border: 1px solid variables.$secondary-color;
-  //     color: variables.$white;
-  //     border-radius: 3px;
-  //     margin-top: 0.5rem;
-  //     transition: all 0.2s ease-in-out;
-  //     cursor: pointer;
-  //     z-index: 2;
-
-  //     &:hover {
-  //       background: variables.$primary-color;
-  //       border: 1px solid variables.$primary-color;
-  //     }
-
-  //     @include mixins.media-sm {
-  //       margin-top: 0;
-  //       width: 9.2rem;
-  //     }
-  //   }
-
-  //   &-label {
-  //     font-weight: 400;
-  //     border-radius: 2rem;
-  //     width: 2.875rem;
-  //     height: 1.75rem;
-  //     display: flex;
-  //     align-items: center;
-  //     justify-content: center;
-  //     font-size: variables.$font-size-label;
-
-  //     &--neg {
-  //       color: #128d62;
-  //       border: 1px solid #128d62;
-  //     }
-
-  //     &--pub {
-  //       color: #0e3e8d;
-  //       border: 1px solid #0e3e8d;
-  //     }
-  //   }
-
-  //   &-deal {
-  //     border-radius: 2rem;
-  //     height: 1.75rem;
-  //     width: 100%;
-  //     min-width: 13.5rem;
-  //     color: #ff6847;
-  //     background: variables.$white;
-  //     border: 1px solid #ff6847;
-  //     display: flex;
-  //     align-items: center;
-  //     justify-content: center;
-  //     gap: 0.5rem;
-  //     z-index: 10;
-
-  //     p {
-  //       margin: 0;
-  //       font-weight: 400;
-  //       font-size: variables.$font-size-label;
-  //     }
-
-  //     @include mixins.media-lg {
-  //       margin-top: 1rem;
-  //     }
-
-  //     &-wrapper {
-  //       display: flex;
-  //       flex-direction: column;
-
-  //       @include mixins.media-sm {
-  //         flex-direction: column-reverse;
-  //         align-items: flex-end;
-  //       }
-  //     }
-  //   }
-
-  //   .search__price-card-bg-price ~ .search__price-card-price-wrapper {
-  //     .search__price-card-price {
-  //       padding-top: 2rem;
-  //     }
-  //   }
-  // }
-
   &__banner {
     display: flex;
     justify-content: center;
@@ -2069,6 +1672,86 @@
           }
         }
       }
+
+      &__allotment {
+        padding: 0px;
+        @include mixins.media-sm {
+          flex-direction: column;
+        }
+
+        @include mixins.media-md {
+          flex-direction: row;
+        }
+
+        @include mixins.media-lg {
+          flex-direction: column;
+        }
+
+        @include mixins.media-xl {
+          flex-direction: row;
+        }
+
+        &__title__wrapper {
+          padding: 0px 20px;
+
+          @include mixins.media-md {
+            padding: 20px 0px;
+          }
+          @include mixins.media-lg {
+            padding: 0px 20px;
+          }
+          @include mixins.media-xl {
+            padding: 20px 0px;
+          }
+        }
+
+        &__footer {
+          padding: 0px 20px;
+          padding-bottom: 20px;
+          @include mixins.media-sm {
+            flex-direction: row;
+            align-items: flex-start;
+          }
+
+          @include mixins.media-md {
+            flex-direction: column;
+            align-items: flex-end;
+            padding: 20px 0px;
+            padding-right: 20px;
+          }
+
+          @include mixins.media-lg {
+            flex-direction: row;
+            align-items: flex-start;
+            padding: 0px 20px;
+            padding-bottom: 20px;
+          }
+
+          @include mixins.media-xl {
+            flex-direction: column;
+            align-items: flex-end;
+            padding: 20px 0px;
+            padding-right: 20px;
+          }
+        }
+
+        &__price {
+          &__wrapper {
+            @include mixins.media-sm {
+              align-items: flex-start;
+            }
+            @include mixins.media-md {
+              align-items: flex-end;
+            }
+            @include mixins.media-lg {
+              align-items: flex-start;
+            }
+            @include mixins.media-xl {
+              align-items: flex-end;
+            }
+          }
+        }
+      }
     }
   }
 
@@ -2173,6 +1856,16 @@
           }
         }
       }
+
+      &__allotment {
+        &__img-wrapper {
+          display: none;
+        }
+
+        &__description {
+          display: none;
+        }
+      }
     }
   }
 }