@qite/tide-booking-component 1.4.107 → 1.4.108

package/build/build-cjs/index.js

@@ -16726,6 +16726,28 @@ var Icon = function (_a) {
           d: 'M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'
         })
       );
+    case 'ui-triangle-error':
+      return React__default['default'].createElement(
+        'svg',
+        {
+          className: ['icon', 'icon--'.concat(name), className]
+            .filter(function (className) {
+              return !lodash.isEmpty(className);
+            })
+            .join(' '),
+          width: width,
+          height: height,
+          viewBox: '0 0 512 512',
+          fill: fill !== null && fill !== void 0 ? fill : 'currentColor'
+        },
+        React__default['default'].createElement(HTMLComment, {
+          text: '!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.'
+        }),
+        title && React__default['default'].createElement('title', null, title),
+        React__default['default'].createElement('path', {
+          d: 'M256 0c14.7 0 28.2 8.1 35.2 21l216 400c6.7 12.4 6.4 27.4-.8 39.5S486.1 480 472 480L40 480c-14.1 0-27.2-7.4-34.4-19.5s-7.5-27.1-.8-39.5l216-400c7-12.9 20.5-21 35.2-21zm0 352a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.5 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z'
+        })
+      );
     default:
       return null;
   }

package/build/build-cjs/src/content/error/error.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type ErrorProps = {
+  message?: string;
+};
+declare const Error: React.FC<ErrorProps>;
+export default Error;

package/build/build-esm/index.js

@@ -16756,6 +16756,28 @@ var Icon = function (_a) {
           d: 'M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z'
         })
       );
+    case 'ui-triangle-error':
+      return React__default.createElement(
+        'svg',
+        {
+          className: ['icon', 'icon--'.concat(name), className]
+            .filter(function (className) {
+              return !isEmpty(className);
+            })
+            .join(' '),
+          width: width,
+          height: height,
+          viewBox: '0 0 512 512',
+          fill: fill !== null && fill !== void 0 ? fill : 'currentColor'
+        },
+        React__default.createElement(HTMLComment, {
+          text: '!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.'
+        }),
+        title && React__default.createElement('title', null, title),
+        React__default.createElement('path', {
+          d: 'M256 0c14.7 0 28.2 8.1 35.2 21l216 400c6.7 12.4 6.4 27.4-.8 39.5S486.1 480 472 480L40 480c-14.1 0-27.2-7.4-34.4-19.5s-7.5-27.1-.8-39.5l216-400c7-12.9 20.5-21 35.2-21zm0 352a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.5 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z'
+        })
+      );
     default:
       return null;
   }

package/build/build-esm/src/content/error/error.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type ErrorProps = {
+  message?: string;
+};
+declare const Error: React.FC<ErrorProps>;
+export default Error;

package/package.json

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import Icon from '../../shared/components/icon';
+
+type ErrorProps = {
+  message?: string;
+};
+const Error: React.FC<ErrorProps> = ({ message }) => {
+  return (
+    <section className="error">
+      <div className="error__container">
+        <div className="error__card">
+          <div className="error__icon">
+            <Icon name="ui-triangle-error" width={20} height={20} />
+          </div>
+          <h1 className="error__title">Something went wrong</h1>
+          <p className="error__message">{message || 'Sorry, something went wrong. Please try again later.'}</p>
+
+          <a href="/" className="cta cta--primary error__link">
+            Back to home
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Error;

package/src/shared/components/icon.tsx

@@ -1079,6 +1079,20 @@ const Icon: React.FC<IconProps> = ({ name, className, title, width, height, fill
         </svg>
       );
 
+    case 'ui-triangle-error':
+      return (
+        <svg
+          className={['icon', `icon--${name}`, className].filter((className) => !isEmpty(className)).join(' ')}
+          width={width}
+          height={height}
+          viewBox="0 0 512 512"
+          fill={fill ?? 'currentColor'}>
+          <HTMLComment text="!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc." />
+          {title && <title>{title}</title>}
+          <path d="M256 0c14.7 0 28.2 8.1 35.2 21l216 400c6.7 12.4 6.4 27.4-.8 39.5S486.1 480 472 480L40 480c-14.1 0-27.2-7.4-34.4-19.5s-7.5-27.1-.8-39.5l216-400c7-12.9 20.5-21 35.2-21zm0 352a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.5 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z" />
+        </svg>
+      );
+
     default:
       return null;
   }

package/styles/components/_error.scss

@@ -0,0 +1,50 @@
+@use '../components/mixins' as mixins;
+
+.error {
+  padding: 60px 0px;
+  background: var(--tide-booking-bg);
+
+  &__container {
+    @include mixins.container-wide();
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
+  &__card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__icon {
+    border-radius: 20%;
+    display: flex;
+    font-size: 24px;
+    font-weight: 600;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    color: var(--tide-booking-invalid);
+
+    @include media-lg {
+      font-size: 50px;
+    }
+
+    svg {
+      width: 40px;
+      height: 40px;
+
+      @include media-lg {
+        width: 80px;
+        height: 80px;
+      }
+    }
+  }
+
+  &__link {
+    max-width: 150px;
+    margin-top: 1rem;
+  }
+}

package/styles/components/_faq.scss

@@ -1,3 +1,4 @@
+@use '../components/mixins' as mixins;
 .faq {
   padding: 30px 0;
 

package/styles/content-blocks.scss

@@ -26,6 +26,7 @@ body {
   @import './components/login';
   @import './components/accordion';
   @import './components/footer';
+  @import './components/error';
 
   @import './qsm/qsm';
 

package/styles/qsm/_qsm.scss

@@ -521,6 +521,9 @@
       // border-bottom: 4px solid variables.$secondary-color;
       display: flex;
       flex-direction: column;
+      max-height: 300px;
+      overflow: auto;
+      @extend %scrollbar-thin;
 
       @include mixins.media-md {
         width: 100%;