@qite/tide-booking-component 1.4.66 → 1.4.68

package/build/build-cjs/index.js

@@ -45222,6 +45222,150 @@ var Breadcrumbs = function (_a) {
   );
 };
 
+function Accordion(_a) {
+  var summary = _a.summary,
+    children = _a.children,
+    _b = _a.defaultOpen,
+    defaultOpen = _b === void 0 ? false : _b,
+    _c = _a.className,
+    className = _c === void 0 ? '' : _c;
+  var _d = React__default['default'].useState(defaultOpen),
+    open = _d[0],
+    setOpen = _d[1];
+  return React__default['default'].createElement(
+    'div',
+    { className: ['accordion', open && 'accordion--open', className].filter(Boolean).join(' ') },
+    React__default['default'].createElement(
+      'button',
+      {
+        className: 'accordion__trigger',
+        type: 'button',
+        'aria-expanded': open,
+        onClick: function () {
+          return setOpen(function (v) {
+            return !v;
+          });
+        }
+      },
+      React__default['default'].createElement('span', null, summary),
+      React__default['default'].createElement(
+        'span',
+        { className: 'accordion__icon', 'aria-hidden': true },
+        React__default['default'].createElement(Icon$3, { name: 'ui-chevron', width: 20, height: 20 })
+      )
+    ),
+    React__default['default'].createElement(
+      'div',
+      { className: 'accordion__panel' },
+      React__default['default'].createElement(
+        'div',
+        { className: 'accordion__panelInner' },
+        React__default['default'].createElement('div', { className: 'accordion__content' }, children)
+      )
+    )
+  );
+}
+
+var FAQ = function (_a) {
+  var items = _a.items,
+    _b = _a.title,
+    title = _b === void 0 ? 'Frequently Asked Questions' : _b;
+  if (!(items === null || items === void 0 ? void 0 : items.length)) {
+    return React__default['default'].createElement(
+      'section',
+      { className: 'faq' },
+      React__default['default'].createElement('h2', { className: 'faq__title' }, title),
+      React__default['default'].createElement('p', { className: 'faq__empty' }, 'No FAQs available.')
+    );
+  }
+  return React__default['default'].createElement(
+    'div',
+    { className: 'content' },
+    React__default['default'].createElement(
+      'div',
+      { className: 'content__container content__container--small' },
+      React__default['default'].createElement(
+        'section',
+        { className: 'faq' },
+        React__default['default'].createElement('h2', { className: 'faq__title' }, title),
+        React__default['default'].createElement(
+          'div',
+          { className: 'faq__list' },
+          items.map(function (item, idx) {
+            var _a;
+            return React__default['default'].createElement(
+              Accordion,
+              { key: (_a = item.question) !== null && _a !== void 0 ? _a : idx, summary: item.question },
+              React__default['default'].createElement('div', { className: 'faq__answer' }, item.answer)
+            );
+          })
+        )
+      )
+    )
+  );
+};
+
+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: {} };
@@ -49119,6 +49263,8 @@ var signalR = /*#__PURE__*/ _mergeNamespaces(
 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/components/faq.d.ts

@@ -7,4 +7,5 @@ export interface FAQProps {
   items: FAQItem[];
   title?: string;
 }
-export default function FAQ({ items, title }: FAQProps): React.JSX.Element;
+declare const FAQ: React.FC<FAQProps>;
+export default FAQ;

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

@@ -11,6 +11,8 @@ import ImageWithTextSection from './content/image-with-text-section';
 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';
@@ -20,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,
@@ -33,5 +36,7 @@ export {
   ImageWithTextSection,
   Slider,
   PhotoGallery,
-  Breadcrumbs
+  Breadcrumbs,
+  FAQ,
+  FeaturedTrips
 };

package/build/build-esm/index.js

@@ -44925,6 +44925,146 @@ var Breadcrumbs = function (_a) {
   );
 };
 
+function Accordion(_a) {
+  var summary = _a.summary,
+    children = _a.children,
+    _b = _a.defaultOpen,
+    defaultOpen = _b === void 0 ? false : _b,
+    _c = _a.className,
+    className = _c === void 0 ? '' : _c;
+  var _d = React__default.useState(defaultOpen),
+    open = _d[0],
+    setOpen = _d[1];
+  return React__default.createElement(
+    'div',
+    { className: ['accordion', open && 'accordion--open', className].filter(Boolean).join(' ') },
+    React__default.createElement(
+      'button',
+      {
+        className: 'accordion__trigger',
+        type: 'button',
+        'aria-expanded': open,
+        onClick: function () {
+          return setOpen(function (v) {
+            return !v;
+          });
+        }
+      },
+      React__default.createElement('span', null, summary),
+      React__default.createElement(
+        'span',
+        { className: 'accordion__icon', 'aria-hidden': true },
+        React__default.createElement(Icon$3, { name: 'ui-chevron', width: 20, height: 20 })
+      )
+    ),
+    React__default.createElement(
+      'div',
+      { className: 'accordion__panel' },
+      React__default.createElement(
+        'div',
+        { className: 'accordion__panelInner' },
+        React__default.createElement('div', { className: 'accordion__content' }, children)
+      )
+    )
+  );
+}
+
+var FAQ = function (_a) {
+  var items = _a.items,
+    _b = _a.title,
+    title = _b === void 0 ? 'Frequently Asked Questions' : _b;
+  if (!(items === null || items === void 0 ? void 0 : items.length)) {
+    return React__default.createElement(
+      'section',
+      { className: 'faq' },
+      React__default.createElement('h2', { className: 'faq__title' }, title),
+      React__default.createElement('p', { className: 'faq__empty' }, 'No FAQs available.')
+    );
+  }
+  return React__default.createElement(
+    'div',
+    { className: 'content' },
+    React__default.createElement(
+      'div',
+      { className: 'content__container content__container--small' },
+      React__default.createElement(
+        'section',
+        { className: 'faq' },
+        React__default.createElement('h2', { className: 'faq__title' }, title),
+        React__default.createElement(
+          'div',
+          { className: 'faq__list' },
+          items.map(function (item, idx) {
+            var _a;
+            return React__default.createElement(
+              Accordion,
+              { key: (_a = item.question) !== null && _a !== void 0 ? _a : idx, summary: item.question },
+              React__default.createElement('div', { className: 'faq__answer' }, item.answer)
+            );
+          })
+        )
+      )
+    )
+  );
+};
+
+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: {} };
@@ -48824,6 +48964,8 @@ export {
   BookingWizard,
   Breadcrumbs,
   DepartureRange,
+  FAQ,
+  FeaturedTrips,
   Footer,
   Header,
   ImageCardGrid,

package/build/build-esm/src/content/components/faq.d.ts

@@ -7,4 +7,5 @@ export interface FAQProps {
   items: FAQItem[];
   title?: string;
 }
-export default function FAQ({ items, title }: FAQProps): React.JSX.Element;
+declare const FAQ: React.FC<FAQProps>;
+export default FAQ;

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

@@ -11,6 +11,8 @@ import ImageWithTextSection from './content/image-with-text-section';
 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';
@@ -20,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,
@@ -33,5 +36,7 @@ export {
   ImageWithTextSection,
   Slider,
   PhotoGallery,
-  Breadcrumbs
+  Breadcrumbs,
+  FAQ,
+  FeaturedTrips
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.66",
+  "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/components/faq.tsx

@@ -11,7 +11,7 @@ export interface FAQProps {
   title?: string;
 }
 
-export default function FAQ({ items, title = 'Frequently Asked Questions' }: FAQProps) {
+const FAQ: React.FC<FAQProps> = ({ items, title = 'Frequently Asked Questions' }) => {
   if (!items?.length) {
     return (
       <section className="faq">
@@ -22,15 +22,21 @@ export default function FAQ({ items, title = 'Frequently Asked Questions' }: FAQ
   }
 
   return (
-    <section className="faq">
-      <h2 className="faq__title">{title}</h2>
-      <div className="faq__list">
-        {items.map((item, idx) => (
-          <Accordion key={item.question ?? idx} summary={item.question}>
-            <div className="faq__answer">{item.answer}</div>
-          </Accordion>
-        ))}
+    <div className="content">
+      <div className="content__container content__container--small">
+        <section className="faq">
+          <h2 className="faq__title">{title}</h2>
+          <div className="faq__list">
+            {items.map((item, idx) => (
+              <Accordion key={item.question ?? idx} summary={item.question}>
+                <div className="faq__answer">{item.answer}</div>
+              </Accordion>
+            ))}
+          </div>
+        </section>
       </div>
-    </section>
+    </div>
   );
-}
+};
+
+export default FAQ;

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

@@ -11,6 +11,8 @@ import ImageWithTextSection from './content/image-with-text-section';
 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';
@@ -21,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,
@@ -35,5 +38,7 @@ export {
   ImageWithTextSection,
   Slider,
   PhotoGallery,
-  Breadcrumbs
+  Breadcrumbs,
+  FAQ,
+  FeaturedTrips
 };