@qite/tide-booking-component 1.4.83 → 1.4.85

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',
@@ -29940,6 +29940,7 @@ var Navbar = function (_a) {
   var _b;
   var currentPath = _a.currentPath,
     logo = _a.logo,
+    onLogoClick = _a.onLogoClick,
     topLinks = _a.topLinks,
     items = _a.items,
     language = _a.language,
@@ -30234,7 +30235,7 @@ var Navbar = function (_a) {
       React__default['default'].createElement(
         'div',
         { className: 'nav__container' },
-        React__default['default'].createElement('div', { className: 'nav__logo' }, logo),
+        React__default['default'].createElement('div', { className: 'nav__logo', onClick: onLogoClick }, logo),
         React__default['default'].createElement(
           'div',
           { className: 'nav__wrapper' },
@@ -30480,6 +30481,7 @@ var defaultPayments = [
 var Footer = function (_a) {
   var className = _a.className,
     logo = _a.logo,
+    onLogoClick = _a.onLogoClick,
     _b = _a.social,
     social = _b === void 0 ? defaultSocial : _b,
     _c = _a.columns,
@@ -30499,7 +30501,7 @@ var Footer = function (_a) {
         { className: 'footer__top' },
         React__default['default'].createElement(
           'div',
-          { className: 'footer__logo' },
+          { className: 'footer__logo', onClick: onLogoClick },
           logo !== null && logo !== void 0 ? logo : React__default['default'].createElement(DefaultLogo, null)
         ),
         React__default['default'].createElement(
@@ -42576,11 +42578,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 +45791,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 +45819,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 +45985,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/content/footer/types.d.ts

@@ -19,6 +19,7 @@ export interface FooterProps {
   className?: string;
   /** Optional override for the logo (defaults to the SVG from your footer) */
   logo?: React.ReactNode;
+  onLogoClick?: () => void;
   social?: SocialLink[];
   columns?: FooterColumn[];
   copyrightText?: string;

package/build/build-cjs/src/content/navbar/types.d.ts

@@ -19,6 +19,7 @@ export interface NavItem {
 export interface NavbarProps {
   currentPath?: string;
   logo: React.ReactNode;
+  onLogoClick?: () => void;
   topLinks: NavLink[];
   items: NavItem[];
   language: Language;

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',
@@ -29830,6 +29830,7 @@ var Navbar = function (_a) {
   var _b;
   var currentPath = _a.currentPath,
     logo = _a.logo,
+    onLogoClick = _a.onLogoClick,
     topLinks = _a.topLinks,
     items = _a.items,
     language = _a.language,
@@ -30122,7 +30123,7 @@ var Navbar = function (_a) {
       React__default.createElement(
         'div',
         { className: 'nav__container' },
-        React__default.createElement('div', { className: 'nav__logo' }, logo),
+        React__default.createElement('div', { className: 'nav__logo', onClick: onLogoClick }, logo),
         React__default.createElement(
           'div',
           { className: 'nav__wrapper' },
@@ -30368,6 +30369,7 @@ var defaultPayments = [
 var Footer = function (_a) {
   var className = _a.className,
     logo = _a.logo,
+    onLogoClick = _a.onLogoClick,
     _b = _a.social,
     social = _b === void 0 ? defaultSocial : _b,
     _c = _a.columns,
@@ -30387,7 +30389,7 @@ var Footer = function (_a) {
         { className: 'footer__top' },
         React__default.createElement(
           'div',
-          { className: 'footer__logo' },
+          { className: 'footer__logo', onClick: onLogoClick },
           logo !== null && logo !== void 0 ? logo : React__default.createElement(DefaultLogo, null)
         ),
         React__default.createElement(
@@ -42399,11 +42401,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 +45543,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 +45571,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 +45737,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/content/footer/types.d.ts

@@ -19,6 +19,7 @@ export interface FooterProps {
   className?: string;
   /** Optional override for the logo (defaults to the SVG from your footer) */
   logo?: React.ReactNode;
+  onLogoClick?: () => void;
   social?: SocialLink[];
   columns?: FooterColumn[];
   copyrightText?: string;

package/build/build-esm/src/content/navbar/types.d.ts

@@ -19,6 +19,7 @@ export interface NavItem {
 export interface NavbarProps {
   currentPath?: string;
   logo: React.ReactNode;
+  onLogoClick?: () => void;
   topLinks: NavLink[];
   items: NavItem[];
   language: Language;

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.85",
   "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/content/footer/index.tsx

@@ -104,6 +104,7 @@ const defaultPayments: PaymentIcon[] = [
 export const Footer: React.FC<FooterProps> = ({
   className,
   logo,
+  onLogoClick,
   social = defaultSocial,
   columns = defaultColumns,
   copyrightText = '© 2024 Travel Agency. All rights reserved.',
@@ -113,7 +114,9 @@ export const Footer: React.FC<FooterProps> = ({
     <footer className={['footer', className].filter(Boolean).join(' ')}>
       <div className="footer__container">
         <div className="footer__top">
-          <div className="footer__logo">{logo ?? <DefaultLogo />}</div>
+          <div className="footer__logo" onClick={onLogoClick}>
+            {logo ?? <DefaultLogo />}
+          </div>
 
           <div className="footer__social">
             {social.map((item) => (

package/src/content/footer/types.ts

@@ -24,6 +24,7 @@ export interface FooterProps {
 
   /** Optional override for the logo (defaults to the SVG from your footer) */
   logo?: React.ReactNode;
+  onLogoClick?: () => void;
 
   social?: SocialLink[];
 

package/src/content/navbar/index.tsx

@@ -4,7 +4,20 @@ import Icon from '../components/icon';
 import { NavbarProps, NavItem } from '../navbar/types';
 import { getTranslations } from '../../shared/utils/localization-util';
 
-const Navbar: React.FC<NavbarProps> = ({ currentPath, logo, topLinks, items, language, languages, onLanguageChange, onSearch, member, onLogin, onLogout }) => {
+const Navbar: React.FC<NavbarProps> = ({
+  currentPath,
+  logo,
+  onLogoClick,
+  topLinks,
+  items,
+  language,
+  languages,
+  onLanguageChange,
+  onSearch,
+  member,
+  onLogin,
+  onLogout
+}) => {
   const [menuOpen, setMenuOpen] = useState(false);
   const [query, setQuery] = useState('');
   const [activeMobileGroup, setActiveMobileGroup] = useState<string>();
@@ -247,7 +260,9 @@ const Navbar: React.FC<NavbarProps> = ({ currentPath, logo, topLinks, items, lan
       </div>
       <nav className="nav__primary">
         <div className="nav__container">
-          <div className="nav__logo">{logo}</div>
+          <div className="nav__logo" onClick={onLogoClick}>
+            {logo}
+          </div>
           <div className="nav__wrapper">
             <div className="nav__links">{items && items.map(renderNavItem)}</div>
             <div className="nav__search">

package/src/content/navbar/types.ts

@@ -26,6 +26,7 @@ export interface NavbarProps {
   currentPath?: string;
 
   logo: React.ReactNode;
+  onLogoClick?: () => void;
 
   topLinks: NavLink[];
   items: NavItem[];

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/_footer.scss

@@ -29,6 +29,7 @@
   &__logo {
     width: auto;
     height: 40px;
+    cursor: pointer;
 
     svg,
     img {

package/styles/components/_navbar.scss

@@ -232,6 +232,7 @@
     width: auto;
     height: 100%;
     padding: 15px 0px;
+    cursor: pointer;
 
     svg {
       height: 100%;

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 {