@qite/tide-booking-component 0.0.2-preview.9 → 1.0.0-preview

package/src/booking-wizard/features/sidebar/sidebar-util.ts

@@ -1,20 +1,21 @@
-import { ServiceType } from "@qite/tide-client";
-import { EntryLineMetaData } from "@qite/tide-client/build/types";
-import { MetaDataType } from "@qite/tide-client";
-import { format, parseISO } from "date-fns";
-import { compact, first, isEmpty, last, orderBy, uniq } from "lodash";
+import { BookingPackageFlightMetaData } from "@qite/tide-client/build/types";
+import { differenceInCalendarDays, format, parseISO } from "date-fns";
+import { compact, isEmpty, orderBy, uniq } from "lodash";
 import translations from "../../translations/translations.json";
-import { ProductOption } from "../product-options/product-options-api";
 import { FlightLine } from "../../types";
 
 export const getTravelersText = (
-  adultCount: number,
-  childCount: number
+  adultIds: number[],
+  childIds: number[]
 ): string | undefined => {
   const travelersText = compact([
-    adultCount && `${adultCount} ${translations.SIDEBAR.TRAVELERS_ADULTS}`,
-    adultCount && childCount && ", ",
-    childCount && `${childCount} ${translations.SIDEBAR.TRAVELERS_CHILDREN}`,
+    adultIds.length,
+    adultIds.length === 1 && ` ${translations.SIDEBAR.TRAVELERS_ADULT}`,
+    adultIds.length > 1 && ` ${translations.SIDEBAR.TRAVELERS_ADULTS}`,
+    adultIds && adultIds.length && childIds && childIds.length && ", ",
+    childIds.length,
+    childIds.length === 1 && ` ${translations.SIDEBAR.TRAVELERS_CHILD}`,
+    childIds.length > 1 && ` ${translations.SIDEBAR.TRAVELERS_CHILDREN}`,
   ]).join("");
 
   return !isEmpty(travelersText) ? travelersText : undefined;
@@ -34,46 +35,85 @@ export const getDateText = (date: string | undefined): string | undefined => {
   }
 };
 
-export const getFlightText = (
-  productOption?: ProductOption
-): string | undefined => {
-  if (productOption?.productType !== ServiceType.flight) {
-    // Option isn't a flight
+export const getDatePeriodText = (
+  from?: string,
+  to?: string,
+  nightsOnly?: boolean
+) => {
+  if (!from || !to) {
     return undefined;
   }
 
-  const flightLines = parseFlightLines(productOption.metaDatas);
-  const firstFlight = first(flightLines);
-  const lastFlight = last(flightLines);
+  try {
+    const fromDate = parseISO(from);
+    const toDate = parseISO(to);
+
+    const dayDifference = differenceInCalendarDays(toDate, fromDate);
+    const daysLabel =
+      dayDifference == 0
+        ? `1 ${translations.OPTIONS_FORM.DAY}`
+        : `${dayDifference + 1} ${translations.OPTIONS_FORM.DAYS}`;
 
-  const airlines = uniq(
-    flightLines?.map((flightLine) => flightLine.airlineDescription)
-  ).join(", ");
+    if (!dayDifference) return daysLabel;
+
+    const nightsLabel =
+      dayDifference == 1
+        ? `1 ${translations.OPTIONS_FORM.NIGHT}`
+        : `${dayDifference} ${translations.OPTIONS_FORM.NIGHTS}`;
+
+    return nightsOnly ? nightsLabel : `${daysLabel}, ${nightsLabel}`;
+  } catch {
+    return undefined;
+  }
+};
 
+export const getFlightText = (
+  firstFlight: FlightLine | undefined,
+  lastFlight: FlightLine | undefined
+): string => {
   return compact([
     firstFlight?.departureAirportDescription,
+    ` (${firstFlight?.departureAirportIata})`,
     firstFlight?.departureAirportDescription &&
       lastFlight?.arrivalAirportDescription &&
       " > ",
     lastFlight?.arrivalAirportDescription,
-    airlines && ` (${airlines})`,
+    ` (${lastFlight?.arrivalAirportIata})`,
   ]).join("");
 };
 
-const parseFlightLines = (
-  metaDatas: EntryLineMetaData[]
-): FlightLine[] | undefined => {
-  const flightLineMetaData = metaDatas?.find(
-    (metaData) => metaData.metaDataType === MetaDataType.flight
-  );
+export const getAirlines = (flightLines: FlightLine[] | undefined) => {
+  return uniq(
+    flightLines
+      ?.filter((x) => x.airlineDescription)
+      ?.map((flightLine) => flightLine.airlineDescription)
+  ).join(", ");
+};
 
-  if (!flightLineMetaData) {
+export const getFlightHours = (
+  firstFlight: FlightLine | undefined,
+  lastFlight: FlightLine | undefined
+): string => {
+  return compact([
+    getDateText(firstFlight?.departureDate),
+    " ",
+    firstFlight?.departureTime,
+    " > ",
+    getDateText(lastFlight?.arrivalDate),
+    " ",
+    lastFlight?.arrivalTime,
+  ]).join("");
+};
+
+export const parseFlightLines = (
+  metaDatas: BookingPackageFlightMetaData
+): FlightLine[] | undefined => {
+  if (!metaDatas.flightLines) {
     return undefined;
   }
 
-  const flightLines = JSON.parse(flightLineMetaData.configuration).flightLines;
-  const parsedFlightLines: FlightLine[] = flightLines.map(
-    (parsedFlightLine: any) => {
+  const parsedFlightLines: FlightLine[] = metaDatas.flightLines.map(
+    (parsedFlightLine) => {
       const departureDate = parseFlightLineDateTime(
         parsedFlightLine.departureDate,
         parsedFlightLine.departureTime
@@ -88,36 +128,38 @@ const parseFlightLines = (
         departureAirportDescription:
           parsedFlightLine.departureAirportDescription,
         departureDate: departureDate,
+        departureTime: parsedFlightLine.departureTime,
         arrivalAirportIata: parsedFlightLine.arrivalAirport,
         arrivalAirportDescription: parsedFlightLine.arrivalAirportDescription,
         arrivalDate: arrivalDate,
+        arrivalTime: parsedFlightLine.arrivalTime,
         airlineIata: parsedFlightLine.airline,
-        airlineDescription: parsedFlightLine.airlineDescription,
+        airlineDescription: parsedFlightLine.operatingAirlineDescription,
         airlineNumber: parsedFlightLine.number,
       };
     }
   );
 
-  return orderBy(parsedFlightLines, ["departureDate"], ["asc"]);
+  return orderBy(parsedFlightLines, "departureDate", "asc");
 };
 
 const parseFlightLineDateTime = (
-  date: string,
+  date: Date,
   time: string
 ): string | undefined => {
   try {
     // Parse date
-    const parsedDate = parseISO(date);
+    const parsedDate = new Date(date);
 
     // Parse time
     const parsedTimeHours = parseInt(time.substring(0, 2));
     const parsedTimeMinutes = parseInt(time.substring(3, 5));
 
-    if (parsedTimeHours && parsedTimeMinutes) {
+    if (!Number.isNaN(parsedTimeHours) && !Number.isNaN(parsedTimeMinutes)) {
       parsedDate.setUTCHours(parsedTimeHours, parsedTimeMinutes);
     }
 
-    return parsedDate.toISOString();
+    return parsedDate.toISOString().slice(0, -1);
   } catch {
     // Parsing failed
     return undefined;

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

@@ -1,75 +1,88 @@
-import { PriceDetail } from "@qite/tide-client";
-import React from "react";
+import React, { useState } from "react";
 import { formatPrice } from "../../utils/localization-util";
 import translations from "../../translations/translations.json";
-import { isEmpty } from "lodash";
+import { compact, isEmpty } from "lodash";
+import { buildClassName } from "../../utils/class-util";
+import ProductCard from "../../components/product-card";
+import {
+  BookingPackageFlight,
+  BookingPackageRoom,
+  BookingPriceDetail,
+} from "@qite/tide-client/build/types";
+import SidebarFlight from "./sidebar-flight";
+import { getDatePeriodText } from "./sidebar-util";
 
 interface SidebarProps {
-  depositText?: string;
+  productName: string;
+  thumbnailUrl?: string;
+  isLoading: boolean;
   travelersText?: string;
   startDateText?: string;
   endDateText?: string;
-  departureFlightText?: string;
-  returnFlightText?: string;
+  departureFlight?: BookingPackageFlight;
+  returnFlight?: BookingPackageFlight;
   basePrice?: number;
   totalPrice?: number;
   remainingAmountText?: string;
-  includedCosts?: PriceDetail[];
-  extraCosts?: PriceDetail[];
-  showDeposit: boolean;
-  showAccommodationInfo: boolean;
+  includedCosts?: BookingPriceDetail[];
+  extraCosts?: BookingPriceDetail[];
+  deposit?: number;
+  accommodations?: BookingPackageRoom[];
+  isOnRequest?: boolean;
   headerComponent?: JSX.Element;
   footerComponent?: JSX.Element;
+  loaderComponent?: JSX.Element;
 }
 
 const Sidebar: React.FC<SidebarProps> = ({
-  depositText,
+  productName,
+  thumbnailUrl,
+  isLoading,
   travelersText,
   startDateText,
   endDateText,
-  departureFlightText,
-  returnFlightText,
+  departureFlight,
+  returnFlight,
   basePrice,
   totalPrice,
-  remainingAmountText,
   includedCosts,
   extraCosts,
-  showDeposit,
-  showAccommodationInfo,
+  deposit,
+  accommodations,
+  isOnRequest,
   headerComponent,
   footerComponent,
+  loaderComponent,
 }) => {
+  const [active, setActive] = useState<boolean>(false);
+
   const canShowPriceBreakdownSection =
     Boolean(basePrice && basePrice > 0) ||
     !isEmpty(includedCosts) ||
     !isEmpty(extraCosts);
   const canShowTotalPriceSection = Boolean(totalPrice && totalPrice > 0);
 
+  const remainingAmount = (totalPrice ?? 0) - (deposit ?? 0);
+
+  const handleToggleClick = () => {
+    setActive(!active);
+  };
+
   return (
-    <div className="booking__sidebar">
+    <div
+      className={buildClassName([
+        "booking__sidebar",
+        active && "booking__sidebar--active",
+      ])}
+    >
       {headerComponent}
 
       <div className="booking__sidebar-frame">
-        <div className="booking__sidebar-heading" id="booking-sidebar__toggle">
-          {showDeposit && (
-            <h5 className="booking__sidebar-title">
-              {translations.SIDEBAR.SLIDE_DEPOSIT}
-              {depositText}
-            </h5>
-          )}
-
-          {!showDeposit && totalPrice !== undefined && totalPrice > 0 && (
-            <h5 className="booking__sidebar-title">
-              {translations.SIDEBAR.SLIDE_TOTAL_PRICE}
-              {formatPrice(totalPrice)}
-            </h5>
-          )}
-
-          <h5 className="booking__sidebar-title-withoutprice">
-            {translations.SIDEBAR.OVERVIEW}
-          </h5>
-        </div>
-
+        <ProductCard
+          productName={productName}
+          thumbnailUrl={thumbnailUrl}
+          handleToggleClick={handleToggleClick}
+        />
         <div className="pricing-summary">
           <div className="pricing-summary__region">
             <div className="pricing-summary__group">
@@ -89,7 +102,9 @@ const Sidebar: React.FC<SidebarProps> = ({
               {startDateText && (
                 <div className="pricing-summary__row">
                   <div className="pricing-summary__property">
-                    {translations.SIDEBAR.DEPARTURE}
+                    {startDateText && endDateText
+                      ? translations.SIDEBAR.DEPARTURE
+                      : translations.SIDEBAR.DEPARTURE_SINGLE}
                   </div>
                   <div className="pricing-summary__value">{startDateText}</div>
                 </div>
@@ -105,74 +120,92 @@ const Sidebar: React.FC<SidebarProps> = ({
               )}
             </div>
 
-            {departureFlightText && returnFlightText && (
-              <div className="pricing-summary__group">
-                <h6 className="pricing-summary__title">
-                  {translations.SIDEBAR.FLIGHT}
-                </h6>
-                <div className="pricing-summary__row">
-                  <div className="pricing-summary__property">
-                    {translations.SIDEBAR.DEPARTURE}
-                  </div>
-                  <div className="pricing-summary__value">
-                    {departureFlightText}
-                  </div>
-                </div>
-                <div className="pricing-summary__row">
-                  <div className="pricing-summary__property">
-                    {translations.SIDEBAR.ARRIVAL}
-                  </div>
-                  <div className="pricing-summary__value">
-                    {returnFlightText}
-                  </div>
-                </div>
-              </div>
+            {isLoading && loaderComponent}
+            {!isLoading && departureFlight && returnFlight && (
+              <>
+                <SidebarFlight
+                  title={translations.SIDEBAR.DEPARTURE_FLIGHT}
+                  flight={departureFlight}
+                />
+                <SidebarFlight
+                  title={translations.SIDEBAR.ARRIVAL_FLIGHT}
+                  flight={returnFlight}
+                />
+              </>
             )}
 
-            {showAccommodationInfo && (
+            {accommodations && (
               <div className="pricing-summary__group">
                 <h6 className="pricing-summary__title">
                   {translations.SIDEBAR.ACCOMMODATION}
                 </h6>
-                <div className="pricing-summary__row">
-                  <div className="pricing-summary__property">
-                    1x Family kamer
-                  </div>
-
-                  <div className="pricing-summary__value">&euro; 850</div>
-                </div>
-                <div className="pricing-summary__row">
-                  <div className="pricing-summary__property">
-                    2x Deluxe kamer
-                  </div>
-
-                  <div className="pricing-summary__value">&euro; 650</div>
-                </div>
+                {accommodations.map((accommodation) => {
+                  let option = accommodation.options.find((x) => x.isSelected);
+                  return (
+                    <div key={accommodation.index}>
+                      <div className="pricing-summary__row">
+                        <div className="pricing-summary__property">
+                          {option?.accommodationName}
+                          {isOnRequest
+                            ? ` (${translations.SIDEBAR.ON_REQUEST})`
+                            : ""}
+                          {option?.isOnRequest
+                            ? ` (${translations.SIDEBAR.ON_REQUEST})`
+                            : ""}
+                        </div>
+                        <div className="pricing-summary__value">
+                          {option?.price && formatPrice(option?.price)}
+                        </div>
+                      </div>
+                      <div className="pricing-summary__row">
+                        <div className="price-summarty__property">
+                          {option?.regimeName}
+                        </div>
+                        <div className="price-summary__value">
+                          {getDatePeriodText(option?.from, option?.to, true)}
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
               </div>
             )}
           </div>
 
-          {canShowPriceBreakdownSection && (
+          {!isLoading && canShowPriceBreakdownSection && (
             <div className="pricing-summary__region">
               {!isEmpty(includedCosts) && (
                 <div className="pricing-summary__group">
                   <h6 className="pricing-summary__title">
                     {translations.SIDEBAR.INCLUDED_COSTS}
                   </h6>
-                  {includedCosts?.map((priceDetail) => (
-                    <div
-                      className="pricing-summary__row"
-                      key={`${priceDetail.productCode}_${priceDetail.priceDescription}`}
+                  {includedCosts?.map((priceDetail, index) => (
+                    <React.Fragment
+                      key={compact([
+                        priceDetail.productCode,
+                        priceDetail.accommodationCode,
+                        index,
+                      ]).join("_")}
                     >
-                      <div className="pricing-summary__property">
-                        {priceDetail.productName} {priceDetail.priceDescription}
+                      <div className="pricing-summary__row">
+                        <div className="pricing-summary__property">
+                          {priceDetail.productName}
+                        </div>
+                        {priceDetail.showPrice && (
+                          <div className="pricing-summary__value">
+                            {formatPrice(
+                              priceDetail.price * priceDetail.amount
+                            )}
+                          </div>
+                        )}
                       </div>
-                      {priceDetail.showPrice && (
-                        <div className="pricing-summary__value">
-                          {formatPrice(priceDetail.price * priceDetail.amount)}
+                      <div className="pricing-summary__row">
+                        <div className="price-summary__property">
+                          {priceDetail.accommodationName ??
+                            priceDetail.accommodationCode}
                         </div>
-                      )}
-                    </div>
+                      </div>
+                    </React.Fragment>
                   ))}
                 </div>
               )}
@@ -195,27 +228,42 @@ const Sidebar: React.FC<SidebarProps> = ({
                   <h6 className="pricing-summary__title">
                     {translations.SIDEBAR.EXTRA_COSTS}
                   </h6>
-                  {extraCosts?.map((priceDetail) => (
-                    <div
-                      className="pricing-summary__row"
-                      key={`${priceDetail.productCode}_${priceDetail.priceDescription}`}
+                  {extraCosts?.map((priceDetail, index) => (
+                    <React.Fragment
+                      key={compact([
+                        priceDetail.productCode,
+                        priceDetail.accommodationCode,
+                        index,
+                      ]).join("_")}
                     >
-                      <div className="pricing-summary__property">
-                        {priceDetail.productName} {priceDetail.priceDescription}
+                      <div className="pricing-summary__row">
+                        <div className="pricing-summary__property">
+                          {priceDetail.productName}
+                        </div>
+                        {priceDetail.showPrice && (
+                          <div className="pricing-summary__value">
+                            {formatPrice(
+                              priceDetail.price * priceDetail.amount
+                            )}
+                          </div>
+                        )}
                       </div>
-                      <div className="pricing-summary__value">
-                        {formatPrice(priceDetail.price * priceDetail.amount)}
+                      <div className="pricing-summary__row">
+                        <div className="price-summary__property">
+                          {priceDetail.accommodationName ??
+                            priceDetail.accommodationCode}
+                        </div>
                       </div>
-                    </div>
+                    </React.Fragment>
                   ))}
                 </div>
               )}
             </div>
           )}
 
-          {canShowTotalPriceSection && (
+          {!isLoading && canShowTotalPriceSection && (
             <div className="pricing-summary__region pricing-summary__region--pricing">
-              {showDeposit ? (
+              {deposit ? (
                 <div className="pricing-summary__group">
                   {totalPrice !== undefined && totalPrice > 0 && (
                     <div className="pricing-summary__row pricing-summary__row--total-price">
@@ -242,7 +290,9 @@ const Sidebar: React.FC<SidebarProps> = ({
 
                     <div className="pricing-summary__value">
                       <div className="pricing">
-                        <div className="pricing__price">{depositText}</div>
+                        <div className="pricing__price">
+                          {formatPrice(deposit)}
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -252,7 +302,7 @@ const Sidebar: React.FC<SidebarProps> = ({
                         {translations.SIDEBAR.DEPOSIT_TEXT1}
                         <strong>{translations.SIDEBAR.DEPOSIT_TEXT2}</strong>
                         {translations.SIDEBAR.DEPOSIT_TEXT3}
-                        {remainingAmountText}
+                        {formatPrice(remainingAmount)}
                         {translations.SIDEBAR.DEPOSIT_TEXT4}
                         <strong>{translations.SIDEBAR.DEPOSIT_TEXT5}</strong>
                         {translations.SIDEBAR.DEPOSIT_TEXT6}

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

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

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

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

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

@@ -0,0 +1,35 @@
+import { BookingPackageFlight } from "@qite/tide-client/build/types";
+import React from "react";
+import translations from "../../translations/translations.json";
+import { getDateText, parseFlightLines } from "../sidebar/sidebar-util";
+
+interface SummaryFlightProps {
+  flight: BookingPackageFlight;
+  header: string;
+}
+
+const SummaryFlight: React.FC<SummaryFlightProps> = ({ flight, header }) => {
+  return (
+    <li>
+      <h6>{header}</h6>
+      {parseFlightLines(flight.flightMetaData)?.map((flightLine) => (
+        <p key={flightLine.departureAirportIata}>
+          {flightLine.departureAirportDescription} (
+          {flightLine.departureAirportIata}) &gt;{" "}
+          {flightLine.arrivalAirportDescription} (
+          {flightLine.arrivalAirportIata})
+          <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;