// 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;