@qite/tide-booking-component 1.4.93 → 1.4.95

package/package.json

@@ -1,83 +1,83 @@
-{
-  "name": "@qite/tide-booking-component",
-  "version": "1.4.93",
-  "description": "React Booking wizard & Booking product component for Tide",
-  "main": "build/build-cjs/index.js",
-  "types": "build/build-cjs/src/index.d.ts",
-  "module": "build/build-esm/index.js",
-  "scripts": {
-    "use-node": "powershell -Command \"nvm use (Get-Content .nvmrc)\"",
-    "start": "rollup -c -w",
-    "build": "rollup -c",
-    "tsc": "tsc --noEmit",
-    "format": "prettier --write .",
-    "prepare": "husky"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@bitbucket.org/qitegeneral/tide-booking-component.git"
-  },
-  "keywords": [
-    "tide",
-    "booking",
-    "react",
-    "component"
-  ],
-  "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.152",
-    "@reduxjs/toolkit": "^2.8.2",
-    "@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/he": "^1.2.3",
-    "@types/lodash": "^4.14.171",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@types/uuid": "^8.3.1",
-    "date-fns": "^4.1.0",
-    "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",
-    "react-redux": "^9.2.0",
-    "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": "^5.9.3",
-    "uuid": "^11.1.0"
-  },
-  "peerDependencies": {
-    "@jsonurl/jsonurl": "^1.1.4",
-    "@popperjs/core": "^2.10.2",
-    "@reduxjs/toolkit": "^2.8.2",
-    "date-fns": "^4.1.0",
-    "flat": "^5.0.2",
-    "formik": "^2.2.9",
-    "immer": "^9.0.5",
-    "lodash": "^4.17.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-popper": "^2.2.5",
-    "react-redux": "^9.2.0",
-    "react-router": "^6.30.3",
-    "uuid": "^11.1.0"
-  },
-  "dependencies": {
-    "he": "^1.2.0",
-    "jwt-decode": "^4.0.0",
-    "react-html-comment": "^2.0.16",
-    "react-router-dom": "^6.30.3",
-    "signalr-no-jquery": "^0.2.1",
-    "yup": "^1.6.1"
-  }
-}
+{
+  "name": "@qite/tide-booking-component",
+  "version": "1.4.95",
+  "description": "React Booking wizard & Booking product component for Tide",
+  "main": "build/build-cjs/index.js",
+  "types": "build/build-cjs/src/index.d.ts",
+  "module": "build/build-esm/index.js",
+  "scripts": {
+    "use-node": "powershell -Command \"nvm use (Get-Content .nvmrc)\"",
+    "start": "rollup -c -w",
+    "build": "rollup -c",
+    "tsc": "tsc --noEmit",
+    "format": "prettier --write .",
+    "prepare": "husky"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org/qitegeneral/tide-booking-component.git"
+  },
+  "keywords": [
+    "tide",
+    "booking",
+    "react",
+    "component"
+  ],
+  "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.154",
+    "@reduxjs/toolkit": "^2.8.2",
+    "@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/he": "^1.2.3",
+    "@types/lodash": "^4.14.171",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/uuid": "^8.3.1",
+    "date-fns": "^4.1.0",
+    "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",
+    "react-redux": "^9.2.0",
+    "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": "^5.9.3",
+    "uuid": "^11.1.0"
+  },
+  "peerDependencies": {
+    "@jsonurl/jsonurl": "^1.1.4",
+    "@popperjs/core": "^2.10.2",
+    "@reduxjs/toolkit": "^2.8.2",
+    "date-fns": "^4.1.0",
+    "flat": "^5.0.2",
+    "formik": "^2.2.9",
+    "immer": "^9.0.5",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-popper": "^2.2.5",
+    "react-redux": "^9.2.0",
+    "react-router": "^6.30.3",
+    "uuid": "^11.1.0"
+  },
+  "dependencies": {
+    "he": "^1.2.0",
+    "jwt-decode": "^4.0.0",
+    "react-html-comment": "^2.0.16",
+    "react-router-dom": "^6.30.3",
+    "signalr-no-jquery": "^0.2.1",
+    "yup": "^1.6.1"
+  }
+}

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,51 +1,51 @@
-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.tsx

@@ -1,155 +1,155 @@
-import {
-  addWeeks,
-  eachDayOfInterval,
-  endOfMonth,
-  endOfWeek,
-  format,
-  getISODay,
-  getISOWeek,
-  getMonth,
-  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';
-
-interface CalendarProps {
-  year?: number;
-  month?: number;
-  hasPreviousButton?: boolean;
-  hasNextButton?: boolean;
-  hasFixedHeight?: boolean;
-  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  disabledDaysFunction?: (date: Date) => boolean;
-  selectedDaysFunction?: (date: Date) => boolean;
-  extraClassNamesFunction?: (date: Date) => string[];
-  dayContentFunction?: (date: Date) => JSX.Element | null | undefined;
-  onDayClick?: (date: Date) => void;
-  onDayMouseOver?: (date: Date) => void;
-  onNextClick?: (year: number, month: number) => void;
-  onPreviousClick?: (year: number, month: number) => void;
-}
-
-const Calendar: React.FC<CalendarProps> = ({
-  year = getYear(new Date()),
-  month = getMonth(new Date()),
-  hasPreviousButton = true,
-  hasNextButton = true,
-  hasFixedHeight = true,
-  weekStartsOn = 1,
-  disabledDaysFunction,
-  selectedDaysFunction,
-  extraClassNamesFunction,
-  dayContentFunction,
-  onDayClick,
-  onDayMouseOver,
-  onNextClick,
-  onPreviousClick
-}) => {
-  const { language } = useContext(SettingsContext);
-
-  const locale = getLocale(language);
-  const handleDayClick = (day: Date) => {
-    if (onDayClick) {
-      onDayClick(day);
-    }
-  };
-
-  const handleDayMouseOver = (day: Date) => {
-    if (onDayMouseOver) {
-      onDayMouseOver(day);
-    }
-  };
-
-  const handleNextClick = () => {
-    const nextMonth = (month + 1) % 12;
-    const nextMonthsYear = nextMonth < month ? year + 1 : year;
-
-    if (onNextClick) {
-      onNextClick(nextMonthsYear, nextMonth);
-    }
-  };
-
-  const handlePreviousClick = () => {
-    const previousMonth = (month - 1) % 12;
-    const previousMonthsYear = previousMonth > month ? year - 1 : year;
-
-    if (onPreviousClick) {
-      onPreviousClick(previousMonthsYear, previousMonth);
-    }
-  };
-
-  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 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 isOutsideMonth = !isSameMonth(day, focusDate);
-    const extraClassNames = isFunction(extraClassNamesFunction) ? extraClassNamesFunction(day) : undefined;
-
-    return (
-      <CalendarDay
-        key={`day_${isoDay}`}
-        day={day}
-        isSelected={isSelected}
-        isDisabled={isDisabled}
-        isOutsideMonth={isOutsideMonth}
-        extraClassNames={extraClassNames}
-        onClick={handleDayClick}
-        onMouseOver={handleDayMouseOver}>
-        {isFunction(dayContentFunction) ? dayContentFunction(day) : undefined}
-      </CalendarDay>
-    );
-  };
-
-  const mapWeek = (weekDays: Date[]) => {
-    if (weekDays.length === 0) {
-      return null;
-    }
-
-    const isoWeek = getISOWeek(weekDays[0]);
-
-    return (
-      <div className="calendar__week" key={`week_${isoWeek}`}>
-        {weekDays.map(mapDay)}
-      </div>
-    );
-  };
-
-  return (
-    <div className="calendar">
-      <div className="calendar__header">
-        <div className="calendar__pager">
-          <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}>
-            <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 })}
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="calendar__body">{chunk(calendarDays, 7).map(mapWeek)}</div>
-    </div>
-  );
-};
-
-export default Calendar;
+import {
+  addWeeks,
+  eachDayOfInterval,
+  endOfMonth,
+  endOfWeek,
+  format,
+  getISODay,
+  getISOWeek,
+  getMonth,
+  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';
+
+interface CalendarProps {
+  year?: number;
+  month?: number;
+  hasPreviousButton?: boolean;
+  hasNextButton?: boolean;
+  hasFixedHeight?: boolean;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  disabledDaysFunction?: (date: Date) => boolean;
+  selectedDaysFunction?: (date: Date) => boolean;
+  extraClassNamesFunction?: (date: Date) => string[];
+  dayContentFunction?: (date: Date) => JSX.Element | null | undefined;
+  onDayClick?: (date: Date) => void;
+  onDayMouseOver?: (date: Date) => void;
+  onNextClick?: (year: number, month: number) => void;
+  onPreviousClick?: (year: number, month: number) => void;
+}
+
+const Calendar: React.FC<CalendarProps> = ({
+  year = getYear(new Date()),
+  month = getMonth(new Date()),
+  hasPreviousButton = true,
+  hasNextButton = true,
+  hasFixedHeight = true,
+  weekStartsOn = 1,
+  disabledDaysFunction,
+  selectedDaysFunction,
+  extraClassNamesFunction,
+  dayContentFunction,
+  onDayClick,
+  onDayMouseOver,
+  onNextClick,
+  onPreviousClick
+}) => {
+  const { language } = useContext(SettingsContext);
+
+  const locale = getLocale(language);
+  const handleDayClick = (day: Date) => {
+    if (onDayClick) {
+      onDayClick(day);
+    }
+  };
+
+  const handleDayMouseOver = (day: Date) => {
+    if (onDayMouseOver) {
+      onDayMouseOver(day);
+    }
+  };
+
+  const handleNextClick = () => {
+    const nextMonth = (month + 1) % 12;
+    const nextMonthsYear = nextMonth < month ? year + 1 : year;
+
+    if (onNextClick) {
+      onNextClick(nextMonthsYear, nextMonth);
+    }
+  };
+
+  const handlePreviousClick = () => {
+    const previousMonth = (month - 1) % 12;
+    const previousMonthsYear = previousMonth > month ? year - 1 : year;
+
+    if (onPreviousClick) {
+      onPreviousClick(previousMonthsYear, previousMonth);
+    }
+  };
+
+  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 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 isOutsideMonth = !isSameMonth(day, focusDate);
+    const extraClassNames = isFunction(extraClassNamesFunction) ? extraClassNamesFunction(day) : undefined;
+
+    return (
+      <CalendarDay
+        key={`day_${isoDay}`}
+        day={day}
+        isSelected={isSelected}
+        isDisabled={isDisabled}
+        isOutsideMonth={isOutsideMonth}
+        extraClassNames={extraClassNames}
+        onClick={handleDayClick}
+        onMouseOver={handleDayMouseOver}>
+        {isFunction(dayContentFunction) ? dayContentFunction(day) : undefined}
+      </CalendarDay>
+    );
+  };
+
+  const mapWeek = (weekDays: Date[]) => {
+    if (weekDays.length === 0) {
+      return null;
+    }
+
+    const isoWeek = getISOWeek(weekDays[0]);
+
+    return (
+      <div className="calendar__week" key={`week_${isoWeek}`}>
+        {weekDays.map(mapDay)}
+      </div>
+    );
+  };
+
+  return (
+    <div className="calendar">
+      <div className="calendar__header">
+        <div className="calendar__pager">
+          <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}>
+            <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 })}
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="calendar__body">{chunk(calendarDays, 7).map(mapWeek)}</div>
+    </div>
+  );
+};
+
+export default Calendar;