@qite/tide-booking-component 1.4.124 → 1.4.126

package/src/booking-wizard/features/flight-options/flight-option-flight.tsx

@@ -1,354 +0,0 @@
-import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
-import { buildClassName } from '../../../shared/utils/class-util';
-import { GroupedFlightDetails } from '../../types';
-import { selectTranslations } from '../booking/selectors';
-import { getDateText } from '../sidebar/sidebar-util';
-import Icon from '../../../shared/components/icon';
-
-interface FlightOptionFlightProps {
-  details: GroupedFlightDetails;
-  isOptionsVisible: boolean;
-}
-
-const FlightOptionFlight: React.FC<FlightOptionFlightProps> = ({ details, isOptionsVisible }) => {
-  const translations = useSelector(selectTranslations);
-
-  const [isDetailVisible, setIsDetailVisible] = useState<boolean>(false);
-
-  return (
-    <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/${details.airlineCode}.png?height=256`} alt="" className="flight__logo" />
-            <span>{details.airline}</span>
-          </div>
-          <div className="flight__info">
-            <div className="flight__info__times">
-              <strong>
-                {details.departureTime} {details.departureAirport}
-              </strong>
-              <p>{getDateText(details.departureDate)}</p>
-            </div>
-            <div className="flight__info__duration">
-              <p>{details.travelDuration}</p>
-              <div className="flight__info__duration__stops">
-                <div className="flight__info__duration__stop"></div>
-              </div>
-              {details.numberOfStops > 0 && (
-                <span>
-                  {details.numberOfStops} {translations.FLIGHTS_FORM.FLIGHT_STOPS}
-                </span>
-              )}
-            </div>
-            <div className="flight__info__times flight__info__times--arrival">
-              <strong>
-                {details.arrivalTime} {details.arrivalAirport}
-              </strong>
-              <p>{getDateText(details.arrivalDate)}</p>
-              {details.isNextDay && <span className="flight__info__times__days">{translations.FLIGHTS_FORM.PLUS_ONE_DAY}</span>}
-            </div>
-          </div>
-        </div>
-        <div className="flight__detail__btn__wrapper">
-          <div
-            className={buildClassName(['flight__detail__btn', isDetailVisible && 'flight__detail__btn--active'])}
-            onClick={() => setIsDetailVisible(!isDetailVisible)}>
-            <Icon name="ui-chevron" className="flight__detail__btn__arrow" width={16} height={16} />
-          </div>
-        </div>
-      </div>
-      <div className={buildClassName(['flight__detail', isDetailVisible && 'flight__detail--active'])}>
-        {details.flightLines.map((flightLine, flightLineIndex) => (
-          <React.Fragment key={flightLineIndex}>
-            <div className="flight__info">
-              <div className="flight__info__times__wrapper">
-                <div className="flight__info__times">
-                  <p>{flightLine.departureTime}</p>
-                  <strong>{flightLine.departureAirport}</strong>
-                  <p>{getDateText(flightLine.departureDate)}</p>
-                </div>
-                <div>
-                  <Icon name="ui-plane-depart" width={30} height={20} />
-                </div>
-              </div>
-              <div className="flight__info__duration">
-                <p>{flightLine.travelDuration}</p>
-                <div className="flight__info__duration__stops"></div>
-                <span>{flightLine.airline}</span>
-                <strong>{flightLine.number}</strong>
-              </div>
-              <div className="flight__info__times__wrapper flight__info__times__wrapper--arrival">
-                <div>
-                  <Icon name="ui-plane-arrive" width={30} height={20} />
-                </div>
-                <div className="flight__info__times flight__info__times--arrival">
-                  <p>{flightLine.arrivalTime}</p>
-                  <strong>{flightLine.arrivalAirport}</strong>
-                  <p>{getDateText(flightLine.arrivalDate)}</p>
-                </div>
-              </div>
-            </div>
-            {flightLine.waitDuration && (
-              <div className="flight__info">
-                <div className="flight__info__times"></div>
-                <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.FLIGHTS_FORM.STOP_TIME}</span>
-                    <strong>{flightLine.waitDuration}</strong>
-                  </div>
-                </div>
-                <div className="flight__info__times flight__info__times--arrival"></div>
-              </div>
-            )}
-          </React.Fragment>
-        ))}
-      </div>
-      <div className={buildClassName(['flight__rate', isOptionsVisible && 'flight__rate--active'])}>
-        {/*<div className="flight__rate__container">
-          <div className="flight__rate__title">
-            <h2><strong>{translations.FLIGHTS_FORM.OUTWARD_FLIGHT}</strong></h2>
-            <h2>{translations.FLIGHTS_FORM.CHOOSE_YOUR_CLASS}</h2>
-          </div>
-          <div className="flight__rate__wrapper">
-            <div className={`flight__rate__card ${isCardActive ? 'flight__rate__card--active' : ''}`} onClick={handleCardButtonClick}>
-              <div className="flight__rate__card__header">
-                <h3 className="flight__rate__card__header__title">Economy</h3>
-              </div>
-              <div className="flight__rate__card__content">
-                <div className="flight__rate__card__chairs">
-                  <span>nog 2 stoelen vrij</span>
-                </div>
-                <div className="flight__rate__card__lowest">
-                  <span>Laagste prijs</span>
-                </div>
-                <div className="flight__rate__card__item">
-                  <span>€ 275 p.p</span>                  
-                  <Icon name="chevron" width={20} height={20} />
-                </div>
-              </div>
-            </div>
-            <div className={`flight__rate__card flight__rate__card--premium ${isCard2Active ? 'flight__rate__card--premium--active' : ''}`} onClick={handleCard2ButtonClick}>
-              <div className="flight__rate__card__header">
-                <h3 className="flight__rate__card__header__title">Economy premium</h3>
-              </div>
-              <div className="flight__rate__card__content">
-                <div className="flight__rate__card__chairs">
-                  <span>nog 2 stoelen vrij</span>
-                </div>
-                <div className="flight__rate__card__item">
-                  <span>€ 960 p.p</span>
-                  <Icon name="chevron" width={20} height={20} />
-                </div>
-              </div>
-            </div>
-            <div className={`flight__rate__card flight__rate__card--business ${isCard3Active ? 'flight__rate__card--business--active' : ''}`} onClick={handleCard3ButtonClick}>
-              <div className="flight__rate__card__header">
-                <h3 className="flight__rate__card__header__title">Business</h3>
-              </div>
-              <div className="flight__rate__card__content">
-                <div className="flight__rate__card__chairs">
-                  <span>nog 2 stoelen vrij</span>
-                </div>
-                <div className="flight__rate__card__item">
-                  <span>€ 3.060 p.p</span>
-                  <Icon name="chevron" width={20} height={20} />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className={`flight__rate__detail ${isCardActive ? 'flight__rate__detail--active' : ''}`}>
-          <div className="flight__rate__modal__card">
-            <div className="flight__rate__modal__card__wrapper">
-              <div className="flight__rate__modal__card__header">
-                <h3 className="flight__rate__modal__card__header__title">Economy Basic</h3>
-                <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
-              </div>
-              <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
-                <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
-                  <Icon name="ticket" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Wijzigingen in het ticket</strong>
-                    <p>Wijzigingen toestaan</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
-                  <Icon name="payback" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Terugbetaling van ticket</strong>
-                    <p>Ticket retourneerbaar</p>
-                  </div>
-                </div>
-              </div>
-              <div className="flight__rate__modal__card__items">
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="shopping-bag" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>persoonlijke items</strong>
-                    <p>Gratis</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="backpack" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Handbagage</strong>
-                    <p>Gratis: 2 x 8kg</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="suitcase" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Ingecheckte bagage</strong>
-                    <p>Gratis: 2 x 32kg</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flight__rate__modal__card__footer">
-              <button className="cta cta--secondary">Selecteer</button>
-              <span className="price price--increase">€2.460</span>
-            </div>
-          </div>
-          <div className="flight__rate__modal__card flight__rate__modal__card--premium">
-            <div className="flight__rate__modal__card__wrapper">
-              <div className="flight__rate__modal__card__header">
-                <h3 className="flight__rate__modal__card__header__title">Premium Economy Basic Plus</h3>
-                <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
-              </div>
-              <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="ticket" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Wijzigingen in het ticket</strong>
-                    <p>Wijzigingen toestaan</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="payback" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Terugbetaling van ticket</strong>
-                    <p>Ticket retourneerbaar</p>
-                  </div>
-                </div>
-              </div>
-              <div className="flight__rate__modal__card__items">
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="shopping-bag width={20} height={20}" />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>persoonlijke items</strong>
-                    <p>Gratis</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="backpack" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Handbagage</strong>
-                    <p>Gratis: 2 x 8kg</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="suitcase" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Ingecheckte bagage</strong>
-                    <p>Gratis: 2 x 32kg</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flight__rate__modal__card__footer">
-              <button className="cta cta--secondary">Selecteer</button>
-              <span className="price price--increase">€.2460</span>
-            </div>
-          </div>
-          <div className="flight__rate__modal__card flight__rate__modal__card--business">
-            <div className="flight__rate__modal__card__wrapper">
-              <div className="flight__rate__modal__card__header">
-                <h3 className="flight__rate__modal__card__header__title">Business Basic Plus</h3>
-                <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
-              </div>
-              <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="ticket" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Wijzigingen in het ticket</strong>
-                    <p>Wijzigingen toestaan</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
-                  <Icon name="payback" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Terugbetaling van ticket</strong>
-                    <p>Ticket retourneerbaar</p>
-                  </div>
-                </div>
-              </div>
-              <div className="flight__rate__modal__card__items">
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="shopping-bag" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>persoonlijke items</strong>
-                    <p>Gratis</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="backpack" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Handbagage</strong>
-                    <p>Gratis: 2 x 8kg</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="suitcase" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Ingecheckte bagage</strong>
-                    <p>Gratis: 2 x 32kg</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="seat-selection" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Stoelselectie</strong>
-                    <p>kies uw stoel in het vliegtijg</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="check-in" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Sneller inchecken</strong>
-                    <p>Sla de wachtrijen voor de veiligheidscontrole over</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="business-lounge" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Zakenlunge</strong>
-                    <p>Ontspan voor uw vlucht</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="priority" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Prioriteit</strong>
-                    <p>Stap voor anderen aan boord</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flight__rate__modal__card__footer">
-              <button className="cta cta--secondary">Selecteer</button>
-              <span className="price price--increase">+ €2.460</span>
-            </div>
-          </div>
-        </div>
-        */}
-      </div>
-    </div>
-  );
-};
-
-export default FlightOptionFlight;

package/src/booking-wizard/features/flight-options/flight-option-modal.tsx

@@ -1,211 +0,0 @@
-import React from 'react';
-import Icon from '../../../shared/components/icon';
-
-const FlightOptionModal = ({}) => {
-  return (
-    <div className="flight__rate__modal__container">
-      {' '}
-      {/* add "flight__rate__modal__container--active" to show modal */}
-      <div className="flight__rate__modal">
-        <div className="flight__rate__modal__header">
-          <h3 className="flight__rate__modal__header__title">Selecteer een tarief</h3>
-          <button className="flight__rate__modal__header__close">
-            <Icon name="close" width={18} height={18} />
-          </button>
-        </div>
-        <div className="flight__rate__modal__tabs">
-          <button className="flight__rate__modal__tab flight__rate__modal__tab--active">Economy / Economy premium</button>
-          <button className="flight__rate__modal__tab">Business / Business premium</button>
-        </div>
-        <div className="flight__rate__modal__content">
-          <div className="flight__rate__modal__card">
-            <div className="flight__rate__modal__card__wrapper">
-              <div className="flight__rate__modal__card__header">
-                <h3 className="flight__rate__modal__card__header__title">Economy Basic</h3>
-                <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
-              </div>
-              <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
-                <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
-                  <Icon name="ticket" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Wijzigingen in het ticket</strong>
-                    <p>Wijzigingen toestaan</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
-                  <Icon name="payback" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Terugbetaling van ticket</strong>
-                    <p>Ticket retourneerbaar</p>
-                  </div>
-                </div>
-              </div>
-              <div className="flight__rate__modal__card__items">
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="shopping-bag" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>persoonlijke items</strong>
-                    <p>Gratis</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="backpack" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Handbagage</strong>
-                    <p>Gratis: 2 x 8kg</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="suitcase" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Ingecheckte bagage</strong>
-                    <p>Gratis: 2 x 32kg</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flight__rate__modal__card__footer">
-              <button className="cta cta--secondary">Selecteer</button>
-              <span className="price price--increase">+ €2460,00</span>
-            </div>
-          </div>
-          <div className="flight__rate__modal__card flight__rate__modal__card--premium">
-            <div className="flight__rate__modal__card__wrapper">
-              <div className="flight__rate__modal__card__header">
-                <h3 className="flight__rate__modal__card__header__title">Premium Economy Basic Plus</h3>
-                <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
-              </div>
-              <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="ticket" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Wijzigingen in het ticket</strong>
-                    <p>Wijzigingen toestaan</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="payback" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Terugbetaling van ticket</strong>
-                    <p>Ticket retourneerbaar</p>
-                  </div>
-                </div>
-              </div>
-              <div className="flight__rate__modal__card__items">
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="shopping-bag" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>persoonlijke items</strong>
-                    <p>Gratis</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="backpack" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Handbagage</strong>
-                    <p>Gratis: 2 x 8kg</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="suitcase" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Ingecheckte bagage</strong>
-                    <p>Gratis: 2 x 32kg</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flight__rate__modal__card__footer">
-              <button className="cta cta--secondary">Selecteer</button>
-              <span className="price price--increase">+ €2460,00</span>
-            </div>
-          </div>
-          <div className="flight__rate__modal__card flight__rate__modal__card--business">
-            <div className="flight__rate__modal__card__wrapper">
-              <div className="flight__rate__modal__card__header">
-                <h3 className="flight__rate__modal__card__header__title">Business Basic Plus</h3>
-                <p className="flight__rate__modal__card__header__class">Klasse: Economy</p>
-              </div>
-              <div className="flight__rate__modal__card__items flight__rate__modal__card__items--top">
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="ticket" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Wijzigingen in het ticket</strong>
-                    <p>Wijzigingen toestaan</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item flight__rate__modal__card__item--disabled">
-                  <Icon name="payback" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Terugbetaling van ticket</strong>
-                    <p>Ticket retourneerbaar</p>
-                  </div>
-                </div>
-              </div>
-              <div className="flight__rate__modal__card__items">
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="shopping-bag" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>persoonlijke items</strong>
-                    <p>Gratis</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="backpack" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Handbagage</strong>
-                    <p>Gratis: 2 x 8kg</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="suitcase" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Ingecheckte bagage</strong>
-                    <p>Gratis: 2 x 32kg</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="seat-selection" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Stoelselectie</strong>
-                    <p>kies uw stoel in het vliegtijg</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="check-in" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Sneller inchecken</strong>
-                    <p>Sla de wachtrijen voor de veiligheidscontrole over</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="business-lounge" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Zakenlunge</strong>
-                    <p>Ontspan voor uw vlucht</p>
-                  </div>
-                </div>
-                <div className="flight__rate__modal__card__item">
-                  <Icon name="priority" width={20} height={20} />
-                  <div className="flight__rate__modal__card__item__wrapper">
-                    <strong>Prioriteit</strong>
-                    <p>Stap voor anderen aan boord</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flight__rate__modal__card__footer">
-              <button className="cta cta--secondary">Selecteer</button>
-              <span className="price price--increase">+ €2460,00</span>
-            </div>
-          </div>
-        </div>
-        <div className="flight__rate__modal__footer">
-          <button className="cta cta--secondary">Toepassen</button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FlightOptionModal;

package/src/booking-wizard/features/flight-options/flight-option.tsx

@@ -1,57 +0,0 @@
-import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
-import { buildClassName } from '../../../shared/utils/class-util';
-import { getPriceDifferenceText } from '../../../shared/utils/localization-util';
-import { GroupedFlights } from '../../types';
-import { selectCurrencyCode, selectTranslations } from '../booking/selectors';
-import FlightOptionFlight from './flight-option-flight';
-
-interface FlightOptionProps {
-  item: GroupedFlights;
-  isSelected: boolean;
-  currentPrice: number;
-  onChange: (item: GroupedFlights) => void;
-}
-
-const FlightOption: React.FC<FlightOptionProps> = ({ item, isSelected, currentPrice, onChange }) => {
-  const translations = useSelector(selectTranslations);
-  const currencyCode = useSelector(selectCurrencyCode);
-
-  const ownTotalPrice = item.selectedOutward.price + item.selectedReturn.price;
-  const priceDifference = item.isSelected ? 0 : ownTotalPrice - currentPrice;
-
-  const [outwardVisible] = useState<boolean>(false);
-  const [returnVisible] = useState<boolean>(false);
-
-  const handleButtonClick = () => {
-    if (!item.isSelected) onChange(item);
-  };
-
-  return (
-    <div className="flight__option">
-      <div className="flight__content">
-        <div className="flight__flights">
-          <div className="flight__flight">
-            <div className="flight__flight__header">
-              <div className="flight__status__container"></div>
-              <div className="flight__price">
-                {!isSelected && (
-                  <span className={buildClassName(['price', priceDifference > 0 && 'price--increase', priceDifference < 0 && 'price--decrease'])}>
-                    {getPriceDifferenceText(priceDifference, currencyCode)}
-                  </span>
-                )}
-                <button type="button" className={`cta ${isSelected ? 'cta--selected' : 'cta--select'}`} onClick={handleButtonClick}>
-                  {isSelected ? translations.SHARED.SELECTED : translations.SHARED.SELECT}
-                </button>
-              </div>
-            </div>
-          </div>
-          <FlightOptionFlight details={item.outward} isOptionsVisible={outwardVisible} />
-          <FlightOptionFlight details={item.return} isOptionsVisible={returnVisible} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FlightOption;