@qite/tide-booking-component 1.2.5 → 1.3.0

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

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