@qite/tide-booking-component 1.2.5 → 1.3.0

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

@@ -1,364 +1,364 @@
-import {
-  BookingPackageFlight,
-  BookingPackageRoom,
-  BookingPriceDetail,
-} from "@qite/tide-client/build/types";
-import { compact, isEmpty } from "lodash";
-import React, { useState } from "react";
-import { useSelector } from "react-redux";
-import { buildClassName } from "../../../shared/utils/class-util";
-import { formatPrice } from "../../../shared/utils/localization-util";
-import ProductCard from "../../components/product-card";
-import { selectTranslations } from "../booking/selectors";
-import SidebarFlight from "./sidebar-flight";
-import { getDatePeriodText } from "./sidebar-util";
-
-interface SidebarProps {
-  productName: string;
-  thumbnailUrl?: string;
-  isLoading: boolean;
-  travelerRooms?: string[];
-  startDateText?: string;
-  endDateText?: string;
-  departureFlight?: BookingPackageFlight;
-  returnFlight?: BookingPackageFlight;
-  basePrice?: number;
-  totalPrice?: number;
-  remainingAmountText?: string;
-  includedCosts?: BookingPriceDetail[];
-  extraCosts?: BookingPriceDetail[];
-  deposit?: number;
-  accommodations?: BookingPackageRoom[];
-  isOnRequest?: boolean;
-  headerComponent?: JSX.Element;
-  footerComponent?: JSX.Element;
-  loaderComponent?: JSX.Element;
-}
-
-const Sidebar: React.FC<SidebarProps> = ({
-  productName,
-  thumbnailUrl,
-  isLoading,
-  travelerRooms,
-  startDateText,
-  endDateText,
-  departureFlight,
-  returnFlight,
-  basePrice,
-  totalPrice,
-  includedCosts,
-  extraCosts,
-  deposit,
-  accommodations,
-  isOnRequest,
-  headerComponent,
-  footerComponent,
-  loaderComponent,
-}) => {
-  const [active, setActive] = useState<boolean>(false);
-  const translations = useSelector(selectTranslations);
-
-  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={buildClassName([
-        "booking__sidebar",
-        active && "booking__sidebar--active",
-      ])}
-    >
-      {headerComponent}
-
-      <div className="booking__sidebar-frame">
-        <ProductCard
-          productName={productName}
-          thumbnailUrl={thumbnailUrl}
-          handleToggleClick={handleToggleClick}
-        />
-        <div className="pricing-summary">
-          <div className="pricing-summary__wrapper">
-            <div
-              className={`pricing-summary__region ${
-                !isLoading ? "pricing-summary__region--fade-in" : ""
-              }`}
-            >
-              <div className="pricing-summary__group">
-                <h6 className="pricing-summary__title">
-                  {translations.SIDEBAR.TRAVEL_INFO}
-                </h6>
-                {!isEmpty(travelerRooms) &&
-                  travelerRooms?.map((room, rIndex) => (
-                    <div className="pricing-summary__row" key={rIndex}>
-                      <div className="pricing-summary__property">
-                        {translations.SHARED.ROOM} {rIndex + 1}
-                      </div>
-
-                      <div className="pricing-summary__value">{room}</div>
-                    </div>
-                  ))}
-
-                {startDateText && (
-                  <div className="pricing-summary__row">
-                    <div className="pricing-summary__property">
-                      {startDateText && endDateText
-                        ? translations.SIDEBAR.DEPARTURE
-                        : translations.SIDEBAR.DEPARTURE_SINGLE}
-                    </div>
-                    <div className="pricing-summary__value">
-                      {startDateText}
-                    </div>
-                  </div>
-                )}
-
-                {endDateText && (
-                  <div className="pricing-summary__row">
-                    <div className="pricing-summary__property">
-                      {translations.SIDEBAR.ARRIVAL}
-                    </div>
-                    <div className="pricing-summary__value">{endDateText}</div>
-                  </div>
-                )}
-              </div>
-
-              {isLoading && loaderComponent}
-              {!isLoading && departureFlight && returnFlight && (
-                <>
-                  <SidebarFlight
-                    title={translations.SIDEBAR.DEPARTURE_FLIGHT}
-                    flight={departureFlight}
-                  />
-                  <SidebarFlight
-                    title={translations.SIDEBAR.ARRIVAL_FLIGHT}
-                    flight={returnFlight}
-                  />
-                </>
-              )}
-
-              {accommodations && (
-                <div className="pricing-summary__group">
-                  <h6 className="pricing-summary__title">
-                    {translations.SIDEBAR.ACCOMMODATION}
-                  </h6>
-                  {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 && option.price > 0 && 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>
-
-            {!isLoading && canShowPriceBreakdownSection && (
-              <div
-                className={`pricing-summary__region ${
-                  !isLoading ? "pricing-summary__region--fade-in" : ""
-                }`}
-              >
-                {basePrice !== undefined && basePrice > 0 && (
-                  <div className="pricing-summary__group">
-                    <div className="pricing-summary__row">
-                      <div className="pricing-summary__property">
-                        <h6 className="pricing-summary__title">
-                          {translations.SIDEBAR.BASE_PRICE}
-                        </h6>
-                      </div>
-                      <div className="pricing-summary__value">
-                        {formatPrice(basePrice)}
-                      </div>
-                    </div>
-                  </div>
-                )}
-                {!isEmpty(includedCosts) && (
-                  <div className="pricing-summary__group">
-                    <h6 className="pricing-summary__title">
-                      {translations.SIDEBAR.INCLUDED_COSTS}
-                    </h6>
-                    {includedCosts?.map((priceDetail, index) => (
-                      <React.Fragment
-                        key={compact([
-                          priceDetail.productCode,
-                          priceDetail.accommodationCode,
-                          index,
-                        ]).join("_")}
-                      >
-                        <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__row">
-                          <div className="price-summary__property">
-                            {priceDetail.accommodationName ??
-                              priceDetail.accommodationCode}
-                          </div>
-                        </div>
-                      </React.Fragment>
-                    ))}
-                  </div>
-                )}
-                {!isEmpty(extraCosts) && (
-                  <div className="pricing-summary__group">
-                    <h6 className="pricing-summary__title">
-                      {translations.SIDEBAR.EXTRA_COSTS}
-                    </h6>
-                    {extraCosts?.map((priceDetail, index) => (
-                      <React.Fragment
-                        key={compact([
-                          priceDetail.productCode,
-                          priceDetail.accommodationCode,
-                          index,
-                        ]).join("_")}
-                      >
-                        <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__row">
-                          <div className="price-summary__property">
-                            {priceDetail.accommodationName ??
-                              priceDetail.accommodationCode}
-                          </div>
-                        </div>
-                      </React.Fragment>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-
-          {!isLoading && canShowTotalPriceSection && (
-            <div
-              className={`pricing-summary__region pricing-summary__region--pricing ${
-                !isLoading ? "pricing-summary__region--fade-in" : ""
-              }`}
-            >
-              {deposit ? (
-                <div className="pricing-summary__group">
-                  {totalPrice !== undefined && totalPrice > 0 && (
-                    <div className="pricing-summary__row pricing-summary__row--total-price">
-                      <div className="pricing-summary__property">
-                        <h6 className="pricing-summary__title">
-                          {translations.SHARED.TOTAL_PRICE}
-                        </h6>
-                      </div>
-                      <div className="pricing-summary__value">
-                        <div className="pricing">
-                          <div className="pricing__price">
-                            {formatPrice(totalPrice)}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                  <div className="pricing-summary__row">
-                    <div className="pricing-summary__property">
-                      <h6 className="pricing-summary__title">
-                        {translations.SIDEBAR.DEPOSIT}
-                      </h6>
-                    </div>
-
-                    <div className="pricing-summary__value">
-                      <div className="pricing">
-                        <div className="pricing__price">
-                          {formatPrice(deposit)}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="pricing-summary__row">
-                    <small>
-                      <em>
-                        {translations.SIDEBAR.DEPOSIT_TEXT1}
-                        <strong>{translations.SIDEBAR.DEPOSIT_TEXT2}</strong>
-                        {translations.SIDEBAR.DEPOSIT_TEXT3}
-                        {formatPrice(remainingAmount)}
-                        {translations.SIDEBAR.DEPOSIT_TEXT4}
-                        <strong>{translations.SIDEBAR.DEPOSIT_TEXT5}</strong>
-                        {translations.SIDEBAR.DEPOSIT_TEXT6}
-                      </em>
-                    </small>
-                  </div>
-                </div>
-              ) : (
-                <div className="pricing-summary__group">
-                  {totalPrice !== undefined && totalPrice > 0 && (
-                    <div className="pricing-summary__row pricing-summary__row--total-price">
-                      <div className="pricing-summary__property">
-                        <h6 className="pricing-summary__title">
-                          {translations.SHARED.TOTAL_PRICE}
-                        </h6>
-                      </div>
-
-                      <div className="pricing-summary__value">
-                        <div className="pricing">
-                          <div className="pricing__price">
-                            {formatPrice(totalPrice)}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-          {footerComponent}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Sidebar;
+import {
+  BookingPackageFlight,
+  BookingPackageRoom,
+  BookingPriceDetail,
+} from "@qite/tide-client/build/types";
+import { compact, isEmpty } from "lodash";
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import { buildClassName } from "../../../shared/utils/class-util";
+import { formatPrice } from "../../../shared/utils/localization-util";
+import ProductCard from "../../components/product-card";
+import { selectTranslations } from "../booking/selectors";
+import SidebarFlight from "./sidebar-flight";
+import { getDatePeriodText } from "./sidebar-util";
+
+interface SidebarProps {
+  productName: string;
+  thumbnailUrl?: string;
+  isLoading: boolean;
+  travelerRooms?: string[];
+  startDateText?: string;
+  endDateText?: string;
+  departureFlight?: BookingPackageFlight;
+  returnFlight?: BookingPackageFlight;
+  basePrice?: number;
+  totalPrice?: number;
+  remainingAmountText?: string;
+  includedCosts?: BookingPriceDetail[];
+  extraCosts?: BookingPriceDetail[];
+  deposit?: number;
+  accommodations?: BookingPackageRoom[];
+  isOnRequest?: boolean;
+  headerComponent?: JSX.Element;
+  footerComponent?: JSX.Element;
+  loaderComponent?: JSX.Element;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({
+  productName,
+  thumbnailUrl,
+  isLoading,
+  travelerRooms,
+  startDateText,
+  endDateText,
+  departureFlight,
+  returnFlight,
+  basePrice,
+  totalPrice,
+  includedCosts,
+  extraCosts,
+  deposit,
+  accommodations,
+  isOnRequest,
+  headerComponent,
+  footerComponent,
+  loaderComponent,
+}) => {
+  const [active, setActive] = useState<boolean>(false);
+  const translations = useSelector(selectTranslations);
+
+  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={buildClassName([
+        "booking__sidebar",
+        active && "booking__sidebar--active",
+      ])}
+    >
+      {headerComponent}
+
+      <div className="booking__sidebar-frame">
+        <ProductCard
+          productName={productName}
+          thumbnailUrl={thumbnailUrl}
+          handleToggleClick={handleToggleClick}
+        />
+        <div className="pricing-summary">
+          <div className="pricing-summary__wrapper">
+            <div
+              className={`pricing-summary__region ${
+                !isLoading ? "pricing-summary__region--fade-in" : ""
+              }`}
+            >
+              <div className="pricing-summary__group">
+                <h6 className="pricing-summary__title">
+                  {translations.SIDEBAR.TRAVEL_INFO}
+                </h6>
+                {!isEmpty(travelerRooms) &&
+                  travelerRooms?.map((room, rIndex) => (
+                    <div className="pricing-summary__row" key={rIndex}>
+                      <div className="pricing-summary__property">
+                        {translations.SHARED.ROOM} {rIndex + 1}
+                      </div>
+
+                      <div className="pricing-summary__value">{room}</div>
+                    </div>
+                  ))}
+
+                {startDateText && (
+                  <div className="pricing-summary__row">
+                    <div className="pricing-summary__property">
+                      {startDateText && endDateText
+                        ? translations.SIDEBAR.DEPARTURE
+                        : translations.SIDEBAR.DEPARTURE_SINGLE}
+                    </div>
+                    <div className="pricing-summary__value">
+                      {startDateText}
+                    </div>
+                  </div>
+                )}
+
+                {endDateText && (
+                  <div className="pricing-summary__row">
+                    <div className="pricing-summary__property">
+                      {translations.SIDEBAR.ARRIVAL}
+                    </div>
+                    <div className="pricing-summary__value">{endDateText}</div>
+                  </div>
+                )}
+              </div>
+
+              {isLoading && loaderComponent}
+              {!isLoading && departureFlight && returnFlight && (
+                <>
+                  <SidebarFlight
+                    title={translations.SIDEBAR.DEPARTURE_FLIGHT}
+                    flight={departureFlight}
+                  />
+                  <SidebarFlight
+                    title={translations.SIDEBAR.ARRIVAL_FLIGHT}
+                    flight={returnFlight}
+                  />
+                </>
+              )}
+
+              {accommodations && (
+                <div className="pricing-summary__group">
+                  <h6 className="pricing-summary__title">
+                    {translations.SIDEBAR.ACCOMMODATION}
+                  </h6>
+                  {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 && option.price > 0 && 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>
+
+            {!isLoading && canShowPriceBreakdownSection && (
+              <div
+                className={`pricing-summary__region ${
+                  !isLoading ? "pricing-summary__region--fade-in" : ""
+                }`}
+              >
+                {basePrice !== undefined && basePrice > 0 && (
+                  <div className="pricing-summary__group">
+                    <div className="pricing-summary__row">
+                      <div className="pricing-summary__property">
+                        <h6 className="pricing-summary__title">
+                          {translations.SIDEBAR.BASE_PRICE}
+                        </h6>
+                      </div>
+                      <div className="pricing-summary__value">
+                        {formatPrice(basePrice)}
+                      </div>
+                    </div>
+                  </div>
+                )}
+                {!isEmpty(includedCosts) && (
+                  <div className="pricing-summary__group">
+                    <h6 className="pricing-summary__title">
+                      {translations.SIDEBAR.INCLUDED_COSTS}
+                    </h6>
+                    {includedCosts?.map((priceDetail, index) => (
+                      <React.Fragment
+                        key={compact([
+                          priceDetail.productCode,
+                          priceDetail.accommodationCode,
+                          index,
+                        ]).join("_")}
+                      >
+                        <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__row">
+                          <div className="price-summary__property">
+                            {priceDetail.accommodationName ??
+                              priceDetail.accommodationCode}
+                          </div>
+                        </div>
+                      </React.Fragment>
+                    ))}
+                  </div>
+                )}
+                {!isEmpty(extraCosts) && (
+                  <div className="pricing-summary__group">
+                    <h6 className="pricing-summary__title">
+                      {translations.SIDEBAR.EXTRA_COSTS}
+                    </h6>
+                    {extraCosts?.map((priceDetail, index) => (
+                      <React.Fragment
+                        key={compact([
+                          priceDetail.productCode,
+                          priceDetail.accommodationCode,
+                          index,
+                        ]).join("_")}
+                      >
+                        <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__row">
+                          <div className="price-summary__property">
+                            {priceDetail.accommodationName ??
+                              priceDetail.accommodationCode}
+                          </div>
+                        </div>
+                      </React.Fragment>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {!isLoading && canShowTotalPriceSection && (
+            <div
+              className={`pricing-summary__region pricing-summary__region--pricing ${
+                !isLoading ? "pricing-summary__region--fade-in" : ""
+              }`}
+            >
+              {deposit ? (
+                <div className="pricing-summary__group">
+                  {totalPrice !== undefined && totalPrice > 0 && (
+                    <div className="pricing-summary__row pricing-summary__row--total-price">
+                      <div className="pricing-summary__property">
+                        <h6 className="pricing-summary__title">
+                          {translations.SHARED.TOTAL_PRICE}
+                        </h6>
+                      </div>
+                      <div className="pricing-summary__value">
+                        <div className="pricing">
+                          <div className="pricing__price">
+                            {formatPrice(totalPrice)}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                  <div className="pricing-summary__row">
+                    <div className="pricing-summary__property">
+                      <h6 className="pricing-summary__title">
+                        {translations.SIDEBAR.DEPOSIT}
+                      </h6>
+                    </div>
+
+                    <div className="pricing-summary__value">
+                      <div className="pricing">
+                        <div className="pricing__price">
+                          {formatPrice(deposit)}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="pricing-summary__row">
+                    <small>
+                      <em>
+                        {translations.SIDEBAR.DEPOSIT_TEXT1}
+                        <strong>{translations.SIDEBAR.DEPOSIT_TEXT2}</strong>
+                        {translations.SIDEBAR.DEPOSIT_TEXT3}
+                        {formatPrice(remainingAmount)}
+                        {translations.SIDEBAR.DEPOSIT_TEXT4}
+                        <strong>{translations.SIDEBAR.DEPOSIT_TEXT5}</strong>
+                        {translations.SIDEBAR.DEPOSIT_TEXT6}
+                      </em>
+                    </small>
+                  </div>
+                </div>
+              ) : (
+                <div className="pricing-summary__group">
+                  {totalPrice !== undefined && totalPrice > 0 && (
+                    <div className="pricing-summary__row pricing-summary__row--total-price">
+                      <div className="pricing-summary__property">
+                        <h6 className="pricing-summary__title">
+                          {translations.SHARED.TOTAL_PRICE}
+                        </h6>
+                      </div>
+
+                      <div className="pricing-summary__value">
+                        <div className="pricing">
+                          <div className="pricing__price">
+                            {formatPrice(totalPrice)}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+          {footerComponent}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;