@qite/tide-booking-component 1.4.91 → 1.4.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.91",
+  "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",

package/rollup.config.js

@@ -1,16 +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';
-
-export default {
-  input: 'src/index.ts',
-  output: [
-    { file: packageJson.main, format: 'cjs', banner: '/* eslint-disable */', inlineDynamicImports: true },
-    { file: packageJson.module, format: 'esm', banner: '/* eslint-disable */', inlineDynamicImports: true }
-  ],
-  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 */', inlineDynamicImports: true },
+    { file: packageJson.module, format: 'esm', banner: '/* eslint-disable */', inlineDynamicImports: true }
+  ],
+  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,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-day.tsx

@@ -1,46 +1,46 @@
-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;
-  children?: any;
-}
-
-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;
+  children?: any;
+}
+
+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;

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;