@qite/tide-booking-component 1.4.2 → 1.4.5

package/build/build-esm/shared/utils/localization-util.d.ts

@@ -166,8 +166,11 @@ export declare const getTranslations: (language: string) => {
         CHOOSE_AGENT_PLACEHOLDER: string;
         VALIDATION: {
             TRAVELER_X_FIELD: string;
+            SINGLE_ROOM_TRAVELER_X_FIELD: string;
             TRAVELER_X_IS_NO_ADULT: string;
+            SINGLE_ROOM_TRAVELER_X_IS_NO_ADULT: string;
             TRAVELER_X_IS_NO_CHILD: string;
+            SINGLE_ROOM_TRAVELER_X_IS_NO_CHILD: string;
             NO_MAIN_BOOKER_SELECTED: string;
             MAIN_BOOKER_FIELD: string;
             MAIN_BOOKER_EMAIL_IS_INVALID: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.2",
+  "version": "1.4.5",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "module": "build/build-esm/index.js",

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/age-select.tsx

@@ -1,35 +1,35 @@
-import { range } from "lodash";
-import React, { useContext } from "react";
-import { getTranslations } from "../../shared/utils/localization-util";
-import SettingsContext from "../settings-context";
-
-interface AgeSelectProps {
-  value?: number;
-  disabled?: boolean;
-  onChange?: (value: number) => void;
-}
-
-const AgeSelect: React.FC<AgeSelectProps> = ({ value, disabled, onChange }) => {
-  const { language } = useContext(SettingsContext);
-  const translations = getTranslations(language);
-
-  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
-    if (onChange) {
-      onChange(event.target.selectedIndex);
-    }
-  };
-
-  return (
-    <div className="dropdown dropdown--small">
-      <select onChange={handleChange} value={value ?? 0} disabled={disabled}>
-        {range(0, 18).map((age) => (
-          <option key={age} value={age}>
-            {age} {translations.PRODUCT.YEAR}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-};
-
-export default AgeSelect;
+import { range } from "lodash";
+import React, { useContext } from "react";
+import { getTranslations } from "../../shared/utils/localization-util";
+import SettingsContext from "../settings-context";
+
+interface AgeSelectProps {
+  value?: number;
+  disabled?: boolean;
+  onChange?: (value: number) => void;
+}
+
+const AgeSelect: React.FC<AgeSelectProps> = ({ value, disabled, onChange }) => {
+  const { language } = useContext(SettingsContext);
+  const translations = getTranslations(language);
+
+  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
+    if (onChange) {
+      onChange(event.target.selectedIndex);
+    }
+  };
+
+  return (
+    <div className="dropdown dropdown--small">
+      <select onChange={handleChange} value={value ?? 0} disabled={disabled}>
+        {range(0, 18).map((age) => (
+          <option key={age} value={age}>
+            {age} {translations.PRODUCT.YEAR}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default AgeSelect;

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

@@ -1,78 +1,78 @@
-import React, { useContext } from "react";
-import { getTranslations } from "../../shared/utils/localization-util";
-import SettingsContext from "../settings-context";
-import { buildClassName } from "../../shared/utils/class-util";
-import Icon from "./icon";
-
-interface AmountInputProps {
-  label: string;
-  value: number;
-  disabled?: boolean;
-  min?: number;
-  onChange?: (value: number) => void;
-}
-
-const AmountInput: React.FC<AmountInputProps> = ({
-  label,
-  value,
-  disabled,
-  min,
-  onChange,
-}) => {
-  const { language } = useContext(SettingsContext);
-  const translations = getTranslations(language);
-
-  const handleIncreaseClick: React.MouseEventHandler<HTMLButtonElement> = (
-    event
-  ) => {
-    if (onChange) {
-      onChange(value + 1);
-    }
-  };
-
-  const handleDecreaseClick: React.MouseEventHandler<HTMLButtonElement> = (
-    event
-  ) => {
-    if (onChange) {
-      onChange(Math.max(value - 1, min ?? 0));
-    }
-  };
-
-  return (
-    <div
-      className={buildClassName([
-        "decrement-increment",
-        disabled && "decrement-increment--disabled",
-      ])}
-    >
-      <label className="decrement-increment__label">{label}</label>
-      <div className="decrement-increment__ui">
-        {!disabled && (
-          <button
-            type="button"
-            className="button button--decrement"
-            title={translations.INPUT.DECREASE}
-            disabled={disabled}
-            onClick={handleDecreaseClick}
-          >
-            <Icon name="ui-min" />
-          </button>
-        )}
-        <span>{value}</span>
-        {!disabled && (
-          <button
-            type="button"
-            className="button button--increment"
-            title={translations.INPUT.INCREASE}
-            disabled={disabled}
-            onClick={handleIncreaseClick}
-          >
-            <Icon name="ui-plus" />
-          </button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default AmountInput;
+import React, { useContext } from "react";
+import { getTranslations } from "../../shared/utils/localization-util";
+import SettingsContext from "../settings-context";
+import { buildClassName } from "../../shared/utils/class-util";
+import Icon from "./icon";
+
+interface AmountInputProps {
+  label: string;
+  value: number;
+  disabled?: boolean;
+  min?: number;
+  onChange?: (value: number) => void;
+}
+
+const AmountInput: React.FC<AmountInputProps> = ({
+  label,
+  value,
+  disabled,
+  min,
+  onChange,
+}) => {
+  const { language } = useContext(SettingsContext);
+  const translations = getTranslations(language);
+
+  const handleIncreaseClick: React.MouseEventHandler<HTMLButtonElement> = (
+    event
+  ) => {
+    if (onChange) {
+      onChange(value + 1);
+    }
+  };
+
+  const handleDecreaseClick: React.MouseEventHandler<HTMLButtonElement> = (
+    event
+  ) => {
+    if (onChange) {
+      onChange(Math.max(value - 1, min ?? 0));
+    }
+  };
+
+  return (
+    <div
+      className={buildClassName([
+        "decrement-increment",
+        disabled && "decrement-increment--disabled",
+      ])}
+    >
+      <label className="decrement-increment__label">{label}</label>
+      <div className="decrement-increment__ui">
+        {!disabled && (
+          <button
+            type="button"
+            className="button button--decrement"
+            title={translations.INPUT.DECREASE}
+            disabled={disabled}
+            onClick={handleDecreaseClick}
+          >
+            <Icon name="ui-min" />
+          </button>
+        )}
+        <span>{value}</span>
+        {!disabled && (
+          <button
+            type="button"
+            className="button button--increment"
+            title={translations.INPUT.INCREASE}
+            disabled={disabled}
+            onClick={handleIncreaseClick}
+          >
+            <Icon name="ui-plus" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AmountInput;

package/src/booking-product/components/date-range-picker/calendar-day.tsx

@@ -1,58 +1,58 @@
-import React from "react";
-import { getDate, isToday } from "date-fns";
-import { buildClassName } from "../../../shared/utils/class-util";
-
-interface CalendarDayProps {
-  day: Date;
-  isSelected: boolean;
-  isDisabled: boolean;
-  isOutsideMonth: boolean;
-  extraClassNames?: string[];
-  onClick: (date: Date) => void;
-  onMouseOver: (date: Date) => void;
-}
-
-const CalendarDay: React.FC<CalendarDayProps> = ({
-  day,
-  isSelected,
-  isDisabled,
-  isOutsideMonth,
-  extraClassNames = [],
-  children,
-  onClick,
-  onMouseOver,
-}) => {
-  const handleClick = () => {
-    if (onClick && !isDisabled) {
-      onClick(day);
-    }
-  };
-
-  const handleMouseOver = () => {
-    if (onMouseOver) {
-      onMouseOver(day);
-    }
-  };
-
-  const classNames = buildClassName([
-    "calendar__day",
-    isToday(day) && "calendar__day--today",
-    isDisabled && "calendar__day--disabled",
-    isOutsideMonth && "calendar__day--outside-month",
-    isSelected && "calendar__day--selected",
-    ...extraClassNames,
-  ]);
-
-  return (
-    <div
-      className={classNames}
-      onClick={handleClick}
-      onMouseOver={handleMouseOver}
-    >
-      {getDate(day).toString().padStart(2, "0")}
-      {children}
-    </div>
-  );
-};
-
-export default CalendarDay;
+import React from "react";
+import { getDate, isToday } from "date-fns";
+import { buildClassName } from "../../../shared/utils/class-util";
+
+interface CalendarDayProps {
+  day: Date;
+  isSelected: boolean;
+  isDisabled: boolean;
+  isOutsideMonth: boolean;
+  extraClassNames?: string[];
+  onClick: (date: Date) => void;
+  onMouseOver: (date: Date) => void;
+}
+
+const CalendarDay: React.FC<CalendarDayProps> = ({
+  day,
+  isSelected,
+  isDisabled,
+  isOutsideMonth,
+  extraClassNames = [],
+  children,
+  onClick,
+  onMouseOver,
+}) => {
+  const handleClick = () => {
+    if (onClick && !isDisabled) {
+      onClick(day);
+    }
+  };
+
+  const handleMouseOver = () => {
+    if (onMouseOver) {
+      onMouseOver(day);
+    }
+  };
+
+  const classNames = buildClassName([
+    "calendar__day",
+    isToday(day) && "calendar__day--today",
+    isDisabled && "calendar__day--disabled",
+    isOutsideMonth && "calendar__day--outside-month",
+    isSelected && "calendar__day--selected",
+    ...extraClassNames,
+  ]);
+
+  return (
+    <div
+      className={classNames}
+      onClick={handleClick}
+      onMouseOver={handleMouseOver}
+    >
+      {getDate(day).toString().padStart(2, "0")}
+      {children}
+    </div>
+  );
+};
+
+export default CalendarDay;