@qite/tide-booking-component 1.4.124 → 1.4.125

package/src/booking-wizard/features/price-details/selectors.ts

@@ -1,118 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from '../../store';
-import { selectRequestRooms } from '../booking/selectors';
-import { isEmpty, sum } from 'lodash';
-import { PriceDetailsPerPaxType, PricePerPaxType } from '../../types';
-import { BookingPackageRequestRoom, BookingPriceDetail } from '@qite/tide-client';
-
-export const selectPriceDetails = (state: RootState) => state.priceDetails.priceDetails;
-
-export const selectPackagePriceDetails = createSelector(selectPriceDetails, (priceDetails) => priceDetails.filter((priceDetail) => priceDetail.isInPackage));
-
-export const selectSeparatePackagePriceDetails = createSelector(selectPackagePriceDetails, (pricedetails) => {
-  const result: BookingPriceDetail[] = [];
-  const filteredPriceDetails = pricedetails.filter((priceDetail) => priceDetail.isSeparate);
-
-  filteredPriceDetails.forEach((priceDetail) => {
-    const priceDetailToMerge = result.find(
-      (x) => x.productCode === priceDetail.productCode && x.accommodationCode === priceDetail.accommodationCode && x.productType === priceDetail.productType
-    );
-    if (priceDetailToMerge) {
-      priceDetailToMerge.total += priceDetail.total;
-      priceDetailToMerge.price += priceDetail.price;
-    } else {
-      result.push(Object.assign({}, priceDetail));
-    }
-  });
-
-  return result;
-});
-
-export const selectBasePrice = createSelector(selectPackagePriceDetails, (priceDetails) =>
-  sum(priceDetails.map((priceDetail) => priceDetail.price * priceDetail.amount))
-);
-
-export const selectSeparateExtraPriceDetails = createSelector(selectPriceDetails, (priceDetails) =>
-  priceDetails.filter((priceDetail) => !priceDetail.isInPackage && priceDetail.isSeparate)
-);
-
-export const selectTotalPrice = createSelector(selectBasePrice, selectSeparateExtraPriceDetails, (basePrice, separatePriceDetails) =>
-  sum([basePrice, ...separatePriceDetails.map((priceDetail) => priceDetail.price * priceDetail.amount)])
-);
-
-// Shared function to aggregate price and details per paxType
-const aggregatePricePerPaxType = (priceDetails: BookingPriceDetail[], requestRooms: BookingPackageRequestRoom[] | undefined): PricePerPaxType[] => {
-  if (!requestRooms || isEmpty(requestRooms)) return [];
-  if (!priceDetails || isEmpty(priceDetails)) return [];
-
-  // Compute paxType by age: >=2 INFANT, >=11 CHILD, else ADULT
-  const paxTypeToPaxIds: Record<string, Set<number>> = {};
-  requestRooms.forEach((room) => {
-    room.pax.forEach((pax) => {
-      let paxType = 'ADULT';
-      if (typeof pax.age === 'number') {
-        if (pax.age <= 11 && pax.age > 2) {
-          paxType = 'CHILD';
-        } else if (pax.age <= 2) {
-          paxType = 'INFANT';
-        }
-      }
-      if (!paxTypeToPaxIds[paxType]) paxTypeToPaxIds[paxType] = new Set();
-      paxTypeToPaxIds[paxType].add(pax.id);
-    });
-  });
-
-  const result: PricePerPaxType[] = [];
-
-  Object.keys(paxTypeToPaxIds).forEach((paxType) => {
-    const paxIds = Array.from(paxTypeToPaxIds[paxType]);
-    let pricePerPaxType = 0;
-    const detailsMap: Record<string, PriceDetailsPerPaxType> = {};
-
-    priceDetails.forEach((detail) => {
-      if (!detail.showPrice || !detail.pricePerPax) return;
-      detail.pricePerPax.forEach((ppp) => {
-        if (paxIds.includes(ppp.paxId)) {
-          pricePerPaxType += ppp.price;
-          const descKey = detail.priceDescription || '';
-          if (!detailsMap[descKey]) {
-            detailsMap[descKey] = {
-              numberOfPax: 1,
-              description: detail.priceDescription || '',
-              price: ppp.price,
-              paxIds: [ppp.paxId]
-            } as PriceDetailsPerPaxType;
-          } else {
-            detailsMap[descKey].price += ppp.price;
-            if (!detailsMap[descKey].paxIds.includes(ppp.paxId)) {
-              detailsMap[descKey].paxIds.push(ppp.paxId);
-              detailsMap[descKey].numberOfPax += 1;
-            }
-          }
-        }
-      });
-    });
-
-    result.push({
-      paxType,
-      pricePerPaxType,
-      numberOfPax: paxIds.length,
-      details: Object.values(detailsMap)
-    });
-  });
-
-  return result;
-};
-
-export const selectBasePricePerPaxType = createSelector(selectPackagePriceDetails, selectRequestRooms, (priceDetails, requestRooms) =>
-  aggregatePricePerPaxType(priceDetails, requestRooms)
-);
-
-export const selectSeparateExtraPriceDetailsPerPaxType = createSelector(selectSeparateExtraPriceDetails, selectRequestRooms, (priceDetails, requestRooms) =>
-  aggregatePricePerPaxType(priceDetails, requestRooms)
-);
-
-export const selectDeposit = (state: RootState) => state.priceDetails.deposit;
-export const selectCommission = (state: RootState) => state.priceDetails.commission;
-
-export const selectIsFetchingPriceDetails = (state: RootState) => state.priceDetails.isBusy;

package/src/booking-wizard/features/price-details/util.ts

@@ -1,115 +0,0 @@
-import {
-  BookingOptionGroup,
-  BookingOptionPax,
-  BookingOptionUnit,
-  BookingPackage,
-  BookingPackageOption,
-  BookingPackageRoom,
-  ChangedLine,
-  PerBookingPackageOption,
-  PerPaxPackageOption,
-  PerUnitPackageOption
-} from '@qite/tide-client/build/types';
-
-export const updatePackageDetails = (packageDetails: BookingPackage, changedLines: ChangedLine[]): BookingPackage => {
-  return {
-    ...packageDetails,
-    options: packageDetails.options.map((opt) => {
-      return {
-        ...opt,
-        rooms: opt.isSelected ? updateRooms(opt.rooms, changedLines) : opt.rooms,
-        groups: opt.isSelected ? updateBookingGroups(opt.groups, changedLines) : opt.groups,
-        optionUnits: opt.isSelected ? updateOptionUnits(opt.optionUnits, changedLines) : opt.optionUnits,
-        optionPax: opt.isSelected ? updateOptionPax(opt.optionPax, changedLines) : opt.optionPax
-      } as BookingPackageOption;
-    })
-  };
-};
-
-// ROOMS
-const updateRooms = (rooms: BookingPackageRoom[], changedLines: ChangedLine[]) => {
-  return rooms.map((room) => ({
-    ...room,
-    options: room.options.map((option) => ({
-      ...option,
-      price: changedLines.find((x) => x.entryLineGuid == option.entryLineGuid)?.price ?? option.price
-    }))
-  }));
-};
-
-// PAX
-const updateOptionPax = (pax: BookingOptionPax[], changedLines: ChangedLine[]): BookingOptionPax[] => {
-  return pax.map((p) => ({
-    ...p,
-    groups: updatePaxGroups(p.groups, changedLines)
-  }));
-};
-
-const updatePaxGroups = (groups: BookingOptionGroup<PerPaxPackageOption>[], changedLines: ChangedLine[]): BookingOptionGroup<PerPaxPackageOption>[] => {
-  return groups.map((g) => ({
-    ...g,
-    options: g.options.map((o) => ({
-      ...o,
-      groups: updatePaxGroups(o.groups, changedLines),
-      line: {
-        ...o.line,
-        price: changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)?.price ?? o.line.price
-      },
-      alternatives: o.alternatives.map((a) => ({
-        ...a,
-        price: changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)?.price ?? a.price
-      }))
-    }))
-  }));
-};
-
-// UNITS
-const updateOptionUnits = (units: BookingOptionUnit[], changedLines: ChangedLine[]): BookingOptionUnit[] => {
-  return units.map((u) => ({
-    ...u,
-    groups: updateUnitGroups(u.groups, changedLines)
-  }));
-};
-
-const updateUnitGroups = (groups: BookingOptionGroup<PerUnitPackageOption>[], changedLines: ChangedLine[]): BookingOptionGroup<PerUnitPackageOption>[] => {
-  return groups.map((g) => ({
-    ...g,
-    options: g.options.map((o) => ({
-      ...o,
-      groups: updateUnitGroups(o.groups, changedLines),
-      pax: updateOptionPax(o.pax, changedLines),
-      line: {
-        ...o.line,
-        price: changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)?.price ?? o.line.price
-      },
-      alternatives: o.alternatives.map((a) => ({
-        ...a,
-        price: changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)?.price ?? a.price
-      }))
-    }))
-  }));
-};
-
-// BOOKING
-const updateBookingGroups = (
-  groups: BookingOptionGroup<PerBookingPackageOption>[],
-  changedLines: ChangedLine[]
-): BookingOptionGroup<PerBookingPackageOption>[] => {
-  return groups.map((g) => ({
-    ...g,
-    options: g.options.map((o) => ({
-      ...o,
-      groups: updateBookingGroups(o.groups, changedLines),
-      units: updateOptionUnits(o.units, changedLines),
-      pax: updateOptionPax(o.pax, changedLines),
-      line: {
-        ...o.line,
-        price: changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)?.price ?? o.line.price
-      },
-      alternatives: o.alternatives.map((a) => ({
-        ...a,
-        price: changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)?.price ?? a.price
-      }))
-    }))
-  }));
-};

package/src/booking-wizard/features/product-options/no-options.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import Message from '../../components/message';
-import { selectTranslations } from '../booking/selectors';
-import { useSelector } from 'react-redux';
-
-const NoOptions = () => {
-  const translations = useSelector(selectTranslations);
-
-  return (
-    <div className="form__group">
-      <Message type="success" title={translations.OPTIONS_FORM.NO_OPTIONS_TITLE}>
-        <p>{translations.OPTIONS_FORM.NO_OPTIONS_MESSAGE}</p>
-      </Message>
-    </div>
-  );
-};
-
-export default NoOptions;

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

@@ -1,73 +0,0 @@
-import { BookingOptionGroup, PerBookingPackageOption, PerPaxPackageOption, PerUnitPackageOption } from '@qite/tide-client/build/types';
-import React from 'react';
-import { buildClassName } from '../../../shared/utils/class-util';
-import { formatPrice } from '../../../shared/utils/localization-util';
-import { useSelector } from 'react-redux';
-import { selectCurrencyCode, selectTranslations } from '../booking/selectors';
-
-interface NoneOptionProps {
-  group: BookingOptionGroup<PerBookingPackageOption> | BookingOptionGroup<PerUnitPackageOption> | BookingOptionGroup<PerPaxPackageOption>;
-  parentId: string;
-  handleNoneSelectionChanged: () => void;
-}
-
-const NoneOption: React.FC<NoneOptionProps> = ({ group, parentId, handleNoneSelectionChanged }) => {
-  const translations = useSelector(selectTranslations);
-  const currencyCode = useSelector(selectCurrencyCode);
-  const selectedOption = group.options.find((x) => x.isSelected);
-  const showNoneOption = group.options.some((x) => x.requirementType === 2);
-  const noneSelected = !selectedOption;
-  const priceDifferencetext = selectedOption ? `- ${formatPrice(Math.abs(selectedOption.line.price), currencyCode)}` : '';
-
-  return (
-    <>
-      {showNoneOption && (
-        <tr>
-          <td>
-            <div className={buildClassName(['tree', noneSelected && 'tree--selected'])}>
-              <div className="tree__level">
-                <div className="tree__header">
-                  <div className="tree__description-collapse">
-                    <div className="radiobutton">
-                      <div className="radiobutton__label">
-                        <input
-                          type="radio"
-                          value={undefined}
-                          id={`${parentId}_NONE`}
-                          name={parentId}
-                          className={buildClassName(['radiobutton__input', 'radiobutton__input--parent'])}
-                          defaultChecked={noneSelected}
-                          onChange={handleNoneSelectionChanged}></input>
-                        <span className="radiobutton__label-text">
-                          <div className="date-list">
-                            <span className={buildClassName(['date-list__item', 'date-list__item--none'])}></span>
-                          </div>
-                        </span>
-                        <div className="tree__columns-actions">
-                          <div className="tree__columns">
-                            <div className="tree__column">
-                              <label htmlFor={`${parentId}_NONE`} className={buildClassName(['tree__product-name', 'tree__product-name--none'])}>
-                                {translations.OPTIONS_FORM.NONE}
-                              </label>
-                            </div>
-                            <div className="tree__column"></div>
-                            <div className="tree__column"></div>
-                            <div className={buildClassName(['tree__column', 'tree__column--price'])}>
-                              {!noneSelected && <span className={buildClassName(['price', 'price--decrease'])}>{priceDifferencetext}</span>}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </td>
-        </tr>
-      )}
-    </>
-  );
-};
-
-export default NoneOption;

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

@@ -1,53 +0,0 @@
-import {
-  AirlineBookingPackageOption,
-  AirportBookingPackageOption,
-  BookingAirlineGroup,
-  BookingAirportGroup,
-  BookingOptionGroup,
-  PerBookingPackageOption
-} from '@qite/tide-client/build/types';
-import OptionBookingGroup from './option-booking-group';
-import React from 'react';
-
-interface OptionBookingAirlineGroupProps {
-  airGroup: BookingAirlineGroup<AirlineBookingPackageOption>;
-  onGroupChange?: (group: BookingAirlineGroup<AirlineBookingPackageOption> | BookingAirportGroup<AirportBookingPackageOption>) => void;
-}
-
-const OptionBookingAirlineGroup: React.FC<OptionBookingAirlineGroupProps> = ({ airGroup, onGroupChange }) => {
-  const handleOnGroupChange = (group: BookingOptionGroup<PerBookingPackageOption>) => {
-    const updatedGroups = airGroup.groups?.map((g) => (g.name === group.name ? group : g));
-
-    const updatedAirlineGroup = Object.assign({}, airGroup, {
-      groups: updatedGroups
-    });
-    if (onGroupChange) onGroupChange(updatedAirlineGroup);
-  };
-
-  const groups = airGroup.groups.map(
-    (group) =>
-      ({
-        name: group.name,
-        title: group.title,
-        options: group.options
-      } as BookingOptionGroup<PerBookingPackageOption>)
-  );
-
-  return (
-    <div className="booking-card__airline-group-body">
-      <h4 className="booking-card__airline-group-heading">{airGroup.label}</h4>
-      {groups.map((group, i) => (
-        <OptionBookingGroup
-          key={`${airGroup.label}_${group.name}_${i}`}
-          group={group}
-          firstClassName={'booking-card__group-body'}
-          secondClassName={'booking-card__group-heading'}
-          parentId={`booking_${airGroup.label}_${group.name}`}
-          onGroupChange={handleOnGroupChange}
-        />
-      ))}
-    </div>
-  );
-};
-
-export default OptionBookingAirlineGroup;

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

@@ -1,152 +0,0 @@
-import { BookingOptionGroup, BookingOptionPax, BookingOptionUnit, PerBookingPackageOption, PerPackageOption } 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';
-import OptionUnitsCard from './option-units-card';
-
-interface OptionBookingGroupProps {
-  optionId?: string;
-  group: BookingOptionGroup<PerBookingPackageOption>;
-  firstClassName: string;
-  secondClassName: string;
-  parentId: string;
-  onGroupChange?: (group: BookingOptionGroup<PerBookingPackageOption>, optionId?: string) => void;
-}
-
-const OptionBookingGroup: React.FC<OptionBookingGroupProps> = ({ 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<PerBookingPackageOption>;
-
-    if (onGroupChange) onGroupChange(updatedGroup, optionId);
-  };
-
-  const handleChildGroupChange = (childGroup: BookingOptionGroup<PerBookingPackageOption>, 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, 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, optionId);
-  };
-
-  const handleOnUnitsChange = (units: BookingOptionUnit[], index?: number) => {
-    const updatedGroup = {
-      ...group,
-      options: group.options.map((groupOption, i) => {
-        return {
-          ...groupOption,
-          units: i === index ? units : groupOption.units
-        };
-      })
-    };
-
-    if (onGroupChange) onGroupChange(updatedGroup, optionId);
-  };
-
-  const handleNoneSelectionChanged = () => {
-    const updatedGroup = {
-      ...group,
-      options: group.options.map((groupOption) => ({
-        ...groupOption,
-        isSelected: false
-      }))
-    };
-
-    if (onGroupChange) onGroupChange(updatedGroup, 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) => (
-                                  <OptionBookingGroup
-                                    optionId={option.line.entryLineGuid}
-                                    group={optionGroup}
-                                    firstClassName={'tree__level'}
-                                    secondClassName={'tree__level-heading'}
-                                    parentId={`${parentId}_${optionGroup.name}`}
-                                    onGroupChange={handleChildGroupChange}
-                                  />
-                                ))}
-                              </div>
-                            )}
-                            {!isEmpty(option.units) && <OptionUnitsCard units={option.units} parentIndex={index} onUnitsChange={handleOnUnitsChange} />}
-                            {!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 OptionBookingGroup;