@qite/tide-booking-component 1.4.17 → 1.4.19

package/.husky/pre-commit

@@ -0,0 +1,2 @@
+npx prettier --write .
+git add -A

package/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 160,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "bracketSameLine": true
+}

package/README.md

@@ -1,8 +1,15 @@
 # README
 
-This is the unified Tide Booking Component.
+This is the unified Tide Booking component.
+
+## Setup
+
+- Use Node version 16.20.2
+- Install node modules with "npm i --legacy-peer-deps"
+- Install node modules with "npm i" in the playground directory
+- Start playground with "npm start"
 
 ## Remarks
 
 Do not forget to sync React versions when you're doing local changes and when you try to test them in a local React project (check https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react).
-If using the playground, after installing it's node modules execute the following command in the root folder `npm link ./playground/node_modules/react`
+If using the playground, after installing its node modules, execute the following command in the root folder `npm link ./playground/node_modules/react`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.17",
+  "version": "1.4.19",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "module": "build/build-esm/index.js",
@@ -8,7 +8,8 @@
     "start": "rollup -c -w",
     "build": "rollup -c",
     "tsc": "tsc --noEmit",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "prepare": "husky"
   },
   "repository": {
     "type": "git",
@@ -20,12 +21,13 @@
     "react",
     "component"
   ],
-  "author": "Kristof Colpaert <kristof.colpaert@qite.be>",
+  "author": "Qite",
   "license": "OBSD",
   "homepage": "https://bitbucket.org/qitegeneral/tide-booking-component#readme",
   "devDependencies": {
     "@jsonurl/jsonurl": "^1.1.4",
     "@popperjs/core": "^2.10.2",
+    "@qite/tide-client": "^1.1.75",
     "@reach/router": "^1.3.4",
     "@reduxjs/toolkit": "^1.6.0",
     "@rollup/plugin-commonjs": "^19.0.1",
@@ -40,6 +42,7 @@
     "date-fns": "^2.22.1",
     "flat": "^5.0.2",
     "formik": "^2.2.9",
+    "husky": "^9.1.7",
     "lodash": "^4.17.21",
     "prettier": "^2.3.2",
     "react-popper": "^2.2.5",
@@ -69,7 +72,7 @@
     "uuid": "^8.3.2"
   },
   "dependencies": {
-    "@qite/tide-client": "^1.1.106",
+    "@qite/tide-client": "^1.1.122",
     "react-html-comment": "^2.0.16"
   }
 }

package/rollup.config.js

@@ -1,23 +1,16 @@
-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";
+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",
+  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/*"] }),
+    { 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,7 +1,7 @@
-import { range } from "lodash";
-import React, { useContext } from "react";
-import { getTranslations } from "../../shared/utils/localization-util";
-import SettingsContext from "../settings-context";
+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;

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

@@ -1,8 +1,8 @@
-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";
+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;
@@ -12,61 +12,34 @@ interface AmountInputProps {
   onChange?: (value: number) => void;
 }
 
-const AmountInput: React.FC<AmountInputProps> = ({
-  label,
-  value,
-  disabled,
-  min,
-  onChange,
-}) => {
+const AmountInput: React.FC<AmountInputProps> = ({ label, value, disabled, min, onChange }) => {
   const { language } = useContext(SettingsContext);
   const translations = getTranslations(language);
 
-  const handleIncreaseClick: React.MouseEventHandler<HTMLButtonElement> = (
-    event
-  ) => {
+  const handleIncreaseClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
     if (onChange) {
       onChange(value + 1);
     }
   };
 
-  const handleDecreaseClick: React.MouseEventHandler<HTMLButtonElement> = (
-    event
-  ) => {
+  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",
-      ])}
-    >
+    <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}
-          >
+          <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}
-          >
+          <button type="button" className="button button--increment" title={translations.INPUT.INCREASE} disabled={disabled} onClick={handleIncreaseClick}>
             <Icon name="ui-plus" />
           </button>
         )}

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

@@ -1,6 +1,6 @@
-import React from "react";
-import { getDate, isToday } from "date-fns";
-import { buildClassName } from "../../../shared/utils/class-util";
+import React from 'react';
+import { getDate, isToday } from 'date-fns';
+import { buildClassName } from '../../../shared/utils/class-util';
 
 interface CalendarDayProps {
   day: Date;
@@ -12,16 +12,7 @@ interface CalendarDayProps {
   onMouseOver: (date: Date) => void;
 }
 
-const CalendarDay: React.FC<CalendarDayProps> = ({
-  day,
-  isSelected,
-  isDisabled,
-  isOutsideMonth,
-  extraClassNames = [],
-  children,
-  onClick,
-  onMouseOver,
-}) => {
+const CalendarDay: React.FC<CalendarDayProps> = ({ day, isSelected, isDisabled, isOutsideMonth, extraClassNames = [], children, onClick, onMouseOver }) => {
   const handleClick = () => {
     if (onClick && !isDisabled) {
       onClick(day);
@@ -35,21 +26,17 @@ const CalendarDay: React.FC<CalendarDayProps> = ({
   };
 
   const classNames = buildClassName([
-    "calendar__day",
-    isToday(day) && "calendar__day--today",
-    isDisabled && "calendar__day--disabled",
-    isOutsideMonth && "calendar__day--outside-month",
-    isSelected && "calendar__day--selected",
-    ...extraClassNames,
+    '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")}
+    <div className={classNames} onClick={handleClick} onMouseOver={handleMouseOver}>
+      {getDate(day).toString().padStart(2, '0')}
       {children}
     </div>
   );

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

@@ -10,15 +10,15 @@ import {
   getYear,
   isSameMonth,
   startOfMonth,
-  startOfWeek,
-} from "date-fns";
-import { chunk, isFunction, range } from "lodash";
-import React, { useContext } from "react";
-import { buildClassName } from "../../../shared/utils/class-util";
-import { getLocale } from "../../../shared/utils/localization-util";
-import SettingsContext from "../../settings-context";
-import CalendarDay from "./calendar-day";
-import Icon from "../icon";
+  startOfWeek
+} from 'date-fns';
+import { chunk, isFunction, range } from 'lodash';
+import React, { useContext } from 'react';
+import { buildClassName } from '../../../shared/utils/class-util';
+import { getLocale } from '../../../shared/utils/localization-util';
+import SettingsContext from '../../settings-context';
+import CalendarDay from './calendar-day';
+import Icon from '../icon';
 
 interface CalendarProps {
   year?: number;
@@ -51,7 +51,7 @@ const Calendar: React.FC<CalendarProps> = ({
   onDayClick,
   onDayMouseOver,
   onNextClick,
-  onPreviousClick,
+  onPreviousClick
 }) => {
   const { language } = useContext(SettingsContext);
 
@@ -88,21 +88,15 @@ const Calendar: React.FC<CalendarProps> = ({
 
   const focusDate = new Date(year, month);
   const firstDay = startOfWeek(startOfMonth(focusDate), { weekStartsOn });
-  const lastDay = hasFixedHeight
-    ? endOfWeek(addWeeks(firstDay, 5), { weekStartsOn })
-    : endOfWeek(endOfMonth(focusDate), { weekStartsOn });
+  const lastDay = hasFixedHeight ? endOfWeek(addWeeks(firstDay, 5), { weekStartsOn }) : endOfWeek(endOfMonth(focusDate), { weekStartsOn });
   const calendarDays = eachDayOfInterval({ start: firstDay, end: lastDay });
 
   const mapDay = (day: Date) => {
     const isoDay = getISODay(day);
-    const isDisabled =
-      isFunction(disabledDaysFunction) && disabledDaysFunction(day);
-    const isSelected =
-      isFunction(selectedDaysFunction) && selectedDaysFunction(day);
+    const isDisabled = isFunction(disabledDaysFunction) && disabledDaysFunction(day);
+    const isSelected = isFunction(selectedDaysFunction) && selectedDaysFunction(day);
     const isOutsideMonth = !isSameMonth(day, focusDate);
-    const extraClassNames = isFunction(extraClassNamesFunction)
-      ? extraClassNamesFunction(day)
-      : undefined;
+    const extraClassNames = isFunction(extraClassNamesFunction) ? extraClassNamesFunction(day) : undefined;
 
     return (
       <CalendarDay
@@ -113,8 +107,7 @@ const Calendar: React.FC<CalendarProps> = ({
         isOutsideMonth={isOutsideMonth}
         extraClassNames={extraClassNames}
         onClick={handleDayClick}
-        onMouseOver={handleDayMouseOver}
-      >
+        onMouseOver={handleDayMouseOver}>
         {isFunction(dayContentFunction) ? dayContentFunction(day) : undefined}
       </CalendarDay>
     );
@@ -138,39 +131,23 @@ const Calendar: React.FC<CalendarProps> = ({
     <div className="calendar">
       <div className="calendar__header">
         <div className="calendar__pager">
-          <div
-            className={buildClassName([
-              "calendar__previous",
-              !hasPreviousButton && "calendar__previous--disabled",
-            ])}
-            onClick={handlePreviousClick}
-          >
+          <div className={buildClassName(['calendar__previous', !hasPreviousButton && 'calendar__previous--disabled'])} onClick={handlePreviousClick}>
             <Icon name="ui-chevron" />
           </div>
-          <div className="calendar__current-month">
-            {format(focusDate, "MMMM yyyy", { locale })}
-          </div>
-          <div
-            className={buildClassName([
-              "calendar__next",
-              !hasNextButton && "calendar__next--disabled",
-            ])}
-            onClick={handleNextClick}
-          >
+          <div className="calendar__current-month">{format(focusDate, 'MMMM yyyy', { locale })}</div>
+          <div className={buildClassName(['calendar__next', !hasNextButton && 'calendar__next--disabled'])} onClick={handleNextClick}>
             <Icon name="ui-chevron" />
           </div>
         </div>
         <div className="calendar__day-labels">
           {range(0, 7).map((i) => (
             <div className="calendar__day-label" key={`day_${i}`}>
-              {format(calendarDays[i], "EEEEEE", { locale: locale })}
+              {format(calendarDays[i], 'EEEEEE', { locale: locale })}
             </div>
           ))}
         </div>
       </div>
-      <div className="calendar__body">
-        {chunk(calendarDays, 7).map(mapWeek)}
-      </div>
+      <div className="calendar__body">{chunk(calendarDays, 7).map(mapWeek)}</div>
     </div>
   );
 };

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

@@ -1,17 +1,8 @@
-import {
-  endOfDay,
-  endOfMonth,
-  getMonth,
-  getYear,
-  isAfter,
-  isEqual,
-  isWithinInterval,
-  startOfDay,
-} from "date-fns";
-
-import { isNil } from "lodash";
-import React, { useEffect, useState } from "react";
-import Calendar from "./calendar";
+import { endOfDay, endOfMonth, getMonth, getYear, isAfter, isEqual, isWithinInterval, startOfDay } from 'date-fns';
+
+import { isNil } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import Calendar from './calendar';
 
 interface DateRangePickerProps {
   fromDate?: Date;
@@ -34,7 +25,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
   const [focusMonth, setFocusMonth] = useState<{ month: number; year: number }>(
     props.focusMonth ?? {
       year: getYear(new Date()),
-      month: getMonth(new Date()),
+      month: getMonth(new Date())
     }
   );
   const [isWaitingForToDate, setWaitingForToDate] = useState<boolean>(false);
@@ -57,13 +48,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
       setFromDate(day);
 
       if (props.duration) {
-        const to = new Date(
-          Date.UTC(
-            day.getFullYear(),
-            day.getMonth(),
-            day.getDate() + props.duration
-          )
-        );
+        const to = new Date(Date.UTC(day.getFullYear(), day.getMonth(), day.getDate() + props.duration));
         setToDate(to);
 
         if (onSelectionChange) {
@@ -81,10 +66,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
   };
 
   const handleDayMouseOver = (day: Date) => {
-    if (
-      isWaitingForToDate &&
-      (isNil(fromDate) || isEqual(day, fromDate) || isAfter(day, fromDate))
-    ) {
+    if (isWaitingForToDate && (isNil(fromDate) || isEqual(day, fromDate) || isAfter(day, fromDate))) {
       setToDate(day);
     }
   };
@@ -125,10 +107,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
   const firstCalendarMonth = focusMonth.month;
 
   const secondCalendarMonth = (firstCalendarMonth + 1) % 12;
-  const secondCalendarYear =
-    secondCalendarMonth < firstCalendarMonth
-      ? firstCalendarYear + 1
-      : firstCalendarYear;
+  const secondCalendarYear = secondCalendarMonth < firstCalendarMonth ? firstCalendarYear + 1 : firstCalendarYear;
 
   const checkIfDateIsSelected = (date: Date) =>
     isNil(toDate)
@@ -136,7 +115,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
       : !isNil(fromDate) &&
         isWithinInterval(date, {
           start: startOfDay(fromDate),
-          end: endOfDay(toDate),
+          end: endOfDay(toDate)
         });
 
   useEffect(() => {
@@ -148,7 +127,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
     if (props.fromDate) {
       setFocusMonth({
         month: props.fromDate.getMonth(),
-        year: props.fromDate.getFullYear(),
+        year: props.fromDate.getFullYear()
       });
     }
   }, [props.fromDate?.valueOf()]);
@@ -162,10 +141,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = (props) => {
           onDayClick={handleDayClick}
           onDayMouseOver={handleDayMouseOver}
           onPreviousClick={handlePreviousClick}
-          hasPreviousButton={isAfter(
-            new Date(firstCalendarYear, firstCalendarMonth),
-            endOfMonth(today)
-          )}
+          hasPreviousButton={isAfter(new Date(firstCalendarYear, firstCalendarMonth), endOfMonth(today))}
           hasNextButton={false}
           selectedDaysFunction={checkIfDateIsSelected}
           disabledDaysFunction={props.disabledDaysFunction}

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

@@ -1,12 +1,12 @@
-import { format, isBefore, startOfDay } from "date-fns";
-import React, { useContext, useEffect, useState } from "react";
-import { usePopper } from "react-popper";
-import { buildClassName } from "../../shared/utils/class-util";
-import { getTranslations } from "../../shared/utils/localization-util";
-import SettingsContext from "../settings-context";
-import { DateRange } from "../types";
-import DateRangePicker from "./date-range-picker";
-import Icon from "./icon";
+import { format, isBefore, startOfDay } from 'date-fns';
+import React, { useContext, useEffect, useState } from 'react';
+import { usePopper } from 'react-popper';
+import { buildClassName } from '../../shared/utils/class-util';
+import { getTranslations } from '../../shared/utils/localization-util';
+import SettingsContext from '../settings-context';
+import { DateRange } from '../types';
+import DateRangePicker from './date-range-picker';
+import Icon from './icon';
 
 interface DatesProps {
   value?: DateRange;
@@ -17,34 +17,28 @@ interface DatesProps {
 const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
   const { language } = useContext(SettingsContext);
   const translations = getTranslations(language);
-  const mql =
-    typeof window !== "undefined"
-      ? window.matchMedia("(min-width: 1200px)")
-      : undefined;
+  const mql = typeof window !== 'undefined' ? window.matchMedia('(min-width: 1200px)') : undefined;
 
-  const [referenceElement, setReferenceElement] =
-    useState<HTMLDivElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
-    null
-  );
+  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const [panelActive, setPanelActive] = useState<boolean>(false);
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: "top",
+    placement: 'top',
     modifiers: [
       {
-        name: "offset",
+        name: 'offset',
         options: {
-          offset: [0, -40],
-        },
+          offset: [0, -40]
+        }
       },
       {
-        name: "preventOverflow",
+        name: 'preventOverflow',
         options: {
-          padding: 40,
-        },
-      },
-    ],
+          padding: 40
+        }
+      }
+    ]
   });
 
   const handleInputFocus = () => {
@@ -59,9 +53,9 @@ const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
   };
 
   useEffect(() => {
-    document.addEventListener("mousedown", handleDocumentClick);
+    document.addEventListener('mousedown', handleDocumentClick);
     return () => {
-      document.removeEventListener("mousedown", handleDocumentClick);
+      document.removeEventListener('mousedown', handleDocumentClick);
     };
   });
 
@@ -79,13 +73,11 @@ const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
       </div>
       <div className="form__group form__group--datepicker form__group--icon">
         <div className="form__group-input">
-          <label className="form__label">
-            {translations.PRODUCT.DEPARTURE}
-          </label>
+          <label className="form__label">{translations.PRODUCT.DEPARTURE}</label>
           <input
             type="text"
             readOnly
-            value={value?.fromDate ? format(value.fromDate, "dd/MM/yyyy") : ""}
+            value={value?.fromDate ? format(value.fromDate, 'dd/MM/yyyy') : ''}
             className="form__input"
             placeholder={translations.PRODUCT.DEPARTURE_DATE}
             onClick={handleInputFocus}
@@ -97,7 +89,7 @@ const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
           <input
             type="text"
             readOnly
-            value={value?.toDate ? format(value.toDate, "dd/MM/yyyy") : ""}
+            value={value?.toDate ? format(value.toDate, 'dd/MM/yyyy') : ''}
             className="form__input"
             placeholder={translations.PRODUCT.RETURN_DATE}
             onClick={handleInputFocus}
@@ -106,20 +98,17 @@ const Dates: React.FC<DatesProps> = ({ value, duration, onChange }) => {
         <div
           ref={setPopperElement}
           className={buildClassName([
-            "qsm__panel qsm__panel--bordered qsm__panel--dates-pricing",
-            panelActive && "qsm__panel--active",
-            !mql?.matches && "qsm__panel--mobile",
+            'qsm__panel qsm__panel--bordered qsm__panel--dates-pricing',
+            panelActive && 'qsm__panel--active',
+            !mql?.matches && 'qsm__panel--mobile'
           ])}
           style={mql?.matches ? styles.popper : undefined}
-          {...attributes.popper}
-        >
+          {...attributes.popper}>
           <DateRangePicker
             fromDate={value?.fromDate}
             toDate={value?.toDate}
             duration={duration}
-            disabledDaysFunction={(date) =>
-              isBefore(date, startOfDay(new Date()))
-            }
+            disabledDaysFunction={(date) => isBefore(date, startOfDay(new Date()))}
             onSelectionChange={handleSelectionChange}
           />
           {!mql?.matches && (