@qite/tide-booking-component 1.2.4 → 1.2.5

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

@@ -1,180 +1,195 @@
-import { range } from "lodash";
-import React, { useContext, useState } from "react";
-import { buildClassName } from "../../shared/utils/class-util";
-import { getTranslations } from "../../shared/utils/localization-util";
-import SettingsContext from "../settings-context";
-import { ProductRoom } from "../types";
-import AgeSelect from "./age-select";
-import AmountInput from "./amount-input";
-import Icon from "./icon";
-
-interface RoomsProps {
-  rooms: ProductRoom[];
-  isDisabled: boolean,
-  setIsDisabled: (isOpen: boolean) => void;
-  onChange: (rooms: ProductRoom[]) => void;
-}
-
-const Rooms: React.FC<RoomsProps> = ({
-  rooms,
-  isDisabled,
-  setIsDisabled,
-  onChange,
-}) => {
-
-  const [isTouched, setIsTouched] = useState<boolean>(false);
-  const [currentRooms, setRoomState] = useState<ProductRoom[]>(rooms);
-
-  const {
-    language,
-  } = useContext(SettingsContext);
-  const translations = getTranslations(language);
-
-  const handleCloseClick = () => {
-    setIsDisabled(true);
-    if (isTouched) onChange(currentRooms);
-  }
-
-  return (
-    <div className="booking-product__rooms">
-      <div className="booking-product__rooms-title">
-        <Icon name="ui-user" width={25} height={25} />{translations.PRODUCT.WHO_YOU_TRAVELING_WITH}
-      </div>
-      <div className="booking-product__rooms__container">
-        <div className="booking-product__rooms__wrapper">
-          <div className="booking-product__rooms__header">
-            <div className="booking-product__rooms__heading">{translations.SHARED.ROOMS}</div>
-            <div className="booking-product__rooms__actions">
-              <AmountInput
-                label={translations.PRODUCT.NUMBER_OF_ROOMS}
-                value={currentRooms.length}
-                disabled={isDisabled}
-                min={1}
-                onChange={(value) => {
-                  setRoomState(range(0, value).map(
-                    (roomIndex) => currentRooms[roomIndex] ?? { adults: 2, children: 0, childAges: [] }
-                  ));
-
-                  setIsTouched(true);
-                }}
-              />
-            </div>
-          </div>
-          <div className="booking-product__rooms-body">
-            {currentRooms.map((room, roomIndex) => (
-              <div className="booking-product__room" key={roomIndex}>
-                <div className="booking-product__room__header">
-                  <h3 className="booking-product__room__heading">
-                    {translations.SHARED.ROOM + " " + (roomIndex + 1)}
-                  </h3>
-                  <div className="booking-product__room__actions">
-                    <AmountInput
-                      label={translations.SHARED.ADULTS}
-                      value={room.adults}
-                      disabled={isDisabled}
-                      min={1}
-                      onChange={(value) => {
-                        setRoomState(
-                          currentRooms.map((room, i) =>
-                            i === roomIndex ? { ...room, adults: value } : room
-                          )
-                        );
-
-                        setIsTouched(true);
-                      }}
-                    />
-                    <AmountInput
-                      label={translations.SHARED.CHILDREN}
-                      value={room.children}
-                      disabled={isDisabled}
-                      onChange={(value) => {
-                        setRoomState(
-                          currentRooms.map((room, i) =>
-                            i === roomIndex
-                              ? {
-                                ...room,
-                                children: value,
-                                childAges: range(0, value).map(
-                                  (childIndex) => room.childAges[childIndex] ?? 0
-                                ),
-                              }
-                              : room
-                          )
-                        );
-
-                        setIsTouched(true);
-                      }}
-                    />
-                  </div>
-                </div>
-                {room.children > 0 && (
-                  <div className="booking-product__room-children">
-                    <label className="booking-product__room-children-label">{translations.PRODUCT.AGE_BY_DEPARTURE_DATE}</label>
-                    <div className="booking-product__room-children-ages">
-                      {range(0, room.children).map((childIndex) => (
-                        <AgeSelect
-                          key={childIndex}
-                          value={room.childAges[childIndex]}
-                          disabled={isDisabled}
-                          onChange={(value) => {
-                            setRoomState(
-                              currentRooms.map((room, selectorRoomIndex) =>
-                                roomIndex === selectorRoomIndex
-                                  ? {
-                                    ...room,
-                                    childAges: room.childAges
-                                      .map((age, i) => (childIndex === i ? value : age))
-                                      .sort((a, b) => b - a),
-                                  }
-                                  : room
-                              )
-                            );
-
-                            setIsTouched(true);
-                          }}
-                        />
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-        <div className="booking-product__rooms-footer">
-          {isDisabled
-            ? (
-              <button
-                type="button"
-                className={buildClassName(["cta--secondary", "cta--add"])}
-                title={translations.PRODUCT.EDIT}
-                onClick={() => {
-                  setIsDisabled(false);
-                  setIsTouched(false);
-                }}
-              >
-                <span>
-                  <Icon name="ui-pencil" width={25} height={25} />
-                  {translations.PRODUCT.EDIT}
-                </span>
-              </button>)
-            : (
-              <button
-                type="button"
-                className={buildClassName(["cta", (isTouched ? "cta--secondary" : "cta--secondary"), "cta--add"])}
-                title={translations.PRODUCT.APPLY}
-                onClick={handleCloseClick}
-              >
-                <span>
-                  <Icon name="ui-check"/>
-                  {translations.PRODUCT.APPLY}
-                </span>
-              </button>
-            )}
-        </div>
-      </div>
-    </div >
-  );
-}
-
-export default Rooms;
+import { range } from "lodash";
+import React, { useContext, useState } from "react";
+import { buildClassName } from "../../shared/utils/class-util";
+import { getTranslations } from "../../shared/utils/localization-util";
+import SettingsContext from "../settings-context";
+import { ProductRoom } from "../types";
+import AgeSelect from "./age-select";
+import AmountInput from "./amount-input";
+import Icon from "./icon";
+
+interface RoomsProps {
+  rooms: ProductRoom[];
+  isDisabled: boolean;
+  setIsDisabled: (isOpen: boolean) => void;
+  onChange: (rooms: ProductRoom[]) => void;
+}
+
+const Rooms: React.FC<RoomsProps> = ({
+  rooms,
+  isDisabled,
+  setIsDisabled,
+  onChange,
+}) => {
+  const [isTouched, setIsTouched] = useState<boolean>(false);
+  const [currentRooms, setRoomState] = useState<ProductRoom[]>(rooms);
+
+  const { language } = useContext(SettingsContext);
+  const translations = getTranslations(language);
+
+  const handleCloseClick = () => {
+    setIsDisabled(true);
+    if (isTouched) onChange(currentRooms);
+  };
+
+  return (
+    <div className="booking-product__rooms">
+      <div className="booking-product__rooms-title">
+        <Icon name="ui-user" width={25} height={25} />
+        {translations.PRODUCT.WHO_YOU_TRAVELING_WITH}
+      </div>
+      <div className="booking-product__rooms__container">
+        <div className="booking-product__rooms__wrapper">
+          <div className="booking-product__rooms__header">
+            <div className="booking-product__rooms__heading">
+              {translations.SHARED.ROOMS}
+            </div>
+            <div className="booking-product__rooms__actions">
+              <AmountInput
+                label={translations.PRODUCT.NUMBER_OF_ROOMS}
+                value={currentRooms.length}
+                disabled={isDisabled}
+                min={1}
+                onChange={(value) => {
+                  setRoomState(
+                    range(0, value).map(
+                      (roomIndex) =>
+                        currentRooms[roomIndex] ?? {
+                          adults: 2,
+                          children: 0,
+                          childAges: [],
+                        }
+                    )
+                  );
+
+                  setIsTouched(true);
+                }}
+              />
+            </div>
+          </div>
+          <div className="booking-product__rooms-body">
+            {currentRooms.map((room, roomIndex) => (
+              <div className="booking-product__room" key={roomIndex}>
+                <div className="booking-product__room__header">
+                  <h3 className="booking-product__room__heading">
+                    {translations.SHARED.ROOM + " " + (roomIndex + 1)}
+                  </h3>
+                  <div className="booking-product__room__actions">
+                    <AmountInput
+                      label={translations.SHARED.ADULTS}
+                      value={room.adults}
+                      disabled={isDisabled}
+                      min={1}
+                      onChange={(value) => {
+                        setRoomState(
+                          currentRooms.map((room, i) =>
+                            i === roomIndex ? { ...room, adults: value } : room
+                          )
+                        );
+
+                        setIsTouched(true);
+                      }}
+                    />
+                    <AmountInput
+                      label={translations.SHARED.CHILDREN}
+                      value={room.children}
+                      disabled={isDisabled}
+                      onChange={(value) => {
+                        setRoomState(
+                          currentRooms.map((room, i) =>
+                            i === roomIndex
+                              ? {
+                                  ...room,
+                                  children: value,
+                                  childAges: range(0, value).map(
+                                    (childIndex) =>
+                                      room.childAges[childIndex] ?? 0
+                                  ),
+                                }
+                              : room
+                          )
+                        );
+
+                        setIsTouched(true);
+                      }}
+                    />
+                  </div>
+                </div>
+                {room.children > 0 && (
+                  <div className="booking-product__room-children">
+                    <label className="booking-product__room-children-label">
+                      {translations.PRODUCT.AGE_BY_DEPARTURE_DATE}
+                    </label>
+                    <div className="booking-product__room-children-ages">
+                      {range(0, room.children).map((childIndex) => (
+                        <AgeSelect
+                          key={childIndex}
+                          value={room.childAges[childIndex]}
+                          disabled={isDisabled}
+                          onChange={(value) => {
+                            setRoomState(
+                              currentRooms.map((room, selectorRoomIndex) =>
+                                roomIndex === selectorRoomIndex
+                                  ? {
+                                      ...room,
+                                      childAges: room.childAges
+                                        .map((age, i) =>
+                                          childIndex === i ? value : age
+                                        )
+                                        .sort((a, b) => b - a),
+                                    }
+                                  : room
+                              )
+                            );
+
+                            setIsTouched(true);
+                          }}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="booking-product__rooms-footer">
+          {isDisabled ? (
+            <button
+              type="button"
+              className={buildClassName(["cta--secondary", "cta--add"])}
+              title={translations.PRODUCT.EDIT}
+              onClick={() => {
+                setIsDisabled(false);
+                setIsTouched(false);
+              }}
+            >
+              <span>
+                <Icon name="ui-pencil" width={25} height={25} />
+                {translations.PRODUCT.EDIT}
+              </span>
+            </button>
+          ) : (
+            <button
+              type="button"
+              className={buildClassName([
+                "cta",
+                isTouched ? "cta--secondary" : "cta--secondary",
+                "cta--add",
+              ])}
+              title={translations.PRODUCT.APPLY}
+              onClick={handleCloseClick}
+            >
+              <span>
+                <Icon name="ui-check" />
+                {translations.PRODUCT.APPLY}
+              </span>
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Rooms;

package/src/booking-product/index.tsx

@@ -1,30 +1,30 @@
-import React from "react";
-import Product from "./components/product";
-import SettingsContext from "./settings-context";
-import { Settings } from "./types";
-
-interface BookingProductProps {
-  productCode: string;
-  productName: string;
-  rating?: number;
-  settings: Settings
-}
-
-const BookingProduct: React.FC<BookingProductProps> = ({
-  productCode,
-  productName,
-  rating,
-  settings
-}) => {
-  return (
-    <SettingsContext.Provider value={settings}>
-      <Product
-          productCode={productCode}
-          productName={productName}
-          rating={rating}>
-      </Product>
-    </SettingsContext.Provider>
-  )
-}
-
-export default BookingProduct;
+import React from "react";
+import Product from "./components/product";
+import SettingsContext from "./settings-context";
+import { Settings } from "./types";
+
+interface BookingProductProps {
+  productCode: string;
+  productName: string;
+  rating?: number;
+  settings: Settings;
+}
+
+const BookingProduct: React.FC<BookingProductProps> = ({
+  productCode,
+  productName,
+  rating,
+  settings,
+}) => {
+  return (
+    <SettingsContext.Provider value={settings}>
+      <Product
+        productCode={productCode}
+        productName={productName}
+        rating={rating}
+      ></Product>
+    </SettingsContext.Provider>
+  );
+};
+
+export default BookingProduct;

package/src/booking-product/settings-context.ts

@@ -1,14 +1,14 @@
-import React from "react";
-import { Settings } from "./types";
-
-interface ProductSettingsContextProps extends Settings { }
-
-const SettingsContext = React.createContext<ProductSettingsContextProps>({
-  officeId: 1,
-  catalogueId: 1,
-  language: "nl-BE",
-  basePath: 'boeken',
-  priceMode: 0
-});
-
-export default SettingsContext;
+import React from "react";
+import { Settings } from "./types";
+
+interface ProductSettingsContextProps extends Settings {}
+
+const SettingsContext = React.createContext<ProductSettingsContextProps>({
+  officeId: 1,
+  catalogueId: 1,
+  language: "nl-BE",
+  basePath: "boeken",
+  priceMode: 0,
+});
+
+export default SettingsContext;

package/src/booking-product/types.ts

@@ -1,28 +1,28 @@
-export interface Settings {
-  officeId: number;
-  catalogueId: number;
-  agentId?: number;
-  basePath: string;
-  language: string;
-  includeFlights?: boolean;
-  priceMode: number;
-  icons?: string;
-  apiUrl?: string;
-  apiKey?: string;
-  addProductToQuery?: boolean;
-  isOffer?: boolean;
-  
-  alternativeActionText?: string
-  alternativeAction?: () => void;
-}
-
-export interface ProductRoom {
-  adults: number;
-  children: number;
-  childAges: number[];
-}
-
-export interface DateRange {
-  fromDate?: Date;
-  toDate?: Date;
-}
+export interface Settings {
+  officeId: number;
+  catalogueId: number;
+  agentId?: number;
+  basePath: string;
+  language: string;
+  includeFlights?: boolean;
+  priceMode: number;
+  icons?: string;
+  apiUrl?: string;
+  apiKey?: string;
+  addProductToQuery?: boolean;
+  isOffer?: boolean;
+
+  alternativeActionText?: string;
+  alternativeAction?: () => void;
+}
+
+export interface ProductRoom {
+  adults: number;
+  children: number;
+  childAges: number[];
+}
+
+export interface DateRange {
+  fromDate?: Date;
+  toDate?: Date;
+}

package/src/booking-product/utils/api.ts

@@ -1,25 +1,25 @@
-import { details } from "@qite/tide-client";
-import {
-  BookingPackage,
-  BookingPackageDetailsRequest,
-  BookingPackageRequest,
-  TideResponse
-} from "@qite/tide-client/build/types";
-import { ApiSettingsState } from "../../shared/types";
-import { buildTideClientConfig } from "../../shared/utils/tide-api-utils";
-
-const fetchDetails = async (
-  request: BookingPackageRequest<BookingPackageDetailsRequest>,
-  signal: AbortSignal,
-  languageCode?: string,  
-  apiSettings?: ApiSettingsState
-): Promise<TideResponse<BookingPackage>> => {
-  const tideClientConfig = buildTideClientConfig(apiSettings);
-  return await details(tideClientConfig, request, signal, languageCode);
-};
-
-const packageApi = {
-  fetchDetails
-};
-
-export default packageApi;
+import { details } from "@qite/tide-client";
+import {
+  BookingPackage,
+  BookingPackageDetailsRequest,
+  BookingPackageRequest,
+  TideResponse,
+} from "@qite/tide-client/build/types";
+import { ApiSettingsState } from "../../shared/types";
+import { buildTideClientConfig } from "../../shared/utils/tide-api-utils";
+
+const fetchDetails = async (
+  request: BookingPackageRequest<BookingPackageDetailsRequest>,
+  signal: AbortSignal,
+  languageCode?: string,
+  apiSettings?: ApiSettingsState
+): Promise<TideResponse<BookingPackage>> => {
+  const tideClientConfig = buildTideClientConfig(apiSettings);
+  return await details(tideClientConfig, request, signal, languageCode);
+};
+
+const packageApi = {
+  fetchDetails,
+};
+
+export default packageApi;

package/src/booking-product/utils/price.ts

@@ -1,27 +1,29 @@
-import { formatPrice } from "../../shared/utils/localization-util";
-
-export const formatPriceByMode = (
-  price: number | undefined,
-  priceMode: number,
-  personCount: number,
-  duration: number,
-  perPersonLabel: string,
-  perNightLabel: string,
-  perPersonPerNightLabel: string
-) => {
-  if (!price) return '';
-
-  switch (priceMode) {
-    case 0:
-      return `${formatPrice(price)}`;
-    case 1:
-      const perPersonPrice = price / personCount;
-      return `${formatPrice(perPersonPrice)} / ${perPersonLabel}`;
-    case 2:
-      const perNightPrice = price / duration;
-      return `${formatPrice(perNightPrice)} / ${perNightLabel}`;
-    case 3:
-      const perPersonPerNightPrice = price / duration;
-      return `${formatPrice(perPersonPerNightPrice)} / ${perPersonPerNightLabel}`;
-  }
-}
+import { formatPrice } from "../../shared/utils/localization-util";
+
+export const formatPriceByMode = (
+  price: number | undefined,
+  priceMode: number,
+  personCount: number,
+  duration: number,
+  perPersonLabel: string,
+  perNightLabel: string,
+  perPersonPerNightLabel: string
+) => {
+  if (!price) return "";
+
+  switch (priceMode) {
+    case 0:
+      return `${formatPrice(price)}`;
+    case 1:
+      const perPersonPrice = price / personCount;
+      return `${formatPrice(perPersonPrice)} / ${perPersonLabel}`;
+    case 2:
+      const perNightPrice = price / duration;
+      return `${formatPrice(perNightPrice)} / ${perNightLabel}`;
+    case 3:
+      const perPersonPerNightPrice = price / duration;
+      return `${formatPrice(
+        perPersonPerNightPrice
+      )} / ${perPersonPerNightLabel}`;
+  }
+};