@qite/tide-booking-component 1.2.3 → 1.2.4

package/rollup.config.js

@@ -1,23 +1,23 @@
-import commonjs from "@rollup/plugin-commonjs";
-import del from "rollup-plugin-delete";
-import json from "@rollup/plugin-json";
-import nodeResolve from "@rollup/plugin-node-resolve";
-import packageJson from "./package.json";
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import typescript from "rollup-plugin-typescript2";
-
-export default {
-  input: "src/index.ts",
-  output: [
-    { file: packageJson.main, format: "cjs", banner: "/* eslint-disable */" },
-    { file: packageJson.module, format: "esm", banner: "/* eslint-disable */" },
-  ],
-  plugins: [
-    peerDepsExternal(),
-    json(),
-    nodeResolve(),
-    commonjs(),
-    typescript(),
-    del({ targets: ["build/*"] }),
-  ],
-};
+import commonjs from "@rollup/plugin-commonjs";
+import del from "rollup-plugin-delete";
+import json from "@rollup/plugin-json";
+import nodeResolve from "@rollup/plugin-node-resolve";
+import packageJson from "./package.json";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import typescript from "rollup-plugin-typescript2";
+
+export default {
+  input: "src/index.ts",
+  output: [
+    { file: packageJson.main, format: "cjs", banner: "/* eslint-disable */" },
+    { file: packageJson.module, format: "esm", banner: "/* eslint-disable */" },
+  ],
+  plugins: [
+    peerDepsExternal(),
+    json(),
+    nodeResolve(),
+    commonjs(),
+    typescript(),
+    del({ targets: ["build/*"] }),
+  ],
+};

package/src/booking-product/components/footer.tsx

@@ -2,11 +2,13 @@ import React, { useContext } from "react";
 import Loader from "../../shared/components/loader";
 import { getTranslations } from "../../shared/utils/localization-util";
 import SettingsContext from "../settings-context";
+import { buildClassName } from "../../shared/utils/class-util";
 
 interface FooterProps {
   priceText: string | undefined;
   isLoading: boolean;
   isOffer: boolean | undefined;
+  roomsIsDisabled: boolean;
   handleBookClick: () => void;
 }
 
@@ -14,6 +16,7 @@ const Footer: React.FC<FooterProps> = ({
   priceText,
   isLoading,
   isOffer,
+  roomsIsDisabled,
   handleBookClick
 }) => {
   const {
@@ -41,7 +44,10 @@ const Footer: React.FC<FooterProps> = ({
             )}
             <div className="booking-product_footer-actions">
               {priceText ? (
-                <button type="button" className="cta" onClick={handleBookClick}>
+                <button type="button" className={buildClassName([
+                  "cta",
+                  !roomsIsDisabled && "cta--disabled"
+                ])} onClick={handleBookClick} disabled={!roomsIsDisabled}>
                   {isOffer ? translations.PRODUCT.TO_YOUR_OFFER : translations.PRODUCT.BOOK_NOW}
                 </button>
               ) : ((alternativeActionText && alternativeAction)

package/src/booking-product/components/product.tsx

@@ -45,6 +45,7 @@ const Product: React.FC<ProductProps> = ({
 
   const [loaded, setLoaded] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [roomsIsDisabled, setRoomsIsDisabled] = useState<boolean>(true);
   const [price, setPrice] = useState<number>();
   const [hasFlight, setHasFlight] = useState<boolean>(false);
   const [hasTransfer, setHasTransfer] = useState<boolean>(false);
@@ -259,6 +260,8 @@ const Product: React.FC<ProductProps> = ({
       <div className="booking-product__body">
         <Rooms
           rooms={rooms}
+          isDisabled={roomsIsDisabled}
+          setIsDisabled={setRoomsIsDisabled}
           onChange={handleRoomChange} />
         <Dates
           value={dateRange}
@@ -269,6 +272,7 @@ const Product: React.FC<ProductProps> = ({
         priceText={priceText}
         isLoading={isLoading}
         isOffer={isOffer}
+        roomsIsDisabled={roomsIsDisabled}
         handleBookClick={handleBookClick} />
     </div>
   );

package/src/booking-product/components/rating.tsx

@@ -1,21 +1,21 @@
-import React from "react";
-import { clamp, range } from "lodash";
-import Icon from "./icon";
-
-interface RatingProps {
-  rating: number;
-}
-
-const Rating: React.FC<RatingProps> = ({ rating }) => {
-  const clampedRating = clamp(rating, 0, 5);
-  return (
-    <div className="rating">
-      {range(0, Math.floor(clampedRating)).map((i) => (
-        <Icon name="ui-star" key={`rating-star-${i}`} width={25} height={25} />
-      ))}
-      {rating % 1 > 0 && <Icon name="ui-halfstar" width={25} height={25} />}
-    </div>
-  );
-};
-
-export default Rating;
+import React from "react";
+import { clamp, range } from "lodash";
+import Icon from "./icon";
+
+interface RatingProps {
+  rating: number;
+}
+
+const Rating: React.FC<RatingProps> = ({ rating }) => {
+  const clampedRating = clamp(rating, 0, 5);
+  return (
+    <div className="rating">
+      {range(0, Math.floor(clampedRating)).map((i) => (
+        <Icon name="ui-star" key={`rating-star-${i}`} width={25} height={25} />
+      ))}
+      {rating % 1 > 0 && <Icon name="ui-halfstar" width={25} height={25} />}
+    </div>
+  );
+};
+
+export default Rating;

package/src/booking-product/components/rooms.tsx

@@ -10,15 +10,18 @@ import Icon from "./icon";
 
 interface RoomsProps {
   rooms: ProductRoom[];
+  isDisabled: boolean,
+  setIsDisabled: (isOpen: boolean) => void;
   onChange: (rooms: ProductRoom[]) => void;
 }
 
 const Rooms: React.FC<RoomsProps> = ({
   rooms,
-  onChange
+  isDisabled,
+  setIsDisabled,
+  onChange,
 }) => {
 
-  const [isDisabled, setIsDisabled] = useState<boolean>(true);
   const [isTouched, setIsTouched] = useState<boolean>(false);
   const [currentRooms, setRoomState] = useState<ProductRoom[]>(rooms);
 

package/src/booking-wizard/components/icon.tsx

@@ -1,6 +1,7 @@
 import { isEmpty } from "lodash";
 import React, { useContext } from "react";
 import SettingsContext from "../settings-context";
+import HTMLComment from "react-html-comment";
 
 interface IconProps {
   name: string;
@@ -32,25 +33,273 @@ const Icon: React.FC<IconProps> = ({
 
   switch (name) {
     case "ui-chevron":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 320 512"
+      >
+        <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+        {title && <title>{title}</title>}
+        <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
+      </svg>);
+
     case "ui-error":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 512 512"
+      >
+        <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+        {title && <title>{title}</title>}
+        <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/>
+      </svg>);
+
     case "ui-tel":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 512 512"
+      >
+        <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+        {title && <title>{title}</title>}
+        <path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/>
+      </svg>);
+
     case "ui-mail":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 512 512"
+      >
+        <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+        {title && <title>{title}</title>}
+        <path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/>
+      </svg>);
+
     case "ui-home":
+
     case "ui-filter":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 10.701 9.698"
+      >
+        {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+        {title && <title>{title}</title>}
+        <g id="filter-solid" transform="translate(-2.667 -5.333)">
+          <path id="Path_54" data-name="Path 54" d="M9.355,15.031V10.517l3.836-3.846a.605.605,0,0,0,.177-.435V5.668a.334.334,0,0,0-.334-.334H3a.334.334,0,0,0-.334.334v.558a.6.6,0,0,0,.177.425L6.68,10.544v3.411Z" transform="translate(0 0)" fill="#12aad8"/>
+          <path id="Path_55" data-name="Path 55" d="M13.194,5.333H2.827a.174.174,0,0,0-.161.174v.575A.445.445,0,0,0,2.8,6.4L6.81,10.413v3.344l2.425,1.207V10.406l4.013-4.013a.451.451,0,0,0,.12-.3V5.507a.174.174,0,0,0-.174-.174Z" />
+        </g>
+      </svg>);
+
     case "ui-close":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 384 512"
+      >
+        <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+        {title && <title>{title}</title>}
+        <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>
+      </svg>);
+
     case "ui-ticket":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 20 20"
+      >
+        {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+        {title && <title>{title}</title>}
+        <g id="ticket" transform="translate(0.439 1.629)">
+            <path id="Path_14" data-name="Path 14" d="M12.125,5.335l3.751,3.751L9.086,15.875,5.335,12.125Zm-2.5,11.62L16.955,9.62a.745.745,0,0,0,0-1.068l-4.3-4.3a.774.774,0,0,0-1.068,0L4.255,11.59a.745.745,0,0,0,0,1.068l4.3,4.3a.774.774,0,0,0,1.068,0ZM20.172,9.395,9.406,20.172a1.533,1.533,0,0,1-2.148,0l-1.5-1.5a2.293,2.293,0,0,0,0-3.228,2.2,2.2,0,0,0-1.614-.665,2.2,2.2,0,0,0-1.614.665l-1.484-1.5a1.533,1.533,0,0,1,0-2.148L11.816,1.05a1.533,1.533,0,0,1,2.148,0l1.484,1.484a2.2,2.2,0,0,0-.665,1.614,2.2,2.2,0,0,0,.665,1.614,2.293,2.293,0,0,0,3.228,0l1.5,1.484a1.533,1.533,0,0,1,0,2.148Z" transform="translate(-1.05 -2.24)"/>
+        </g>
+      </svg>);
+
     case "ui-payback":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 20 20.154"
+      >
+        {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+        {title && <title>{title}</title>}
+        <g id="layer1" transform="translate(-205.148 -293.014)">
+            <path id="path453469" d="M223.472,306.895a1.674,1.674,0,0,0-1.188.487l-1.971,1.972a1.67,1.67,0,0,0-.978-.726l-4.652-1.247a2.766,2.766,0,0,0-2.182.331l-2.9,1.832-.235-.408a1.089,1.089,0,0,0-1.471-.394l-2.209,1.274a1.089,1.089,0,0,0-.394,1.471l3.291,5.7a1.088,1.088,0,0,0,1.47.4l2.209-1.276a1.09,1.09,0,0,0,.395-1.471l-.043-.076,1.258-.85,4.63.911a1.742,1.742,0,0,0,1.653-.514c1.493-1.527,2.988-3.048,4.505-4.544l0,0a1.675,1.675,0,0,0-1.189-2.863Zm0,1.332a.336.336,0,0,1,.238.1.323.323,0,0,1,0,.476c-1.525,1.5-3.024,3.031-4.518,4.559a1.847,1.847,0,0,1-.433.134l-4.9-.963a.672.672,0,0,0-.507.1l-1.411.954-1.667-2.886,2.947-1.858a1.411,1.411,0,0,1,1.118-.171l4.652,1.247a.336.336,0,1,1-.175.65l-2.92-.782a.672.672,0,0,0-.348,1.3l2.92.782a1.693,1.693,0,0,0,1.741-.572.672.672,0,0,0,.177-.118l2.85-2.852A.336.336,0,0,1,223.472,308.226Zm-15.14,1.812.325.564a.615.615,0,0,0,.253.438l2.445,4.235-1.745,1.008-3.024-5.237Z" transform="translate(0 -4.554)"  fill-rule="evenodd"/>
+            <path id="path453459" d="M223.672,301.014a.672.672,0,1,0,0,1.344h1.344a.672.672,0,1,0,0-1.344Z" transform="translate(-5.857 -2.625)"  fill-rule="evenodd"/>
+            <path id="path453437" d="M223.672,297.014a.672.672,0,0,0,0,1.344h1.344a.672.672,0,0,0,0-1.344Z" transform="translate(-5.857 -1.312)"  fill-rule="evenodd"/>
+            <path id="rect18334" d="M222.7,293.014a4.7,4.7,0,1,0,4.7,4.7A4.714,4.714,0,0,0,222.7,293.014Zm0,1.344a3.359,3.359,0,1,1-3.359,3.359A3.349,3.349,0,0,1,222.7,294.357Z" transform="translate(-4.217)"  fill-rule="evenodd"/>
+        </g>
+      </svg>);
+
     case "ui-backpack":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 14.499 16.11"
+      >
+        {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+        {title && <title>{title}</title>}
+        <path id="Path_2" data-name="Path 2" d="M22.444,28.805A.805.805,0,0,0,21.639,28H16.806a.806.806,0,0,0-.806.806v1.611h6.444ZM16,32.027h6.444v2.417H16Z" transform="translate(-11.972 -18.334)" />
+        <path id="Path_3" data-name="Path 3" d="M20.5,12.055a4.837,4.837,0,0,0-4.028-4.761V6.417A2.419,2.419,0,0,0,14.055,4H12.444a2.419,2.419,0,0,0-2.417,2.417v.878A4.837,4.837,0,0,0,6,12.055V18.5A1.613,1.613,0,0,0,7.611,20.11h.806V14.472a2.419,2.419,0,0,1,2.417-2.417h4.833a2.419,2.419,0,0,1,2.417,2.417V20.11h.806A1.613,1.613,0,0,0,20.5,18.5ZM11.639,6.417a.806.806,0,0,1,.806-.806h1.611a.805.805,0,0,1,.805.806v.806H11.639Z" transform="translate(-6 -4)"/>
+      </svg>);
+
     case "ui-suitcase":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 15.992 13.708"
+      >
+        {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+        {title && <title>{title}</title>}
+        <path id="Path_21" data-name="Path 21" d="M5.712,2.285h4.569V1.142H5.712Zm-3.141,0V13.708H2a1.924,1.924,0,0,1-1.41-.589A1.924,1.924,0,0,1,0,11.709V4.284a1.924,1.924,0,0,1,.589-1.41A1.924,1.924,0,0,1,2,2.285Zm10,0V13.708H3.427V2.285H4.569V.857A.826.826,0,0,1,4.819.25.826.826,0,0,1,5.426,0h5.14a.826.826,0,0,1,.607.25.826.826,0,0,1,.25.607V2.285Zm3.427,2v7.425a2.011,2.011,0,0,1-2,2h-.571V2.285h.571a1.924,1.924,0,0,1,1.41.589A1.924,1.924,0,0,1,15.992,4.284Z" transform="translate(0 0)"/>
+      </svg>);
+
     case "ui-business-lounge":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 20 19.999"
+      >
+        {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+        {title && <title>{title}</title>}
+        <g id="waiting-room-svgrepo-com" transform="translate(0 -0.008)">
+            <g id="Group_46" data-name="Group 46" transform="translate(0 0.008)">
+            <g id="Group_45" data-name="Group 45" transform="translate(0)">
+                <path id="Path_33" data-name="Path 33" d="M65.683,110.007a1.667,1.667,0,1,0-1.667-1.667A1.666,1.666,0,0,0,65.683,110.007Z" transform="translate(-61.515 -102.507)" />
+                <path id="Path_34" data-name="Path 34" d="M6.25,242.2H2.418L.824,235.025a.417.417,0,1,0-.814.181l1.657,7.455v2.454a.417.417,0,1,0,.833,0v-2.083H5v2.083a.417.417,0,1,0,.833,0v-2.083h.417a.417.417,0,0,0,0-.833Z" transform="translate(0 -225.532)" />
+                <path id="Path_35" data-name="Path 35" d="M281.933.008a4.583,4.583,0,1,0,4.583,4.583A4.588,4.588,0,0,0,281.933.008Zm1.667,5h-1.667a.417.417,0,0,1-.417-.417v-2.5a.417.417,0,0,1,.833,0V4.175h1.25a.417.417,0,1,1,0,.833Z" transform="translate(-266.516 -0.008)" />
+                <path id="Path_36" data-name="Path 36" d="M70.265,218.341H67.348v-3.333a1.667,1.667,0,0,0-3.333,0v4.583a1.251,1.251,0,0,0,1.25,1.25h3.75v2.917a1.25,1.25,0,1,0,2.5,0v-4.167A1.251,1.251,0,0,0,70.265,218.341Z" transform="translate(-61.514 -205.008)" />
+            </g>
+            </g>
+        </g>
+      </svg>);
+
     case "ui-shopping-bag":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 13.299 14.65"
+      >
+        {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+        {title && <title>{title}</title>}
+        <path id="Path_22" data-name="Path 22" d="M9.135.6A3.523,3.523,0,0,0,5.612,4.123V5.691A2.455,2.455,0,0,0,5,5.869,2.967,2.967,0,0,0,3.842,6.8,6.951,6.951,0,0,0,3,9.393c-.452,2.056-.678,3.083-.392,3.885A2.967,2.967,0,0,0,3.835,14.8c.721.451,1.774.451,3.878.451h2.843c2.1,0,3.157,0,3.878-.451a2.967,2.967,0,0,0,1.223-1.521c.285-.8.059-1.829-.392-3.885a6.951,6.951,0,0,0-.837-2.59,2.967,2.967,0,0,0-1.162-.934,2.456,2.456,0,0,0-.608-.178V4.123A3.523,3.523,0,0,0,9.135.6Zm2.411,5.012V4.123a2.411,2.411,0,0,0-4.821,0V5.612c.287,0,.613,0,.989,0h2.843C10.933,5.607,11.259,5.607,11.546,5.612ZM6.168,8.574a.742.742,0,1,0-.742-.742A.742.742,0,0,0,6.168,8.574Zm6.676-.742A.742.742,0,1,1,12.1,7.09.742.742,0,0,1,12.844,7.832Z" transform="translate(-2.486 -0.6)" fill-rule="evenodd"/>
+      </svg>);
+
     case "ui-priority":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 20 17.533"
+      >
+        {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+        {title && <title>{title}</title>}
+        <g id="list-high-priority" transform="translate(-1.5 -2.552)">
+            <path id="Path_24" data-name="Path 24" d="M24,39H34v1.333H24Z" transform="translate(-12.5 -20.249)" />
+            <path id="Path_25" data-name="Path 25" d="M24,29H34v1.333H24Z" transform="translate(-12.5 -14.694)" />
+            <path id="Path_26" data-name="Path 26" d="M24,19H34v1.333H24Z" transform="translate(-12.5 -9.138)" />
+            <path id="Path_27" data-name="Path 27" d="M30.75,9h7v1.333h-7Z" transform="translate(-16.25 -3.583)" />
+            <path id="Path_28" data-name="Path 28" d="M13.417,6.043,7.8,2.551V5.418H7.551a5.544,5.544,0,0,0-4.326,2.2A8.164,8.164,0,0,0,1.5,12.751a8.164,8.164,0,0,0,1.725,5.133,5.544,5.544,0,0,0,4.326,2.2H9.833V18.751H7.551c-2.6,0-4.718-2.692-4.718-6s2.117-6,4.718-6H7.8V9.635ZM9.133,4.95l1.783,1.109L9.133,7.2Z" />
+        </g>
+      </svg>);
+
     case "ui-tooltip":
-    case "ui-tooltip":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 512 512"
+      >
+        <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+        {title && <title>{title}</title>}
+        <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/>
+      </svg>);
+
     case "ui-qsm-location":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 384 512"
+      >
+        <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+        {title && <title>{title}</title>}
+        <path 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"/>
+      </svg>);
+
     case "ui-plane-depart":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 640 512"
+      >
+        <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+        {title && <title>{title}</title>}
+        <path d="M381 114.9L186.1 41.8c-16.7-6.2-35.2-5.3-51.1 2.7L89.1 67.4C78 73 77.2 88.5 87.6 95.2l146.9 94.5L136 240 77.8 214.1c-8.7-3.9-18.8-3.7-27.3 .6L18.3 230.8c-9.3 4.7-11.8 16.8-5 24.7l73.1 85.3c6.1 7.1 15 11.2 24.3 11.2l137.7 0c5 0 9.9-1.2 14.3-3.4L535.6 212.2c46.5-23.3 82.5-63.3 100.8-112C645.9 75 627.2 48 600.2 48l-57.4 0c-20.2 0-40.2 4.8-58.2 14L381 114.9zM0 480c0 17.7 14.3 32 32 32l576 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 448c-17.7 0-32 14.3-32 32z"/>
+      </svg>);
+
     case "ui-plane-arrive":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 640 512"
+      >
+        <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." />
+        {title && <title>{title}</title>}
+        <path d="M.3 166.9L0 68C0 57.7 9.5 50.1 19.5 52.3l35.6 7.9c10.6 2.3 19.2 9.9 23 20L96 128l127.3 37.6L181.8 20.4C178.9 10.2 186.6 0 197.2 0l40.1 0c11.6 0 22.2 6.2 27.9 16.3l109 193.8 107.2 31.7c15.9 4.7 30.8 12.5 43.7 22.8l34.4 27.6c24 19.2 18.1 57.3-10.7 68.2c-41.2 15.6-86.2 18.1-128.8 7L121.7 289.8c-11.1-2.9-21.2-8.7-29.3-16.9L9.5 189.4c-5.9-6-9.3-14.1-9.3-22.5zM32 448l576 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32zm96-80a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm128-16a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/>
+      </svg>);
+
     case "ui-clock":
+      return (<svg className={["icon", `icon--${name}`, className]
+        .filter((className) => !isEmpty(className))
+        .join(" ")}
+        width={width}
+        height={height}
+        viewBox="0 0 19 19"
+      >
+        {/* <HTMLComment text="!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc." /> */}
+        {title && <title>{title}</title>}
+        <g id="Group_56" data-name="Group 56" transform="translate(-390 -665)">
+            <circle id="Ellipse_5" data-name="Ellipse 5" cx="9.5" cy="9.5" r="9.5" transform="translate(390 665)" fill="#fff"/>
+            <g id="time" transform="translate(391.211 666.211)">
+            <path id="Path_11" data-name="Path 11" d="M8.289,13.578a5.289,5.289,0,1,1,5.289-5.289A5.289,5.289,0,0,1,8.289,13.578Zm0-9.823a4.534,4.534,0,1,0,4.534,4.534A4.534,4.534,0,0,0,8.289,3.756Z" transform="translate(0 0)"/>
+            <path id="Path_12" data-name="Path 12" d="M24.612,16.167,22.5,14.055V10.5h.756v3.241l1.889,1.893Z" transform="translate(-14.589 -5.611)"/>
+            </g>
+        </g>
+      </svg>);
+
     default:
       return null;
   }

package/src/booking-wizard/components/labeled-input.tsx

@@ -1,64 +1,64 @@
-import React from "react";
-import { buildClassName } from "../../shared/utils/class-util";
-import { compact } from "lodash";
-
-interface LabeledInputProps {
-  name: string;
-  type?: string;
-  required?: boolean;
-  value?: string | number;
-  defaultValue?: string | number;
-  min?: string | number;
-  max?: string | number;
-  label?: string;
-  placeholder?: string;
-  hasError?: boolean;
-  extraClassName?: string;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
-}
-
-const LabeledInput: React.FC<LabeledInputProps> = ({
-  name,
-  type,
-  required,
-  value,
-  defaultValue,
-  min,
-  max,
-  label,
-  placeholder,
-  extraClassName,
-  hasError,
-  onChange,
-  onBlur,
-}) => {
-  return (
-    <label
-      className={buildClassName([
-        "form__group",
-        extraClassName,
-        hasError && "form__group--error",
-      ])}
-    >
-      <span className="form__label">
-        {compact([label, required && "*"]).join(" ")}
-      </span>
-      <input
-        name={name}
-        type={type ?? "text"}
-        required={required}
-        className="form__input"
-        min={min}
-        max={max}
-        placeholder={placeholder}
-        onChange={onChange}
-        onBlur={onBlur}
-        value={value}
-        defaultValue={defaultValue}
-      />
-    </label>
-  );
-};
-
-export default LabeledInput;
+import React from "react";
+import { buildClassName } from "../../shared/utils/class-util";
+import { compact } from "lodash";
+
+interface LabeledInputProps {
+  name: string;
+  type?: string;
+  required?: boolean;
+  value?: string | number;
+  defaultValue?: string | number;
+  min?: string | number;
+  max?: string | number;
+  label?: string;
+  placeholder?: string;
+  hasError?: boolean;
+  extraClassName?: string;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+
+const LabeledInput: React.FC<LabeledInputProps> = ({
+  name,
+  type,
+  required,
+  value,
+  defaultValue,
+  min,
+  max,
+  label,
+  placeholder,
+  extraClassName,
+  hasError,
+  onChange,
+  onBlur,
+}) => {
+  return (
+    <label
+      className={buildClassName([
+        "form__group",
+        extraClassName,
+        hasError && "form__group--error",
+      ])}
+    >
+      <span className="form__label">
+        {compact([label, required && "*"]).join(" ")}
+      </span>
+      <input
+        name={name}
+        type={type ?? "text"}
+        required={required}
+        className="form__input"
+        min={min}
+        max={max}
+        placeholder={placeholder}
+        onChange={onChange}
+        onBlur={onBlur}
+        value={value}
+        defaultValue={defaultValue}
+      />
+    </label>
+  );
+};
+
+export default LabeledInput;