@qite/tide-booking-component 1.2.4 → 1.2.5

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

@@ -1,174 +1,185 @@
-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 + 1}
-            </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 + 1}
+            </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;