@qite/tide-booking-component 1.4.95 → 1.4.97

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

@@ -1,332 +1,344 @@
-import { BookingPackageFlightMetaData, BookingPackageRoom, BookingPriceDetail } from '@qite/tide-client/build/types';
-import { ServiceType } from '@qite/tide-client';
-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 { selectAgentAdressId, selectCurrencyCode, selectTranslations } from '../booking/selectors';
-import SidebarFlight from './sidebar-flight';
-import { getDatePeriodText, getPaxTypeTranslation } from './sidebar-util';
-import { PricePerPaxType } from '../../types';
-import { selectAgentId } from '../travelers-form/travelers-form-slice';
-
-interface SidebarProps {
-  productName: string;
-  thumbnailUrl?: string;
-  isLoading: boolean;
-  travelerRooms?: string[];
-  startDateText?: string;
-  endDateText?: string;
-  departureFlightMetaData?: BookingPackageFlightMetaData;
-  returnFlightMetaData?: BookingPackageFlightMetaData;
-  basePrice?: number;
-  commission?: number;
-  totalPrice?: number;
-  remainingAmountText?: string;
-  includedCosts?: BookingPriceDetail[];
-  extraCosts?: BookingPriceDetail[];
-  deposit?: number;
-  accommodations?: BookingPackageRoom[];
-  includedServiceTypes?: number[];
-  isOnRequest?: boolean;
-  headerComponent?: JSX.Element;
-  footerComponent?: JSX.Element;
-  loaderComponent?: JSX.Element;
-  isUnavailable?: boolean;
-  basePricePerPaxType?: PricePerPaxType[];
-  seperateExtraPricePerPaxType?: PricePerPaxType[];
-}
-
-const Sidebar: React.FC<SidebarProps> = ({
-  productName,
-  thumbnailUrl,
-  isLoading,
-  travelerRooms,
-  startDateText,
-  endDateText,
-  departureFlightMetaData,
-  returnFlightMetaData,
-  basePrice,
-  commission,
-  totalPrice,
-  includedCosts,
-  extraCosts,
-  deposit,
-  accommodations,
-  includedServiceTypes,
-  isOnRequest,
-  headerComponent,
-  footerComponent,
-  loaderComponent,
-  isUnavailable,
-  basePricePerPaxType,
-  seperateExtraPricePerPaxType
-}) => {
-  const [active, setActive] = useState<boolean>(false);
-  const translations = useSelector(selectTranslations);
-  const currencyCode = useSelector(selectCurrencyCode);
-  const isAgent = useSelector(selectAgentAdressId);
-
-  const canShowPriceBreakdownSection = Boolean(basePrice && basePrice > 0) || !isEmpty(includedCosts) || !isEmpty(extraCosts);
-  const canShowTotalPriceSection = Boolean(totalPrice && totalPrice > 0);
-
-  const remainingAmount = Number(((totalPrice ?? 0) - (deposit ?? 0)).toFixed(2));
-  const isFlightOnly = includedServiceTypes?.length === 1 && includedServiceTypes.includes(ServiceType.flight);
-
-  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">
-          {!isUnavailable ? (
-            <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">
-                          {travelerRooms.length > 1 && `${translations.SHARED.ROOM} ${rIndex + 1}`}
-                          {travelerRooms.length === 1 && translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP}
-                        </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 && departureFlightMetaData && (
-                  <SidebarFlight title={translations.SIDEBAR.DEPARTURE_FLIGHT} flightMetaData={departureFlightMetaData} />
-                )}
-
-                {!isLoading && returnFlightMetaData && <SidebarFlight title={translations.SIDEBAR.ARRIVAL_FLIGHT} flightMetaData={returnFlightMetaData} />}
-
-                {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">{!isFlightOnly && getDatePeriodText(translations, 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, currencyCode)}</div>
-                      </div>
-                      {basePricePerPaxType &&
-                        basePricePerPaxType.map((ppt, index) => (
-                          <React.Fragment key={`${ppt.paxType}-${index}`}>
-                            <div className="pricing-summary__row">
-                              <div className="pricing-summary__property">
-                                {ppt.numberOfPax} {getPaxTypeTranslation(translations, ppt.paxType, ppt.numberOfPax)}
-                              </div>
-                              <div className="pricing-summary__value">{formatPrice(ppt.pricePerPaxType, currencyCode)}</div>
-                            </div>
-                            {ppt.details.map((detail, dIndex) => (
-                              <div className="pricing-summary__row pricing-summary__row--sub" key={`${ppt.paxType}-${index}-${dIndex}`}>
-                                <div className="pricing-summary__property">
-                                  {detail.numberOfPax}x {detail.description}
-                                </div>
-                                <div className="pricing-summary__value">{formatPrice(detail.price / detail.numberOfPax, currencyCode)}</div>
-                              </div>
-                            ))}
-                          </React.Fragment>
-                        ))}
-                    </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, currencyCode)}</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, currencyCode)}</div>
-                            )}
-                          </div>
-                          <div className="pricing-summary__row">
-                            <div className="pricing-summary__property">{priceDetail.accommodationName ?? priceDetail.accommodationCode}</div>
-                          </div>
-                          {seperateExtraPricePerPaxType &&
-                            seperateExtraPricePerPaxType.map((ppt, index) => (
-                              <React.Fragment key={`${ppt.paxType}-${index}`}>
-                                <div className="pricing-summary__row">
-                                  <div className="pricing-summary__property">
-                                    {ppt.numberOfPax} {getPaxTypeTranslation(translations, ppt.paxType, ppt.numberOfPax)}
-                                  </div>
-                                  <div className="pricing-summary__value">{formatPrice(ppt.pricePerPaxType, currencyCode)}</div>
-                                </div>
-                                {ppt.details.map((detail, dIndex) => (
-                                  <div className="pricing-summary__row pricing-summary__row--sub" key={`${ppt.paxType}-${index}-${dIndex}`}>
-                                    <div className="pricing-summary__property">
-                                      {detail.numberOfPax}x {detail.description}
-                                    </div>
-                                    <div className="pricing-summary__value">{formatPrice(detail.price / detail.numberOfPax, currencyCode)}</div>
-                                  </div>
-                                ))}
-                              </React.Fragment>
-                            ))}
-                        </React.Fragment>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          ) : (
-            <div className="pricing-summary__region">
-              <h6 className="pricing-summary__title">{translations.SIDEBAR.PACKAGE_NOT_AVAILABLE}</h6>
-            </div>
-          )}
-
-          {!isLoading && canShowTotalPriceSection && !isUnavailable && (
-            <div className={`pricing-summary__region pricing-summary__region--pricing ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
-              {deposit && remainingAmount > 0 ? (
-                <div className="pricing-summary__group">
-                  {isAgent && (
-                    <div className="pricing-summary__row pricing-summary__row--total-price">
-                      <div className="pricing-summary__property">
-                        <h6 className="pricing-summary__title">{translations.SHARED.COMMISSION}</h6>
-                      </div>
-                      <div className="pricing-summary__value">
-                        <div className="pricing">
-                          <div className="pricing__price">{formatPrice(commission ?? 0, currencyCode)}</div>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                  {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, currencyCode)}</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, currencyCode)}</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, currencyCode)}
-                        {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, currencyCode)}</div>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          )}
-          {footerComponent}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Sidebar;
+import { BookingPackageFlightMetaData, BookingPackageRoom, BookingPriceDetail } from '@qite/tide-client/build/types';
+import { ServiceType } from '@qite/tide-client';
+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 { selectAgentAdressId, selectCurrencyCode, selectTranslations } from '../booking/selectors';
+import SidebarFlight from './sidebar-flight';
+import { getDatePeriodText, getPaxTypeTranslation } from './sidebar-util';
+import { PricePerPaxType } from '../../types';
+import { selectAgentId } from '../travelers-form/travelers-form-slice';
+
+interface SidebarProps {
+  productName: string;
+  thumbnailUrl?: string;
+  isLoading: boolean;
+  travelerRooms?: string[];
+  startDateText?: string;
+  endDateText?: string;
+  departureFlightMetaData?: BookingPackageFlightMetaData;
+  returnFlightMetaData?: BookingPackageFlightMetaData;
+  basePrice?: number;
+  commission?: number;
+  totalPrice?: number;
+  remainingAmountText?: string;
+  includedCosts?: BookingPriceDetail[];
+  extraCosts?: BookingPriceDetail[];
+  deposit?: number;
+  accommodations?: BookingPackageRoom[];
+  includedServiceTypes?: number[];
+  isOnRequest?: boolean;
+  headerComponent?: JSX.Element;
+  footerComponent?: JSX.Element;
+  loaderComponent?: JSX.Element;
+  isUnavailable?: boolean;
+  basePricePerPaxType?: PricePerPaxType[];
+  seperateExtraPricePerPaxType?: PricePerPaxType[];
+}
+
+const Sidebar: React.FC<SidebarProps> = ({
+  productName,
+  thumbnailUrl,
+  isLoading,
+  travelerRooms,
+  startDateText,
+  endDateText,
+  departureFlightMetaData,
+  returnFlightMetaData,
+  basePrice,
+  commission,
+  totalPrice,
+  includedCosts,
+  extraCosts,
+  deposit,
+  accommodations,
+  includedServiceTypes,
+  isOnRequest,
+  headerComponent,
+  footerComponent,
+  loaderComponent,
+  isUnavailable,
+  basePricePerPaxType,
+  seperateExtraPricePerPaxType
+}) => {
+  const [active, setActive] = useState<boolean>(false);
+  const translations = useSelector(selectTranslations);
+  const currencyCode = useSelector(selectCurrencyCode);
+  const isAgent = useSelector(selectAgentAdressId);
+
+  const canShowPriceBreakdownSection = Boolean(basePrice && basePrice > 0) || !isEmpty(includedCosts) || !isEmpty(extraCosts);
+  const canShowTotalPriceSection = Boolean(totalPrice && totalPrice > 0);
+
+  const remainingAmount = Number(((totalPrice ?? 0) - (deposit ?? 0)).toFixed(2));
+  const isFlightOnly = includedServiceTypes?.length === 1 && includedServiceTypes.includes(ServiceType.flight);
+
+  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">
+          {!isUnavailable ? (
+            <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">
+                          {travelerRooms.length > 1 && `${translations.SHARED.ROOM} ${rIndex + 1}`}
+                          {travelerRooms.length === 1 && translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP}
+                        </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 && departureFlightMetaData && (
+                  <SidebarFlight title={translations.SIDEBAR.DEPARTURE_FLIGHT} flightMetaData={departureFlightMetaData} />
+                )}
+
+                {!isLoading && returnFlightMetaData && <SidebarFlight title={translations.SIDEBAR.ARRIVAL_FLIGHT} flightMetaData={returnFlightMetaData} />}
+
+                {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">{!isFlightOnly && getDatePeriodText(translations, 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, currencyCode)}</div>
+                      </div>
+                      {basePricePerPaxType &&
+                        basePricePerPaxType.map((ppt, index) => (
+                          <React.Fragment key={`${ppt.paxType}-${index}`}>
+                            <div className="pricing-summary__row">
+                              <div className="pricing-summary__property">
+                                {ppt.numberOfPax} {getPaxTypeTranslation(translations, ppt.paxType, ppt.numberOfPax)}
+                              </div>
+                              <div className="pricing-summary__value">{formatPrice(ppt.pricePerPaxType, currencyCode)}</div>
+                            </div>
+                            {ppt.details.map((detail, dIndex) => (
+                              <div className="pricing-summary__row pricing-summary__row--sub" key={`${ppt.paxType}-${index}-${dIndex}`}>
+                                <div className="pricing-summary__property">
+                                  {detail.numberOfPax}x {detail.description}
+                                </div>
+                                <div className="pricing-summary__value">{formatPrice(detail.price / detail.numberOfPax, currencyCode)}</div>
+                              </div>
+                            ))}
+                          </React.Fragment>
+                        ))}
+                    </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, currencyCode)}</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, currencyCode)}</div>
+                            )}
+                          </div>
+                          <div className="pricing-summary__row">
+                            <div className="pricing-summary__property">{priceDetail.accommodationName ?? priceDetail.accommodationCode}</div>
+                          </div>
+                          {seperateExtraPricePerPaxType &&
+                            seperateExtraPricePerPaxType.map((ppt, index) => (
+                              <React.Fragment key={`${ppt.paxType}-${index}`}>
+                                <div className="pricing-summary__row">
+                                  <div className="pricing-summary__property">
+                                    {ppt.numberOfPax} {getPaxTypeTranslation(translations, ppt.paxType, ppt.numberOfPax)}
+                                  </div>
+                                  <div className="pricing-summary__value">{formatPrice(ppt.pricePerPaxType, currencyCode)}</div>
+                                </div>
+                                {ppt.details.map((detail, dIndex) => (
+                                  <div className="pricing-summary__row pricing-summary__row--sub" key={`${ppt.paxType}-${index}-${dIndex}`}>
+                                    <div className="pricing-summary__property">
+                                      {detail.numberOfPax}x {detail.description}
+                                    </div>
+                                    <div className="pricing-summary__value">{formatPrice(detail.price / detail.numberOfPax, currencyCode)}</div>
+                                  </div>
+                                ))}
+                              </React.Fragment>
+                            ))}
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="pricing-summary__region">
+              <h6 className="pricing-summary__title">{translations.SIDEBAR.PACKAGE_NOT_AVAILABLE}</h6>
+            </div>
+          )}
+
+          {!isLoading && canShowTotalPriceSection && !isUnavailable && (
+            <div className={`pricing-summary__region pricing-summary__region--pricing ${!isLoading ? 'pricing-summary__region--fade-in' : ''}`}>
+              {deposit && remainingAmount > 0 ? (
+                <div className="pricing-summary__group">
+                  {isAgent && (
+                    <div className="pricing-summary__row pricing-summary__row--total-price">
+                      <div className="pricing-summary__property">
+                        <h6 className="pricing-summary__title">{translations.SIDEBAR.COMMISSION}</h6>
+                      </div>
+                      <div className="pricing-summary__value">
+                        <div className="pricing">
+                          <div className="pricing__price">{formatPrice(commission ?? 0, currencyCode)}</div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                  {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, currencyCode)}</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, currencyCode)}</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, currencyCode)}
+                        {translations.SIDEBAR.DEPOSIT_TEXT4}
+                        <strong>{translations.SIDEBAR.DEPOSIT_TEXT5}</strong>
+                        {translations.SIDEBAR.DEPOSIT_TEXT6}
+                      </em>
+                    </small>
+                  </div>
+                </div>
+              ) : (
+                <div className="pricing-summary__group">
+                  {isAgent && (
+                    <div className="pricing-summary__row pricing-summary__row--total-price">
+                      <div className="pricing-summary__property">
+                        <h6 className="pricing-summary__title">{translations.SIDEBAR.COMMISSION}</h6>
+                      </div>
+                      <div className="pricing-summary__value">
+                        <div className="pricing">
+                          <div className="pricing__price">{formatPrice(commission ?? 0, currencyCode)}</div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                  {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, currencyCode)}</div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+          {footerComponent}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;