@qite/tide-booking-component 1.4.83 → 1.4.84

package/build/build-cjs/index.js

@@ -22956,7 +22956,7 @@ var OptionUnitsCard = function (_a) {
         React__default['default'].createElement(
           'div',
           { className: 'booking-card__group-header' },
-          React__default['default'].createElement('h3', { className: 'booking-card__body-heading' }, translations.OPTIONS_FORM.UNIT_TITLE, ' ', u.index + 1),
+          React__default['default'].createElement('h3', { className: 'booking-card__body-heading' }, translations.OPTIONS_FORM.UNIT_TITLE, ' ', u.index),
           React__default['default'].createElement('p', null, getUnitPaxLabel(u.index)),
           React__default['default'].createElement(
             'div',
@@ -42576,11 +42576,7 @@ 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', { dangerouslySetInnerHTML: { __html: he.decode(result.contents) } }),
       React__default['default'].createElement(
         'div',
         { className: 'search__result-card__footer' },
@@ -45793,9 +45789,10 @@ var Filters = function (_a) {
 };
 
 var GroupTourCard = function (_a) {
-  var _b;
+  var _b, _c, _d, _e, _f, _g;
   var result = _a.result,
-    languageCode = _a.languageCode;
+    languageCode = _a.languageCode,
+    cmsItem = _a.cmsItem;
   var dispatch = reactRedux.useDispatch();
   var translations = getTranslations(languageCode !== null && languageCode !== void 0 ? languageCode : 'en-GB');
   var selectedSearchResultId = reactRedux.useSelector(function (state) {
@@ -45820,20 +45817,34 @@ var GroupTourCard = function (_a) {
     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:
+            (_e =
+              (_d = (_c = cmsItem === null || cmsItem === void 0 ? void 0 : cmsItem.content) === null || _c === void 0 ? void 0 : _c.images) === null ||
+              _d === void 0
+                ? void 0
+                : _d.header) === null || _e === void 0
+              ? void 0
+              : _e.url,
+          alt: result.name,
+          className: 'search__result-card__allotment__img'
+        })
+      ),
       React__default['default'].createElement(
         'div',
         { className: 'search__result-card__allotment__title__wrapper' },
-        React__default['default'].createElement(
-          'h3',
-          { className: 'search__result-card__allotment__title' },
-          result.name,
-          React__default['default'].createElement(
-            'span',
-            { className: 'search__result-card__allotment__badge' },
-            React__default['default'].createElement(Icon$1, { name: 'ui-circle-check', width: 14, height: 14 }),
-            'GAR'
-          )
-        ),
+        React__default['default'].createElement('h3', { className: 'search__result-card__allotment__title' }, result.name),
+        ((_g = (_f = cmsItem === null || cmsItem === void 0 ? void 0 : cmsItem.content) === null || _f === void 0 ? void 0 : _f.introductie) === null ||
+        _g === void 0
+          ? void 0
+          : _g.intro) &&
+          React__default['default'].createElement('div', {
+            className: 'search__result-card__allotment__description',
+            dangerouslySetInnerHTML: { __html: he.decode(cmsItem.content.introductie.intro) }
+          }),
         React__default['default'].createElement(
           'div',
           { className: 'search__result-card__allotment__container' },
@@ -45972,11 +45983,36 @@ var GroupTourResults = function (_a) {
     },
     [activeTab]
   );
+  var cmsMap = React__default['default'].useMemo(
+    function () {
+      var _a;
+      var map = new Map();
+      (_a = context.cmsGroupTourData) === null || _a === void 0
+        ? void 0
+        : _a.forEach(function (item) {
+            var _a, _b, _c;
+            var code =
+              (_c =
+                (_b = (_a = item === null || item === void 0 ? void 0 : item.content) === null || _a === void 0 ? void 0 : _a.introductie) === null ||
+                _b === void 0
+                  ? void 0
+                  : _b.data) === null || _c === void 0
+                ? void 0
+                : _c.code;
+            if (code) {
+              map.set(code, item);
+            }
+          });
+      return map;
+    },
+    [context.cmsGroupTourData]
+  );
   return React__default['default'].createElement(
     'div',
     { className: 'search__results__cards search__results__cards--'.concat(activeTab) },
     filteredResults.map(function (result, index) {
-      return React__default['default'].createElement(GroupTourCard, { key: index, result: result });
+      var cmsItem = cmsMap.get(result.code);
+      return React__default['default'].createElement(GroupTourCard, { key: index, result: result, cmsItem: cmsItem });
     })
   );
 };

package/build/build-cjs/src/search-results/components/group-tour/group-tour-card.d.ts

@@ -3,6 +3,7 @@ import { BookingPackageItem } from '@qite/tide-client';
 interface GroupTourCardProps {
   result: BookingPackageItem;
   languageCode?: string;
+  cmsItem?: any;
 }
 declare const GroupTourCard: React.FC<GroupTourCardProps>;
 export default GroupTourCard;

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

@@ -27,6 +27,7 @@ export interface SearchResultsConfiguration {
   isLoading?: boolean;
   customSpinner?: ReactNode;
   cmsHotelData?: any[];
+  cmsGroupTourData?: any[];
   tags?: TideTag[];
   languageCode?: string;
   destinationImage?: {

package/build/build-esm/index.js

@@ -22917,7 +22917,7 @@ var OptionUnitsCard = function (_a) {
         React__default.createElement(
           'div',
           { className: 'booking-card__group-header' },
-          React__default.createElement('h3', { className: 'booking-card__body-heading' }, translations.OPTIONS_FORM.UNIT_TITLE, ' ', u.index + 1),
+          React__default.createElement('h3', { className: 'booking-card__body-heading' }, translations.OPTIONS_FORM.UNIT_TITLE, ' ', u.index),
           React__default.createElement('p', null, getUnitPaxLabel(u.index)),
           React__default.createElement(
             'div',
@@ -42399,11 +42399,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', { dangerouslySetInnerHTML: { __html: he.decode(result.contents) } }),
       React__default.createElement(
         'div',
         { className: 'search__result-card__footer' },
@@ -45545,9 +45541,10 @@ var Filters = function (_a) {
 };
 
 var GroupTourCard = function (_a) {
-  var _b;
+  var _b, _c, _d, _e, _f, _g;
   var result = _a.result,
-    languageCode = _a.languageCode;
+    languageCode = _a.languageCode,
+    cmsItem = _a.cmsItem;
   var dispatch = useDispatch();
   var translations = getTranslations(languageCode !== null && languageCode !== void 0 ? languageCode : 'en-GB');
   var selectedSearchResultId = useSelector(function (state) {
@@ -45572,20 +45569,34 @@ var GroupTourCard = function (_a) {
     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:
+            (_e =
+              (_d = (_c = cmsItem === null || cmsItem === void 0 ? void 0 : cmsItem.content) === null || _c === void 0 ? void 0 : _c.images) === null ||
+              _d === void 0
+                ? void 0
+                : _d.header) === null || _e === void 0
+              ? void 0
+              : _e.url,
+          alt: result.name,
+          className: 'search__result-card__allotment__img'
+        })
+      ),
       React__default.createElement(
         'div',
         { className: 'search__result-card__allotment__title__wrapper' },
-        React__default.createElement(
-          'h3',
-          { className: 'search__result-card__allotment__title' },
-          result.name,
-          React__default.createElement(
-            'span',
-            { className: 'search__result-card__allotment__badge' },
-            React__default.createElement(Icon$1, { name: 'ui-circle-check', width: 14, height: 14 }),
-            'GAR'
-          )
-        ),
+        React__default.createElement('h3', { className: 'search__result-card__allotment__title' }, result.name),
+        ((_g = (_f = cmsItem === null || cmsItem === void 0 ? void 0 : cmsItem.content) === null || _f === void 0 ? void 0 : _f.introductie) === null ||
+        _g === void 0
+          ? void 0
+          : _g.intro) &&
+          React__default.createElement('div', {
+            className: 'search__result-card__allotment__description',
+            dangerouslySetInnerHTML: { __html: he.decode(cmsItem.content.introductie.intro) }
+          }),
         React__default.createElement(
           'div',
           { className: 'search__result-card__allotment__container' },
@@ -45724,11 +45735,36 @@ var GroupTourResults = function (_a) {
     },
     [activeTab]
   );
+  var cmsMap = React__default.useMemo(
+    function () {
+      var _a;
+      var map = new Map();
+      (_a = context.cmsGroupTourData) === null || _a === void 0
+        ? void 0
+        : _a.forEach(function (item) {
+            var _a, _b, _c;
+            var code =
+              (_c =
+                (_b = (_a = item === null || item === void 0 ? void 0 : item.content) === null || _a === void 0 ? void 0 : _a.introductie) === null ||
+                _b === void 0
+                  ? void 0
+                  : _b.data) === null || _c === void 0
+                ? void 0
+                : _c.code;
+            if (code) {
+              map.set(code, item);
+            }
+          });
+      return map;
+    },
+    [context.cmsGroupTourData]
+  );
   return React__default.createElement(
     'div',
     { className: 'search__results__cards search__results__cards--'.concat(activeTab) },
     filteredResults.map(function (result, index) {
-      return React__default.createElement(GroupTourCard, { key: index, result: result });
+      var cmsItem = cmsMap.get(result.code);
+      return React__default.createElement(GroupTourCard, { key: index, result: result, cmsItem: cmsItem });
     })
   );
 };

package/build/build-esm/src/search-results/components/group-tour/group-tour-card.d.ts

@@ -3,6 +3,7 @@ import { BookingPackageItem } from '@qite/tide-client';
 interface GroupTourCardProps {
   result: BookingPackageItem;
   languageCode?: string;
+  cmsItem?: any;
 }
 declare const GroupTourCard: React.FC<GroupTourCardProps>;
 export default GroupTourCard;

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

@@ -27,6 +27,7 @@ export interface SearchResultsConfiguration {
   isLoading?: boolean;
   customSpinner?: ReactNode;
   cmsHotelData?: any[];
+  cmsGroupTourData?: any[];
   tags?: TideTag[];
   languageCode?: string;
   destinationImage?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.83",
+  "version": "1.4.84",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",

package/src/booking-wizard/features/product-options/option-units-card.tsx

@@ -91,7 +91,7 @@ const OptionUnitsCard: React.FC<OptionUnitsCardProps> = ({ units, parentIndex, o
         <div className={buildClassName(['booking-card__group', toggleStates && toggleStates[i] && 'booking-card__group--active'])}>
           <div className="booking-card__group-header">
             <h3 className="booking-card__body-heading">
-              {translations.OPTIONS_FORM.UNIT_TITLE} {u.index + 1}
+              {translations.OPTIONS_FORM.UNIT_TITLE} {u.index}
             </h3>
             <p>{getUnitPaxLabel(u.index)}</p>
             <div className="booking-card__actions">

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

@@ -6,13 +6,15 @@ import { calculateDays, calculateNights, formatPrice, getTranslations } from '..
 import { SearchResultsRootState } from '../../store/search-results-store';
 import { useDispatch, useSelector } from 'react-redux';
 import { setSelectedSearchResult } from '../../store/search-results-slice';
+import he from 'he';
 
 interface GroupTourCardProps {
   result: BookingPackageItem;
   languageCode?: string;
+  cmsItem?: any;
 }
 
-const GroupTourCard: React.FC<GroupTourCardProps> = ({ result, languageCode }) => {
+const GroupTourCard: React.FC<GroupTourCardProps> = ({ result, languageCode, cmsItem }) => {
   const dispatch = useDispatch();
   const translations = getTranslations(languageCode ?? 'en-GB');
   const { selectedSearchResultId } = useSelector((state: SearchResultsRootState) => state.searchResults);
@@ -29,15 +31,16 @@ const GroupTourCard: React.FC<GroupTourCardProps> = ({ result, languageCode }) =
   return (
     <div className="search__result-card">
       <div className="search__result-card__allotment">
+        <div className="search__result-card__allotment__img-wrapper">
+          <img src={cmsItem?.content?.images?.header?.url} alt={result.name} className="search__result-card__allotment__img" />
+        </div>
         <div className="search__result-card__allotment__title__wrapper">
-          <h3 className="search__result-card__allotment__title">
-            {result.name}
-            <span className="search__result-card__allotment__badge">
-              <Icon name="ui-circle-check" width={14} height={14} />
-              GAR
-            </span>
-          </h3>
-
+          <h3 className="search__result-card__allotment__title">{result.name}</h3>
+          {cmsItem?.content?.introductie?.intro && (
+            <div
+              className="search__result-card__allotment__description"
+              dangerouslySetInnerHTML={{ __html: he.decode(cmsItem.content.introductie.intro) }}></div>
+          )}
           <div className="search__result-card__allotment__container">
             <div className="search__result-card__allotment__header">
               <div className="search__result-card__allotment__wrapper">

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

@@ -36,11 +36,25 @@ const GroupTourResults: React.FC<GroupTourResultsProps> = ({ isLoading }) => {
     }
   }, [activeTab]);
 
+  const cmsMap = React.useMemo(() => {
+    const map = new Map();
+
+    context.cmsGroupTourData?.forEach((item) => {
+      const code = item?.content?.introductie?.data?.code;
+      if (code) {
+        map.set(code, item);
+      }
+    });
+
+    return map;
+  }, [context.cmsGroupTourData]);
+
   return (
     <div className={`search__results__cards search__results__cards--${activeTab}`}>
-      {filteredResults.map((result, index) => (
-        <GroupTourCard key={index} result={result} />
-      ))}
+      {filteredResults.map((result, index) => {
+        const cmsItem = cmsMap.get(result.code);
+        return <GroupTourCard key={index} result={result} cmsItem={cmsItem} />;
+      })}
     </div>
   );
 };

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

@@ -26,10 +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 dangerouslySetInnerHTML={{ __html: he.decode(result.contents) }}></div>
         <div className="search__result-card__footer">
           <button
             type="button"

package/src/search-results/types.ts

@@ -45,6 +45,7 @@ export interface SearchResultsConfiguration {
   customSpinner?: ReactNode;
 
   cmsHotelData?: any[];
+  cmsGroupTourData?: any[];
   tags?: TideTag[];
 
   languageCode?: string;

package/styles/components/_search.scss

@@ -1174,16 +1174,8 @@
           width: 100%;
 
           @include mixins.media-xs {
-            grid-template-columns: 1fr 0.6fr;
-          }
-
-          @include mixins.media-lg {
             grid-template-columns: 1fr 0.8fr;
           }
-
-          @include mixins.media-xl {
-            grid-template-columns: 1fr 0.6fr;
-          }
         }
 
         &__header {