@qite/tide-booking-component 1.4.95 → 1.4.97

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

@@ -1,35 +1,35 @@
-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;
+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-results.tsx

@@ -1,208 +1,208 @@
-import React, { useContext, useState } from 'react';
-import Icon from '../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;
+import React, { useContext, useState } from 'react';
+import Icon from '../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;