@qite/tide-booking-component 1.4.124 → 1.4.126

package/src/search-results/components/itinerary/index.tsx

@@ -1,437 +0,0 @@
-import React, { useContext, useMemo } from 'react';
-import { differenceInCalendarDays, format } from 'date-fns';
-import { first, groupBy, isEmpty, last } from 'lodash';
-import { PackagingEntryLine, PackagingEntryLineFlightLine } from '@qite/tide-client';
-import Icon from '../../../shared/components/icon';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import { formatPrice, getDateOnlyTime, getTranslations } from '../../../shared/utils/localization-util';
-import { useDispatch, useSelector } from 'react-redux';
-import { SearchResultsRootState } from '../../store/search-results-store';
-import { ACCOMMODATION_SERVICE_TYPE, FLIGHT_SERVICE_TYPE } from '../../utils/query-utils';
-import Spinner from '../spinner/spinner';
-import { setBookPackagingEntry } from '../../store/search-results-slice';
-
-interface ItineraryProps {
-  isOpen: boolean;
-  handleSetIsOpen: () => void;
-  isLoading?: boolean;
-  onEditAccommodation?: (segments: PackagingEntryLine[]) => void;
-}
-
-const getFlightLines = (flight?: PackagingEntryLine): PackagingEntryLineFlightLine[] => {
-  return flight?.flightInformation?.flightLines ?? [];
-};
-
-const getDepartureTime = (flight?: PackagingEntryLine): string => {
-  const firstLine = first(getFlightLines(flight));
-  if (!firstLine?.departureTime) return '';
-
-  return firstLine.departureTime.slice(0, 5);
-};
-
-const getArrivalTime = (flight?: PackagingEntryLine): string => {
-  const lastLine = last(getFlightLines(flight));
-  if (!lastLine?.arrivalTime) return '';
-
-  return lastLine.arrivalTime.slice(0, 5);
-};
-
-const getDuration = (flight?: PackagingEntryLine): string => {
-  const lines = getFlightLines(flight);
-  if (!lines.length) return '';
-
-  const totalTicks = lines.reduce((sum, line) => sum + (line.durationInTicks ?? 0), 0) || 0;
-
-  if (!totalTicks) return '';
-
-  const seconds = totalTicks / 10_000_000;
-  const hours = Math.floor(seconds / 3600);
-  const minutes = Math.floor((seconds % 3600) / 60);
-
-  return `${hours}h ${minutes.toString().padStart(2, '0')}m`;
-};
-
-const numberOfNights = (segment: PackagingEntryLine) => {
-  return differenceInCalendarDays(new Date(segment.to), new Date(segment.from));
-};
-
-const getSegmentIcon = (segment: PackagingEntryLine) => {
-  switch (segment.serviceType) {
-    case 3:
-      return (
-        <div className="search__filter__itinerary__segment-badge search__filter__itinerary__segment-badge--secondary">
-          <Icon name="ui-bed" width={15} height={15} />
-        </div>
-      );
-    case 4:
-      return (
-        <div className="search__filter__itinerary__segment-badge search__filter__itinerary__segment-badge--secondary">
-          <Icon name="ui-ticket" width={15} height={15} />
-        </div>
-      );
-    case 11:
-      return (
-        <div className="search__filter__itinerary__segment-badge search__filter__itinerary__segment-badge--secondary">
-          <Icon name="ui-ship" width={15} height={15} />
-        </div>
-      );
-    case 13:
-    case 17:
-    case 22:
-      return (
-        <div className="search__filter__itinerary__transport-badge">
-          <Icon name="ui-car" width={15} height={15} />
-        </div>
-      );
-    default:
-      return (
-        <div className="search__filter__itinerary__segment-badge">
-          <Icon name="ui-location" width={15} height={15} />
-        </div>
-      );
-  }
-};
-
-const canEdit = (segment: PackagingEntryLine) => {
-  if (segment.serviceType === ACCOMMODATION_SERVICE_TYPE) {
-    return true;
-  }
-  return false;
-};
-
-const getSegmentTitle = (segment: PackagingEntryLine) => {
-  return segment.productName ?? segment.accommodationName;
-};
-
-const SERVICE_TYPE_PRIORITY: Record<number, number> = {
-  7: 0, // Flight
-  13: 1, // Transfer
-  3: 2, // Hotel
-  4: 3 // Excursion
-};
-
-const getServiceTypePriority = (serviceType?: number) => {
-  return SERVICE_TYPE_PRIORITY[serviceType ?? -1] ?? 2;
-};
-
-const Itinerary: React.FC<ItineraryProps> = ({ isOpen, handleSetIsOpen, isLoading, onEditAccommodation }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
-  const { editablePackagingEntry, priceDetails } = useSelector((state: SearchResultsRootState) => state.searchResults);
-
-  const dispatch = useDispatch();
-
-  const packagingEntry = editablePackagingEntry ?? context?.packagingEntry;
-
-  const sortedLines = useMemo(() => {
-    return [...(packagingEntry?.lines ?? [])].sort((a, b) => {
-      const dateA = getDateOnlyTime(a.from);
-      const dateB = getDateOnlyTime(b.from);
-
-      if (dateA !== dateB) {
-        return dateA - dateB;
-      }
-
-      const priorityA = getServiceTypePriority(a.serviceType);
-      const priorityB = getServiceTypePriority(b.serviceType);
-
-      if (priorityA !== priorityB) {
-        return priorityA - priorityB;
-      }
-
-      return (a.order ?? Infinity) - (b.order ?? Infinity);
-    });
-  }, [packagingEntry]);
-
-  if (!packagingEntry) {
-    return null;
-  }
-
-  const firstEntryLine = first(sortedLines);
-  const lastEntryLine = last(sortedLines);
-
-  const accommodationLine = sortedLines.find((line) => line.serviceType === ACCOMMODATION_SERVICE_TYPE) ?? firstEntryLine;
-
-  const country = accommodationLine?.country?.name ?? firstEntryLine?.country?.name;
-  const location = accommodationLine?.location?.name ?? accommodationLine?.oord?.name ?? accommodationLine?.region?.name ?? firstEntryLine?.location?.name;
-
-  const flightSegments = sortedLines.filter((item) => item.serviceType === FLIGHT_SERVICE_TYPE);
-  const outboundFlight = first(flightSegments);
-  const returnFlight = flightSegments.length > 1 ? last(flightSegments) : undefined;
-
-  const otherSegments = sortedLines.filter((item) => item.serviceType !== FLIGHT_SERVICE_TYPE);
-  const grouped = groupBy(otherSegments, (segment) => {
-    return `${segment.productCode}-${segment.from}-${segment.to}`;
-  });
-  const groupedOtherSegments = Object.entries(grouped).map(([key, segments]) => ({
-    key,
-    segments
-  }));
-
-  const numberOfPax = packagingEntry.pax?.length || 1;
-  const totalPrice = priceDetails?.total || packagingEntry.price || 0;
-  const pricePerPerson = totalPrice / numberOfPax;
-
-  const handleConfirm = () => {
-    dispatch(setBookPackagingEntry(true));
-  };
-
-  return (
-    <div className={`search__filters--modal ${isOpen ? 'is-open' : ''}`}>
-      <div className="search__filters--background" onClick={handleSetIsOpen}></div>
-
-      <button className="search__filters--close" onClick={handleSetIsOpen}>
-        <Icon name="ui-close" height={24} />
-      </button>
-
-      <div className="search__filters">
-        <div className="search__filter-row search__filter__header">
-          <div className="search__filter-row-flex-title">
-            <p className="search__filter-small-title">{translations.SRP.ITINERARY_TITLE}</p>
-          </div>
-        </div>
-
-        <>
-          <div className="search__filter-group">
-            {context?.destinationImage && (
-              <div className="search__filter__image__wrapper">
-                <img src={context.destinationImage.url} alt={context.destinationImage.alt} className="search__filter__image" />
-
-                {packagingEntry?.dossierNumber && (
-                  <span className="search__filter__image__text">
-                    {translations.SRP.DOSSIER_NUMBER}: {packagingEntry.dossierNumber}
-                  </span>
-                )}
-
-                <h4 className="search__filter__image__title">{(location || '') + (location && country ? ' - ' : '') + (country || '')}</h4>
-              </div>
-            )}
-          </div>
-
-          <div className="search__filter__prices">
-            {isLoading ? (
-              <Spinner label={translations.PRODUCT.LOADING_PRICE} />
-            ) : (
-              <>
-                <div className="search__filter__prices__wrapper">
-                  <h3 className="search__filter__prices--amount">{formatPrice(pricePerPerson, 'EUR')}</h3>
-                  <p>{translations.SRP.PACKAGE_PRICE_PER_PERSON}</p>
-                  <p>
-                    <strong>
-                      ({formatPrice(totalPrice, 'EUR')} {translations.SRP.TOTAL})
-                    </strong>
-                  </p>
-                </div>
-                <button className="cta" onClick={handleConfirm}>
-                  {translations.QSM.CONFIRM}
-                </button>
-              </>
-            )}
-          </div>
-
-          <div className="search__filter__itinerary">
-            <p>{translations.SRP.DAY_BY_DAY}</p>
-
-            {firstEntryLine && (
-              <div className="search__filter__itinerary__country">
-                <div className="search__filter__itinerary__country-icon">
-                  <Icon name="ui-flag" width={17.5} height={20} />
-                </div>
-                <div className="search__filter__itinerary__country-content">
-                  <p>
-                    {format(new Date(firstEntryLine.from), 'EEE. d MMM yyyy')} - <strong>{translations.SRP.START}</strong>
-                  </p>
-                </div>
-              </div>
-            )}
-
-            {outboundFlight && (
-              <div className="search__filter__itinerary__transport">
-                <div className="search__filter__itinerary__transport-timeline">
-                  <div className="search__filter__itinerary__transport-timeline-line"></div>
-                </div>
-
-                <div className="search__filter__itinerary__transport-item">
-                  <div className="search__filter__itinerary__transport-date">
-                    <p className="search__filter__itinerary__transport-date-date">
-                      <strong>{format(new Date(outboundFlight.from), 'd')}</strong>
-                    </p>
-                    <p>{format(new Date(outboundFlight.from), 'MMM')}</p>
-                  </div>
-
-                  <div className="search__filter__itinerary__transport-badge">
-                    <Icon name="ui-plane" height={15} />
-                  </div>
-
-                  <div className="search__filter__itinerary__transport-details">
-                    <h6>{outboundFlight.productName}</h6>
-                    <p className="search__filter__itinerary__transport-details-plane">
-                      <span>
-                        <Icon name="ui-plane-depart" height={14} /> <strong>{getDepartureTime(outboundFlight)}</strong>
-                      </span>{' '}
-                      -{' '}
-                      <span>
-                        <Icon name="ui-plane-arrive" height={14} /> <strong>{getArrivalTime(outboundFlight)}</strong>
-                      </span>
-                    </p>
-                    <p className="search__filter__itinerary__transport-details-time">
-                      <span>
-                        <Icon name="ui-clock" height={20} /> {getDuration(outboundFlight)}
-                      </span>
-                    </p>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {!isEmpty(groupedOtherSegments) &&
-              groupedOtherSegments.map((group) => {
-                const firstSegment = first(group.segments);
-                if (!firstSegment) return null;
-
-                return (
-                  <div className="search__filter__itinerary__segments">
-                    <div className="search__filter__itinerary__segments__wrapper" key={group.key}>
-                      <div className="search__filter__itinerary__segments-timeline">
-                        <div className="search__filter__itinerary__segments-timeline-line"></div>
-                      </div>
-
-                      <div className="search__filter__itinerary__segment">
-                        <div className="search__filter__itinerary__segment-item search__filter__itinerary__segment-item--start">
-                          <div className="search__filter__itinerary__transport-date">
-                            <p className="search__filter__itinerary__transport-date-date">
-                              <strong>{format(new Date(firstSegment.from), 'd')}</strong>
-                            </p>
-                            <p>{format(new Date(firstSegment.from), 'MMM')}</p>
-                          </div>
-
-                          <div className="search__filter__itinerary__segment-badge">
-                            <Icon name="ui-location" width={15} height={15} />
-                          </div>
-
-                          <div className="search__filter__itinerary__segment-details">
-                            <h6>
-                              {firstSegment.location?.name || firstSegment.oord?.name || firstSegment.region?.name}
-                              {(firstSegment.location?.name || firstSegment.oord?.name || firstSegment.region?.name) && firstSegment.country?.name ? ', ' : ''}
-                              {firstSegment.country?.name}
-                            </h6>
-                            <p className="search__filter__itinerary__segment-details-text">
-                              {format(new Date(firstSegment.from), 'EEE. d MMM yyyy')}
-                              &gt; {format(new Date(firstSegment.to), 'EEE. d MMM yyyy')}
-                            </p>
-                          </div>
-                        </div>
-                      </div>
-
-                      <div className="search__filter__itinerary__segment">
-                        <div
-                          className={`search__filter__itinerary__segment-item ${
-                            canEdit(firstSegment) ? 'search__filter__itinerary__segment-item--editable' : ''
-                          }`}
-                          onClick={() => {
-                            if (canEdit(firstSegment) && onEditAccommodation) {
-                              onEditAccommodation(group.segments);
-                            }
-                          }}>
-                          <div className="search__filter__itinerary__segment-date search__filter__itinerary__segment-nights">
-                            {firstSegment.serviceType === ACCOMMODATION_SERVICE_TYPE && (
-                              <>
-                                <p className="search__filter__itinerary__segment-date-date">
-                                  <strong>{numberOfNights(firstSegment)}</strong>
-                                </p>
-                                <Icon name="ui-moon" width={16} height={16} />
-                              </>
-                            )}
-                          </div>
-
-                          {getSegmentIcon(firstSegment)}
-
-                          <div className="search__filter__itinerary__segment-details">
-                            <h6>{getSegmentTitle(firstSegment)}</h6>
-                            {firstSegment.serviceType === ACCOMMODATION_SERVICE_TYPE &&
-                              group.segments.map((segment, index) => (
-                                <React.Fragment key={segment.guid}>
-                                  <strong>
-                                    {translations.SHARED.ROOM}&nbsp;{index + 1}
-                                  </strong>
-                                  {segment.productName && segment.accommodationName && (
-                                    <div className="search__filter__itinerary__segment-details__room">
-                                      <Icon name="ui-bed" width={12} height={12} />
-                                      {segment.accommodationName}
-                                    </div>
-                                  )}
-                                  {segment.regimeName && (
-                                    <div className="search__filter__itinerary__segment-details__room">
-                                      <Icon name="ui-utensils" width={12} height={12} />
-                                      {segment.regimeName}
-                                    </div>
-                                  )}
-                                </React.Fragment>
-                              ))}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-
-            {returnFlight && returnFlight !== outboundFlight && (
-              <div className="search__filter__itinerary__transport">
-                <div className="search__filter__itinerary__transport-timeline">
-                  <div className="search__filter__itinerary__transport-timeline-line"></div>
-                </div>
-
-                <div className="search__filter__itinerary__transport-item">
-                  <div className="search__filter__itinerary__transport-date">
-                    <p className="search__filter__itinerary__transport-date-date">
-                      <strong>{format(new Date(returnFlight.from), 'd')}</strong>
-                    </p>
-                    <p>{format(new Date(returnFlight.from), 'MMM')}</p>
-                  </div>
-
-                  <div className="search__filter__itinerary__transport-badge">
-                    <Icon name="ui-plane" height={15} />
-                  </div>
-
-                  <div className="search__filter__itinerary__transport-details">
-                    <h6>{returnFlight.productName}</h6>
-                    <p className="search__filter__itinerary__transport-details-plane">
-                      <span>
-                        <Icon name="ui-plane-depart" height={14} /> <strong>{getDepartureTime(returnFlight)}</strong>
-                      </span>{' '}
-                      -{' '}
-                      <span>
-                        <Icon name="ui-plane-arrive" height={14} /> <strong>{getArrivalTime(returnFlight)}</strong>
-                      </span>
-                    </p>
-                    <p className="search__filter__itinerary__transport-details-time">
-                      <span>
-                        <Icon name="ui-clock" height={20} /> {getDuration(returnFlight)}
-                      </span>
-                    </p>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {lastEntryLine && (
-              <div className="search__filter__itinerary__country">
-                <div className="search__filter__itinerary__country-icon">
-                  <Icon name="ui-flag" width={17.5} height={20} />
-                </div>
-                <div className="search__filter__itinerary__country-content">
-                  <p>
-                    {format(new Date(lastEntryLine.to), 'EEE. d MMM yyyy')} - <strong>{translations.SRP.END}</strong>
-                  </p>
-                </div>
-              </div>
-            )}
-          </div>
-        </>
-      </div>
-    </div>
-  );
-};
-
-export default Itinerary;

package/src/search-results/components/multi-range-filter.tsx

@@ -1,104 +0,0 @@
-import React, { ChangeEvent, useEffect, useState } from 'react';
-
-interface MultiRangeFilterProps {
-  min: number;
-  max: number;
-  selectedMin: number;
-  selectedMax: number;
-  valueFormatter: (value: number) => string;
-  onChange: (min: number, max: number) => void;
-}
-
-const MultiRangeFilter: React.FC<MultiRangeFilterProps> = ({ min, max, selectedMin, selectedMax, valueFormatter, onChange }) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const [leftPercentage, setLeftPercentage] = useState<number>(0);
-  const [rightPercentage, setRightPercentage] = useState<number>(0);
-  const [minVal, setMinVal] = useState(selectedMin ?? min);
-  const [maxVal, setMaxVal] = useState(selectedMax ?? max);
-  const minGap = 5;
-
-  // Sync internal state with external selectedMin/selectedMax changes
-  useEffect(() => {
-    setMinVal(selectedMin ?? min);
-    setMaxVal(selectedMax ?? max);
-  }, [min, max, selectedMin, selectedMax]);
-
-  // Recalculate slider track whenever values change
-  useEffect(() => {
-    const range = max - min || 1;
-    const minPercent = ((minVal - min) / range) * 100;
-    const maxPercent = ((maxVal - min) / range) * 100;
-
-    setLeftPercentage(minPercent);
-    setRightPercentage(100 - maxPercent);
-  }, [minVal, maxVal, min, max]);
-
-  const slideMin = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value, 10);
-
-    // Ensure the thumbs don’t cross and enforce minGap
-    if (value <= maxVal - minGap) {
-      setMinVal(value);
-    }
-  };
-
-  const slideMax = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(e.target.value, 10);
-
-    // Ensure the thumbs don’t cross and enforce minGap
-    if (value >= minVal + minGap) {
-      setMaxVal(value);
-    }
-  };
-
-  const startDrag = () => {
-    setIsDragging(true);
-  };
-
-  const stopDrag = () => {
-    setIsDragging(false);
-    // Notify parent with the final values
-    onChange(minVal, maxVal);
-  };
-
-  return (
-    <div className="double-slider-box">
-      <div className="input-box">
-        {/* Show currently selected range */}
-        <div className="min-box">{valueFormatter(minVal)}</div>
-        <div className="max-box">{valueFormatter(maxVal)}</div>
-      </div>
-      <div className="range-slider">
-        <div className="slider-track" style={{ left: `${leftPercentage}%`, right: `${rightPercentage}%` }} />
-        <input
-          type="range"
-          min={min}
-          max={max}
-          value={minVal}
-          onChange={slideMin}
-          onMouseDown={startDrag}
-          onMouseUp={stopDrag}
-          onTouchStart={startDrag}
-          onTouchEnd={stopDrag}
-          className="min-val"
-        />
-        <input
-          type="range"
-          min={min}
-          max={max}
-          value={maxVal}
-          onChange={slideMax}
-          onMouseDown={startDrag}
-          onMouseUp={stopDrag}
-          onTouchStart={startDrag}
-          onTouchEnd={stopDrag}
-          className="max-val"
-        />
-        {isDragging && <div className="min-tooltip">{valueFormatter(minVal)}</div>}
-        {isDragging && <div className="max-tooltip">{valueFormatter(maxVal)}</div>}
-      </div>
-    </div>
-  );
-};
-
-export default MultiRangeFilter;