@qite/tide-booking-component 1.4.93 → 1.4.95

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

@@ -1,159 +1,159 @@
-import {
-  AirlineBookingPackageOption,
-  AirportBookingPackageOption,
-  BookingAirlineGroup,
-  BookingAirportGroup,
-  BookingOptionGroup,
-  BookingOptionPax,
-  BookingPackagePax,
-  PerPaxPackageOption
-} 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 { selectBookingPackagePax, selectDepartureFlight, selectReturnFlight, selectTranslations } from '../booking/selectors';
-import { CHILD_MAX_AGE } from '../travelers-form/travelers-form-slice';
-import OptionPaxGroup from './option-pax-group';
-import OptionBookingAirlineGroup from './option-booking-airline-group';
-
-interface OptionPaxCardProps {
-  pax: BookingOptionPax[];
-  requestRoomsPax?: BookingPackagePax[];
-  parentIndex?: number;
-  onPaxChange?: (pax: BookingOptionPax[], index?: number) => void;
-}
-
-const OptionPaxCard: React.FC<OptionPaxCardProps> = ({ pax, requestRoomsPax, parentIndex, onPaxChange }) => {
-  const [toggleStates, setToggleStates] = useState<boolean[]>();
-  const translations = useSelector(selectTranslations);
-  const departureFlight = useSelector(selectDepartureFlight);
-  const returnFlight = useSelector(selectReturnFlight);
-
-  useEffect(() => {
-    if (!toggleStates || toggleStates.length !== pax.length) {
-      setToggleStates(pax.map(() => true));
-    }
-  }, [pax, toggleStates, setToggleStates]);
-
-  const bookingPax = useSelector(selectBookingPackagePax);
-
-  const getPaxName = (bookingOptionPax: BookingOptionPax) => {
-    const item = bookingPax.find((x) => x.id === bookingOptionPax.id);
-    if (!item?.firstName && !item?.lastName) {
-      return bookingOptionPax?.paxName;
-    }
-    return `${item?.firstName} ${item?.lastName}`;
-  };
-
-  const onGroupChange = (group: BookingOptionGroup<PerPaxPackageOption>, paxId: number) => {
-    const updatedPax = pax.map((p) => {
-      return p.id !== paxId
-        ? p
-        : {
-            ...p,
-            groups: p.groups.map((pg) => {
-              return pg.name !== group.name ? pg : group;
-            })
-          };
-    });
-
-    if (onPaxChange) onPaxChange(updatedPax, parentIndex);
-  };
-
-  const getAirlineGroups = (p: BookingOptionPax) => {
-    return p.airlineGroups.filter((x) => x.flightIds.includes(departureFlight?.entryLineGuid ?? '') || x.flightIds.includes(returnFlight?.entryLineGuid ?? ''));
-  };
-
-  const handleOnAirlineGroupChange = (group: BookingAirlineGroup<AirlineBookingPackageOption>, paxId: number) => {
-    const updatedPax = pax.map((p) => {
-      return p.id !== paxId
-        ? p
-        : {
-            ...p,
-            airlineGroups: p.airlineGroups.map((g) => (g.label === group.label ? group : g))
-          };
-    });
-
-    if (onPaxChange) onPaxChange(updatedPax, parentIndex);
-  };
-
-  const getAirportGroups = (p: BookingOptionPax) => {
-    return p.airportGroups.filter((x) => x.flightIds.includes(departureFlight?.entryLineGuid ?? '') || x.flightIds.includes(returnFlight?.entryLineGuid ?? ''));
-  };
-
-  const handleOnAirportGroupChange = (group: BookingAirportGroup<AirportBookingPackageOption>, paxId: number) => {
-    const updatedPax = pax.map((p) => {
-      return p.id !== paxId
-        ? p
-        : {
-            ...p,
-            airportGroups: p.airportGroups.map((g) => (g.label === group.label ? group : g))
-          };
-    });
-
-    if (onPaxChange) onPaxChange(updatedPax, parentIndex);
-  };
-
-  return (
-    <>
-      {pax.map((p, i) => (
-        <div key={i} className={buildClassName(['booking-card__group', toggleStates && toggleStates[i] && 'booking-card__group--active'])}>
-          <div className="booking-card__group-header">
-            <h3 className="booking-card__body-heading">{getPaxName(p)}</h3>
-            {requestRoomsPax?.find((x) => x.id == p.id)?.age && (
-              <p className="form__region-label">
-                {requestRoomsPax.find((x) => x.id == p.id)?.age! > CHILD_MAX_AGE ? translations.TRAVELERS_FORM.ADULT : translations.TRAVELERS_FORM.CHILD}
-              </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] && (
-            <>
-              {p.groups.map(
-                (pg) =>
-                  pg && (
-                    <OptionPaxGroup
-                      key={pg.name}
-                      paxId={p.id}
-                      group={pg}
-                      firstClassName={'booking-card__group-body'}
-                      secondClassName={'booking-card__group-heading'}
-                      parentId={`${p.id}_${pg.name}`}
-                      onGroupChange={onGroupChange}
-                    />
-                  )
-              )}
-              {getAirlineGroups(p).map((group, i) => (
-                <OptionBookingAirlineGroup
-                  key={`${group.label}_${i}`}
-                  airGroup={group}
-                  onGroupChange={(updatedGroup) => {
-                    handleOnAirlineGroupChange(updatedGroup, p.id);
-                  }}
-                />
-              ))}
-              {getAirportGroups(p).map((group, i) => (
-                <OptionBookingAirlineGroup
-                  key={`${group.label}_${i}`}
-                  airGroup={group}
-                  onGroupChange={(updatedGroup) => {
-                    handleOnAirportGroupChange(updatedGroup, p.id);
-                  }}
-                />
-              ))}
-            </>
-          )}
-        </div>
-      ))}
-    </>
-  );
-};
-
-export default OptionPaxCard;
+import {
+  AirlineBookingPackageOption,
+  AirportBookingPackageOption,
+  BookingAirlineGroup,
+  BookingAirportGroup,
+  BookingOptionGroup,
+  BookingOptionPax,
+  BookingPackagePax,
+  PerPaxPackageOption
+} 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 { selectBookingPackagePax, selectDepartureFlight, selectReturnFlight, selectTranslations } from '../booking/selectors';
+import { CHILD_MAX_AGE } from '../travelers-form/travelers-form-slice';
+import OptionPaxGroup from './option-pax-group';
+import OptionBookingAirlineGroup from './option-booking-airline-group';
+
+interface OptionPaxCardProps {
+  pax: BookingOptionPax[];
+  requestRoomsPax?: BookingPackagePax[];
+  parentIndex?: number;
+  onPaxChange?: (pax: BookingOptionPax[], index?: number) => void;
+}
+
+const OptionPaxCard: React.FC<OptionPaxCardProps> = ({ pax, requestRoomsPax, parentIndex, onPaxChange }) => {
+  const [toggleStates, setToggleStates] = useState<boolean[]>();
+  const translations = useSelector(selectTranslations);
+  const departureFlight = useSelector(selectDepartureFlight);
+  const returnFlight = useSelector(selectReturnFlight);
+
+  useEffect(() => {
+    if (!toggleStates || toggleStates.length !== pax.length) {
+      setToggleStates(pax.map(() => true));
+    }
+  }, [pax, toggleStates, setToggleStates]);
+
+  const bookingPax = useSelector(selectBookingPackagePax);
+
+  const getPaxName = (bookingOptionPax: BookingOptionPax) => {
+    const item = bookingPax.find((x) => x.id === bookingOptionPax.id);
+    if (!item?.firstName && !item?.lastName) {
+      return bookingOptionPax?.paxName;
+    }
+    return `${item?.firstName} ${item?.lastName}`;
+  };
+
+  const onGroupChange = (group: BookingOptionGroup<PerPaxPackageOption>, paxId: number) => {
+    const updatedPax = pax.map((p) => {
+      return p.id !== paxId
+        ? p
+        : {
+            ...p,
+            groups: p.groups.map((pg) => {
+              return pg.name !== group.name ? pg : group;
+            })
+          };
+    });
+
+    if (onPaxChange) onPaxChange(updatedPax, parentIndex);
+  };
+
+  const getAirlineGroups = (p: BookingOptionPax) => {
+    return p.airlineGroups.filter((x) => x.flightIds.includes(departureFlight?.entryLineGuid ?? '') || x.flightIds.includes(returnFlight?.entryLineGuid ?? ''));
+  };
+
+  const handleOnAirlineGroupChange = (group: BookingAirlineGroup<AirlineBookingPackageOption>, paxId: number) => {
+    const updatedPax = pax.map((p) => {
+      return p.id !== paxId
+        ? p
+        : {
+            ...p,
+            airlineGroups: p.airlineGroups.map((g) => (g.label === group.label ? group : g))
+          };
+    });
+
+    if (onPaxChange) onPaxChange(updatedPax, parentIndex);
+  };
+
+  const getAirportGroups = (p: BookingOptionPax) => {
+    return p.airportGroups.filter((x) => x.flightIds.includes(departureFlight?.entryLineGuid ?? '') || x.flightIds.includes(returnFlight?.entryLineGuid ?? ''));
+  };
+
+  const handleOnAirportGroupChange = (group: BookingAirportGroup<AirportBookingPackageOption>, paxId: number) => {
+    const updatedPax = pax.map((p) => {
+      return p.id !== paxId
+        ? p
+        : {
+            ...p,
+            airportGroups: p.airportGroups.map((g) => (g.label === group.label ? group : g))
+          };
+    });
+
+    if (onPaxChange) onPaxChange(updatedPax, parentIndex);
+  };
+
+  return (
+    <>
+      {pax.map((p, i) => (
+        <div key={i} className={buildClassName(['booking-card__group', toggleStates && toggleStates[i] && 'booking-card__group--active'])}>
+          <div className="booking-card__group-header">
+            <h3 className="booking-card__body-heading">{getPaxName(p)}</h3>
+            {requestRoomsPax?.find((x) => x.id == p.id)?.age && (
+              <p className="form__region-label">
+                {requestRoomsPax.find((x) => x.id == p.id)?.age! > CHILD_MAX_AGE ? translations.TRAVELERS_FORM.ADULT : translations.TRAVELERS_FORM.CHILD}
+              </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] && (
+            <>
+              {p.groups.map(
+                (pg) =>
+                  pg && (
+                    <OptionPaxGroup
+                      key={pg.name}
+                      paxId={p.id}
+                      group={pg}
+                      firstClassName={'booking-card__group-body'}
+                      secondClassName={'booking-card__group-heading'}
+                      parentId={`${p.id}_${pg.name}`}
+                      onGroupChange={onGroupChange}
+                    />
+                  )
+              )}
+              {getAirlineGroups(p).map((group, i) => (
+                <OptionBookingAirlineGroup
+                  key={`${group.label}_${i}`}
+                  airGroup={group}
+                  onGroupChange={(updatedGroup) => {
+                    handleOnAirlineGroupChange(updatedGroup, p.id);
+                  }}
+                />
+              ))}
+              {getAirportGroups(p).map((group, i) => (
+                <OptionBookingAirlineGroup
+                  key={`${group.label}_${i}`}
+                  airGroup={group}
+                  onGroupChange={(updatedGroup) => {
+                    handleOnAirportGroupChange(updatedGroup, p.id);
+                  }}
+                />
+              ))}
+            </>
+          )}
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default OptionPaxCard;

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

@@ -1,122 +1,122 @@
-import { BookingOptionGroup, PerPackageOption, PerPaxPackageOption } 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';
-
-interface OptionPaxGroupProps {
-  paxId: number;
-  optionId?: string;
-  group: BookingOptionGroup<PerPaxPackageOption>;
-  firstClassName: string;
-  secondClassName: string;
-  parentId: string;
-  onGroupChange?: (group: BookingOptionGroup<PerPaxPackageOption>, paxId: number, optionId?: string) => void;
-}
-
-const OptionPaxGroup: React.FC<OptionPaxGroupProps> = ({ paxId, 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<PerPaxPackageOption>;
-
-    if (onGroupChange) onGroupChange(updatedGroup, paxId, optionId);
-  };
-
-  const handleChildGroupChange = (childGroup: BookingOptionGroup<PerPaxPackageOption>, paxId: 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, paxId, optionId);
-  };
-
-  const handleNoneSelectionChanged = () => {
-    const updatedGroup = {
-      ...group,
-      options: group.options.map((groupOption) => ({
-        ...groupOption,
-        isSelected: false
-      }))
-    };
-
-    if (onGroupChange) onGroupChange(updatedGroup, paxId, 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) => (
-                                  <OptionPaxGroup
-                                    paxId={paxId}
-                                    optionId={option.line.entryLineGuid}
-                                    group={optionGroup}
-                                    firstClassName={'tree__level'}
-                                    secondClassName={'tree__level-heading'}
-                                    parentId={`${parentId}_${optionGroup.name}`}
-                                    onGroupChange={handleChildGroupChange}
-                                  />
-                                ))}
-                              </div>
-                            )}
-                          </label>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          ))}
-          <NoneOption group={group} parentId={parentId} handleNoneSelectionChanged={handleNoneSelectionChanged} />
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-export default OptionPaxGroup;
+import { BookingOptionGroup, PerPackageOption, PerPaxPackageOption } 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';
+
+interface OptionPaxGroupProps {
+  paxId: number;
+  optionId?: string;
+  group: BookingOptionGroup<PerPaxPackageOption>;
+  firstClassName: string;
+  secondClassName: string;
+  parentId: string;
+  onGroupChange?: (group: BookingOptionGroup<PerPaxPackageOption>, paxId: number, optionId?: string) => void;
+}
+
+const OptionPaxGroup: React.FC<OptionPaxGroupProps> = ({ paxId, 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<PerPaxPackageOption>;
+
+    if (onGroupChange) onGroupChange(updatedGroup, paxId, optionId);
+  };
+
+  const handleChildGroupChange = (childGroup: BookingOptionGroup<PerPaxPackageOption>, paxId: 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, paxId, optionId);
+  };
+
+  const handleNoneSelectionChanged = () => {
+    const updatedGroup = {
+      ...group,
+      options: group.options.map((groupOption) => ({
+        ...groupOption,
+        isSelected: false
+      }))
+    };
+
+    if (onGroupChange) onGroupChange(updatedGroup, paxId, 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) => (
+                                  <OptionPaxGroup
+                                    paxId={paxId}
+                                    optionId={option.line.entryLineGuid}
+                                    group={optionGroup}
+                                    firstClassName={'tree__level'}
+                                    secondClassName={'tree__level-heading'}
+                                    parentId={`${parentId}_${optionGroup.name}`}
+                                    onGroupChange={handleChildGroupChange}
+                                  />
+                                ))}
+                              </div>
+                            )}
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          ))}
+          <NoneOption group={group} parentId={parentId} handleNoneSelectionChanged={handleNoneSelectionChanged} />
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default OptionPaxGroup;