@qite/tide-booking-component 1.4.67 → 1.4.68

package/build/build-cjs/index.js

@@ -45305,6 +45305,67 @@ var FAQ = function (_a) {
   );
 };
 
+var FeaturedTripCard = function (_a) {
+  var imageSrc = _a.imageSrc,
+    imageAlt = _a.imageAlt,
+    title = _a.title,
+    location = _a.location,
+    language = _a.language,
+    onButtonClick = _a.onButtonClick;
+  var translations = getTranslations(language !== null && language !== void 0 ? language : 'en-GB');
+  return React__default['default'].createElement(
+    'div',
+    { className: 'image-card' },
+    React__default['default'].createElement('img', { src: imageSrc, alt: imageAlt, className: 'image-card__image' }),
+    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' },
+        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(
+        'div',
+        { className: 'image-card__bottom' },
+        React__default['default'].createElement('button', { className: 'cta cta--select', onClick: onButtonClick }, translations.PRODUCT.BOOK_NOW)
+      )
+    )
+  );
+};
+
+var FeaturedTrips = function (_a) {
+  var title = _a.title,
+    cards = _a.cards;
+  return React__default['default'].createElement(
+    'div',
+    { className: 'content' },
+    React__default['default'].createElement(
+      'div',
+      { className: 'content__container' },
+      React__default['default'].createElement(
+        'div',
+        { className: 'content__title__row' },
+        React__default['default'].createElement('h2', { className: 'content__title' }, title)
+      ),
+      React__default['default'].createElement(
+        'div',
+        { className: 'content__colums content__colums--4' },
+        !lodash.isEmpty(cards) &&
+          cards.map(function (card, idx) {
+            return React__default['default'].createElement(FeaturedTripCard, __assign({ key: idx }, card));
+          })
+      )
+    )
+  );
+};
+
 var signalR$1 = {};
 
 var jqueryDeferred$1 = { exports: {} };
@@ -49203,6 +49264,7 @@ exports.BookingProduct = BookingProduct;
 exports.BookingWizard = BookingWizard;
 exports.Breadcrumbs = Breadcrumbs;
 exports.FAQ = FAQ;
+exports.FeaturedTrips = FeaturedTrips;
 exports.Footer = Footer;
 exports.Header = Header;
 exports.ImageCardGrid = ImageCardGrid;

package/build/build-cjs/src/content/featured-trips/featured-trip-card.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FeaturedTrip } from './types';
+declare const FeaturedTripCard: React.FC<FeaturedTrip>;
+export default FeaturedTripCard;

package/build/build-cjs/src/content/featured-trips/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FeaturedTripsProps } from './types';
+declare const FeaturedTrips: React.FC<FeaturedTripsProps>;
+export default FeaturedTrips;

package/build/build-cjs/src/content/featured-trips/types.d.ts

@@ -0,0 +1,12 @@
+export interface FeaturedTripsProps {
+  title: string;
+  cards: FeaturedTrip[];
+}
+export interface FeaturedTrip {
+  imageSrc: string;
+  imageAlt: string;
+  title: string;
+  location: string;
+  language?: string;
+  onButtonClick?: () => void;
+}

package/build/build-cjs/src/index.d.ts

@@ -12,6 +12,7 @@ import Slider from './content/components/slider';
 import PhotoGallery from './content/components/gallery';
 import Breadcrumbs from './content/components/breadcrumb';
 import FAQ from './content/components/faq';
+import FeaturedTrips from './content/featured-trips';
 export * from './content/navbar/types';
 export * from './content/header/types';
 export * from './content/footer/types';
@@ -21,6 +22,7 @@ export * from './content/image-with-text-section/types';
 export * from './search-results/types';
 export * from './qsm/types';
 export * from './shared/types';
+export * from './content/featured-trips/types';
 export {
   BookingProduct,
   BookingWizard,
@@ -35,5 +37,6 @@ export {
   Slider,
   PhotoGallery,
   Breadcrumbs,
-  FAQ
+  FAQ,
+  FeaturedTrips
 };

package/build/build-esm/index.js

@@ -45008,6 +45008,63 @@ var FAQ = function (_a) {
   );
 };
 
+var FeaturedTripCard = function (_a) {
+  var imageSrc = _a.imageSrc,
+    imageAlt = _a.imageAlt,
+    title = _a.title,
+    location = _a.location,
+    language = _a.language,
+    onButtonClick = _a.onButtonClick;
+  var translations = getTranslations(language !== null && language !== void 0 ? language : 'en-GB');
+  return React__default.createElement(
+    'div',
+    { className: 'image-card' },
+    React__default.createElement('img', { src: imageSrc, alt: imageAlt, className: 'image-card__image' }),
+    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' },
+        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(
+        'div',
+        { className: 'image-card__bottom' },
+        React__default.createElement('button', { className: 'cta cta--select', onClick: onButtonClick }, translations.PRODUCT.BOOK_NOW)
+      )
+    )
+  );
+};
+
+var FeaturedTrips = function (_a) {
+  var title = _a.title,
+    cards = _a.cards;
+  return React__default.createElement(
+    'div',
+    { className: 'content' },
+    React__default.createElement(
+      'div',
+      { className: 'content__container' },
+      React__default.createElement('div', { className: 'content__title__row' }, React__default.createElement('h2', { className: 'content__title' }, title)),
+      React__default.createElement(
+        'div',
+        { className: 'content__colums content__colums--4' },
+        !isEmpty(cards) &&
+          cards.map(function (card, idx) {
+            return React__default.createElement(FeaturedTripCard, __assign({ key: idx }, card));
+          })
+      )
+    )
+  );
+};
+
 var signalR$1 = {};
 
 var jqueryDeferred$1 = { exports: {} };
@@ -48908,6 +48965,7 @@ export {
   Breadcrumbs,
   DepartureRange,
   FAQ,
+  FeaturedTrips,
   Footer,
   Header,
   ImageCardGrid,

package/build/build-esm/src/content/featured-trips/featured-trip-card.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FeaturedTrip } from './types';
+declare const FeaturedTripCard: React.FC<FeaturedTrip>;
+export default FeaturedTripCard;

package/build/build-esm/src/content/featured-trips/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FeaturedTripsProps } from './types';
+declare const FeaturedTrips: React.FC<FeaturedTripsProps>;
+export default FeaturedTrips;

package/build/build-esm/src/content/featured-trips/types.d.ts

@@ -0,0 +1,12 @@
+export interface FeaturedTripsProps {
+  title: string;
+  cards: FeaturedTrip[];
+}
+export interface FeaturedTrip {
+  imageSrc: string;
+  imageAlt: string;
+  title: string;
+  location: string;
+  language?: string;
+  onButtonClick?: () => void;
+}

package/build/build-esm/src/index.d.ts

@@ -12,6 +12,7 @@ import Slider from './content/components/slider';
 import PhotoGallery from './content/components/gallery';
 import Breadcrumbs from './content/components/breadcrumb';
 import FAQ from './content/components/faq';
+import FeaturedTrips from './content/featured-trips';
 export * from './content/navbar/types';
 export * from './content/header/types';
 export * from './content/footer/types';
@@ -21,6 +22,7 @@ export * from './content/image-with-text-section/types';
 export * from './search-results/types';
 export * from './qsm/types';
 export * from './shared/types';
+export * from './content/featured-trips/types';
 export {
   BookingProduct,
   BookingWizard,
@@ -35,5 +37,6 @@ export {
   Slider,
   PhotoGallery,
   Breadcrumbs,
-  FAQ
+  FAQ,
+  FeaturedTrips
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.67",
+  "version": "1.4.68",
   "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/content/featured-trips/featured-trip-card.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { FeaturedTrip } from './types';
+import Icon from '../components/icon';
+import { getTranslations } from '../../shared/utils/localization-util';
+
+const FeaturedTripCard: React.FC<FeaturedTrip> = ({ imageSrc, imageAlt, title, location, language, onButtonClick }) => {
+  const translations = getTranslations(language ?? 'en-GB');
+
+  return (
+    <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>
+          {/* <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>
+        {/* <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
+            <p className="image-card__price--amount">$899</p>
+            Per Person
+          </div> */}
+          <button className="cta cta--select" onClick={onButtonClick}>
+            {translations.PRODUCT.BOOK_NOW}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeaturedTripCard;

package/src/content/featured-trips/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { FeaturedTripsProps } from './types';
+import { isEmpty } from 'lodash';
+import FeaturedTripCard from './featured-trip-card';
+
+const FeaturedTrips: React.FC<FeaturedTripsProps> = ({ title, cards }) => {
+  return (
+    <div className="content">
+      <div className="content__container">
+        <div className="content__title__row">
+          <h2 className="content__title">{title}</h2>
+        </div>
+        <div className="content__colums content__colums--4">{!isEmpty(cards) && cards.map((card, idx) => <FeaturedTripCard key={idx} {...card} />)}</div>
+      </div>
+    </div>
+  );
+};
+
+export default FeaturedTrips;

package/src/content/featured-trips/types.ts

@@ -0,0 +1,13 @@
+export interface FeaturedTripsProps {
+  title: string;
+  cards: FeaturedTrip[];
+}
+
+export interface FeaturedTrip {
+  imageSrc: string;
+  imageAlt: string;
+  title: string;
+  location: string;
+  language?: string;
+  onButtonClick?: () => void;
+}

package/src/index.ts

@@ -12,6 +12,7 @@ import Slider from './content/components/slider';
 import PhotoGallery from './content/components/gallery';
 import Breadcrumbs from './content/components/breadcrumb';
 import FAQ from './content/components/faq';
+import FeaturedTrips from './content/featured-trips';
 
 export * from './content/navbar/types';
 export * from './content/header/types';
@@ -22,6 +23,7 @@ export * from './content/image-with-text-section/types';
 export * from './search-results/types';
 export * from './qsm/types';
 export * from './shared/types';
+export * from './content/featured-trips/types';
 
 export {
   BookingProduct,
@@ -37,5 +39,6 @@ export {
   Slider,
   PhotoGallery,
   Breadcrumbs,
-  FAQ
+  FAQ,
+  FeaturedTrips
 };