@qite/tide-booking-component 1.2.4 → 1.2.5

package/src/booking-product/components/product.tsx

@@ -1,281 +1,314 @@
-import JsonURL from "@jsonurl/jsonurl";
-import { BookingPackageDetailsRequest, BookingPackagePax, BookingPackageRequest, BookingPackageRequestRoom } from "@qite/tide-client/build/types";
-import { addDays, addMonths, format, formatISO } from "date-fns";
-import { omit } from "lodash";
-import React, { useContext, useEffect, useState } from "react";
-import { ApiSettingsState } from "../../shared/types";
-import { getTranslations } from "../../shared/utils/localization-util";
-import { getDateAsDateFromParams, getRoomsFromParams } from "../../shared/utils/query-string-util";
-import SettingsContext from "../settings-context";
-import { DateRange, ProductRoom } from "../types";
-import packageApi from "../utils/api";
-import { formatPriceByMode } from "../utils/price";
-import Dates from "./dates";
-import Footer from "./footer";
-import Header from "./header";
-import Rooms from "./rooms";
-
-interface ProductProps {
-  productCode: string;
-  productName: string;
-  duration?: number;
-  rating?: number;
-}
-
-const Product: React.FC<ProductProps> = ({
-  productCode,
-  productName,
-  duration,
-  rating
-}) => {
-  const {
-    apiKey,
-    apiUrl,
-    officeId,
-    agentId,
-    catalogueId,
-    includeFlights,
-    language,
-    basePath,
-    priceMode,
-    addProductToQuery,
-    isOffer
-  } = useContext(SettingsContext);
-  const translations = getTranslations(language);
-
-  const [loaded, setLoaded] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [roomsIsDisabled, setRoomsIsDisabled] = useState<boolean>(true);
-  const [price, setPrice] = useState<number>();
-  const [hasFlight, setHasFlight] = useState<boolean>(false);
-  const [hasTransfer, setHasTransfer] = useState<boolean>(false);
-  const [rooms, setRooms] = useState<ProductRoom[]>([{ adults: 2, children: 0, childAges: [] }]);
-  const [dateRange, setDateRange] = useState<DateRange>();
-  const [packageProductName, setPackageProductName] = useState<string>(productName);
-
-  const fetchPackage = async (signal: AbortSignal) => {
-    if (
-      loaded &&
-      productCode &&
-      dateRange?.fromDate &&
-      dateRange?.toDate &&
-      rooms
-    ) {
-
-      const apiSettingsState = (apiKey && apiUrl) ? {
-        apiKey: apiKey,
-        apiUrl: apiUrl
-      } as ApiSettingsState : undefined;
-
-      const startDate = formatISO(dateRange?.fromDate, { representation: "date" }) + "T00:00:00Z";
-      const endDate = formatISO(dateRange?.toDate, { representation: "date" }) + "T00:00:00Z";
-
-      const requestRooms = rooms.map((room, i) => {
-        const requestRoom = {
-          index: i,
-          pax: []
-        } as BookingPackageRequestRoom;
-
-        for (var a = 0; a < room.adults; a++) {
-          requestRoom.pax.push({
-            age: 30,
-          } as BookingPackagePax);
-        }
-
-        for (var c = 0; c < room.children; c++) {
-          requestRoom.pax.push({
-            age: room.childAges[c],
-          } as BookingPackagePax);
-        }
-
-        return requestRoom;
-      });
-
-      const request = {
-        officeId: officeId,
-        agentId: agentId,
-        payload: {
-          searchType: 0,
-          catalogueId: catalogueId,
-          productCode: productCode,
-          fromDate: startDate,
-          toDate: endDate,
-          includeFlights: includeFlights,
-          rooms: requestRooms,
-        } as BookingPackageDetailsRequest,
-      } as BookingPackageRequest<BookingPackageDetailsRequest>;
-
-      setIsLoading(true);
-      const response = await packageApi.fetchDetails(request, signal, language, apiSettingsState);
-      if (!response.errorCode && response.payload) {
-        const selectedOption = response.payload.options.find(x => x.isSelected);
-        if (selectedOption) {
-          const hasFlight = selectedOption.includedServiceTypes.some(x => x === 7);
-          const hasTranfer = selectedOption.includedServiceTypes.some(x => x === 13);
-
-          setPrice(selectedOption.price);
-          setHasFlight(hasFlight);
-          setHasTransfer(hasTranfer);
-
-          if (!productName) {
-            setPackageProductName(selectedOption.name);
-          }
-        }
-      } else {
-        setPrice(undefined);
-        setHasFlight(false);
-        setHasTransfer(false);
-      }
-
-      setIsLoading(false);
-    }
-  }
-
-  const handleBookClick = () => {
-    const params: Record<string, string> = {};
-
-    if (rooms) {
-      const serialized = JsonURL.stringify(
-        rooms.map((room) => omit(room, ["children"])),
-        { AQF: true }
-      );
-
-      if (serialized) {
-        params["rooms"] = serialized;
-      }
-    }
-
-    if (dateRange?.fromDate) {
-      params["startDate"] = format(dateRange.fromDate, "yyyy-MM-dd");
-    }
-
-    if (dateRange?.toDate) {
-      params["endDate"] = format(dateRange.toDate, "yyyy-MM-dd");
-    }
-
-    params["catalog"] = catalogueId.toString();
-
-    if (addProductToQuery) {
-      params["productCode"] = productCode;
-      params["productName"] = encodeURI(packageProductName)!;
-    }
-
-    const path = window.location.pathname;
-    const paramString = Object.keys(params)
-      .map((key) => `${key}=${params[key]}`)
-      .join("&");
-
-    window.location.href = basePath.startsWith('/')
-      ? `${window.location.protocol}//${window.location.host}${basePath}?${paramString}`
-      : `${path}${path.endsWith("/") ? "" : "/"}${basePath}?${paramString}`
-  }
-
-  const handleRoomChange = (rooms: ProductRoom[]) => {
-    setRooms(rooms);
-  }
-
-  const handleDateChange = (value: DateRange) => {
-    setDateRange(value);
-  }
-
-  useEffect(() => {
-    const controller = new AbortController();
-    const { signal } = controller;
-
-    (async () => {
-      fetchPackage(signal);
-    })();
-    return () => {
-      controller.abort();
-    };
-  }, [
-    dateRange?.fromDate?.valueOf(),
-    dateRange?.toDate?.valueOf(),
-    JSON.stringify(rooms)
-  ]);
-
-  useEffect(() => {
-    const params = new URLSearchParams(location.search);
-    const rooms = getRoomsFromParams(params, "rooms");
-    const from = getDateAsDateFromParams(params, "from");
-    const to = getDateAsDateFromParams(params, "to");
-
-    if (rooms) {
-      setRooms(rooms);
-    }
-
-    if (from && duration) {
-      const durationTo = new Date(
-        Date.UTC(from.getFullYear(), from.getMonth(), from.getDate() + duration)
-      );
-
-      setDateRange({ fromDate: from, toDate: durationTo });
-    } else if (from && to) {
-      setDateRange({ fromDate: from, toDate: to });
-    } else if (duration) {
-      const now = new Date();
-
-      const durationFrom = new Date(Date.UTC(now.getFullYear(), now.getMonth() + 3, now.getDate()));
-      const durationTo = new Date(
-        Date.UTC(
-          durationFrom.getFullYear(),
-          durationFrom.getMonth(),
-          durationFrom.getDate() + duration
-        )
-      );
-
-      setDateRange({ fromDate: durationFrom, toDate: durationTo });
-    } else {
-      const now = new Date();
-      const startDate = addMonths(now, 1);
-      const endDate = addDays(startDate, 7);
-
-      setDateRange({ fromDate: startDate, toDate: endDate });
-    }
-
-    setLoaded(true);
-  }, [location]);
-
-  const personCount = rooms.reduce((s, r) => s + r.adults + r.children, 0);
-  const durationCount = 0;
-  const priceText = formatPriceByMode(
-    price,
-    priceMode,
-    personCount,
-    durationCount,
-    translations.PRODUCT.PER_PERSON,
-    translations.PRODUCT.PER_NIGHT,
-    translations.PRODUCT.PER_PERSON_PER_NIGHT
-  );
-
-  return (
-    <div className="booking-product">
-      <Header
-        name={packageProductName}
-        rating={rating}
-        priceText={priceText}
-        isLoading={isLoading}
-        hasFlight={hasFlight}
-        hasTransfer={hasTransfer} />
-      <div className="booking-product__body">
-        <Rooms
-          rooms={rooms}
-          isDisabled={roomsIsDisabled}
-          setIsDisabled={setRoomsIsDisabled}
-          onChange={handleRoomChange} />
-        <Dates
-          value={dateRange}
-          duration={duration}
-          onChange={handleDateChange} />
-      </div>
-      <Footer
-        priceText={priceText}
-        isLoading={isLoading}
-        isOffer={isOffer}
-        roomsIsDisabled={roomsIsDisabled}
-        handleBookClick={handleBookClick} />
-    </div>
-  );
-}
-
-export default Product;
+import JsonURL from "@jsonurl/jsonurl";
+import {
+  BookingPackageDetailsRequest,
+  BookingPackagePax,
+  BookingPackageRequest,
+  BookingPackageRequestRoom,
+} from "@qite/tide-client/build/types";
+import { addDays, addMonths, format, formatISO } from "date-fns";
+import { omit } from "lodash";
+import React, { useContext, useEffect, useState } from "react";
+import { ApiSettingsState } from "../../shared/types";
+import { getTranslations } from "../../shared/utils/localization-util";
+import {
+  getDateAsDateFromParams,
+  getRoomsFromParams,
+} from "../../shared/utils/query-string-util";
+import SettingsContext from "../settings-context";
+import { DateRange, ProductRoom } from "../types";
+import packageApi from "../utils/api";
+import { formatPriceByMode } from "../utils/price";
+import Dates from "./dates";
+import Footer from "./footer";
+import Header from "./header";
+import Rooms from "./rooms";
+
+interface ProductProps {
+  productCode: string;
+  productName: string;
+  duration?: number;
+  rating?: number;
+}
+
+const Product: React.FC<ProductProps> = ({
+  productCode,
+  productName,
+  duration,
+  rating,
+}) => {
+  const {
+    apiKey,
+    apiUrl,
+    officeId,
+    agentId,
+    catalogueId,
+    includeFlights,
+    language,
+    basePath,
+    priceMode,
+    addProductToQuery,
+    isOffer,
+  } = useContext(SettingsContext);
+  const translations = getTranslations(language);
+
+  const [loaded, setLoaded] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [roomsIsDisabled, setRoomsIsDisabled] = useState<boolean>(true);
+  const [price, setPrice] = useState<number>();
+  const [hasFlight, setHasFlight] = useState<boolean>(false);
+  const [hasTransfer, setHasTransfer] = useState<boolean>(false);
+  const [rooms, setRooms] = useState<ProductRoom[]>([
+    { adults: 2, children: 0, childAges: [] },
+  ]);
+  const [dateRange, setDateRange] = useState<DateRange>();
+  const [packageProductName, setPackageProductName] =
+    useState<string>(productName);
+
+  const fetchPackage = async (signal: AbortSignal) => {
+    if (
+      loaded &&
+      productCode &&
+      dateRange?.fromDate &&
+      dateRange?.toDate &&
+      rooms
+    ) {
+      const apiSettingsState =
+        apiKey && apiUrl
+          ? ({
+              apiKey: apiKey,
+              apiUrl: apiUrl,
+            } as ApiSettingsState)
+          : undefined;
+
+      const startDate =
+        formatISO(dateRange?.fromDate, { representation: "date" }) +
+        "T00:00:00Z";
+      const endDate =
+        formatISO(dateRange?.toDate, { representation: "date" }) + "T00:00:00Z";
+
+      const requestRooms = rooms.map((room, i) => {
+        const requestRoom = {
+          index: i,
+          pax: [],
+        } as BookingPackageRequestRoom;
+
+        for (var a = 0; a < room.adults; a++) {
+          requestRoom.pax.push({
+            age: 30,
+          } as BookingPackagePax);
+        }
+
+        for (var c = 0; c < room.children; c++) {
+          requestRoom.pax.push({
+            age: room.childAges[c],
+          } as BookingPackagePax);
+        }
+
+        return requestRoom;
+      });
+
+      const request = {
+        officeId: officeId,
+        agentId: agentId,
+        payload: {
+          searchType: 0,
+          catalogueId: catalogueId,
+          productCode: productCode,
+          fromDate: startDate,
+          toDate: endDate,
+          includeFlights: includeFlights,
+          rooms: requestRooms,
+        } as BookingPackageDetailsRequest,
+      } as BookingPackageRequest<BookingPackageDetailsRequest>;
+
+      setIsLoading(true);
+      const response = await packageApi.fetchDetails(
+        request,
+        signal,
+        language,
+        apiSettingsState
+      );
+      if (!response.errorCode && response.payload) {
+        const selectedOption = response.payload.options.find(
+          (x) => x.isSelected
+        );
+        if (selectedOption) {
+          const hasFlight = selectedOption.includedServiceTypes.some(
+            (x) => x === 7
+          );
+          const hasTranfer = selectedOption.includedServiceTypes.some(
+            (x) => x === 13
+          );
+
+          setPrice(selectedOption.price);
+          setHasFlight(hasFlight);
+          setHasTransfer(hasTranfer);
+
+          if (!productName) {
+            setPackageProductName(selectedOption.name);
+          }
+        }
+      } else {
+        setPrice(undefined);
+        setHasFlight(false);
+        setHasTransfer(false);
+      }
+
+      setIsLoading(false);
+    }
+  };
+
+  const handleBookClick = () => {
+    const params: Record<string, string> = {};
+
+    if (rooms) {
+      const serialized = JsonURL.stringify(
+        rooms.map((room) => omit(room, ["children"])),
+        { AQF: true }
+      );
+
+      if (serialized) {
+        params["rooms"] = serialized;
+      }
+    }
+
+    if (dateRange?.fromDate) {
+      params["startDate"] = format(dateRange.fromDate, "yyyy-MM-dd");
+    }
+
+    if (dateRange?.toDate) {
+      params["endDate"] = format(dateRange.toDate, "yyyy-MM-dd");
+    }
+
+    params["catalog"] = catalogueId.toString();
+
+    if (addProductToQuery) {
+      params["productCode"] = productCode;
+      params["productName"] = encodeURI(packageProductName)!;
+    }
+
+    const path = window.location.pathname;
+    const paramString = Object.keys(params)
+      .map((key) => `${key}=${params[key]}`)
+      .join("&");
+
+    window.location.href = basePath.startsWith("/")
+      ? `${window.location.protocol}//${window.location.host}${basePath}?${paramString}`
+      : `${path}${path.endsWith("/") ? "" : "/"}${basePath}?${paramString}`;
+  };
+
+  const handleRoomChange = (rooms: ProductRoom[]) => {
+    setRooms(rooms);
+  };
+
+  const handleDateChange = (value: DateRange) => {
+    setDateRange(value);
+  };
+
+  useEffect(() => {
+    const controller = new AbortController();
+    const { signal } = controller;
+
+    (async () => {
+      fetchPackage(signal);
+    })();
+    return () => {
+      controller.abort();
+    };
+  }, [
+    dateRange?.fromDate?.valueOf(),
+    dateRange?.toDate?.valueOf(),
+    JSON.stringify(rooms),
+  ]);
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const rooms = getRoomsFromParams(params, "rooms");
+    const from = getDateAsDateFromParams(params, "from");
+    const to = getDateAsDateFromParams(params, "to");
+
+    if (rooms) {
+      setRooms(rooms);
+    }
+
+    if (from && duration) {
+      const durationTo = new Date(
+        Date.UTC(from.getFullYear(), from.getMonth(), from.getDate() + duration)
+      );
+
+      setDateRange({ fromDate: from, toDate: durationTo });
+    } else if (from && to) {
+      setDateRange({ fromDate: from, toDate: to });
+    } else if (duration) {
+      const now = new Date();
+
+      const durationFrom = new Date(
+        Date.UTC(now.getFullYear(), now.getMonth() + 3, now.getDate())
+      );
+      const durationTo = new Date(
+        Date.UTC(
+          durationFrom.getFullYear(),
+          durationFrom.getMonth(),
+          durationFrom.getDate() + duration
+        )
+      );
+
+      setDateRange({ fromDate: durationFrom, toDate: durationTo });
+    } else {
+      const now = new Date();
+      const startDate = addMonths(now, 1);
+      const endDate = addDays(startDate, 7);
+
+      setDateRange({ fromDate: startDate, toDate: endDate });
+    }
+
+    setLoaded(true);
+  }, [location]);
+
+  const personCount = rooms.reduce((s, r) => s + r.adults + r.children, 0);
+  const durationCount = 0;
+  const priceText = formatPriceByMode(
+    price,
+    priceMode,
+    personCount,
+    durationCount,
+    translations.PRODUCT.PER_PERSON,
+    translations.PRODUCT.PER_NIGHT,
+    translations.PRODUCT.PER_PERSON_PER_NIGHT
+  );
+
+  return (
+    <div className="booking-product">
+      <Header
+        name={packageProductName}
+        rating={rating}
+        priceText={priceText}
+        isLoading={isLoading}
+        hasFlight={hasFlight}
+        hasTransfer={hasTransfer}
+      />
+      <div className="booking-product__body">
+        <Rooms
+          rooms={rooms}
+          isDisabled={roomsIsDisabled}
+          setIsDisabled={setRoomsIsDisabled}
+          onChange={handleRoomChange}
+        />
+        <Dates
+          value={dateRange}
+          duration={duration}
+          onChange={handleDateChange}
+        />
+      </div>
+      <Footer
+        priceText={priceText}
+        isLoading={isLoading}
+        isOffer={isOffer}
+        roomsIsDisabled={roomsIsDisabled}
+        handleBookClick={handleBookClick}
+      />
+    </div>
+  );
+};
+
+export default Product;

package/src/booking-product/components/rating.tsx

@@ -1,21 +1,21 @@
-import React from "react";
-import { clamp, range } from "lodash";
-import Icon from "./icon";
-
-interface RatingProps {
-  rating: number;
-}
-
-const Rating: React.FC<RatingProps> = ({ rating }) => {
-  const clampedRating = clamp(rating, 0, 5);
-  return (
-    <div className="rating">
-      {range(0, Math.floor(clampedRating)).map((i) => (
-        <Icon name="ui-star" key={`rating-star-${i}`} width={25} height={25} />
-      ))}
-      {rating % 1 > 0 && <Icon name="ui-halfstar" width={25} height={25} />}
-    </div>
-  );
-};
-
-export default Rating;
+import React from "react";
+import { clamp, range } from "lodash";
+import Icon from "./icon";
+
+interface RatingProps {
+  rating: number;
+}
+
+const Rating: React.FC<RatingProps> = ({ rating }) => {
+  const clampedRating = clamp(rating, 0, 5);
+  return (
+    <div className="rating">
+      {range(0, Math.floor(clampedRating)).map((i) => (
+        <Icon name="ui-star" key={`rating-star-${i}`} width={25} height={25} />
+      ))}
+      {rating % 1 > 0 && <Icon name="ui-halfstar" width={25} height={25} />}
+    </div>
+  );
+};
+
+export default Rating;