@qite/tide-booking-component 1.4.124 → 1.4.125

package/src/search-results/components/flight/flight-banner.tsx

@@ -1,35 +0,0 @@
-import React, { useContext } from 'react';
-import { Tag } from '../../types';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-
-interface FlightBannerProps {
-  tag: Tag;
-  luggageIncluded: boolean;
-}
-
-const FlightBannerComponent: React.FC<FlightBannerProps> = ({ tag, luggageIncluded }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  return (
-    <div className="search__flight-card-banner">
-      <div className="search__flight-card-banner-info">
-        {tag.icon}
-        <p className="search__flight-card-banner-text">{tag.label}</p>
-      </div>
-      {luggageIncluded && (
-        <div className="search__flight-card-banner-info">
-          <svg id="search-flightLeg-suitcase-icon" viewBox="0 0 10.978 15.967" width={10.98} height={15.97}>
-            <path
-              id="luggage_16dp_UNDEFINED_FILL0_wght400_GRAD0_opsz20"
-              d="M217.5-849.031a1.492,1.492,0,0,1-1.05-.416,1.338,1.338,0,0,1-.447-1.019v-9.044a1.442,1.442,0,0,1,.439-1.057,1.437,1.437,0,0,1,1.055-.44h1.495v-1.5a1.443,1.443,0,0,1,.439-1.057,1.447,1.447,0,0,1,1.063-.44h2a1.443,1.443,0,0,1,1.057.439,1.438,1.438,0,0,1,.44,1.055v1.495h1.5a1.443,1.443,0,0,1,1.057.439,1.447,1.447,0,0,1,.44,1.063v9.023a1.372,1.372,0,0,1-.447,1.028,1.47,1.47,0,0,1-1.05.428v.1a.86.86,0,0,1-.26.637.844.844,0,0,1-.613.257.844.844,0,0,1-.613-.257.86.86,0,0,1-.26-.637v-.1h-4.491v.125a.844.844,0,0,1-.257.613.861.861,0,0,1-.637.26.8.8,0,0,1-.607-.26.864.864,0,0,1-.245-.613Zm0-1.5h7.984v-8.982H217.5Zm1.746-1h1.5v-6.986h-1.5Zm2.994,0h1.5v-6.986h-1.5Zm-1.746-9.481h2v-1.5h-2ZM221.489-855.018Z"
-              transform="translate(-216 864)"
-              fill="#707070"
-            />
-          </svg>
-          <p className="search__flight-card-banner-text">Luggage included</p>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default FlightBannerComponent;

package/src/search-results/components/flight/flight-card.tsx

@@ -1,38 +0,0 @@
-import React, { useContext } from 'react';
-import { FlightResult } from '../../types';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-import FlightLegComponent from './flight-leg';
-
-interface FlightCardProps {
-  result: FlightResult;
-}
-
-const FlightCard: React.FC<FlightCardProps> = ({ result }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  return (
-    <div className="search__result search__result--flight">
-      {/* -------------------- flightcard -------------------- */}
-      <div className="search__flight-card">
-        {/* outbound part */}
-        <FlightLegComponent leg={result.outbound} />
-
-        {/* return part */}
-        <FlightLegComponent leg={result.return} />
-      </div>
-
-      {/* -------------------- pricecard -------------------- */}
-      <div className="search__price-card">
-        <div className="search__price-card-price-wrapper">
-          <p className="search__price-card-price">{result.price}</p>
-        </div>
-        <div>
-          <button className="search__price-card-button" onClick={() => console.log('clicked result with ID:', result.id)}>
-            {result.ctaText}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FlightCard;

package/src/search-results/components/flight/flight-leg.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { FlightLeg } from '../../types';
-import { formatDate, formatTime } from '../../../shared/utils/localization-util';
-import FlightPath from './flight-path';
-import FlightBannerComponent from './flight-banner';
-
-interface FlightLegProps {
-  leg: FlightLeg;
-}
-
-const FlightLegComponent: React.FC<FlightLegProps> = ({ leg }) => {
-  return leg ? (
-    <div className="search__flight-card-content-top">
-      <div className="search__flight-card-content">
-        <div className="search__flight-card-content-start">
-          <div className="search__flight-card-content-start-time">
-            <svg className="search__flight-card-content-icon" id="search-flightLeg-plane-depart-icon" viewBox="0 0 11.477 9.98" width={11.48} height={9.98}>
-              <path
-                id="connecting_airports_16dp_UNDEFINED_FILL0_wght400_GRAD0_opsz20"
-                d="M106.978-871.035l-2.245-3.493h-2.994a1.2,1.2,0,0,1-.884-.364,1.2,1.2,0,0,1-.364-.884,1.2,1.2,0,0,1,.364-.884,1.2,1.2,0,0,1,.884-.364H104.4l2.578-3.992h1.5l-1.247,3.992h2.162l1.081-1.5h1.5l-1,2.744,1,2.744h-1.5l-1.081-1.5h-2l1.081,3.493Z"
-                transform="translate(111.967 -871.035) rotate(180)"
-                fill="#57abb2"
-              />
-            </svg>
-            <h5>{formatTime(leg.departureDateTime)}</h5>
-          </div>
-          <p className="search__flight-card-content-start-destination">{leg.departureAirport}</p>
-          <p className="search__flight-card-content-start-date">{formatDate(leg.departureDateTime)}</p>
-        </div>
-
-        <div className="search__flight-card-content-stops">
-          <p className="search__flight-card-content-stops-info-hour">{leg.duration}</p>
-          <FlightPath stops={leg.stops} />
-          <div className="search__flight-card-content-stops-info">
-            <svg className="search__flight-card-content-icon" id="search-flightLeg-stop-icon" viewBox="0 0 14.969 10.978" width={14.97} height={10.98}>
-              <path
-                id="airline_stops_16dp_UNDEFINED_FILL0_wght400_GRAD0_opsz20"
-                d="M101.738-733.022v-1.5h1.5a5.842,5.842,0,0,0-2.162-4.647A7.583,7.583,0,0,0,96-741.006v-1.5a9.357,9.357,0,0,1,4.709,1.237,7.929,7.929,0,0,1,3.275,3.5,8.25,8.25,0,0,1,2-2.692A20.272,20.272,0,0,1,108.7-742.5h-3.223V-744h5.489v5.489h-1.5v-2.724a13.531,13.531,0,0,0-3.327,2.838,5.83,5.83,0,0,0-1.414,3.878h1.5v1.5Z"
-                transform="translate(-96 744)"
-                fill="#57abb2"
-              />
-            </svg>
-            <p className="search__flight-card-content-stops-info-text">
-              {leg.stops} stop{leg.stops !== 1 ? 's' : ''}
-            </p>
-          </div>
-        </div>
-
-        <div className="search__flight-card-content-end">
-          <h5 className="search__flight-card-content-end-time">{formatTime(leg.arrivalDateTime)}</h5>
-          <p className="search__flight-card-content-end-destination">{leg.arrivalAirport}</p>
-          <p className="search__flight-card-content-end-date">{formatDate(leg.arrivalDateTime)}</p>
-        </div>
-      </div>
-
-      <FlightBannerComponent tag={leg.airline} luggageIncluded={leg.luggageIncluded} />
-    </div>
-  ) : null;
-};
-
-export default FlightLegComponent;

package/src/search-results/components/flight/flight-path.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-interface FlightPathProps {
-  stops?: number;
-}
-
-const FlightPath: React.FC<FlightPathProps> = ({ stops = 0 }) => {
-  return (
-    <div className="flight-path">
-      <div className="flight-path__point flight-path__point--start"></div>
-
-      <div className="flight-path__line">
-        {Array.from({ length: stops }, (_, index) => (
-          <div key={index} className="flight-path__stop"></div>
-        ))}
-      </div>
-
-      <div className="flight-path__point flight-path__point--end"></div>
-    </div>
-  );
-};
-
-export default FlightPath;

package/src/search-results/components/flight/flight-results.tsx

@@ -1,208 +0,0 @@
-import React, { useContext, useState } from 'react';
-import Icon from '../../../shared/components/icon';
-import { BookingPackageFlight } from '@qite/tide-client';
-import { parseISO, format } from 'date-fns';
-import { useDispatch } from 'react-redux';
-import { selectFlight } from '../../store/search-results-slice';
-import { getTranslations } from '../../../shared/utils/localization-util';
-import SearchResultsConfigurationContext from '../../search-results-configuration-context';
-
-interface FlightResultsProps {
-  flights?: BookingPackageFlight[];
-  isDeparture?: boolean;
-}
-
-const ticksToMinutes = (ticks: number) => Math.floor(ticks / 600000000);
-
-const formatDuration = (ticks: number) => {
-  const minutes = ticksToMinutes(ticks);
-  const h = Math.floor(minutes / 60);
-  const m = minutes % 60;
-  return `${h}h ${m}m`;
-};
-
-const FlightResults: React.FC<FlightResultsProps> = ({ flights, isDeparture }) => {
-  const context = useContext(SearchResultsConfigurationContext);
-  const translations = getTranslations(context?.languageCode ?? 'en-GB');
-
-  const dispatch = useDispatch();
-
-  const [activeDetailId, setActiveDetailId] = useState<string | null>(null);
-
-  const handleDetailClick = (flightOptionId: string) => {
-    setActiveDetailId((prev) => (prev === flightOptionId ? null : flightOptionId));
-  };
-
-  const firstResult = flights?.[0];
-  const firstResultDate = firstResult?.startDateTime ? parseISO(firstResult.startDateTime) : null;
-
-  return (
-    <>
-      {/* Header */}
-      <div className="search__results__label">
-        <div className="search__results__label__date">
-          {firstResultDate && (
-            <>
-              <p className="search__results__label__date-date">{format(firstResultDate, 'd')}</p>
-              <p>{format(firstResultDate, 'MMM')}</p>
-            </>
-          )}
-        </div>
-        <div className="search__results__label__text">
-          <h3>
-            {translations.SRP.SELECT} <strong>{isDeparture ? translations.SRP.DEPARTURE : translations.SRP.RETURN}</strong>
-          </h3>
-        </div>
-      </div>
-
-      {flights && flights.length > 0 && (
-        <div className="search__results__cards search__results__cards--extended">
-          {flights.map((flight, index) => {
-            const lines = flight.flightMetaData.flightLines;
-            const firstLine = lines[0];
-            const lastLine = lines[lines.length - 1];
-            const stops = lines.length - 1;
-
-            return (
-              <div className="flight" key={`flight-${flight.flightId}-${index}`}>
-                <div className="flight__option">
-                  <div className="flight__content">
-                    <div className="flight__flights">
-                      {/* HEADER */}
-                      <div className="flight__flight">
-                        <div className="flight__flight__header">
-                          <div className="flight__status__container" />
-                          <div className="flight__price">
-                            <span className="price">€ {flight.price.toFixed(2)}</span>
-
-                            <button
-                              type="button"
-                              className={`cta ${flight.isSelected ? 'cta--selected' : 'cta--select'}`}
-                              onClick={() => dispatch(selectFlight({ flightOptionId: flight.flightOptionId, isDeparture: !!isDeparture }))}>
-                              {flight.isSelected ? 'Selected' : 'Select'}
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-
-                      {/* SUMMARY */}
-                      <div className="flight__flight">
-                        <div className="flight__flight__container">
-                          <div className="flight__flight__wrapper">
-                            <div className="flight__logo__wrapper">
-                              <img
-                                src={`https://media.tidesoftware.be/media/shared/Airlines/${firstLine.airlineCode}.png?height=256`}
-                                alt={flight.airlineDescription}
-                                className="flight__logo"
-                              />
-                              <span>{flight.airlineDescription}</span>
-                            </div>
-
-                            <div className="flight__info">
-                              <div className="flight__info__times">
-                                <strong>
-                                  {firstLine.departureTime} {firstLine.departureAirport}
-                                </strong>
-                                <p>{format(parseISO(firstLine.departureDate), 'EEE dd MMM yyyy')}</p>
-                              </div>
-
-                              <div className="flight__info__duration">
-                                <p>{formatDuration(flight.flightMetaData.durationInTicks)}</p>
-
-                                <div className="flight__info__duration__stops">{stops > 0 && <div className="flight__info__duration__stop" />}</div>
-
-                                <span>{stops === 0 ? translations.SRP.DIRECT : `${stops} ${translations.SRP.STOP}${stops > 1 ? 's' : ''}`}</span>
-                              </div>
-
-                              <div className="flight__info__times flight__info__times--arrival">
-                                <strong>
-                                  {lastLine.arrivalTime} {lastLine.arrivalAirport}
-                                </strong>
-                                <p>{format(parseISO(lastLine.arrivalDate), 'EEE dd MMM yyyy')}</p>
-                              </div>
-                            </div>
-                          </div>
-
-                          <div className="flight__detail__btn__wrapper">
-                            <div
-                              className={`flight__detail__btn ${activeDetailId === flight.flightOptionId ? 'flight__detail__btn--active' : ''}`}
-                              onClick={() => handleDetailClick(flight.flightOptionId)}>
-                              <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
-                            </div>
-                          </div>
-                        </div>
-
-                        {/* DETAILS */}
-                        <div className={`flight__detail ${activeDetailId === flight.flightOptionId ? 'flight__detail--active' : ''}`}>
-                          {lines.map((line, index) => {
-                            const nextLine = lines[index + 1];
-
-                            return (
-                              <React.Fragment key={index}>
-                                {/* Flight line */}
-                                <div className="flight__info">
-                                  <div className="flight__info__times__wrapper">
-                                    <div className="flight__info__times">
-                                      <p>{line.departureTime}</p>
-                                      <strong>{line.departureAirport}</strong>
-                                      <p>{format(parseISO(line.departureDate), 'EEE dd MMM yyyy')}</p>
-                                    </div>
-
-                                    <Icon name="ui-plane-depart" width={30} height={20} />
-                                  </div>
-
-                                  <div className="flight__info__duration">
-                                    <p>{formatDuration(line.durationInTicks)}</p>
-                                    <span>
-                                      {line.airline} {line.number}
-                                    </span>
-                                  </div>
-
-                                  <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
-                                    <Icon name="ui-plane-arrive" width={30} height={20} />
-                                    <div className="flight__info__times flight__info__times--arrival">
-                                      <p>{line.arrivalTime}</p>
-                                      <strong>{line.arrivalAirport}</strong>
-                                      <p>{format(parseISO(line.arrivalDate), 'EEE dd MMM yyyy')}</p>
-                                    </div>
-                                  </div>
-                                </div>
-
-                                {nextLine && (
-                                  <div className="flight__info">
-                                    <div className="flight__info__duration flight__info__duration--waittime">
-                                      <div className="flight__info__duration__stops flight__info__duration__stops--stoptime">
-                                        <Icon name="ui-clock" width={24} height={24} />
-                                      </div>
-                                      <div className="flight__info__duration__stoptime">
-                                        <span>{translations.SRP.STOP_TIME}</span>
-                                        <strong>{formatDuration(parseISO(nextLine.departureDate).getTime() - parseISO(line.arrivalDate).getTime())}</strong>
-                                      </div>
-                                    </div>
-                                  </div>
-                                )}
-                              </React.Fragment>
-                            );
-                          })}
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="flight__rate" />
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
-
-      {/* <div className="search__results__options">
-        <p>There are more transports at your disposal</p>
-        <a href="#">More options</a>
-      </div> */}
-    </>
-  );
-};
-
-export default FlightResults;