@qite/tide-booking-component 1.4.123 → 1.4.124

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

@@ -1,349 +1,349 @@
-// This one is no longer used, use sidebar in shared folder. temp kept for reference.
-
-// 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 { selectAgentAdressId, selectCurrencyCode } from '../booking/selectors';
-// import SidebarFlight from './sidebar-flight';
-// import { getDatePeriodText, getPaxTypeTranslation } from './sidebar-util';
-// import { PricePerPaxType } from '../../types';
-// import ProductCard from '../../../shared/booking/product-card';
-
-// 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[];
-//   translations: any;
-//   agent?: number;
-// }
-
-// 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,
-//   translations,
-//   agent
-// }) => {
-//   const [active, setActive] = useState<boolean>(false);
-//   const currencyCode = useSelector(selectCurrencyCode);
-
-//   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} translations={translations} />
-//                 )}
-
-//                 {!isLoading && returnFlightMetaData && (
-//                   <SidebarFlight title={translations.SIDEBAR.ARRIVAL_FLIGHT} flightMetaData={returnFlightMetaData} translations={translations} />
-//                 )}
-
-//                 {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">
-//                   {agent && (
-//                     <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">
-//                   {agent && (
-//                     <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;
+// This one is no longer used, use sidebar in shared folder. temp kept for reference.
+
+// 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 { selectAgentAdressId, selectCurrencyCode } from '../booking/selectors';
+// import SidebarFlight from './sidebar-flight';
+// import { getDatePeriodText, getPaxTypeTranslation } from './sidebar-util';
+// import { PricePerPaxType } from '../../types';
+// import ProductCard from '../../../shared/booking/product-card';
+
+// 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[];
+//   translations: any;
+//   agent?: number;
+// }
+
+// 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,
+//   translations,
+//   agent
+// }) => {
+//   const [active, setActive] = useState<boolean>(false);
+//   const currencyCode = useSelector(selectCurrencyCode);
+
+//   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} translations={translations} />
+//                 )}
+
+//                 {!isLoading && returnFlightMetaData && (
+//                   <SidebarFlight title={translations.SIDEBAR.ARRIVAL_FLIGHT} flightMetaData={returnFlightMetaData} translations={translations} />
+//                 )}
+
+//                 {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">
+//                   {agent && (
+//                     <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">
+//                   {agent && (
+//                     <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;