@qite/tide-booking-component 1.4.122 → 1.4.124

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

@@ -1,211 +1,211 @@
-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;
+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 +1,57 @@
-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;
+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;