@qite/tide-booking-component 1.1.3 → 1.2.0

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

@@ -0,0 +1,350 @@
+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';
+
+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=30`} 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)}>
+            <svg width={16} height={16} className="flight__detail__btn__arrow"><use href="/icons/svg-sprite.svg#chevron"></use></svg>
+          </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">
+                  <strong>{flightLine.departureTime} {flightLine.departureAirport}</strong>
+                  <p>{getDateText(flightLine.departureDate)}</p>
+                </div>
+                <div>
+                   <svg width={30} height={20}><use href="/icons/svg-sprite.svg#plane-depart"></use></svg>
+                </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>
+                  <svg width={35} height={25}><use href="/icons/svg-sprite.svg#plane-arive"></use></svg>
+                </div>
+                <div className="flight__info__times flight__info__times--arrival">
+                  <strong>{flightLine.arrivalTime} {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">
+                    <svg width={20} height={20}><use href="/icons/svg-sprite.svg#clock"></use></svg>
+                  </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>
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#chevron"></use></svg>
+                </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>
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#chevron"></use></svg>
+                </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>
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#chevron"></use></svg>
+                </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">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#ticket"></use></svg>
+                  <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">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#payback"></use></svg>
+                  <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">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#shopping-bag"></use></svg>
+                  <div className="flight__rate__modal__card__item__wrapper">
+                    <strong>persoonlijke items</strong>
+                    <p>Gratis</p>
+                  </div>
+                </div>
+                <div className="flight__rate__modal__card__item">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#backpack"></use></svg>
+                  <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">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#suitcase"></use></svg>
+                  <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">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#ticket"></use></svg>
+                  <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">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#payback"></use></svg>
+                  <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">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#shopping-bag"></use></svg>
+                  <div className="flight__rate__modal__card__item__wrapper">
+                    <strong>persoonlijke items</strong>
+                    <p>Gratis</p>
+                  </div>
+                </div>
+                <div className="flight__rate__modal__card__item">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#backpack"></use></svg>
+                  <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">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#suitcase"></use></svg>
+                  <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">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#ticket"></use></svg>
+                  <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">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#payback"></use></svg>
+                  <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">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#shopping-bag"></use></svg>
+                  <div className="flight__rate__modal__card__item__wrapper">
+                    <strong>persoonlijke items</strong>
+                    <p>Gratis</p>
+                  </div>
+                </div>
+                <div className="flight__rate__modal__card__item">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#backpack"></use></svg>
+                  <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">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#suitcase"></use></svg>
+                  <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">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#seat-selection"></use></svg>
+                  <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">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#check-in"></use></svg>
+                  <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">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#business-lounge"></use></svg>
+                  <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">
+                  <svg width={20} height={20}><use href="/icons/svg-sprite.svg#priority"></use></svg>
+                  <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;