@qite/tide-booking-component 1.4.93 → 1.4.95

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

@@ -1,138 +1,138 @@
-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;
+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/room-options/room-utils.ts

@@ -1,154 +1,154 @@
-import { BookingPackageAvailability, BookingPackageRoom } from '@qite/tide-client/build/types';
-import { AccommodationContent, RegimeContent, SelectableRoom, SelectableRoomAccommodation } from '../../types';
-
-export const buildSelectableRooms = (
-  packageRooms: BookingPackageRoom[],
-  accommodations: AccommodationContent[] | undefined,
-  regimes: RegimeContent[] | undefined,
-  accommodationViews: { [key: string]: string } | undefined
-) => {
-  return packageRooms.map((x) => {
-    const selectedOption = x.options.find((x) => x.isSelected)!;
-    const alternativeOptions = x.options
-      .filter((x) => x.accommodationCode !== selectedOption.accommodationCode && !x.isLocked)
-      .sort((a, b) => a.price - b.price);
-
-    const alternativeAccommodations: SelectableRoomAccommodation[] = [];
-    alternativeOptions.forEach((x) => {
-      const alternativeAccommodation = alternativeAccommodations.find((y) => y.code === x.accommodationCode);
-
-      if (alternativeAccommodation) {
-        const regime = regimes?.find((y) => y.code === x.regimeCode);
-
-        alternativeAccommodation.regimes.push({
-          code: x.regimeCode,
-          title: regime?.title ?? x.regimeName,
-          price: x.price
-        });
-      } else {
-        const accommodation = accommodations?.find((y) => y.code === x.accommodationCode);
-        const regime = regimes?.find((y) => y.code === x.regimeCode);
-
-        alternativeAccommodations.push({
-          code: x.accommodationCode,
-          regimeCode: x.regimeCode,
-          from: x.from,
-          to: x.to,
-          price: x.price,
-          regimes: [
-            {
-              code: x.regimeCode,
-              title: regime?.title ?? x.regimeName,
-              price: x.price
-            }
-          ],
-          title: accommodation?.title ?? x.accommodationName,
-          image: accommodation?.imageUrl,
-          usps: accommodation?.usps ?? [],
-          description: accommodation?.description,
-          viewHtml: accommodationViews?.[x.accommodationCode]
-        });
-      }
-    });
-
-    const accommodation = accommodations?.find((y) => y.code === selectedOption.accommodationCode);
-
-    return {
-      index: x.index,
-      selected: {
-        code: selectedOption.accommodationCode,
-        regimeCode: selectedOption.regimeCode,
-        price: selectedOption.price,
-        from: selectedOption.from,
-        to: selectedOption.to,
-        regimes: x.options
-          .filter((x) => x.accommodationCode === selectedOption.accommodationCode)
-          .sort((a, b) => a.price - b.price)
-          .map((o) => {
-            const regime = regimes?.find((y) => y.code === o.regimeCode);
-
-            return {
-              code: o.regimeCode,
-              title: regime?.title ?? o.regimeName,
-              price: o.price
-            };
-          }),
-        title: accommodation?.title ?? selectedOption.accommodationName,
-        image: accommodation?.imageUrl,
-        usps: accommodation?.usps ?? [],
-        description: accommodation?.description,
-        viewHtml: accommodationViews?.[selectedOption.accommodationCode]
-      },
-      showAlternatives: false,
-      alternatives: alternativeAccommodations
-    } as SelectableRoom;
-  });
-};
-
-export const updatePackageRooms = (
-  rooms: BookingPackageRoom[],
-  index: number,
-  accommodationCode: string,
-  regimeCode: string | null,
-  availabilities: BookingPackageAvailability[]
-) => {
-  const updatedRooms = rooms.map((room) => {
-    if (room.index !== index) return room;
-
-    return {
-      ...room,
-      options: room.options.map((option) => {
-        return {
-          ...option,
-          isSelected: option.accommodationCode === accommodationCode && (option.regimeCode === regimeCode || (option.regimeCode === null && regimeCode === ''))
-        };
-      })
-    };
-  });
-
-  const selectedAccommodations = new Map<string, number>();
-  updatedRooms
-    .map((x) => x.options.find((x) => x.isSelected)!)
-    .forEach((x) => {
-      if (selectedAccommodations.has(x.accommodationCode)) {
-        selectedAccommodations.set(x.accommodationCode, selectedAccommodations.get(x.accommodationCode)! + 1);
-      } else {
-        selectedAccommodations.set(x.accommodationCode, 1);
-      }
-    });
-
-  const accoCounter = availabilities.map((x) => ({
-    code: x.code,
-    count: x.count
-  }));
-  return updatedRooms.map((room) => {
-    const selectedOption = room.options.find((x) => x.isSelected)!;
-
-    return {
-      ...room,
-      options: room.options.map((option) => {
-        const isCurrentOption = selectedOption.accommodationCode === option.accommodationCode;
-        const usedCount = selectedAccommodations.get(option.accommodationCode) ?? 0;
-        const availability = availabilities.find((x) => x.code === option.accommodationCode);
-
-        if (availability) {
-          const accoCount = accoCounter.find((x) => x.code === option.accommodationCode)!;
-
-          const roomsLeft = availability.count - usedCount;
-          let isOnRequest =
-            (option.isOnRequest && availability.count == 99) || // Tide sets count to 99 if an option falls back to on request.
-            (isCurrentOption ? accoCount.count < 0 && (availability?.onRequestPossible ?? false) : roomsLeft < 0 && (availability?.onRequestPossible ?? false));
-          if (isCurrentOption) accoCount.count--;
-
-          return {
-            ...option,
-            isLocked: !option.isSelected && !isOnRequest && roomsLeft < 0 && !availability.isExternal,
-            isOnRequest: isOnRequest
-          };
-        } else {
-          return option;
-        }
-      })
-    };
-  });
-};
+import { BookingPackageAvailability, BookingPackageRoom } from '@qite/tide-client/build/types';
+import { AccommodationContent, RegimeContent, SelectableRoom, SelectableRoomAccommodation } from '../../types';
+
+export const buildSelectableRooms = (
+  packageRooms: BookingPackageRoom[],
+  accommodations: AccommodationContent[] | undefined,
+  regimes: RegimeContent[] | undefined,
+  accommodationViews: { [key: string]: string } | undefined
+) => {
+  return packageRooms.map((x) => {
+    const selectedOption = x.options.find((x) => x.isSelected)!;
+    const alternativeOptions = x.options
+      .filter((x) => x.accommodationCode !== selectedOption.accommodationCode && !x.isLocked)
+      .sort((a, b) => a.price - b.price);
+
+    const alternativeAccommodations: SelectableRoomAccommodation[] = [];
+    alternativeOptions.forEach((x) => {
+      const alternativeAccommodation = alternativeAccommodations.find((y) => y.code === x.accommodationCode);
+
+      if (alternativeAccommodation) {
+        const regime = regimes?.find((y) => y.code === x.regimeCode);
+
+        alternativeAccommodation.regimes.push({
+          code: x.regimeCode,
+          title: regime?.title ?? x.regimeName,
+          price: x.price
+        });
+      } else {
+        const accommodation = accommodations?.find((y) => y.code === x.accommodationCode);
+        const regime = regimes?.find((y) => y.code === x.regimeCode);
+
+        alternativeAccommodations.push({
+          code: x.accommodationCode,
+          regimeCode: x.regimeCode,
+          from: x.from,
+          to: x.to,
+          price: x.price,
+          regimes: [
+            {
+              code: x.regimeCode,
+              title: regime?.title ?? x.regimeName,
+              price: x.price
+            }
+          ],
+          title: accommodation?.title ?? x.accommodationName,
+          image: accommodation?.imageUrl,
+          usps: accommodation?.usps ?? [],
+          description: accommodation?.description,
+          viewHtml: accommodationViews?.[x.accommodationCode]
+        });
+      }
+    });
+
+    const accommodation = accommodations?.find((y) => y.code === selectedOption.accommodationCode);
+
+    return {
+      index: x.index,
+      selected: {
+        code: selectedOption.accommodationCode,
+        regimeCode: selectedOption.regimeCode,
+        price: selectedOption.price,
+        from: selectedOption.from,
+        to: selectedOption.to,
+        regimes: x.options
+          .filter((x) => x.accommodationCode === selectedOption.accommodationCode)
+          .sort((a, b) => a.price - b.price)
+          .map((o) => {
+            const regime = regimes?.find((y) => y.code === o.regimeCode);
+
+            return {
+              code: o.regimeCode,
+              title: regime?.title ?? o.regimeName,
+              price: o.price
+            };
+          }),
+        title: accommodation?.title ?? selectedOption.accommodationName,
+        image: accommodation?.imageUrl,
+        usps: accommodation?.usps ?? [],
+        description: accommodation?.description,
+        viewHtml: accommodationViews?.[selectedOption.accommodationCode]
+      },
+      showAlternatives: false,
+      alternatives: alternativeAccommodations
+    } as SelectableRoom;
+  });
+};
+
+export const updatePackageRooms = (
+  rooms: BookingPackageRoom[],
+  index: number,
+  accommodationCode: string,
+  regimeCode: string | null,
+  availabilities: BookingPackageAvailability[]
+) => {
+  const updatedRooms = rooms.map((room) => {
+    if (room.index !== index) return room;
+
+    return {
+      ...room,
+      options: room.options.map((option) => {
+        return {
+          ...option,
+          isSelected: option.accommodationCode === accommodationCode && (option.regimeCode === regimeCode || (option.regimeCode === null && regimeCode === ''))
+        };
+      })
+    };
+  });
+
+  const selectedAccommodations = new Map<string, number>();
+  updatedRooms
+    .map((x) => x.options.find((x) => x.isSelected)!)
+    .forEach((x) => {
+      if (selectedAccommodations.has(x.accommodationCode)) {
+        selectedAccommodations.set(x.accommodationCode, selectedAccommodations.get(x.accommodationCode)! + 1);
+      } else {
+        selectedAccommodations.set(x.accommodationCode, 1);
+      }
+    });
+
+  const accoCounter = availabilities.map((x) => ({
+    code: x.code,
+    count: x.count
+  }));
+  return updatedRooms.map((room) => {
+    const selectedOption = room.options.find((x) => x.isSelected)!;
+
+    return {
+      ...room,
+      options: room.options.map((option) => {
+        const isCurrentOption = selectedOption.accommodationCode === option.accommodationCode;
+        const usedCount = selectedAccommodations.get(option.accommodationCode) ?? 0;
+        const availability = availabilities.find((x) => x.code === option.accommodationCode);
+
+        if (availability) {
+          const accoCount = accoCounter.find((x) => x.code === option.accommodationCode)!;
+
+          const roomsLeft = availability.count - usedCount;
+          let isOnRequest =
+            (option.isOnRequest && availability.count == 99) || // Tide sets count to 99 if an option falls back to on request.
+            (isCurrentOption ? accoCount.count < 0 && (availability?.onRequestPossible ?? false) : roomsLeft < 0 && (availability?.onRequestPossible ?? false));
+          if (isCurrentOption) accoCount.count--;
+
+          return {
+            ...option,
+            isLocked: !option.isSelected && !isOnRequest && roomsLeft < 0 && !availability.isExternal,
+            isOnRequest: isOnRequest
+          };
+        } else {
+          return option;
+        }
+      })
+    };
+  });
+};