@qite/tide-booking-component 1.4.123 → 1.4.125

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

@@ -1,171 +0,0 @@
-import { range } from 'lodash';
-import React, { useContext, useEffect, useState } from 'react';
-import { buildClassName } from '../../shared/utils/class-util';
-import { getTranslations } from '../../shared/utils/localization-util';
-import SettingsContext from '../settings-context';
-import { ProductRoom } from '../types';
-import AgeSelect from './age-select';
-import AmountInput from './amount-input';
-import Icon from '../../shared/components/icon';
-
-interface RoomsProps {
-  rooms: ProductRoom[];
-  isDisabled: boolean;
-  setIsDisabled: (isOpen: boolean) => void;
-  onChange: (rooms: ProductRoom[]) => void;
-}
-
-const Rooms: React.FC<RoomsProps> = ({ rooms, isDisabled, setIsDisabled, onChange }) => {
-  const [isTouched, setIsTouched] = useState<boolean>(false);
-  const [currentRooms, setRoomState] = useState<ProductRoom[]>(rooms);
-
-  useEffect(() => {
-    setRoomState(rooms);
-  }, [rooms]);
-
-  const { language } = useContext(SettingsContext);
-  const translations = getTranslations(language);
-
-  const handleCloseClick = () => {
-    setIsDisabled(true);
-    if (isTouched) onChange(currentRooms);
-  };
-
-  return (
-    <div className="booking-product__rooms">
-      <div className="booking-product__rooms-title">
-        <Icon name="ui-user" width={25} height={25} />
-        {translations.PRODUCT.WHO_YOU_TRAVELING_WITH}
-      </div>
-      <div className="booking-product__rooms__container">
-        <div className="booking-product__rooms__wrapper">
-          <div className="booking-product__rooms__header">
-            <div className="booking-product__rooms__heading">{translations.SHARED.ROOMS}</div>
-            <div className="booking-product__rooms__actions">
-              <AmountInput
-                label={translations.PRODUCT.NUMBER_OF_ROOMS}
-                value={currentRooms.length}
-                disabled={isDisabled}
-                min={1}
-                onChange={(value) => {
-                  setRoomState(
-                    range(0, value).map(
-                      (roomIndex) =>
-                        currentRooms[roomIndex] ?? {
-                          adults: 2,
-                          children: 0,
-                          childAges: []
-                        }
-                    )
-                  );
-
-                  setIsTouched(true);
-                }}
-              />
-            </div>
-          </div>
-          <div className="booking-product__rooms-body">
-            {currentRooms.map((room, roomIndex) => (
-              <div className="booking-product__room" key={roomIndex}>
-                <div className="booking-product__room__header">
-                  <h3 className="booking-product__room__heading">{translations.SHARED.ROOM + ' ' + (roomIndex + 1)}</h3>
-                  <div className="booking-product__room__actions">
-                    <AmountInput
-                      label={translations.SHARED.ADULTS}
-                      value={room.adults}
-                      disabled={isDisabled}
-                      min={1}
-                      onChange={(value) => {
-                        setRoomState(currentRooms.map((room, i) => (i === roomIndex ? { ...room, adults: value } : room)));
-
-                        setIsTouched(true);
-                      }}
-                    />
-                    <AmountInput
-                      label={translations.SHARED.CHILDREN}
-                      value={room.children}
-                      disabled={isDisabled}
-                      onChange={(value) => {
-                        setRoomState(
-                          currentRooms.map((room, i) =>
-                            i === roomIndex
-                              ? {
-                                  ...room,
-                                  children: value,
-                                  childAges: range(0, value).map((childIndex) => room.childAges[childIndex] ?? 0)
-                                }
-                              : room
-                          )
-                        );
-
-                        setIsTouched(true);
-                      }}
-                    />
-                  </div>
-                </div>
-                {room.children > 0 && (
-                  <div className="booking-product__room-children">
-                    <label className="booking-product__room-children-label">{translations.PRODUCT.AGE_BY_DEPARTURE_DATE}</label>
-                    <div className="booking-product__room-children-ages">
-                      {range(0, room.children).map((childIndex) => (
-                        <AgeSelect
-                          key={childIndex}
-                          value={room.childAges[childIndex]}
-                          disabled={isDisabled}
-                          onChange={(value) => {
-                            setRoomState(
-                              currentRooms.map((room, selectorRoomIndex) =>
-                                roomIndex === selectorRoomIndex
-                                  ? {
-                                      ...room,
-                                      childAges: room.childAges.map((age, i) => (childIndex === i ? value : age)).sort((a, b) => b - a)
-                                    }
-                                  : room
-                              )
-                            );
-
-                            setIsTouched(true);
-                          }}
-                        />
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-        <div className="booking-product__rooms-footer">
-          {isDisabled ? (
-            <button
-              type="button"
-              className={buildClassName(['cta--secondary', 'cta--add'])}
-              title={translations.PRODUCT.EDIT}
-              onClick={() => {
-                setIsDisabled(false);
-                setIsTouched(false);
-              }}>
-              <span>
-                <Icon name="ui-pencil" width={25} height={25} />
-                {translations.PRODUCT.EDIT}
-              </span>
-            </button>
-          ) : (
-            <button
-              type="button"
-              className={buildClassName(['cta', isTouched ? 'cta--secondary' : 'cta--secondary', 'cta--add'])}
-              title={translations.PRODUCT.APPLY}
-              onClick={handleCloseClick}>
-              <span>
-                <Icon name="ui-check" />
-                {translations.PRODUCT.APPLY}
-              </span>
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Rooms;

package/src/booking-product/constants.ts

@@ -1 +0,0 @@
-export const DATE_FORMAT = 'yyyy-MM-dd';

package/src/booking-product/index.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import Product from './components/product';
-import SettingsContext from './settings-context';
-import { Settings } from './types';
-
-interface BookingProductProps {
-  productCode: string;
-  productName: string;
-  rating?: number;
-  settings: Settings;
-}
-
-const BookingProduct: React.FC<BookingProductProps> = ({ productCode, productName, rating, settings }) => {
-  return (
-    <SettingsContext.Provider value={settings}>
-      <Product productCode={productCode} productName={productName} rating={rating}></Product>
-    </SettingsContext.Provider>
-  );
-};
-
-export default BookingProduct;

package/src/booking-product/settings-context.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Settings } from './types';
-
-interface ProductSettingsContextProps extends Settings {}
-
-const SettingsContext = React.createContext<ProductSettingsContextProps>({
-  officeId: 1,
-  catalogueId: 1,
-  language: 'nl-BE',
-  basePath: 'boeken',
-  priceMode: 0,
-  displayMode: 'calendar',
-  searchType: 0
-});
-
-export default SettingsContext;

package/src/booking-product/types.ts

@@ -1,30 +0,0 @@
-export interface Settings {
-  officeId: number;
-  catalogueId: number;
-  agentId?: number;
-  basePath: string;
-  language: string;
-  includeFlights?: boolean;
-  priceMode: number;
-  icons?: string;
-  apiUrl?: string;
-  apiKey?: string;
-  addProductToQuery?: boolean;
-  isOffer?: boolean;
-  displayMode?: 'list' | 'calendar';
-  searchType?: number;
-
-  alternativeActionText?: string;
-  alternativeAction?: () => void;
-}
-
-export interface ProductRoom {
-  adults: number;
-  children: number;
-  childAges: number[];
-}
-
-export interface DateRange {
-  fromDate?: Date;
-  toDate?: Date;
-}

package/src/booking-product/utils/api.ts

@@ -1,26 +0,0 @@
-import { details, search } from '@qite/tide-client';
-import { BookingPackage, BookingPackageDetailsRequest, BookingPackageRequest, BookingPackageSearchRequest, TideResponse } from '@qite/tide-client/build/types';
-import { ApiSettingsState } from '../../shared/types';
-import { buildTideClientConfig } from '../../shared/utils/tide-api-utils';
-
-const fetchDetails = async (
-  request: BookingPackageRequest<BookingPackageDetailsRequest>,
-  signal: AbortSignal,
-  languageCode?: string,
-  apiSettings?: ApiSettingsState
-): Promise<TideResponse<BookingPackage>> => {
-  const tideClientConfig = buildTideClientConfig(apiSettings);
-  return await details(tideClientConfig, request, signal, languageCode);
-};
-
-const fetchSearch = async (request: BookingPackageRequest<BookingPackageSearchRequest>, signal: AbortSignal, apiSettings?: ApiSettingsState) => {
-  const tideClientConfig = buildTideClientConfig(apiSettings);
-  return await search(tideClientConfig, request, signal);
-};
-
-const packageApi = {
-  fetchDetails,
-  fetchSearch
-};
-
-export default packageApi;

package/src/booking-product/utils/price.ts

@@ -1,28 +0,0 @@
-import { formatPrice } from '../../shared/utils/localization-util';
-
-export const formatPriceByMode = (
-  price: number | undefined,
-  priceMode: number,
-  personCount: number,
-  duration: number,
-  perPersonLabel: string,
-  perNightLabel: string,
-  perPersonPerNightLabel: string,
-  currencyCode: string
-) => {
-  if (!price) return '';
-
-  switch (priceMode) {
-    case 0:
-      return `${formatPrice(price, currencyCode)}`;
-    case 1:
-      const perPersonPrice = price / personCount;
-      return `${formatPrice(perPersonPrice, currencyCode)} / ${perPersonLabel}`;
-    case 2:
-      const perNightPrice = price / duration;
-      return `${formatPrice(perNightPrice, currencyCode)} / ${perNightLabel}`;
-    case 3:
-      const perPersonPerNightPrice = price / duration;
-      return `${formatPrice(perPersonPerNightPrice, currencyCode)} / ${perPersonPerNightLabel}`;
-  }
-};

package/src/booking-wizard/api-settings-slice.ts

@@ -1,24 +0,0 @@
-import { PayloadAction, createSlice } from '@reduxjs/toolkit';
-import { ApiSettingsState } from '../shared/types';
-
-const initialState: ApiSettingsState = {
-  apiUrl: '',
-  apiKey: ''
-};
-
-const apiSettingsSlice = createSlice({
-  name: 'settings',
-  initialState,
-  reducers: {
-    setApiUrl(state, action: PayloadAction<string>) {
-      state.apiUrl = action.payload;
-    },
-    setApiKey(state, action: PayloadAction<string>) {
-      state.apiKey = action.payload;
-    }
-  }
-});
-
-export const { setApiUrl, setApiKey } = apiSettingsSlice.actions;
-
-export default apiSettingsSlice.reducer;

package/src/booking-wizard/components/labeled-input.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { buildClassName } from '../../shared/utils/class-util';
-import { compact } from 'lodash';
-
-interface LabeledInputProps {
-  name: string;
-  type?: string;
-  required?: boolean;
-  value?: string | number;
-  defaultValue?: string | number;
-  min?: string | number;
-  max?: string | number;
-  label?: string;
-  placeholder?: string;
-  hasError?: boolean;
-  extraClassName?: string;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
-}
-
-const LabeledInput: React.FC<LabeledInputProps> = ({
-  name,
-  type,
-  required,
-  value,
-  defaultValue,
-  min,
-  max,
-  label,
-  placeholder,
-  extraClassName,
-  hasError,
-  onChange,
-  onBlur
-}) => {
-  return (
-    <label className={buildClassName(['form__group', extraClassName, hasError && 'form__group--error'])}>
-      <span className="form__label">{compact([label, required && '*']).join(' ')}</span>
-      <input
-        name={name}
-        type={type ?? 'text'}
-        required={required}
-        className="form__input"
-        min={min}
-        max={max}
-        placeholder={placeholder}
-        onChange={onChange}
-        onBlur={onBlur}
-        value={value}
-        defaultValue={defaultValue}
-      />
-    </label>
-  );
-};
-
-export default LabeledInput;

package/src/booking-wizard/components/labeled-select.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { buildClassName } from '../../shared/utils/class-util';
-import { compact } from 'lodash';
-
-interface LabeledSelectProps {
-  name: string;
-  id?: string;
-  required?: boolean;
-  value?: string | number;
-  defaultValue?: string | number;
-  label?: string;
-  hasError?: boolean;
-  extraClassName?: string;
-  extraDropdownClassName?: string;
-  options?: {
-    key: string;
-    value: string | number | undefined;
-    label: string;
-  }[];
-  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
-  onBlur?: React.FocusEventHandler<HTMLSelectElement>;
-}
-
-const LabeledSelect: React.FC<LabeledSelectProps> = ({
-  name,
-  id,
-  required,
-  value,
-  defaultValue,
-  label,
-  extraClassName,
-  extraDropdownClassName,
-  hasError,
-  options,
-  onChange,
-  onBlur
-}) => {
-  return (
-    <label className={buildClassName(['form__group', extraClassName, hasError && 'form__group--error'])}>
-      <span className="form__label">{compact([label, required && '*']).join(' ')}</span>
-      <div className={buildClassName(['dropdown', extraDropdownClassName])}>
-        <select name={name} id={id} defaultValue={defaultValue} value={value} onBlur={onBlur} onChange={onChange}>
-          {options?.map((option) => (
-            <option key={option.key} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
-      </div>
-    </label>
-  );
-};
-
-export default LabeledSelect;

package/src/booking-wizard/components/message.tsx

@@ -1,21 +0,0 @@
-import Icon from '../../shared/components/icon';
-import React from 'react';
-import { buildClassName } from '../../shared/utils/class-util';
-
-interface MessageProps {
-  type: 'error' | 'success';
-  title: string;
-  actionComponent?: JSX.Element;
-  children?: JSX.Element | JSX.Element[];
-}
-
-const Message: React.FC<MessageProps> = ({ type, title, actionComponent, children }) => (
-  <div className={buildClassName(['booking-message', type === 'error' && 'booking-message--error', type === 'success' && 'booking-message--success'])}>
-    {type === 'error' && <Icon name="ui-error" />}
-    <h4 className="booking-message__heading">{title}</h4>
-    <div className="booking-message__text">{children}</div>
-    {actionComponent && <div className="booking-message__actions">{actionComponent}</div>}
-  </div>
-);
-
-export default Message;

package/src/booking-wizard/components/multi-range-filter.tsx

@@ -1,99 +0,0 @@
-import React, { ChangeEvent, useEffect, useState } from 'react';
-
-interface MultiRangeFilterProps {
-  min: number;
-  max: number;
-  selectedMin: number;
-  selectedMax: number;
-
-  valueFormatter: (value: number) => string;
-  onChange: (min: number, max: number) => void;
-}
-
-const MultiRangeFilter: React.FC<MultiRangeFilterProps> = ({ min, max, selectedMin, selectedMax, valueFormatter, onChange }) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const [leftPercentage, setLeftPercentage] = useState<number>(0);
-  const [rightPercentage, setRightPercentage] = useState<number>(0);
-  const [minVal, setMinVal] = useState(min);
-  const [maxVal, setMaxVal] = useState(max);
-  const minGap = 5;
-
-  useEffect(() => {
-    setSliderTrack();
-  }, [minVal, maxVal]);
-
-  const slideMin = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value, 10);
-    if (value >= min && selectedMax - value >= minGap) {
-      setMinVal(value);
-    }
-  };
-
-  const slideMax = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value, 10);
-    if (value <= max && value - selectedMin >= minGap) {
-      setMaxVal(value);
-    }
-  };
-
-  const setSliderTrack = () => {
-    const range = document.querySelector('.slider-track');
-
-    if (range) {
-      const minPercent = ((minVal - min) / (max - min)) * 100;
-      const maxPercent = ((maxVal - min) / (max - min)) * 100;
-
-      setLeftPercentage(minPercent);
-      setRightPercentage(100 - maxPercent);
-    }
-  };
-
-  const startDrag = () => {
-    setIsDragging(true);
-  };
-
-  const stopDrag = () => {
-    setIsDragging(false);
-    onChange(minVal, maxVal);
-  };
-
-  return (
-    <div className="double-slider-box">
-      <div className="input-box">
-        <div className="min-box">{valueFormatter(min)}</div>
-        <div className="max-box">{valueFormatter(max)}</div>
-      </div>
-      <div className="range-slider">
-        <div className="slider-track" style={{ left: leftPercentage + '%', right: rightPercentage + '%' }}></div>
-        <input
-          type="range"
-          min={min}
-          max={max}
-          value={minVal}
-          onChange={slideMin}
-          onMouseDown={startDrag}
-          onMouseUp={stopDrag}
-          onTouchStart={startDrag}
-          onTouchEnd={stopDrag}
-          className="min-val"
-        />
-        <input
-          type="range"
-          min={min}
-          max={max}
-          value={maxVal}
-          onChange={slideMax}
-          onMouseDown={startDrag}
-          onMouseUp={stopDrag}
-          onTouchStart={startDrag}
-          onTouchEnd={stopDrag}
-          className="max-val"
-        />
-        {isDragging && <div className="min-tooltip">{valueFormatter(minVal)}</div>}
-        {isDragging && <div className="max-tooltip">{valueFormatter(maxVal)}</div>}
-      </div>
-    </div>
-  );
-};
-
-export default MultiRangeFilter;