@qite/tide-booking-component 1.2.3 → 1.2.5

package/src/booking-wizard/features/summary/summary-booking-option-pax.tsx

@@ -1,25 +1,25 @@
-import { BookingOptionPax } from "@qite/tide-client/build/types";
-import { isEmpty } from "lodash";
-import React from "react";
-import SummaryPerPaxOptionGroup from "./summary-per-pax-option-group";
-
-interface SummaryBookingOptionPaxProps {
-  pax: BookingOptionPax;
-}
-
-const SummaryBookingOptionPax: React.FC<SummaryBookingOptionPaxProps> = ({
-  pax,
-}) => {
-  return (
-    <>
-      {pax.groups.map((y) => {
-        const paxOptions = y.options.filter((y) => y.isSelected);
-        if (isEmpty(paxOptions)) return;
-
-        return <SummaryPerPaxOptionGroup group={y} />;
-      })}
-    </>
-  );
-};
-
-export default SummaryBookingOptionPax;
+import { BookingOptionPax } from "@qite/tide-client/build/types";
+import { isEmpty } from "lodash";
+import React from "react";
+import SummaryPerPaxOptionGroup from "./summary-per-pax-option-group";
+
+interface SummaryBookingOptionPaxProps {
+  pax: BookingOptionPax;
+}
+
+const SummaryBookingOptionPax: React.FC<SummaryBookingOptionPaxProps> = ({
+  pax,
+}) => {
+  return (
+    <>
+      {pax.groups.map((y) => {
+        const paxOptions = y.options.filter((y) => y.isSelected);
+        if (isEmpty(paxOptions)) return;
+
+        return <SummaryPerPaxOptionGroup group={y} />;
+      })}
+    </>
+  );
+};
+
+export default SummaryBookingOptionPax;

package/src/booking-wizard/features/summary/summary-booking-option-unit.tsx

@@ -1,25 +1,25 @@
-import { BookingOptionUnit } from "@qite/tide-client/build/types";
-import { isEmpty } from "lodash";
-import React from "react";
-import SummaryPerUnitOptionGroup from "./summary-per-unit-option-group";
-
-interface SummaryBookingOptionUnitProps {
-  unit: BookingOptionUnit;
-}
-
-const SummaryBookingOptionUnit: React.FC<SummaryBookingOptionUnitProps> = ({
-  unit,
-}) => {
-  return (
-    <>
-      {unit.groups.map((y) => {
-        const unitOptions = y.options.filter((y) => y.isSelected);
-        if (isEmpty(unitOptions)) return;
-
-        return <SummaryPerUnitOptionGroup group={y} />;
-      })}
-    </>
-  );
-};
-
-export default SummaryBookingOptionUnit;
+import { BookingOptionUnit } from "@qite/tide-client/build/types";
+import { isEmpty } from "lodash";
+import React from "react";
+import SummaryPerUnitOptionGroup from "./summary-per-unit-option-group";
+
+interface SummaryBookingOptionUnitProps {
+  unit: BookingOptionUnit;
+}
+
+const SummaryBookingOptionUnit: React.FC<SummaryBookingOptionUnitProps> = ({
+  unit,
+}) => {
+  return (
+    <>
+      {unit.groups.map((y) => {
+        const unitOptions = y.options.filter((y) => y.isSelected);
+        if (isEmpty(unitOptions)) return;
+
+        return <SummaryPerUnitOptionGroup group={y} />;
+      })}
+    </>
+  );
+};
+
+export default SummaryBookingOptionUnit;

package/src/booking-wizard/features/summary/summary-flight.tsx

@@ -1,39 +1,39 @@
-import { BookingPackageFlight } from "@qite/tide-client/build/types";
-import React from "react";
-import { useSelector } from "react-redux";
-import { selectTranslations } from "../booking/selectors";
-import { getDateText, parseFlightLines } from "../sidebar/sidebar-util";
-
-interface SummaryFlightProps {
-  flight: BookingPackageFlight;
-  header: string;
-}
-
-const SummaryFlight: React.FC<SummaryFlightProps> = ({ flight, header }) => {
-  const translations = useSelector(selectTranslations);
-  
-  return (
-    <li>
-      <h6>{header}</h6>
-      {parseFlightLines(flight.flightMetaData)?.map((flightLine) => (
-        <p key={flightLine.departureAirportIata}>
-          {flightLine.departureAirportDescription} (
-          {flightLine.departureAirportIata}) &gt;{" "}
-          {flightLine.arrivalAirportDescription} (
-          {flightLine.arrivalAirportIata}) {" - "}
-          {flightLine.travelClass}
-          <br />
-          {getDateText(flightLine.departureDate)} {flightLine.departureTime}{" "}
-          &gt; {getDateText(flightLine.arrivalDate)} {flightLine.arrivalTime}
-          <br />
-          {flightLine.airlineDescription}
-        </p>
-      ))}
-      {flight.flightMetaData.luggageIncluded && (
-        <p>{translations.SIDEBAR.LUGGAGE_INCLUDED}</p>
-      )}
-    </li>
-  );
-};
-
-export default SummaryFlight;
+import { BookingPackageFlight } from "@qite/tide-client/build/types";
+import React from "react";
+import { useSelector } from "react-redux";
+import { selectTranslations } from "../booking/selectors";
+import { getDateText, parseFlightLines } from "../sidebar/sidebar-util";
+
+interface SummaryFlightProps {
+  flight: BookingPackageFlight;
+  header: string;
+}
+
+const SummaryFlight: React.FC<SummaryFlightProps> = ({ flight, header }) => {
+  const translations = useSelector(selectTranslations);
+
+  return (
+    <li>
+      <h6>{header}</h6>
+      {parseFlightLines(flight.flightMetaData)?.map((flightLine) => (
+        <p key={flightLine.departureAirportIata}>
+          {flightLine.departureAirportDescription} (
+          {flightLine.departureAirportIata}) &gt;{" "}
+          {flightLine.arrivalAirportDescription} (
+          {flightLine.arrivalAirportIata}) {" - "}
+          {flightLine.travelClass}
+          <br />
+          {getDateText(flightLine.departureDate)} {flightLine.departureTime}{" "}
+          &gt; {getDateText(flightLine.arrivalDate)} {flightLine.arrivalTime}
+          <br />
+          {flightLine.airlineDescription}
+        </p>
+      ))}
+      {flight.flightMetaData.luggageIncluded && (
+        <p>{translations.SIDEBAR.LUGGAGE_INCLUDED}</p>
+      )}
+    </li>
+  );
+};
+
+export default SummaryFlight;

package/src/booking-wizard/features/summary/summary-per-booking-option-group.tsx

@@ -1,57 +1,69 @@
-import {
-  BookingOptionGroup,
-  PerBookingPackageOption,
-} from "@qite/tide-client/build/types";
-import { isEmpty, isNil } from "lodash";
-import React from "react";
-import { getDateText } from "../sidebar/sidebar-util";
-import SummaryBookingOptionPax from "./summary-booking-option-pax";
-import SummaryBookingOptionUnit from "./summary-booking-option-unit";
-
-interface SummaryPerBookingOptionGroupProps {
-  group: BookingOptionGroup<PerBookingPackageOption>;
-}
-
-const SummaryPerBookingOptionGroup: React.FC<
-  SummaryPerBookingOptionGroupProps
-> = ({ group }) => {
-  const groupOptions = group.options.filter((x) => x.isSelected);
-
-  return (
-    <li className="list__item">
-      <h6>{group.title}</h6>
-
-      <ul className="list">
-        {groupOptions.map((opt) => (
-          <li key={opt.line.entryLineGuid} className="list__item">
-            {opt.line.productName}
-            {": "}
-            {opt.line.accommodationName}
-            {!isNil(opt.line?.regimeName) && ", "}
-            {opt.line.regimeName}
-            <br />
-            {getDateText(opt.line.startDate)}
-            {opt.line.startDate != opt.line.endDate
-              ? ` > ${getDateText(opt.line.endDate)}`
-              : ""}
-
-            <ul>
-              {!isEmpty(opt?.groups) &&
-                opt?.groups.map((x) => {
-                  if (!x.options.some((y) => y.isSelected)) return;
-
-                  return <SummaryPerBookingOptionGroup group={x} />;
-                })}
-              {!isEmpty(opt?.units) &&
-                opt?.units.map((x) => <SummaryBookingOptionUnit unit={x} />)}
-              {!isEmpty(opt?.pax) &&
-                opt?.pax.map((x) => <SummaryBookingOptionPax pax={x} />)}
-            </ul>
-          </li>
-        ))}
-      </ul>
-    </li>
-  );
-};
-
-export default SummaryPerBookingOptionGroup;
+import {
+  BookingOptionGroup,
+  PerBookingPackageOption,
+} from "@qite/tide-client/build/types";
+import { isEmpty, isNil } from "lodash";
+import React from "react";
+import { getDateText } from "../sidebar/sidebar-util";
+import SummaryBookingOptionPax from "./summary-booking-option-pax";
+import SummaryBookingOptionUnit from "./summary-booking-option-unit";
+
+interface SummaryPerBookingOptionGroupProps {
+  group: BookingOptionGroup<PerBookingPackageOption>;
+}
+
+const SummaryPerBookingOptionGroup: React.FC<
+  SummaryPerBookingOptionGroupProps
+> = ({ group }) => {
+  const groupOptions = group.options.filter((x) => x.isSelected);
+
+  const renderOptions = () => (
+    <>
+      {groupOptions.map((opt) => (
+        <li key={opt.line.entryLineGuid} className="list__item">
+          {opt.line.productName}
+          <ul>
+            <li>
+              {opt.line.accommodationName}
+              {!isNil(opt.line?.regimeName) && ", "}
+              {opt.line.regimeName}
+            </li>
+          </ul>
+          {getDateText(opt.line.startDate)}
+          {opt.line.startDate != opt.line.endDate
+            ? ` > ${getDateText(opt.line.endDate)}`
+            : ""}
+
+          <ul>
+            {!isEmpty(opt?.groups) &&
+              opt?.groups.map((x) => {
+                if (!x.options.some((y) => y.isSelected)) return;
+
+                return <SummaryPerBookingOptionGroup group={x} />;
+              })}
+            {!isEmpty(opt?.units) &&
+              opt?.units.map((x) => <SummaryBookingOptionUnit unit={x} />)}
+            {!isEmpty(opt?.pax) &&
+              opt?.pax.map((x) => <SummaryBookingOptionPax pax={x} />)}
+          </ul>
+        </li>
+      ))}
+    </>
+  );
+
+  return (
+    <>
+      {group.title ? (
+        <li className="list__item">
+          <h6>{group.title}</h6>
+
+          <ul className="list">{renderOptions()}</ul>
+        </li>
+      ) : (
+        <>{renderOptions()}</>
+      )}
+    </>
+  );
+};
+
+export default SummaryPerBookingOptionGroup;

package/src/booking-wizard/features/summary/summary-per-pax-option-group.tsx

@@ -1,51 +1,63 @@
-import {
-  BookingOptionGroup,
-  PerPaxPackageOption,
-} from "@qite/tide-client/build/types";
-import { isEmpty, isNil } from "lodash";
-import React from "react";
-import { getDateText } from "../sidebar/sidebar-util";
-
-interface SummaryPerPaxOptionGroupProps {
-  group: BookingOptionGroup<PerPaxPackageOption>;
-}
-
-const SummaryPerPaxOptionGroup: React.FC<SummaryPerPaxOptionGroupProps> = ({
-  group,
-}) => {
-  const groupOptions = group.options.filter((x) => x.isSelected);
-
-  return (
-    <li className="list__item">
-      <h6>{group.title}</h6>
-
-      <ul className="list">
-        {groupOptions.map((opt) => (
-          <li key={opt.line.entryLineGuid} className="list__item">
-            {opt.line.productName}
-            {": "}
-            {opt.line.accommodationName}
-            {!isNil(opt.line?.regimeName) && ", "}
-            {opt.line.regimeName}
-            <br />
-            {getDateText(opt.line.startDate)}
-            {opt.line.startDate != opt.line.endDate
-              ? ` > ${getDateText(opt.line.endDate)}`
-              : ""}
-
-            <ul className="list">
-              {!isEmpty(opt?.groups) &&
-                opt?.groups.map((x) => {
-                  if (!x.options.some((y) => y.isSelected)) return;
-
-                  return <SummaryPerPaxOptionGroup group={x} />;
-                })}
-            </ul>
-          </li>
-        ))}
-      </ul>
-    </li>
-  );
-};
-
-export default SummaryPerPaxOptionGroup;
+import {
+  BookingOptionGroup,
+  PerPaxPackageOption,
+} from "@qite/tide-client/build/types";
+import { isEmpty, isNil } from "lodash";
+import React from "react";
+import { getDateText } from "../sidebar/sidebar-util";
+
+interface SummaryPerPaxOptionGroupProps {
+  group: BookingOptionGroup<PerPaxPackageOption>;
+}
+
+const SummaryPerPaxOptionGroup: React.FC<SummaryPerPaxOptionGroupProps> = ({
+  group,
+}) => {
+  const groupOptions = group.options.filter((x) => x.isSelected);
+
+  const renderOptions = () => (
+    <>
+      {groupOptions.map((opt) => (
+        <li key={opt.line.entryLineGuid} className="list__item">
+          {opt.line.productName}
+          <ul>
+            <li>
+              {opt.line.accommodationName}
+              {!isNil(opt.line?.regimeName) && ", "}
+              {opt.line.regimeName}
+            </li>
+          </ul>
+          {getDateText(opt.line.startDate)}
+          {opt.line.startDate != opt.line.endDate
+            ? ` > ${getDateText(opt.line.endDate)}`
+            : ""}
+
+          <ul className="list">
+            {!isEmpty(opt?.groups) &&
+              opt?.groups.map((x) => {
+                if (!x.options.some((y) => y.isSelected)) return;
+
+                return <SummaryPerPaxOptionGroup group={x} />;
+              })}
+          </ul>
+        </li>
+      ))}
+    </>
+  );
+
+  return (
+    <>
+      {group.title ? (
+        <li className="list__item">
+          <h6>{group.title}</h6>
+
+          <ul className="list">{renderOptions()}</ul>
+        </li>
+      ) : (
+        <>{renderOptions()}</>
+      )}
+    </>
+  );
+};
+
+export default SummaryPerPaxOptionGroup;

package/src/booking-wizard/features/summary/summary-per-unit-option-group.tsx

@@ -1,54 +1,66 @@
-import {
-  BookingOptionGroup,
-  PerUnitPackageOption,
-} from "@qite/tide-client/build/types";
-import { isEmpty, isNil } from "lodash";
-import React from "react";
-import { getDateText } from "../sidebar/sidebar-util";
-import SummaryBookingOptionPax from "./summary-booking-option-pax";
-
-interface SummaryPerUnitOptionGroupProps {
-  group: BookingOptionGroup<PerUnitPackageOption>;
-}
-
-const SummaryPerUnitOptionGroup: React.FC<SummaryPerUnitOptionGroupProps> = ({
-  group,
-}) => {
-  const groupOptions = group.options.filter((x) => x.isSelected);
-
-  return (
-    <li className="list__item">
-      <h6>{group.title}</h6>
-
-      <ul className="list">
-        {groupOptions.map((opt) => (
-          <li key={opt.line.entryLineGuid} className="list__item">
-            {opt.line.productName}
-            {": "}
-            {opt.line.accommodationName}
-            {!isNil(opt.line?.regimeName) && ", "}
-            {opt.line.regimeName}
-            <br />
-            {getDateText(opt.line.startDate)}
-            {opt.line.startDate != opt.line.endDate
-              ? ` > ${getDateText(opt.line.endDate)}`
-              : ""}
-
-            <ul>
-              {!isEmpty(opt?.groups) &&
-                opt?.groups.map((x) => {
-                  if (!x.options.some((y) => y.isSelected)) return;
-
-                  return <SummaryPerUnitOptionGroup group={x} />;
-                })}
-              {!isEmpty(opt?.pax) &&
-                opt?.pax.map((x) => <SummaryBookingOptionPax pax={x} />)}
-            </ul>
-          </li>
-        ))}
-      </ul>
-    </li>
-  );
-};
-
-export default SummaryPerUnitOptionGroup;
+import {
+  BookingOptionGroup,
+  PerUnitPackageOption,
+} from "@qite/tide-client/build/types";
+import { isEmpty, isNil } from "lodash";
+import React from "react";
+import { getDateText } from "../sidebar/sidebar-util";
+import SummaryBookingOptionPax from "./summary-booking-option-pax";
+
+interface SummaryPerUnitOptionGroupProps {
+  group: BookingOptionGroup<PerUnitPackageOption>;
+}
+
+const SummaryPerUnitOptionGroup: React.FC<SummaryPerUnitOptionGroupProps> = ({
+  group,
+}) => {
+  const groupOptions = group.options.filter((x) => x.isSelected);
+
+  const renderOptions = () => (
+    <>
+      {groupOptions.map((opt) => (
+        <li key={opt.line.entryLineGuid} className="list__item">
+          {opt.line.productName}
+          <ul>
+            <li>
+              {opt.line.accommodationName}
+              {!isNil(opt.line?.regimeName) && ", "}
+              {opt.line.regimeName}
+            </li>
+          </ul>
+          {getDateText(opt.line.startDate)}
+          {opt.line.startDate != opt.line.endDate
+            ? ` > ${getDateText(opt.line.endDate)}`
+            : ""}
+
+          <ul>
+            {!isEmpty(opt?.groups) &&
+              opt?.groups.map((x) => {
+                if (!x.options.some((y) => y.isSelected)) return;
+
+                return <SummaryPerUnitOptionGroup group={x} />;
+              })}
+            {!isEmpty(opt?.pax) &&
+              opt?.pax.map((x) => <SummaryBookingOptionPax pax={x} />)}
+          </ul>
+        </li>
+      ))}
+    </>
+  );
+
+  return (
+    <>
+      {group.title ? (
+        <li className="list__item">
+          <h6>{group.title}</h6>
+
+          <ul className="list">{renderOptions()}</ul>
+        </li>
+      ) : (
+        <>{renderOptions()}</>
+      )}
+    </>
+  );
+};
+
+export default SummaryPerUnitOptionGroup;

package/src/booking-wizard/features/summary/summary-slice.ts

@@ -1,28 +1,28 @@
-import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-
-import { RootState } from "../../store";
-
-export interface SummaryState {
-  userValidated: boolean;
-}
-
-const initialState: SummaryState = {
-  userValidated: false,
-};
-
-const summarySlice = createSlice({
-  name: "summary",
-  initialState,
-  reducers: {
-    setUserValidated(state, action: PayloadAction<boolean>) {
-      state.userValidated = action.payload;
-    },
-  },
-});
-
-export const { setUserValidated } = summarySlice.actions;
-
-export const selectUserValidated = (state: RootState) =>
-  state.summary.userValidated;
-
-export default summarySlice.reducer;
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+
+import { RootState } from "../../store";
+
+export interface SummaryState {
+  userValidated: boolean;
+}
+
+const initialState: SummaryState = {
+  userValidated: false,
+};
+
+const summarySlice = createSlice({
+  name: "summary",
+  initialState,
+  reducers: {
+    setUserValidated(state, action: PayloadAction<boolean>) {
+      state.userValidated = action.payload;
+    },
+  },
+});
+
+export const { setUserValidated } = summarySlice.actions;
+
+export const selectUserValidated = (state: RootState) =>
+  state.summary.userValidated;
+
+export default summarySlice.reducer;