@qite/tide-booking-component 1.2.5 → 1.3.0

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

@@ -1,229 +1,229 @@
-import React from "react";
-import Icon from "../../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;
+import React from "react";
+import Icon from "../../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,81 +1,81 @@
-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 { 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 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)}
-                  </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;
+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 { 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 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)}
+                  </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;