@qite/tide-booking-component 1.4.123 → 1.4.125

package/src/booking-wizard/features/product-options/option-room.tsx

@@ -1,226 +0,0 @@
-import { BookingOptionPax, BookingPackagePax, BookingPackageRoom } from '@qite/tide-client/build/types';
-import { ServiceType } from '@qite/tide-client';
-import { compact, first, sortBy, uniqBy } from 'lodash';
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { buildClassName } from '../../../shared/utils/class-util';
-import { formatPrice } from '../../../shared/utils/localization-util';
-import { selectCurrencyCode, selectProductAttributes, selectTranslations } from '../booking/selectors';
-import { getDatePeriodText, getDateText } from '../sidebar/sidebar-util';
-
-interface OptionRoomProps {
-  packageRoom: BookingPackageRoom;
-  pax: BookingPackagePax[];
-  optionPax?: BookingOptionPax[];
-  onRoomChange: (index: number, accommodationCode: string, regimeCode: string | null) => void;
-  includedServiceTypes?: number[];
-}
-
-const OptionRoom: React.FC<OptionRoomProps> = ({ packageRoom, pax, optionPax, onRoomChange, includedServiceTypes }) => {
-  const selectedOption = packageRoom?.options.find((x) => x.isSelected);
-  const translations = useSelector(selectTranslations);
-  const currencyCode = useSelector(selectCurrencyCode);
-
-  let daysAndNightsText = '';
-  let startDate = '';
-  let endDate = '';
-  let productName = '';
-
-  if (packageRoom.index === 0) {
-    const selectedOption = packageRoom.options.find((x) => x.isSelected);
-
-    if (selectedOption) {
-      startDate = getDateText(selectedOption.from, true) ?? '';
-      endDate = getDateText(selectedOption.to, true) ?? '';
-      daysAndNightsText = getDatePeriodText(translations, selectedOption.from, selectedOption.to) ?? '';
-
-      const productAttributes = useSelector(selectProductAttributes);
-      productName = productAttributes?.productName ?? '';
-    }
-  }
-
-  const isFlightOnly = includedServiceTypes?.length === 1 && includedServiceTypes.includes(ServiceType.flight);
-
-  const accommodations = uniqBy(
-    compact(
-      packageRoom &&
-        packageRoom.options
-          .filter((x) => x.accommodationCode && !x.isLocked)
-          .map((option) => {
-            return {
-              accommodationCode: option.accommodationCode,
-              accommodationName: option.accommodationName
-            };
-          })
-    ),
-    'accommodationCode'
-  );
-
-  const regimes = uniqBy(
-    compact(
-      packageRoom &&
-        packageRoom.options
-          .filter((x) => !selectedOption || x.accommodationCode == selectedOption.accommodationCode)
-          .map((option) => {
-            return {
-              regimeCode: option.regimeCode,
-              regimeName: option.regimeName
-            };
-          })
-    ),
-    'regimeCode'
-  );
-
-  const handleAccommodationChange: React.FormEventHandler<HTMLSelectElement> = (e) => {
-    const accommodationCode = e.currentTarget.value;
-    var accommodationOptions = packageRoom?.options.filter((x) => x.accommodationCode == accommodationCode);
-
-    if (accommodationOptions) {
-      const option = accommodationOptions.find((x) => x.regimeCode == selectedOption?.regimeCode) ?? accommodationOptions[0];
-
-      if (option) {
-        onRoomChange(packageRoom.index, option.accommodationCode, option.regimeCode);
-      }
-    }
-
-    e.preventDefault();
-  };
-
-  const handleRegimeChange: React.FormEventHandler<HTMLSelectElement> = (e) => {
-    const regime = regimes.find((x) => x.regimeCode == e.currentTarget.value);
-
-    if (selectedOption) {
-      onRoomChange(packageRoom.index, selectedOption.accommodationCode, regime ? regime.regimeCode : null);
-    }
-
-    e.preventDefault();
-  };
-
-  const getPriceDifferenceText = (price: number) => {
-    return price > 0 ? `+ ${formatPrice(Math.abs(price), currencyCode)}` : `- ${formatPrice(Math.abs(price), currencyCode)}`;
-  };
-
-  const getAccommodationPriceDifference = (accommodation: { accommodationCode: string; accommodationName: string }) => {
-    const selectedOption = packageRoom.options.find((x) => x.isSelected);
-    if (selectedOption?.accommodationCode === accommodation.accommodationCode) return '';
-
-    var currentPrice = selectedOption?.price;
-    var accommodationPrice = first(
-      sortBy(
-        packageRoom.options.filter((x) => x.regimeCode === selectedOption?.regimeCode && x.accommodationCode === accommodation.accommodationCode),
-        (x) => x.price
-      )
-    )?.price;
-
-    var priceDifference = (accommodationPrice ?? 0) - (currentPrice ?? 0);
-    if (priceDifference !== 0) {
-      return `(${getPriceDifferenceText(priceDifference)})`;
-    } else {
-      return '';
-    }
-  };
-
-  const getRegimePriceDifference = (regime: { regimeCode: string; regimeName: string }) => {
-    const selectedOption = packageRoom.options.find((x) => x.isSelected);
-    if (selectedOption?.regimeCode === regime.regimeCode) return '';
-
-    var currentPrice = selectedOption?.price;
-    var regimePrice = packageRoom.options.find((x) => x.accommodationCode === selectedOption?.accommodationCode && x.regimeCode === regime.regimeCode)?.price;
-
-    var priceDifference = (regimePrice ?? 0) - (currentPrice ?? 0);
-    if (priceDifference !== 0) {
-      return `(${getPriceDifferenceText(priceDifference)})`;
-    } else {
-      return '';
-    }
-  };
-
-  const getPaxName = (id: number) => {
-    const item = pax.find((x) => x.id === id);
-    if (!item?.firstName && !item?.lastName) {
-      const optionPaxItem = optionPax?.find((x) => x.id === id);
-      return optionPaxItem?.paxName;
-    }
-    return `${item?.firstName} ${item?.lastName[0]}`;
-  };
-
-  return (
-    <tr>
-      <td>
-        <div className="tree">
-          <div className="tree__level">
-            <div className="tree__header">
-              <div className="tree__description-collapse">
-                <div className={buildClassName(['radiobutton', 'radiobutton--label', 'radiobutton--package-label'])}>
-                  <div className="radiobutton__label">
-                    <span className={buildClassName(['radiobutton__input', 'radiobutton__input--parent'])}></span>
-                    <span className="radiobutton__label-text">
-                      <div className="date-list">
-                        {startDate && endDate && (
-                          <>
-                            <span className="date-list__item">{startDate}</span>
-                            <span className="date-list__item">{endDate}</span>
-                          </>
-                        )}
-                      </div>
-                      {!isFlightOnly && <p>{daysAndNightsText}</p>}
-                    </span>
-                    <div className="tree__columns-actions">
-                      <div className="tree__columns">
-                        <div className="tree__column">
-                          <span className="tree__product-name">{productName}</span>
-                        </div>
-                        <div className="tree__column">
-                          <span className="tree__package-label">
-                            {translations.OPTIONS_FORM.UNIT_TITLE} {packageRoom.index + 1}:{' '}
-                            <span className="tree__package-label-pax">
-                              {pax.map((p, i) => (
-                                <span key={i} title={`${p.firstName} ${p.lastName}`}>
-                                  {i > 0 && ', '} {getPaxName(p.id)}
-                                </span>
-                              ))}
-                            </span>
-                          </span>
-                          <div className="select-wrapper">
-                            <div className="select-wrapper__select">
-                              <select defaultValue={selectedOption?.accommodationCode} onChange={handleAccommodationChange}>
-                                {accommodations.map((accommodation) => (
-                                  <option key={accommodation.accommodationCode} value={accommodation.accommodationCode}>
-                                    {accommodation.accommodationName} {getAccommodationPriceDifference(accommodation)}
-                                  </option>
-                                ))}
-                              </select>
-                            </div>
-                          </div>
-                        </div>
-                        <div className="tree__column">
-                          <div className="select-wrapper">
-                            {regimes.length > 1 && (
-                              <div className="select-wrapper__select">
-                                <select defaultValue={selectedOption?.regimeCode} onChange={handleRegimeChange}>
-                                  {regimes.map((regime) => (
-                                    <option key={regime.regimeCode} value={regime.regimeCode}>
-                                      {regime.regimeName} {getRegimePriceDifference(regime)}
-                                    </option>
-                                  ))}
-                                </select>
-                              </div>
-                            )}
-                            {regimes.length === 1 && <>{regimes.find((x) => x.regimeCode == selectedOption?.regimeCode)?.regimeName}</>}
-                          </div>
-                        </div>
-                        <div className={buildClassName(['tree__column', 'tree__column--price'])}></div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </td>
-    </tr>
-  );
-};
-
-export default OptionRoom;

package/src/booking-wizard/features/product-options/option-unit-group.tsx

@@ -1,138 +0,0 @@
-import { BookingOptionGroup, BookingOptionPax, PerPackageOption, PerUnitPackageOption } from '@qite/tide-client/build/types';
-import { isEmpty } from 'lodash';
-import React from 'react';
-import { buildClassName } from '../../../shared/utils/class-util';
-import NoneOption from './none-option';
-import OptionItem from './option-item';
-import OptionPaxCard from './option-pax-card';
-
-interface OptionUnitGroupProps {
-  unitIndex: number;
-  optionId?: string;
-  group: BookingOptionGroup<PerUnitPackageOption>;
-  firstClassName: string;
-  secondClassName: string;
-  parentId: string;
-  onGroupChange?: (group: BookingOptionGroup<PerUnitPackageOption>, unitIndex: number, optionId?: string) => void;
-}
-
-const OptionUnitGroup: React.FC<OptionUnitGroupProps> = ({ unitIndex, optionId, group, firstClassName, secondClassName, parentId, onGroupChange }) => {
-  const handleOptionChange = (option: PerPackageOption, index: number) => {
-    const updatedGroup = {
-      ...group,
-      options: group.options.map((o, i) => {
-        return i === index
-          ? option
-          : {
-              ...o,
-              isSelected: option.requirementType === 2 || option.requirementType === 3 ? false : o.isSelected
-            };
-      })
-    } as BookingOptionGroup<PerUnitPackageOption>;
-
-    if (onGroupChange) onGroupChange(updatedGroup, unitIndex, optionId);
-  };
-
-  const handleChildGroupChange = (childGroup: BookingOptionGroup<PerUnitPackageOption>, unitIndex: number, optionId?: string) => {
-    const updatedGroup = {
-      ...group,
-      options: group.options.map((groupOption) => {
-        return groupOption.line.entryLineGuid === optionId
-          ? {
-              ...groupOption,
-              groups: groupOption.groups.map((optionGroup) => {
-                return optionGroup.name === childGroup.name ? childGroup : optionGroup;
-              })
-            }
-          : groupOption;
-      })
-    };
-
-    if (onGroupChange) onGroupChange(updatedGroup, unitIndex, optionId);
-  };
-
-  const handleOnPaxChange = (pax: BookingOptionPax[], index?: number) => {
-    const updatedGroup = {
-      ...group,
-      options: group.options.map((groupOption, i) => {
-        return {
-          ...groupOption,
-          pax: i === index ? pax : groupOption.pax
-        };
-      })
-    };
-
-    if (onGroupChange) onGroupChange(updatedGroup, unitIndex, optionId);
-  };
-
-  const handleNoneSelectionChanged = () => {
-    const updatedGroup = {
-      ...group,
-      options: group.options.map((groupOption) => ({
-        ...groupOption,
-        isSelected: false
-      }))
-    };
-
-    if (onGroupChange) onGroupChange(updatedGroup, unitIndex, optionId);
-  };
-
-  const selectedPrice = group.name === '' ? 0 : group.options.find((x) => x.isSelected)?.line.price ?? 0;
-
-  return (
-    <div className={firstClassName}>
-      {group.title && <h4 className={secondClassName}>{group.title}</h4>}
-      <table className={buildClassName(['table', 'table--striped'])}>
-        <tbody>
-          {group.options.map((option, index) => (
-            <tr key={option.line.entryLineGuid}>
-              <td>
-                <div className={buildClassName(['tree', option.isSelected && 'tree--selected'])}>
-                  <div className="tree__level">
-                    <div className="tree__header">
-                      <div className="tree__description-collapse">
-                        <div
-                          className={buildClassName([
-                            (option.requirementType === 0 || option.requirementType === 1) && 'checkbox',
-                            (option.requirementType === 2 || option.requirementType === 3) && 'radiobutton'
-                          ])}>
-                          <label
-                            htmlFor={`${parentId}_${index}`}
-                            className={buildClassName([
-                              (option.requirementType === 0 || option.requirementType === 1) && 'checkbox__label',
-                              (option.requirementType === 2 || option.requirementType === 3) && 'radiobutton__label'
-                            ])}>
-                            <OptionItem option={option} parentId={parentId} index={index} selectedPrice={selectedPrice} onOptionChange={handleOptionChange} />
-                            {!isEmpty(option.groups) && (
-                              <div className="tree__body">
-                                {option.groups.map((optionGroup) => (
-                                  <OptionUnitGroup
-                                    unitIndex={unitIndex}
-                                    optionId={option.line.entryLineGuid}
-                                    group={optionGroup}
-                                    firstClassName={'tree__level'}
-                                    secondClassName={'tree__level-heading'}
-                                    parentId={`${parentId}_${optionGroup.name}`}
-                                    onGroupChange={handleChildGroupChange}
-                                  />
-                                ))}
-                              </div>
-                            )}
-                            {!isEmpty(option.pax) && <OptionPaxCard pax={option.pax} parentIndex={index} onPaxChange={handleOnPaxChange} />}
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          ))}
-          <NoneOption group={group} parentId={parentId} handleNoneSelectionChanged={handleNoneSelectionChanged} />
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-export default OptionUnitGroup;

package/src/booking-wizard/features/product-options/option-units-card.tsx

@@ -1,148 +0,0 @@
-import {
-  AirlineBookingPackageOption,
-  AirportBookingPackageOption,
-  BookingAirlineGroup,
-  BookingAirportGroup,
-  BookingOptionGroup,
-  BookingOptionUnit,
-  PerUnitPackageOption
-} from '@qite/tide-client/build/types';
-import React, { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { buildClassName } from '../../../shared/utils/class-util';
-import { selectDepartureFlight, selectReturnFlight, selectTranslations } from '../booking/selectors';
-import OptionBookingAirlineGroup from './option-booking-airline-group';
-import OptionUnitGroup from './option-unit-group';
-
-interface OptionUnitsCardProps {
-  units: BookingOptionUnit[];
-  parentIndex?: number;
-  onUnitsChange?: (units: BookingOptionUnit[], index?: number) => void;
-}
-
-const OptionUnitsCard: React.FC<OptionUnitsCardProps> = ({ units, parentIndex, onUnitsChange }) => {
-  const [toggleStates, setToggleStates] = useState<boolean[]>();
-  const translations = useSelector(selectTranslations);
-  const departureFlight = useSelector(selectDepartureFlight);
-  const returnFlight = useSelector(selectReturnFlight);
-
-  useEffect(() => {
-    if (!toggleStates || toggleStates.length !== units.length) {
-      setToggleStates(units.map(() => true));
-    }
-  }, [units, toggleStates, setToggleStates]);
-
-  const getUnitPaxLabel = (unitIndex: number) => {
-    return '';
-  };
-
-  const onGroupChange = (group: BookingOptionGroup<PerUnitPackageOption>, unitIndex: number) => {
-    const updatedUnits = units.map((u) => {
-      return u.index !== unitIndex
-        ? u
-        : {
-            ...u,
-            groups: u.groups.map((ug) => {
-              return ug.name !== group.name ? ug : group;
-            })
-          };
-    });
-
-    if (onUnitsChange) onUnitsChange(updatedUnits, parentIndex);
-  };
-
-  const getAirlineGroups = (p: BookingOptionUnit) => {
-    return p.airlineGroups.filter((x) => x.flightIds.includes(departureFlight?.entryLineGuid ?? '') || x.flightIds.includes(returnFlight?.entryLineGuid ?? ''));
-  };
-
-  const handleOnAirlineGroupChange = (group: BookingAirlineGroup<AirlineBookingPackageOption>, unitIndex: number) => {
-    const updatedPax = units.map((u) => {
-      return u.index !== unitIndex
-        ? u
-        : {
-            ...u,
-            airlineGroups: u.airlineGroups.map((g) => (g.label === group.label ? group : g))
-          };
-    });
-
-    if (onUnitsChange) onUnitsChange(updatedPax, parentIndex);
-  };
-
-  const getAirportGroups = (p: BookingOptionUnit) => {
-    return p.airportGroups.filter((x) => x.flightIds.includes(departureFlight?.entryLineGuid ?? '') || x.flightIds.includes(returnFlight?.entryLineGuid ?? ''));
-  };
-
-  const handleOnAirportGroupChange = (group: BookingAirportGroup<AirportBookingPackageOption>, unitIndex: number) => {
-    const updatedPax = units.map((u) => {
-      return u.index !== unitIndex
-        ? u
-        : {
-            ...u,
-            airportGroups: u.airportGroups.map((g) => (g.label === group.label ? group : g))
-          };
-    });
-
-    if (onUnitsChange) onUnitsChange(updatedPax, parentIndex);
-  };
-
-  return (
-    <>
-      {units.map((u, i) => (
-        <div className={buildClassName(['booking-card__group', toggleStates && toggleStates[i] && 'booking-card__group--active'])}>
-          <div className="booking-card__group-header">
-            <h3 className="booking-card__body-heading">
-              {translations.OPTIONS_FORM.UNIT_TITLE} {u.index}
-            </h3>
-            <p>{getUnitPaxLabel(u.index)}</p>
-            <div className="booking-card__actions">
-              <button
-                type="button"
-                className="booking-card__toggle"
-                onClick={() => {
-                  setToggleStates(toggleStates?.map((s, si) => (si == i ? !s : s)));
-                }}></button>
-            </div>
-          </div>
-          {toggleStates && toggleStates[i] && (
-            <>
-              {u.groups.map(
-                (ug) =>
-                  ug && (
-                    <OptionUnitGroup
-                      key={ug.name}
-                      unitIndex={u.index}
-                      group={ug}
-                      firstClassName={'booking-card__group-body'}
-                      secondClassName={'booking-card__group-heading'}
-                      parentId={`${u.index}_${ug.name}`}
-                      onGroupChange={onGroupChange}
-                    />
-                  )
-              )}
-              {getAirlineGroups(u).map((group, i) => (
-                <OptionBookingAirlineGroup
-                  key={`${group.label}_${i}`}
-                  airGroup={group}
-                  onGroupChange={(updatedGroup) => {
-                    handleOnAirlineGroupChange(updatedGroup, u.index);
-                  }}
-                />
-              ))}
-              {getAirportGroups(u).map((group, i) => (
-                <OptionBookingAirlineGroup
-                  key={`${group.label}_${i}`}
-                  airGroup={group}
-                  onGroupChange={(updatedGroup) => {
-                    handleOnAirportGroupChange(updatedGroup, u.index);
-                  }}
-                />
-              ))}
-            </>
-          )}
-        </div>
-      ))}
-    </>
-  );
-};
-
-export default OptionUnitsCard;