@qite/tide-booking-component 1.4.92 → 1.4.93

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/product-options/option-units-card.tsx

@@ -1,148 +1,148 @@
-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;
+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;