@qite/tide-booking-component 1.2.3 → 1.2.5

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

@@ -1,117 +1,201 @@
-import {
-  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, selectTranslations } from "../booking/selectors";
-import { CHILD_MAX_AGE } from "../travelers-form/travelers-form-slice";
-import OptionPaxGroup from "./option-pax-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);
-
-  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);
-  };
-
-  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}
-                  />
-                )
-            )}
-        </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;