@qite/tide-booking-component 1.4.123 → 1.4.125

package/src/qsm/components/travel-input/index.tsx

@@ -1,241 +0,0 @@
-import React, { useContext } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { QSMRootState } from '../../store/qsm-store';
-import { setAdults, setKids, setBabies, setRooms, addRoom, removeRoom, updateRoomTraveler } from '../../store/qsm-slice';
-import QSMConfigurationContext from '../../qsm-configuration-context';
-import { getTranslations } from '../../../shared/utils/localization-util';
-import Icon from '../../../shared/components/icon';
-import { PortalQsmType } from '@qite/tide-client';
-
-const TravelInput: React.FC = () => {
-  const dispatch = useDispatch();
-  const { askRooms, maxTravelers, defaultTravelers, maxChildAge, maxInfantAge, askTravelType, askTravelClass, languageCode } =
-    useContext(QSMConfigurationContext);
-  const { adults, kids, babies, rooms, qsmType } = useSelector((state: QSMRootState) => state.qsm);
-  const areTravelersInRooms = qsmType !== PortalQsmType.Flight && askRooms;
-
-  const translations = getTranslations(languageCode ?? 'en-GB');
-
-  const getTravelerButtonClass = (disabled: boolean) => `button button--increment ${disabled ? 'button--disabled' : ''}`;
-
-  const totalTravelers = areTravelersInRooms ? rooms.reduce((sum, room) => sum + room.adults + room.kids + room.babies, 0) : adults + kids + babies;
-
-  const safeMaxTravelers = maxTravelers ?? Infinity;
-  const canAddTraveler = totalTravelers < safeMaxTravelers;
-
-  const syncRoomsToRedux = (updatedRooms: typeof rooms) => {
-    dispatch(setRooms(updatedRooms));
-  };
-
-  const handleTravelerChange = (roomIndex: number, type: 'adults' | 'kids' | 'babies', newValue: number) => {
-    const updatedRooms = rooms.map((room, idx) => (idx === roomIndex ? { ...room, [type]: newValue } : room));
-
-    syncRoomsToRedux(updatedRooms);
-
-    dispatch(
-      updateRoomTraveler({
-        roomIndex,
-        type,
-        value: newValue
-      })
-    );
-  };
-
-  const handleAddRoom = () => {
-    const remaining = (maxTravelers ?? Infinity) - totalTravelers;
-    const adultsForRoom = Math.min(defaultTravelers || 2, remaining);
-
-    if (adultsForRoom <= 0) {
-      return;
-    }
-
-    const newRoom = {
-      adults: adultsForRoom,
-      kids: 0,
-      babies: 0
-    };
-    const updatedRooms = [...rooms.map((r) => ({ ...r })), newRoom];
-
-    dispatch(addRoom());
-    syncRoomsToRedux(updatedRooms);
-  };
-
-  const handleRemoveRoom = (index: number) => {
-    const updatedRooms = rooms.map((r) => ({ ...r })).filter((_, idx) => idx !== index);
-
-    dispatch(removeRoom(index));
-    syncRoomsToRedux(updatedRooms);
-  };
-
-  // Compute age labels dynamically
-  const ageLabels = {
-    adults: maxChildAge ? `${maxChildAge + 1}+ ${translations.PRODUCT.YEAR}` : `12+ ${translations.PRODUCT.YEAR}`,
-    kids: maxChildAge && maxInfantAge ? `${maxInfantAge + 1}-${maxChildAge} ${translations.PRODUCT.YEAR}` : `2-11 ${translations.PRODUCT.YEAR}`,
-    babies: maxInfantAge !== undefined ? `0-${maxInfantAge} ${translations.PRODUCT.YEAR}` : `0-1 ${translations.PRODUCT.YEAR}`
-  };
-
-  return (
-    <div className="passenger-picker">
-      {areTravelersInRooms ? (
-        <div>
-          <div className="passenger-picker__rooms-header">
-            <h4 className="passenger-picker__rooms-header-title">
-              {translations.SHARED.ROOMS}: <span className="passenger-picker__rooms-header-count">{rooms.length}</span>
-            </h4>
-            {rooms.length < 4 && (
-              <div
-                className={`cta--secondary${!canAddTraveler ? ' cta--disabled' : ''}`}
-                onClick={() => {
-                  if (canAddTraveler) {
-                    handleAddRoom();
-                  }
-                }}>
-                {translations.QSM.ADD_ROOM}
-              </div>
-            )}
-          </div>
-
-          <div className="passenger-picker__rooms-wrapper">
-            {rooms.map((room, idx) => (
-              <div key={idx} className="passenger-picker__room">
-                <h6 className="passenger-picker__room-title">
-                  {translations.SHARED.ROOM} {idx + 1}
-                </h6>
-
-                {(['adults', 'kids', 'babies'] as const).map((type) => (
-                  <div key={type} className="passenger-picker__item">
-                    <div className="passenger-picker__item-text">
-                      <span>{type === 'adults' ? 'Volwassenen' : type === 'kids' ? 'Kinderen' : 'Baby’s'}</span>
-                      <span className="passenger-picker__item-text-age">{ageLabels[type]}</span>
-                    </div>
-
-                    <div className="decrement-increment__ui">
-                      {/* - button */}
-                      <button
-                        type="button"
-                        className={`button button--decrement ${room[type] === 0 ? 'button--disabled' : ''}`}
-                        onClick={() => room[type] > 0 && handleTravelerChange(idx, type, room[type] - 1)}>
-                        <Icon name="ui-min" />
-                      </button>
-
-                      <span>{room[type]}</span>
-
-                      {/* + button with max check */}
-                      <button
-                        className={getTravelerButtonClass(!canAddTraveler)}
-                        onClick={() => canAddTraveler && handleTravelerChange(idx, type, room[type] + 1)}>
-                        <Icon name="ui-plus" />
-                      </button>
-                    </div>
-                  </div>
-                ))}
-
-                {rooms.length > 1 && (
-                  <div className="passenger-picker__remove-room">
-                    <button type="button" className="cta--remove" onClick={() => handleRemoveRoom(idx)}>
-                      {translations.QSM.REMOVE_ROOM}
-                    </button>
-                  </div>
-                )}
-                {/* Info Message */}
-                {!canAddTraveler && (
-                  <div className="passenger-picker__info-message">
-                    <svg className="passenger-picker__info-message-icon" width={16} height={16} viewBox="0 0 15.967 15.967">
-                      <path
-                        id="error_16dp_UNDEFINED_FILL0_wght400_GRAD0_opsz20"
-                        d="M103.979-852.024a.735.735,0,0,0,.535-.214.713.713,0,0,0,.218-.53.735.735,0,0,0-.214-.535.712.712,0,0,0-.53-.218.735.735,0,0,0-.535.214.713.713,0,0,0-.218.53.734.734,0,0,0,.214.535A.712.712,0,0,0,103.979-852.024Zm-.744-2.994h1.5v-4.99h-1.5Zm.754,6.986a7.8,7.8,0,0,1-3.1-.624,8.048,8.048,0,0,1-2.547-1.715,8.051,8.051,0,0,1-1.715-2.546A7.8,7.8,0,0,1,96-856.026a7.735,7.735,0,0,1,.624-3.1,8.079,8.079,0,0,1,1.715-2.536,8.051,8.051,0,0,1,2.546-1.715,7.8,7.8,0,0,1,3.108-.624,7.735,7.735,0,0,1,3.1.624,8.081,8.081,0,0,1,2.536,1.715,8.066,8.066,0,0,1,1.715,2.541,7.755,7.755,0,0,1,.624,3.1,7.8,7.8,0,0,1-.624,3.1,8.048,8.048,0,0,1-1.715,2.547,8.066,8.066,0,0,1-2.541,1.715A7.754,7.754,0,0,1,103.99-848.033Zm-.006-1.5a6.255,6.255,0,0,0,4.595-1.892,6.256,6.256,0,0,0,1.892-4.595,6.255,6.255,0,0,0-1.892-4.595,6.255,6.255,0,0,0-4.595-1.892,6.255,6.255,0,0,0-4.595,1.892,6.255,6.255,0,0,0-1.892,4.595,6.256,6.256,0,0,0,1.892,4.595A6.256,6.256,0,0,0,103.984-849.529ZM103.984-856.016Z"
-                        transform="translate(-96 864)"
-                      />
-                    </svg>
-                    <span className="passenger-picker__info-message-explanation">{translations.QSM.MAX_TRAVELERS_REACHED}</span>
-                  </div>
-                )}
-
-                <div className="passenger-picker__line passenger-picker__line--room"></div>
-              </div>
-            ))}
-          </div>
-        </div>
-      ) : (
-        <div>
-          <div className="passenger-picker__items">
-            {/* Adults */}
-            <div className="passenger-picker__item">
-              <div className="passenger-picker__item-text">
-                <span>{translations.QSM.ADULTS}</span>
-                <span className="passenger-picker__item-text-age">{ageLabels.adults}</span>
-              </div>
-              <div className="decrement-increment__ui">
-                <div
-                  className={`button button--decrement ${adults === 0 ? 'button--disabled' : ''}`}
-                  onClick={() => adults > 0 && dispatch(setAdults(adults - 1))}>
-                  <Icon name="ui-min" />
-                </div>
-                <span>{adults}</span>
-                <div className={getTravelerButtonClass(!canAddTraveler)} onClick={() => canAddTraveler && dispatch(setAdults(adults + 1))}>
-                  <Icon name="ui-plus" />
-                </div>
-              </div>
-            </div>
-
-            {/* Children */}
-            <div className="passenger-picker__item">
-              <div className="passenger-picker__item-text">
-                <span>{translations.QSM.CHILDREN}</span>
-                <span className="passenger-picker__item-text-age">{ageLabels.kids}</span>
-              </div>
-              <div className="decrement-increment__ui">
-                <div className={getTravelerButtonClass(!canAddTraveler)} onClick={() => kids > 0 && dispatch(setKids(kids - 1))}>
-                  <Icon name="ui-min" />
-                </div>
-                <span>{kids}</span>
-                <div className={getTravelerButtonClass(!canAddTraveler)} onClick={() => canAddTraveler && dispatch(setKids(kids + 1))}>
-                  <Icon name="ui-plus" />
-                </div>
-              </div>
-            </div>
-
-            {/* Babies */}
-            <div className="passenger-picker__item">
-              <div className="passenger-picker__item-text">
-                <span>{translations.QSM.BABIES}</span>
-                <span className="passenger-picker__item-text-age">{ageLabels.babies}</span>
-              </div>
-              <div className="decrement-increment__ui">
-                <div
-                  className={`button button--decrement ${babies === 0 ? 'button--disabled' : ''}`}
-                  onClick={() => babies > 0 && dispatch(setBabies(babies - 1))}>
-                  <Icon name="ui-min" />
-                </div>
-                <span>{babies}</span>
-                <div className={getTravelerButtonClass(!canAddTraveler)} onClick={() => canAddTraveler && dispatch(setBabies(babies + 1))}>
-                  <Icon name="ui-plus" />
-                </div>
-              </div>
-            </div>
-          </div>
-          {/* Info Message */}
-          {!canAddTraveler && (
-            <div className="passenger-picker__info-message">
-              <svg className="passenger-picker__info-message-icon" width={16} height={16} viewBox="0 0 15.967 15.967">
-                <path
-                  id="error_16dp_UNDEFINED_FILL0_wght400_GRAD0_opsz20"
-                  d="M103.979-852.024a.735.735,0,0,0,.535-.214.713.713,0,0,0,.218-.53.735.735,0,0,0-.214-.535.712.712,0,0,0-.53-.218.735.735,0,0,0-.535.214.713.713,0,0,0-.218.53.734.734,0,0,0,.214.535A.712.712,0,0,0,103.979-852.024Zm-.744-2.994h1.5v-4.99h-1.5Zm.754,6.986a7.8,7.8,0,0,1-3.1-.624,8.048,8.048,0,0,1-2.547-1.715,8.051,8.051,0,0,1-1.715-2.546A7.8,7.8,0,0,1,96-856.026a7.735,7.735,0,0,1,.624-3.1,8.079,8.079,0,0,1,1.715-2.536,8.051,8.051,0,0,1,2.546-1.715,7.8,7.8,0,0,1,3.108-.624,7.735,7.735,0,0,1,3.1.624,8.081,8.081,0,0,1,2.536,1.715,8.066,8.066,0,0,1,1.715,2.541,7.755,7.755,0,0,1,.624,3.1,7.8,7.8,0,0,1-.624,3.1,8.048,8.048,0,0,1-1.715,2.547,8.066,8.066,0,0,1-2.541,1.715A7.754,7.754,0,0,1,103.99-848.033Zm-.006-1.5a6.255,6.255,0,0,0,4.595-1.892,6.256,6.256,0,0,0,1.892-4.595,6.255,6.255,0,0,0-1.892-4.595,6.255,6.255,0,0,0-4.595-1.892,6.255,6.255,0,0,0-4.595,1.892,6.255,6.255,0,0,0-1.892,4.595,6.256,6.256,0,0,0,1.892,4.595A6.256,6.256,0,0,0,103.984-849.529ZM103.984-856.016Z"
-                  transform="translate(-96 864)"
-                />
-              </svg>
-              <span className="passenger-picker__info-message-explanation">{translations.QSM.MAX_TRAVELERS_REACHED}</span>
-            </div>
-          )}
-
-          <div className="passenger-picker__line"></div>
-        </div>
-      )}
-
-      {/* {type === 'flight' && askTravelClass && <TravelClassPicker />}
-      {type !== 'flight' && askTravelType && <TravelTypePicker />} */}
-    </div>
-  );
-};
-
-export default TravelInput;

package/src/qsm/components/travel-input-group/index.tsx

@@ -1,114 +0,0 @@
-import React, { useState, useRef, useEffect, useContext } from 'react';
-import TravelInput from '../travel-input';
-import { useDispatch, useSelector } from 'react-redux';
-import { setAdults, setMobileFilterType, setRooms } from '../../store/qsm-slice';
-import useMediaQuery from '../../../shared/utils/use-media-query-util';
-import { QSMRootState } from '../../store/qsm-store';
-import QSMConfigurationContext from '../../qsm-configuration-context';
-import Icon from '../../../shared/components/icon';
-import { getTranslations } from '../../../shared/utils/localization-util';
-import { PortalQsmType } from '@qite/tide-client';
-
-const selectTravelerSummary = (state: QSMRootState, areTravelersInRooms: boolean | undefined) => {
-  const { adults, kids, babies, rooms, selectedTravelType } = state.qsm;
-
-  const total = areTravelersInRooms ? rooms.reduce((sum, r) => sum + r.adults + r.kids + r.babies, 0) : adults + kids + babies;
-
-  let summary = `${total} reiziger${total === 1 ? '' : 's'}`;
-  if (areTravelersInRooms) {
-    summary += `, ${rooms.length} kamer${rooms.length === 1 ? '' : 's'}`;
-  }
-
-  if (selectedTravelType) {
-    summary = `${selectedTravelType} • ${summary}`;
-  }
-
-  return summary;
-};
-
-const TravelInputGroup: React.FC = () => {
-  const dispatch = useDispatch();
-  const isSmallScreen = useMediaQuery('(max-width: 768px)');
-  const [isOpen, setIsOpen] = useState(false);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const { askRooms, defaultTravelers, maxTravelers, languageCode } = useContext(QSMConfigurationContext);
-  const { adults, rooms, qsmType } = useSelector((s: QSMRootState) => s.qsm);
-
-  const translations = getTranslations(languageCode ?? 'en-GB');
-
-  const areTravelersInRooms = qsmType !== PortalQsmType.Flight && askRooms;
-
-  const initDone = useRef(false);
-
-  const travelerSummary = useSelector((state: QSMRootState) => selectTravelerSummary(state, areTravelersInRooms));
-
-  const handleClick = () => {
-    if (isSmallScreen) {
-      dispatch(setMobileFilterType('traveler'));
-    } else {
-      setIsOpen((prev) => !prev);
-    }
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (initDone.current) {
-      return;
-    }
-
-    const cap = Math.min(defaultTravelers || 2, maxTravelers ?? Infinity);
-
-    if (areTravelersInRooms) {
-      const updated = rooms.map((r) => (r.adults !== cap ? { ...r, adults: cap } : r));
-      if (updated.some((r, i) => r.adults !== rooms[i].adults)) {
-        dispatch(setRooms(updated));
-      }
-    } else {
-      if (adults !== cap) {
-        dispatch(setAdults(cap));
-      }
-    }
-
-    initDone.current = true;
-  }, [defaultTravelers, maxTravelers]);
-
-  return (
-    <div ref={wrapperRef} className="qsm__single-input-wrapper qsm__single-input-wrapper--travel">
-      <Icon name="ui-user" height={16} />
-
-      <span className="qsm__label">{translations.QSM.TRAVELERS_LABEL}</span>
-      <input
-        type="text"
-        id="traveler"
-        className="qsm__input u-ps-2"
-        placeholder={translations.QSM.TRAVELERS_LABEL}
-        readOnly
-        onClick={handleClick}
-        value={travelerSummary}
-      />
-
-      {!isSmallScreen && isOpen && (
-        <div>
-          <TravelInput />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default TravelInputGroup;

package/src/qsm/components/travel-nationality-picker/index.tsx

@@ -1,28 +0,0 @@
-import React, { useContext } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { QSMRootState } from '../../store/qsm-store';
-import { setSelectedNationality } from '../../store/qsm-slice';
-import QSMConfigurationContext from '../../qsm-configuration-context';
-import ItemPicker from '../item-picker';
-import { getTranslations } from '../../../shared/utils/localization-util';
-
-const TravelNationalityPicker: React.FC = () => {
-  const { nationalities, languageCode } = useContext(QSMConfigurationContext);
-  if (!nationalities || nationalities.length === 0) return null;
-  const translations = getTranslations(languageCode ?? 'en-GB');
-  const { selectedNationality } = useSelector((state: QSMRootState) => state.qsm);
-  const dispatch = useDispatch();
-
-  return (
-    <ItemPicker
-      items={nationalities}
-      selection={selectedNationality}
-      label={translations.QSM.NATIONALITY_LABEL}
-      placeholder={translations.QSM.NATIONALITY_PLACEHOLDER}
-      classModifier="travel-class-picker__items"
-      onPick={(picked) => dispatch(setSelectedNationality(picked))}
-    />
-  );
-};
-
-export default TravelNationalityPicker;

package/src/qsm/components/travel-type-picker/index.tsx

@@ -1,28 +0,0 @@
-import React, { useContext } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { QSMRootState } from '../../store/qsm-store';
-import { setSelectedTravelType } from '../../store/qsm-slice';
-import QSMConfigurationContext from '../../qsm-configuration-context';
-import ItemPicker from '../item-picker';
-import { getTranslations } from '../../../shared/utils/localization-util';
-
-const TravelTypePicker: React.FC = () => {
-  const { travelTypes, languageCode } = useContext(QSMConfigurationContext);
-  if (!travelTypes || travelTypes.length === 0) return null;
-  const translations = getTranslations(languageCode ?? 'en-GB');
-  const { selectedTravelType } = useSelector((state: QSMRootState) => state.qsm);
-  const dispatch = useDispatch();
-
-  return (
-    <ItemPicker
-      items={travelTypes}
-      selection={selectedTravelType}
-      label={translations.QSM.TRAVEL_TYPE_LABEL}
-      placeholder={translations.QSM.TRAVEL_TYPE_PLACEHOLDER}
-      classModifier="travel-type-picker__items"
-      onPick={(picked) => dispatch(setSelectedTravelType(picked))}
-    />
-  );
-};
-
-export default TravelTypePicker;

package/src/qsm/index.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-import QSMConfigurationContext from './qsm-configuration-context';
-import { QSMConfiguration } from './types';
-import QSMContainer from './components/QSMContainer/qsm-container';
-import { createQSMStore } from './store/qsm-store';
-
-interface QSMProps {
-  configuration: QSMConfiguration;
-}
-
-const QSM: React.FC<QSMProps> = ({ configuration }) => {
-  const store = React.useMemo(() => createQSMStore(), []);
-
-  return (
-    <div id="booking-qsm">
-      <Provider store={store}>
-        <QSMConfigurationContext.Provider value={configuration}>
-          <QSMContainer />
-        </QSMConfigurationContext.Provider>
-      </Provider>
-    </div>
-  );
-};
-
-export default QSM;

package/src/qsm/qsm-configuration-context.ts

@@ -1,31 +0,0 @@
-import React from 'react';
-import { QSMConfiguration } from './types';
-import { PortalQsmType } from '@qite/tide-client';
-
-const QSMConfigurationContext = React.createContext<QSMConfiguration>({
-  type: PortalQsmType.Accommodation,
-  searchConfigurations: [],
-  askTravelers: false,
-  askNationality: false,
-  askTravelClass: false,
-  askTravelType: false,
-  askRooms: false,
-
-  travelTypes: [],
-  travelTypeIcon: '',
-
-  travelClasses: [],
-  travelClassIcon: '',
-
-  nationalities: [],
-  dateFlexibility: [],
-
-  showReturnDate: false,
-  datesIcon: '',
-
-  onSubmit: () => {},
-  submitIcon: '',
-  languageCode: ''
-});
-
-export default QSMConfigurationContext;