@qite/tide-booking-component 1.3.1 → 1.3.3

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

@@ -1,68 +1,68 @@
-import { BookingPackageFlight } from "@qite/tide-client/build/types";
-import { first, last } from "lodash";
-import React from "react";
-import { useSelector } from "react-redux";
-import { selectTranslations } from "../booking/selectors";
-import { getAirlines, getDateText, parseFlightLines } from "./sidebar-util";
-
-interface SidebarFlightProps {
-  title: string;
-  flight: BookingPackageFlight;
-}
-
-const SidebarFlight: React.FC<SidebarFlightProps> = ({ title, flight }) => {
-  const flightLines = parseFlightLines(flight.flightMetaData);
-  const firstFlight = first(flightLines);
-  const lastFlight = last(flightLines);
-  const translations = useSelector(selectTranslations);
-
-  return (
-    <div className="pricing-summary__group">
-      <h6 className="pricing-summary__title">{title}</h6>
-      <div className="pricing-summary__row">
-        <div className="pricing-summary__property">
-          {translations.SIDEBAR.FLIGHT_DEPARTURE}
-        </div>
-        <div className="pricing-summary__value pricing-summary__value--flight">
-          {firstFlight?.departureAirportDescription} (
-          {firstFlight?.departureAirportIata})<br />
-          {getDateText(firstFlight?.departureDate)} {firstFlight?.departureTime}
-        </div>
-      </div>
-
-      <div className="pricing-summary__row">
-        <div className="pricing-summary__property">
-          {translations.SIDEBAR.FLIGHT_ARRIVAL}
-        </div>
-        <div className="pricing-summary__value pricing-summary__value--flight">
-          {lastFlight?.arrivalAirportDescription} (
-          {lastFlight?.arrivalAirportIata})<br />
-          {getDateText(lastFlight?.arrivalDate)} {lastFlight?.arrivalTime}
-        </div>
-      </div>
-
-      <div className="pricing-summary__row">
-        <div className="pricing-summary__property">
-          {flight.flightMetaData.flightLines.length > 1 && (
-            <i>
-              {flight.flightMetaData.flightLines.length - 1}
-              {"x "}
-              {translations.SIDEBAR.CHANGES}
-            </i>
-          )}
-        </div>
-        <div className="pricing-summary__value">{getAirlines(flightLines)}</div>
-      </div>
-      {flight.flightMetaData.luggageIncluded && (
-        <div className="pricing-summary__row">
-          <div className="pricing-summary__property"></div>
-          <div className="pricing-summary__value">
-            {translations.SIDEBAR.LUGGAGE_INCLUDED}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default SidebarFlight;
+import { BookingPackageFlight } from "@qite/tide-client/build/types";
+import { first, last } from "lodash";
+import React from "react";
+import { useSelector } from "react-redux";
+import { selectTranslations } from "../booking/selectors";
+import { getAirlines, getDateText, parseFlightLines } from "./sidebar-util";
+
+interface SidebarFlightProps {
+  title: string;
+  flight: BookingPackageFlight;
+}
+
+const SidebarFlight: React.FC<SidebarFlightProps> = ({ title, flight }) => {
+  const flightLines = parseFlightLines(flight.flightMetaData);
+  const firstFlight = first(flightLines);
+  const lastFlight = last(flightLines);
+  const translations = useSelector(selectTranslations);
+
+  return (
+    <div className="pricing-summary__group">
+      <h6 className="pricing-summary__title">{title}</h6>
+      <div className="pricing-summary__row">
+        <div className="pricing-summary__property">
+          {translations.SIDEBAR.FLIGHT_DEPARTURE}
+        </div>
+        <div className="pricing-summary__value pricing-summary__value--flight">
+          {firstFlight?.departureAirportDescription} (
+          {firstFlight?.departureAirportIata})<br />
+          {getDateText(firstFlight?.departureDate)} {firstFlight?.departureTime}
+        </div>
+      </div>
+
+      <div className="pricing-summary__row">
+        <div className="pricing-summary__property">
+          {translations.SIDEBAR.FLIGHT_ARRIVAL}
+        </div>
+        <div className="pricing-summary__value pricing-summary__value--flight">
+          {lastFlight?.arrivalAirportDescription} (
+          {lastFlight?.arrivalAirportIata})<br />
+          {getDateText(lastFlight?.arrivalDate)} {lastFlight?.arrivalTime}
+        </div>
+      </div>
+
+      <div className="pricing-summary__row">
+        <div className="pricing-summary__property">
+          {flight.flightMetaData.flightLines.length > 1 && (
+            <i>
+              {flight.flightMetaData.flightLines.length - 1}
+              {"x "}
+              {translations.SIDEBAR.CHANGES}
+            </i>
+          )}
+        </div>
+        <div className="pricing-summary__value">{getAirlines(flightLines)}</div>
+      </div>
+      {flight.flightMetaData.luggageIncluded && (
+        <div className="pricing-summary__row">
+          <div className="pricing-summary__property"></div>
+          <div className="pricing-summary__value">
+            {translations.SIDEBAR.LUGGAGE_INCLUDED}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SidebarFlight;

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

@@ -1,177 +1,177 @@
-import { BookingPackageFlightMetaData } from "@qite/tide-client/build/types";
-import { differenceInCalendarDays, format, parseISO } from "date-fns";
-import { compact, orderBy, uniq } from "lodash";
-import { useSelector } from "react-redux";
-import { FlightLine } from "../../types";
-import { selectTranslations } from "../booking/selectors";
-
-export const getTravelersText = (
-  rooms: { adults: number[]; children: number[] }[]
-): string[] => {
-  const translations = useSelector(selectTranslations);
-
-  return rooms.map((r) =>
-    compact([
-      r.adults.length,
-      r.adults.length === 1 && ` ${translations.SIDEBAR.TRAVELERS_ADULT}`,
-      r.adults.length > 1 && ` ${translations.SIDEBAR.TRAVELERS_ADULTS}`,
-      r.adults && r.adults.length && r.children && r.children.length && ", ",
-      r.children.length,
-      r.children.length === 1 && ` ${translations.SIDEBAR.TRAVELERS_CHILD}`,
-      r.children.length > 1 && ` ${translations.SIDEBAR.TRAVELERS_CHILDREN}`,
-    ]).join("")
-  );
-};
-
-export const getDateText = (
-  date: string | undefined,
-  hideYear?: boolean
-): string | undefined => {
-  if (!date) {
-    // No date set
-    return undefined;
-  }
-
-  try {
-    return hideYear
-      ? format(parseISO(date), "dd/MM")
-      : format(parseISO(date), "dd/MM/yyyy");
-  } catch {
-    // Error while parsing date
-    return undefined;
-  }
-};
-
-export const getDatePeriodText = (
-  from?: string,
-  to?: string,
-  nightsOnly?: boolean
-) => {
-  if (!from || !to) {
-    return undefined;
-  }
-
-  const translations = useSelector(selectTranslations);
-
-  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}`;
-
-    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,
-    ` (${lastFlight?.arrivalAirportIata})`,
-  ]).join("");
-};
-
-export const getAirlines = (flightLines: FlightLine[] | undefined) => {
-  return uniq(
-    flightLines
-      ?.filter((x) => x.airlineDescription)
-      ?.map((flightLine) => flightLine.airlineDescription)
-  ).join(", ");
-};
-
-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 parsedFlightLines: FlightLine[] = metaDatas.flightLines.map(
-    (parsedFlightLine) => {
-      const departureDate = parseFlightLineDateTime(
-        parsedFlightLine.departureDate,
-        parsedFlightLine.departureTime
-      );
-      const arrivalDate = parseFlightLineDateTime(
-        parsedFlightLine.arrivalDate,
-        parsedFlightLine.arrivalTime
-      );
-
-      return <FlightLine>{
-        departureAirportIata: parsedFlightLine.departureAirport,
-        departureAirportDescription:
-          parsedFlightLine.departureAirportDescription,
-        departureDate: departureDate,
-        departureTime: parsedFlightLine.departureTime,
-        arrivalAirportIata: parsedFlightLine.arrivalAirport,
-        arrivalAirportDescription: parsedFlightLine.arrivalAirportDescription,
-        arrivalDate: arrivalDate,
-        arrivalTime: parsedFlightLine.arrivalTime,
-        airlineIata: parsedFlightLine.airline,
-        airlineDescription: parsedFlightLine.operatingAirlineDescription,
-        airlineNumber: parsedFlightLine.number,
-        travelClass: parsedFlightLine.travelClass,
-      };
-    }
-  );
-
-  return orderBy(parsedFlightLines, "departureDate", "asc");
-};
-
-const parseFlightLineDateTime = (
-  date: string,
-  time: string
-): string | undefined => {
-  try {
-    // Parse date
-    const parsedDate = parseISO(date);
-
-    // Parse time
-    const parsedTimeHours = parseInt(time.substring(0, 2));
-    const parsedTimeMinutes = parseInt(time.substring(3, 5));
-
-    if (!Number.isNaN(parsedTimeHours) && !Number.isNaN(parsedTimeMinutes)) {
-      parsedDate.setUTCHours(parsedTimeHours, parsedTimeMinutes);
-    }
-
-    return parsedDate.toISOString().slice(0, -1);
-  } catch {
-    // Parsing failed
-    return undefined;
-  }
-};
+import { BookingPackageFlightMetaData } from "@qite/tide-client/build/types";
+import { differenceInCalendarDays, format, parseISO } from "date-fns";
+import { compact, orderBy, uniq } from "lodash";
+import { useSelector } from "react-redux";
+import { FlightLine } from "../../types";
+import { selectTranslations } from "../booking/selectors";
+
+export const getTravelersText = (
+  rooms: { adults: number[]; children: number[] }[]
+): string[] => {
+  const translations = useSelector(selectTranslations);
+
+  return rooms.map((r) =>
+    compact([
+      r.adults.length,
+      r.adults.length === 1 && ` ${translations.SIDEBAR.TRAVELERS_ADULT}`,
+      r.adults.length > 1 && ` ${translations.SIDEBAR.TRAVELERS_ADULTS}`,
+      r.adults && r.adults.length && r.children && r.children.length && ", ",
+      r.children.length,
+      r.children.length === 1 && ` ${translations.SIDEBAR.TRAVELERS_CHILD}`,
+      r.children.length > 1 && ` ${translations.SIDEBAR.TRAVELERS_CHILDREN}`,
+    ]).join("")
+  );
+};
+
+export const getDateText = (
+  date: string | undefined,
+  hideYear?: boolean
+): string | undefined => {
+  if (!date) {
+    // No date set
+    return undefined;
+  }
+
+  try {
+    return hideYear
+      ? format(parseISO(date), "dd/MM")
+      : format(parseISO(date), "dd/MM/yyyy");
+  } catch {
+    // Error while parsing date
+    return undefined;
+  }
+};
+
+export const getDatePeriodText = (
+  from?: string,
+  to?: string,
+  nightsOnly?: boolean
+) => {
+  if (!from || !to) {
+    return undefined;
+  }
+
+  const translations = useSelector(selectTranslations);
+
+  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}`;
+
+    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,
+    ` (${lastFlight?.arrivalAirportIata})`,
+  ]).join("");
+};
+
+export const getAirlines = (flightLines: FlightLine[] | undefined) => {
+  return uniq(
+    flightLines
+      ?.filter((x) => x.airlineDescription)
+      ?.map((flightLine) => flightLine.airlineDescription)
+  ).join(", ");
+};
+
+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 parsedFlightLines: FlightLine[] = metaDatas.flightLines.map(
+    (parsedFlightLine) => {
+      const departureDate = parseFlightLineDateTime(
+        parsedFlightLine.departureDate,
+        parsedFlightLine.departureTime
+      );
+      const arrivalDate = parseFlightLineDateTime(
+        parsedFlightLine.arrivalDate,
+        parsedFlightLine.arrivalTime
+      );
+
+      return <FlightLine>{
+        departureAirportIata: parsedFlightLine.departureAirport,
+        departureAirportDescription:
+          parsedFlightLine.departureAirportDescription,
+        departureDate: departureDate,
+        departureTime: parsedFlightLine.departureTime,
+        arrivalAirportIata: parsedFlightLine.arrivalAirport,
+        arrivalAirportDescription: parsedFlightLine.arrivalAirportDescription,
+        arrivalDate: arrivalDate,
+        arrivalTime: parsedFlightLine.arrivalTime,
+        airlineIata: parsedFlightLine.airline,
+        airlineDescription: parsedFlightLine.operatingAirlineDescription,
+        airlineNumber: parsedFlightLine.number,
+        travelClass: parsedFlightLine.travelClass,
+      };
+    }
+  );
+
+  return orderBy(parsedFlightLines, "departureDate", "asc");
+};
+
+const parseFlightLineDateTime = (
+  date: string,
+  time: string
+): string | undefined => {
+  try {
+    // Parse date
+    const parsedDate = parseISO(date);
+
+    // Parse time
+    const parsedTimeHours = parseInt(time.substring(0, 2));
+    const parsedTimeMinutes = parseInt(time.substring(3, 5));
+
+    if (!Number.isNaN(parsedTimeHours) && !Number.isNaN(parsedTimeMinutes)) {
+      parsedDate.setUTCHours(parsedTimeHours, parsedTimeMinutes);
+    }
+
+    return parsedDate.toISOString().slice(0, -1);
+  } catch {
+    // Parsing failed
+    return undefined;
+  }
+};