@qite/tide-booking-component 1.4.124 → 1.4.126

package/src/shared/booking/shared-sidebar.tsx

@@ -1,432 +0,0 @@
-import React, { useState } from 'react';
-import { formatPrice } from '../utils/localization-util';
-import { BookingPackageRoom, PackagingEntryLine, ServiceType } from '@qite/tide-client';
-import { buildClassName } from '../utils/class-util';
-import ProductCard from './product-card';
-import { compact, isEmpty } from 'lodash';
-import SidebarFlight from '../../booking-wizard/features/sidebar/sidebar-flight';
-import { getDatePeriodText, getPaxTypeTranslation } from '../../booking-wizard/features/sidebar/sidebar-util';
-import { PricePerPaxType } from '../../booking-wizard/types';
-
-interface SharedSidebarProps {
-  productName: string;
-  thumbnailUrl?: string;
-  isLoading?: boolean;
-  travelerRooms?: string[];
-  startDateText?: string;
-  endDateText?: string;
-  departureFlightMetaData?: any;
-  returnFlightMetaData?: any;
-  basePrice?: number;
-  commission?: number;
-  totalPrice?: number;
-  remainingAmountText?: string;
-  includedCosts?: any[];
-  extraCosts?: any[];
-  deposit?: number;
-  accommodations?: BookingPackageRoom[];
-  packagingAccommodations?: PackagingEntryLine[];
-  includedServiceTypes?: number[];
-  isOnRequest?: boolean;
-  headerComponent?: React.ReactNode;
-  footerComponent?: React.ReactNode;
-  loaderComponent?: React.ReactNode;
-  isUnavailable?: boolean;
-  basePricePerPaxType?: PricePerPaxType[];
-  seperateExtraPricePerPaxType?: PricePerPaxType[];
-  translations: any;
-  agent?: number;
-}
-
-const SharedSidebar: React.FC<SharedSidebarProps> = ({
-  productName,
-  thumbnailUrl,
-  isLoading,
-  translations,
-  headerComponent,
-  travelerRooms,
-  startDateText,
-  endDateText,
-  loaderComponent,
-  departureFlightMetaData,
-  returnFlightMetaData,
-  accommodations,
-  packagingAccommodations,
-  isOnRequest,
-  includedServiceTypes,
-  basePrice,
-  commission,
-  totalPrice,
-  includedCosts,
-  extraCosts,
-  deposit,
-  basePricePerPaxType,
-  seperateExtraPricePerPaxType,
-  isUnavailable,
-  agent,
-  footerComponent
-}) => {
-  if (!translations) return null;
-
-  const [active, setActive] = useState<boolean>(false);
-
-  const handleToggleClick = () => {
-    setActive(!active);
-  };
-
-  const isFlightOnly = includedServiceTypes?.length === 1 && includedServiceTypes.includes(ServiceType.flight);
-
-  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));
-
-  // TODO: Determine currency code based on the data, for now default to EUR
-  let currencyCode = 'EUR';
-
-  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 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>
-                )}
-
-                {/* {lines.map((line: any, idx: number) => (
-                  <div className="pricing-summary__row" key={line.guid || idx}>
-                    <div className="pricing-summary__property">
-                      {line.serviceType === 3 && (
-                        <>
-                          {line.productName} <br />
-                          {line.accommodationName && <span>{line.accommodationName}</span>}
-                          <br />
-                          {line.from && line.to && (
-                            <span>
-                              {new Date(line.from).toLocaleDateString()} - {new Date(line.to).toLocaleDateString()}
-                            </span>
-                          )}
-                        </>
-                      )}
-                      {line.serviceType === 7 && line.flightInformation && (
-                        <>
-                          <strong>{line.productName}</strong>
-                          <br />
-                          {line.flightInformation.flightLines &&
-                            line.flightInformation.flightLines.map((flight: any, fIdx: number) => (
-                              <div key={fIdx} style={{ marginBottom: 4 }}>
-                                {flight.airlineDescription} {flight.flightNumber}
-                                <br />
-                                {flight.departureAirportDescription} ({flight.departureAirportCode}) {flight.departureTime} → {flight.arrivalAirportDescription}{' '}
-                                ({flight.arrivalAirportCode}) {flight.arrivalTime}
-                              </div>
-                            ))}
-                        </>
-                      )}
-                    </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>
-              )}
-              {packagingAccommodations && (
-                <div className="pricing-summary__group">
-                  <h6 className="pricing-summary__title">{translations.SIDEBAR.ACCOMMODATION}</h6>
-                  {packagingAccommodations.map((accommodation) => {
-                    return (
-                      <div key={accommodation.guid}>
-                        <div className="pricing-summary__row">
-                          <div className="pricing-summary__property">
-                            {accommodation?.accommodationName}
-                            {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">{accommodation?.regimeName}</div>
-                          <div className="price-summary__value">
-                            {!isFlightOnly && getDatePeriodText(translations, accommodation?.from, accommodation?.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>
-            )}
-
-            {!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 className="pricing-summary__region pricing-summary__region--pricing pricing-summary__region--fade-in">
-              <div className="pricing-summary__group">
-                <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(price || 0, 'EUR')}</div>
-                    </div>
-                  </div>
-                </div>
-                {depositAmount > 0 && (
-                  <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(depositAmount, 'EUR')}</div>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div> */}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SharedSidebar;

package/src/shared/booking/step-indicators.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { buildClassName } from '../utils/class-util';
-
-interface StepIndicatorsProps {
-  currentStep: number;
-  stepLabels: string[];
-}
-
-const StepIndicators: React.FC<StepIndicatorsProps> = ({ currentStep, stepLabels }) => {
-  return (
-    <div className="step-indicators">
-      <div className="step-indicators__items">
-        {stepLabels.map((stepName, index) => (
-          <div
-            key={`${index + 1}-${stepName}`}
-            className={buildClassName([
-              'step-indicators__item',
-              currentStep === index && 'step-indicators__item--active',
-              currentStep > index && 'step-indicators__item--completed'
-            ])}>
-            <div className="step-indicators__icon">{index + 1}</div>
-            <div className="step-indicators__text">{stepName}</div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default StepIndicators;