@qite/tide-booking-component 1.2.3 → 1.2.5

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

@@ -49,6 +49,9 @@ export declare const getTranslations: (language: string) => {
         MORNING_DEPARTURE: string;
         AFTERNOON_DEPARTURE: string;
         EVENING_DEPARTURE: string;
+        FLIGHTS_FOUND_1: string;
+        FLIGHTS_FOUND_2: string;
+        FLIGHTS_FOUND_3: string;
     };
     PRODUCT: {
         STAY_INCLUDED: string;
@@ -233,6 +236,7 @@ export declare const getTranslations: (language: string) => {
 export declare const locales: {
     "nl-BE": Locale;
     "fr-BE": Locale;
+    "en-GB": Locale;
 };
 export declare function getLocale(code: string): Locale;
 export declare const getPriceDifferenceText: (price: number) => string;

package/package.json

@@ -1,77 +1,75 @@
-{
-  "name": "@qite/tide-booking-component",
-  "version": "1.2.3",
-  "description": "React Booking wizard & Booking product component for Tide",
-  "main": "build/build-cjs/index.js",
-  "module": "build/build-esm/index.js",
-  "scripts": {
-    "start": "rollup -c -w",
-    "build": "rollup -c",
-    "tsc": "tsc --noEmit",
-    "format": "prettier --write ."
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@bitbucket.org/qitegeneral/tide-booking-component.git"
-  },
-  "keywords": [
-    "tide",
-    "booking",
-    "react",
-    "component"
-  ],
-  "author": "Kristof Colpaert <kristof.colpaert@qite.be>",
-  "license": "OBSD",
-  "homepage": "https://bitbucket.org/qitegeneral/tide-booking-component#readme",
-  "devDependencies": {
-    "@jsonurl/jsonurl": "^1.1.4",
-    "@popperjs/core": "^2.10.2",
-    "@reach/router": "^1.3.4",
-    "@reduxjs/toolkit": "^1.6.0",
-    "@rollup/plugin-commonjs": "^19.0.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.2",
-    "@types/flat": "^5.0.2",
-    "@types/lodash": "^4.14.171",
-    "@types/reach__router": "^1.3.9",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
-    "@types/uuid": "^8.3.1",
-    "date-fns": "^2.22.1",
-    "flat": "^5.0.2",
-    "formik": "^2.2.9",
-    "lodash": "^4.17.21",
-    "prettier": "^2.3.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-popper": "^2.2.5",
-    "react-redux": "^7.2.4",
-    "rollup": "^2.53.2",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "0.36.0",
-    "tslib": "^2.3.1",
-    "typescript": "^4.3.5",
-    "uuid": "^8.3.2"
-  },
-  "peerDependencies": {
-    "@jsonurl/jsonurl": "^1.1.4",
-    "@popperjs/core": "^2.10.2",
-    "@reach/router": "^1.3.4",
-    "@reduxjs/toolkit": "^1.6.0",
-    "date-fns": "^2.22.1",
-    "flat": "^5.0.2",
-    "formik": "^2.2.9",
-    "immer": "^9.0.5",
-    "lodash": "^4.17.21",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-popper": "^2.2.5",
-    "react-redux": "^7.2.4",
-    "uuid": "^8.3.2"
-  },
-  "dependencies": {
-    "@qite/tide-client": "^1.1.57",
-    "react-html-comment": "^2.0.16"
-  }
-}
+{
+  "name": "@qite/tide-booking-component",
+  "version": "1.2.5",
+  "description": "React Booking wizard & Booking product component for Tide",
+  "main": "build/build-cjs/index.js",
+  "module": "build/build-esm/index.js",
+  "scripts": {
+    "start": "rollup -c -w",
+    "build": "rollup -c",
+    "tsc": "tsc --noEmit",
+    "format": "prettier --write ."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org/qitegeneral/tide-booking-component.git"
+  },
+  "keywords": [
+    "tide",
+    "booking",
+    "react",
+    "component"
+  ],
+  "author": "Kristof Colpaert <kristof.colpaert@qite.be>",
+  "license": "OBSD",
+  "homepage": "https://bitbucket.org/qitegeneral/tide-booking-component#readme",
+  "devDependencies": {
+    "@jsonurl/jsonurl": "^1.1.4",
+    "@popperjs/core": "^2.10.2",
+    "@reach/router": "^1.3.4",
+    "@reduxjs/toolkit": "^1.6.0",
+    "@rollup/plugin-commonjs": "^19.0.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.0.2",
+    "@types/flat": "^5.0.2",
+    "@types/lodash": "^4.14.171",
+    "@types/reach__router": "^1.3.9",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "@types/uuid": "^8.3.1",
+    "date-fns": "^2.22.1",
+    "flat": "^5.0.2",
+    "formik": "^2.2.9",
+    "lodash": "^4.17.21",
+    "prettier": "^2.3.2",
+    "react-popper": "^2.2.5",
+    "react-redux": "^7.2.4",
+    "rollup": "^2.53.2",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "0.36.0",
+    "tslib": "^2.3.1",
+    "typescript": "^4.3.5",
+    "uuid": "^8.3.2"
+  },
+  "peerDependencies": {
+    "@jsonurl/jsonurl": "^1.1.4",
+    "@popperjs/core": "^2.10.2",
+    "@reach/router": "^1.3.4",
+    "@reduxjs/toolkit": "^1.6.0",
+    "date-fns": "^2.22.1",
+    "flat": "^5.0.2",
+    "formik": "^2.2.9",
+    "immer": "^9.0.5",
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-popper": "^2.2.5",
+    "react-redux": "^7.2.4",
+    "uuid": "^8.3.2"
+  },
+  "dependencies": {
+    "@qite/tide-client": "^1.1.64",
+    "react-html-comment": "^2.0.16"
+  }
+}

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

@@ -1,41 +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,64 +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,54 +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;