@qite/tide-booking-component 1.4.122 → 1.4.124

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

@@ -1,23 +1,23 @@
-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, i) => {
-        const paxOptions = y.options.filter((y) => y.isSelected);
-        if (isEmpty(paxOptions)) return;
-
-        return <SummaryPerPaxOptionGroup key={i} 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, i) => {
+        const paxOptions = y.options.filter((y) => y.isSelected);
+        if (isEmpty(paxOptions)) return;
+
+        return <SummaryPerPaxOptionGroup key={i} group={y} />;
+      })}
+    </>
+  );
+};
+
+export default SummaryBookingOptionPax;

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

@@ -1,23 +1,23 @@
-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,36 +1,36 @@
-import { BookingPackageFlightMetaData } 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 {
-  flightMetaData: BookingPackageFlightMetaData;
-  header: string;
-}
-
-const SummaryFlight: React.FC<SummaryFlightProps> = ({ flightMetaData, header }) => {
-  const translations = useSelector(selectTranslations);
-
-  return (
-    <li>
-      <h6>{header}</h6>
-      {parseFlightLines(flightMetaData)?.map((flightLine) => (
-        <p key={flightLine.departureAirportIata}>
-          {flightLine.departureAirportDescription} ({flightLine.departureAirportIata}) &gt; {flightLine.arrivalAirportDescription} (
-          {flightLine.arrivalAirportIata}) {' - '}
-          {flightLine.travelClass} {' - '}
-          {flightLine.airlineCode}
-          {flightLine.number}
-          <br />
-          {getDateText(flightLine.departureDate)} {flightLine.departureTime} &gt; {getDateText(flightLine.arrivalDate)} {flightLine.arrivalTime}
-          <br />
-          {flightLine.airlineDescription}
-        </p>
-      ))}
-      {flightMetaData.luggageIncluded && <p>{translations.SIDEBAR.LUGGAGE_INCLUDED}</p>}
-    </li>
-  );
-};
-
-export default SummaryFlight;
+import { BookingPackageFlightMetaData } 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 {
+  flightMetaData: BookingPackageFlightMetaData;
+  header: string;
+}
+
+const SummaryFlight: React.FC<SummaryFlightProps> = ({ flightMetaData, header }) => {
+  const translations = useSelector(selectTranslations);
+
+  return (
+    <li>
+      <h6>{header}</h6>
+      {parseFlightLines(flightMetaData)?.map((flightLine) => (
+        <p key={flightLine.departureAirportIata}>
+          {flightLine.departureAirportDescription} ({flightLine.departureAirportIata}) &gt; {flightLine.arrivalAirportDescription} (
+          {flightLine.arrivalAirportIata}) {' - '}
+          {flightLine.travelClass} {' - '}
+          {flightLine.airlineCode}
+          {flightLine.number}
+          <br />
+          {getDateText(flightLine.departureDate)} {flightLine.departureTime} &gt; {getDateText(flightLine.arrivalDate)} {flightLine.arrivalTime}
+          <br />
+          {flightLine.airlineDescription}
+        </p>
+      ))}
+      {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,60 +1,60 @@
-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,56 +1,56 @@
-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,58 +1,58 @@
-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,27 +1,27 @@
-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

@@ -111,9 +111,13 @@ const Summary: React.FC<SummaryProps> = () => {
 
     if (bookRequest.payload.returnPaymentUrl) {
       if (typeof window !== 'undefined') {
-        const location = window.location;
         window.scrollTo(0, 0);
-        bookRequest.payload.redirectUrl = `${location.protocol}//${location.host}${settings.basePath}?${bookingQueryString}`;
+        if (settings.paymentRedirectUrl) {
+          bookRequest.payload.redirectUrl = settings.paymentRedirectUrl;
+        } else {
+          const location = window.location;
+          bookRequest.payload.redirectUrl = `${location.protocol}//${location.host}${settings.basePath}?${bookingQueryString}`;
+        }
       }
     }
 
@@ -131,7 +135,19 @@ const Summary: React.FC<SummaryProps> = () => {
       dispatch(setBookingNumber(bookingResponse.number));
 
       if (bookingResponse.paymentUrl) {
-        window.location.href = bookingResponse.paymentUrl;
+        const event = new CustomEvent('tide-booking-payment-url', {
+          detail: {
+            paymentUrl: bookingResponse.paymentUrl,
+            bookingNumber: bookingResponse.number
+          },
+          cancelable: true,
+          bubbles: true
+        });
+        const target = typeof document !== 'undefined' ? document.getElementById('tide-booking') ?? window : window;
+        const shouldAutoRedirect = target.dispatchEvent(event);
+        if (shouldAutoRedirect) {
+          window.location.href = bookingResponse.paymentUrl;
+        }
       } else {
         if (settings.skipRouter) {
           dispatch(setCurrentStep(CONFIRMATION_STEP));