@qite/tide-booking-component 1.4.2 → 1.4.5

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

@@ -1,69 +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);
-
-  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;
+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,63 +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);
-
-  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;
+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,66 +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);
-
-  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;
+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;

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

@@ -1,5 +1,5 @@
 import { book, validateVoucher, EntryStatus } from "@qite/tide-client";
-import { BookingPackageRequest, BookingPackageVoucherRequest } from "@qite/tide-client/build/types";
+import { BookingPackageRequest, BookingPackageVoucherRequest, ServiceType } from "@qite/tide-client";
 import { Link, navigate, useLocation } from "@reach/router";
 import { compact, findIndex, isEmpty, isNil, uniqBy } from "lodash";
 import React, { useContext, useEffect, useState } from "react";
@@ -28,9 +28,13 @@ import {
   selectApiSettings,
   selectBookingPackageBookRequest,
   selectBookingQueryString,
+  selectDepartureFlight,
   selectLanguageCode,
   selectOfficeId,
   selectPackageDetails,
+  selectReturnFlight,
+  selectRoomOptionDepartureFlightsMetaData,
+  selectRoomOptionReturnFlightsMetaData,
   selectTranslations,
 } from "../booking/selectors";
 import {
@@ -79,6 +83,10 @@ const Summary: React.FC<SummaryProps> = () => {
   const languageCode = useSelector(selectLanguageCode);
   const officeId = useSelector(selectOfficeId);
   const agentId = useSelector(selectAgentAdressId);
+  const departureFlight = useSelector(selectDepartureFlight);
+  const departureFlightMetaData = departureFlight?.flightMetaData ?? useSelector(selectRoomOptionDepartureFlightsMetaData)?.[0];
+  const returnFlight = useSelector(selectReturnFlight);
+  const returnFlightMetaData = returnFlight?.flightMetaData ?? useSelector(selectRoomOptionReturnFlightsMetaData)?.[0];
 
   if (!travelerFormValues) {
     if (settings.skipRouter) {
@@ -334,22 +342,28 @@ const Summary: React.FC<SummaryProps> = () => {
                           <li className="list__item">
                             {traveler.birthDate.split("-").reverse().join("/")}
                           </li>
-                          {isMainBooker && travelerFormValues?.street && (
-                            <>
-                              <li className="list__item">{`${travelerFormValues?.street
-                                } ${compact([
-                                  travelerFormValues?.houseNumber,
-                                  travelerFormValues?.box,
-                                ]).join(" ")}, ${travelerFormValues?.zipCode} ${travelerFormValues?.place
-                                }`}</li>
+                          {isMainBooker && (<>
+                            {travelerFormValues?.street && (
+                              <>
+                                <li className="list__item">{`${travelerFormValues?.street
+                                  } ${compact([
+                                    travelerFormValues?.houseNumber,
+                                    travelerFormValues?.box,
+                                  ]).join(" ")}, ${travelerFormValues?.zipCode} ${travelerFormValues?.place
+                                  }`}</li>
+                              </>
+                            )}
+                            {travelerFormValues?.phone && (
                               <li className="list__item">
                                 {travelerFormValues?.phone}
                               </li>
+                            )}
+                            {travelerFormValues?.email && (
                               <li className="list__item">
                                 {travelerFormValues?.email}
                               </li>
-                            </>
-                          )}
+                            )}
+                          </>)}
                         </ul>
                       </div>
                     );
@@ -371,58 +385,73 @@ const Summary: React.FC<SummaryProps> = () => {
               <div className="form__row">
                 <div className="form__group">
                   <ul className="list list--booking-summary">
-                    {activeOption?.rooms.flatMap((r) => r.options).filter(x => x.isSelected).map((roomOption, roomOptionIndex) => (<>
-                      <li key={roomOptionIndex}>
-                        <h6>{roomOption?.productName}</h6>
-                        <ul>
-                          <li className="list__item">
-                            {roomOption?.accommodationName}
-                            {!isNil(roomOption?.regimeName) && ", "}
-                            {roomOption?.regimeName}
-                          </li>
-                        </ul>
-                        <p>
-                          ({roomOption?.from === roomOption?.to
-                              ? getDateText(roomOption?.from)
-                              : <>{getDateText(roomOption?.from)} &gt; {getDateText(roomOption?.to)}</>})
-                        </p>
-                      </li>
-                      {!isEmpty(activeOption?.groups) &&
-                        activeOption?.groups.map((x, i) => {
-                          if (!x.options.some((y) => y.isSelected)) return;
-
-                          return <SummaryBookingOption key={i} group={x} />;
-                        })}
-                      {!isEmpty(activeOption?.optionUnits) &&
-                        activeOption?.optionUnits.map((x, i) => (
-                          <SummaryBookingOptionUnit key={i} unit={x} />
-                        ))}
-                      {!isEmpty(activeOption?.optionPax) &&
-                        activeOption?.optionPax.map((x, i) => (
-                          <SummaryBookingOptionPax key={i} pax={x} />
-                        ))}
-                      {packageDetails?.outwardFlights &&
-                        packageDetails.outwardFlights
-                          .filter((x) => x.isSelected)
-                          .map((flight, i) => (
-                            <SummaryFlight
-                              key={i}
-                              flight={flight}
-                              header={translations.SIDEBAR.DEPARTURE_FLIGHT}
-                            />
+                    {activeOption?.serviceType == ServiceType.flight && departureFlightMetaData && returnFlightMetaData
+                      ? <>
+                          <SummaryFlight
+                            flightMetaData={departureFlightMetaData}
+                            header={translations.SIDEBAR.DEPARTURE_FLIGHT}
+                          />
+                          <SummaryFlight
+                            flightMetaData={returnFlightMetaData}
+                            header={translations.SIDEBAR.ARRIVAL_FLIGHT}
+                          />
+                        </> 
+                      : <>
+                          {activeOption?.rooms.flatMap((r) => r.options).filter(x => x.isSelected).map((roomOption, roomOptionIndex) => (
+                            <React.Fragment key={roomOptionIndex}>
+                              <li>
+                                <h6>{roomOption?.productName}</h6>
+                                <ul>
+                                  <li className="list__item">
+                                    {roomOption?.accommodationName}
+                                    {!isNil(roomOption?.regimeName) && ", "}
+                                    {roomOption?.regimeName}
+                                  </li>
+                                </ul>
+                                <p>
+                                  ({roomOption?.from === roomOption?.to
+                                      ? getDateText(roomOption?.from)
+                                      : <>{getDateText(roomOption?.from)} &gt; {getDateText(roomOption?.to)}</>})
+                                </p>
+                              </li>
+                              {!isEmpty(activeOption?.groups) &&
+                                activeOption?.groups.map((x, i) => {
+                                  if (!x.options.some((y) => y.isSelected)) return;
+
+                                  return <SummaryBookingOption key={i} group={x} />;
+                                })}
+                              {!isEmpty(activeOption?.optionUnits) &&
+                                activeOption?.optionUnits.map((x, i) => (
+                                  <SummaryBookingOptionUnit key={i} unit={x} />
+                                ))}
+                              {!isEmpty(activeOption?.optionPax) &&
+                                activeOption?.optionPax.map((x, i) => (
+                                  <SummaryBookingOptionPax key={i} pax={x} />
+                                ))}
+                              {packageDetails?.outwardFlights &&
+                                packageDetails.outwardFlights
+                                  .filter((x) => x.isSelected)
+                                  .map((flight, i) => (
+                                    <SummaryFlight
+                                      key={i}
+                                      flightMetaData={flight.flightMetaData}
+                                      header={translations.SIDEBAR.DEPARTURE_FLIGHT}
+                                    />
+                                  ))}
+                              {packageDetails?.returnFlights &&
+                                packageDetails.returnFlights
+                                  .filter((x) => x.isSelected)
+                                  .map((flight, i) => (
+                                    <SummaryFlight
+                                      key={i}
+                                      flightMetaData={flight.flightMetaData}
+                                      header={translations.SIDEBAR.ARRIVAL_FLIGHT}
+                                    />
+                              ))}
+                            </React.Fragment>
                           ))}
-                      {packageDetails?.returnFlights &&
-                        packageDetails.returnFlights
-                          .filter((x) => x.isSelected)
-                          .map((flight, i) => (
-                            <SummaryFlight
-                              key={i}
-                              flight={flight}
-                              header={translations.SIDEBAR.ARRIVAL_FLIGHT}
-                            />
-                        ))}
-                      </>
-                    ))}                 
+                        </>
+                    }
                   </ul>
                 </div>
               </div>