@qite/tide-booking-component 1.3.1 → 1.3.3

package/src/booking-wizard/features/product-options/no-options.tsx

@@ -1,21 +1,21 @@
-import React from "react";
-import Message from "../../components/message";
-import { selectTranslations } from "../booking/selectors";
-import { useSelector } from "react-redux";
-
-const NoOptions = () => {
-  const translations = useSelector(selectTranslations);
-
-  return (
-    <div className="form__group">
-      <Message
-        type="success"
-        title={translations.OPTIONS_FORM.NO_OPTIONS_TITLE}
-      >
-        <p>{translations.OPTIONS_FORM.NO_OPTIONS_MESSAGE}</p>
-      </Message>
-    </div>
-  );
-};
-
-export default NoOptions;
+import React from "react";
+import Message from "../../components/message";
+import { selectTranslations } from "../booking/selectors";
+import { useSelector } from "react-redux";
+
+const NoOptions = () => {
+  const translations = useSelector(selectTranslations);
+
+  return (
+    <div className="form__group">
+      <Message
+        type="success"
+        title={translations.OPTIONS_FORM.NO_OPTIONS_TITLE}
+      >
+        <p>{translations.OPTIONS_FORM.NO_OPTIONS_MESSAGE}</p>
+      </Message>
+    </div>
+  );
+};
+
+export default NoOptions;

package/src/booking-wizard/features/product-options/none-option.tsx

@@ -1,120 +1,120 @@
-import {
-  BookingOptionGroup,
-  PerBookingPackageOption,
-  PerPaxPackageOption,
-  PerUnitPackageOption,
-} from "@qite/tide-client/build/types";
-import React from "react";
-import { buildClassName } from "../../../shared/utils/class-util";
-import { formatPrice } from "../../../shared/utils/localization-util";
-import { useSelector } from "react-redux";
-import { selectTranslations } from "../booking/selectors";
-
-interface NoneOptionProps {
-  group:
-    | BookingOptionGroup<PerBookingPackageOption>
-    | BookingOptionGroup<PerUnitPackageOption>
-    | BookingOptionGroup<PerPaxPackageOption>;
-  parentId: string;
-  handleNoneSelectionChanged: () => void;
-}
-
-const NoneOption: React.FC<NoneOptionProps> = ({
-  group,
-  parentId,
-  handleNoneSelectionChanged,
-}) => {
-  const translations = useSelector(selectTranslations);
-  const selectedOption = group.options.find((x) => x.isSelected);
-  const showNoneOption = group.options.some((x) => x.requirementType === 2);
-  const noneSelected = !selectedOption;
-  const priceDifferencetext = selectedOption
-    ? `- ${formatPrice(Math.abs(selectedOption.line.price))}`
-    : "";
-
-  return (
-    <>
-      {showNoneOption && (
-        <tr>
-          <td>
-            <div
-              className={buildClassName([
-                "tree",
-                noneSelected && "tree--selected",
-              ])}
-            >
-              <div className="tree__level">
-                <div className="tree__header">
-                  <div className="tree__description-collapse">
-                    <div className="radiobutton">
-                      <div className="radiobutton__label">
-                        <input
-                          type="radio"
-                          value={undefined}
-                          id={`${parentId}_NONE`}
-                          name={parentId}
-                          className={buildClassName([
-                            "radiobutton__input",
-                            "radiobutton__input--parent",
-                          ])}
-                          defaultChecked={noneSelected}
-                          onChange={handleNoneSelectionChanged}
-                        ></input>
-                        <span className="radiobutton__label-text">
-                          <div className="date-list">
-                            <span
-                              className={buildClassName([
-                                "date-list__item",
-                                "date-list__item--none",
-                              ])}
-                            ></span>
-                          </div>
-                        </span>
-                        <div className="tree__columns-actions">
-                          <div className="tree__columns">
-                            <div className="tree__column">
-                              <label
-                                htmlFor={`${parentId}_NONE`}
-                                className={buildClassName([
-                                  "tree__product-name",
-                                  "tree__product-name--none",
-                                ])}
-                              >
-                                {translations.OPTIONS_FORM.NONE}
-                              </label>
-                            </div>
-                            <div className="tree__column"></div>
-                            <div className="tree__column"></div>
-                            <div
-                              className={buildClassName([
-                                "tree__column",
-                                "tree__column--price",
-                              ])}
-                            >
-                              {!noneSelected && (
-                                <span
-                                  className={buildClassName([
-                                    "price",
-                                    "price--decrease",
-                                  ])}
-                                >
-                                  {priceDifferencetext}
-                                </span>
-                              )}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </td>
-        </tr>
-      )}
-    </>
-  );
-};
-
-export default NoneOption;
+import {
+  BookingOptionGroup,
+  PerBookingPackageOption,
+  PerPaxPackageOption,
+  PerUnitPackageOption,
+} from "@qite/tide-client/build/types";
+import React from "react";
+import { buildClassName } from "../../../shared/utils/class-util";
+import { formatPrice } from "../../../shared/utils/localization-util";
+import { useSelector } from "react-redux";
+import { selectTranslations } from "../booking/selectors";
+
+interface NoneOptionProps {
+  group:
+    | BookingOptionGroup<PerBookingPackageOption>
+    | BookingOptionGroup<PerUnitPackageOption>
+    | BookingOptionGroup<PerPaxPackageOption>;
+  parentId: string;
+  handleNoneSelectionChanged: () => void;
+}
+
+const NoneOption: React.FC<NoneOptionProps> = ({
+  group,
+  parentId,
+  handleNoneSelectionChanged,
+}) => {
+  const translations = useSelector(selectTranslations);
+  const selectedOption = group.options.find((x) => x.isSelected);
+  const showNoneOption = group.options.some((x) => x.requirementType === 2);
+  const noneSelected = !selectedOption;
+  const priceDifferencetext = selectedOption
+    ? `- ${formatPrice(Math.abs(selectedOption.line.price))}`
+    : "";
+
+  return (
+    <>
+      {showNoneOption && (
+        <tr>
+          <td>
+            <div
+              className={buildClassName([
+                "tree",
+                noneSelected && "tree--selected",
+              ])}
+            >
+              <div className="tree__level">
+                <div className="tree__header">
+                  <div className="tree__description-collapse">
+                    <div className="radiobutton">
+                      <div className="radiobutton__label">
+                        <input
+                          type="radio"
+                          value={undefined}
+                          id={`${parentId}_NONE`}
+                          name={parentId}
+                          className={buildClassName([
+                            "radiobutton__input",
+                            "radiobutton__input--parent",
+                          ])}
+                          defaultChecked={noneSelected}
+                          onChange={handleNoneSelectionChanged}
+                        ></input>
+                        <span className="radiobutton__label-text">
+                          <div className="date-list">
+                            <span
+                              className={buildClassName([
+                                "date-list__item",
+                                "date-list__item--none",
+                              ])}
+                            ></span>
+                          </div>
+                        </span>
+                        <div className="tree__columns-actions">
+                          <div className="tree__columns">
+                            <div className="tree__column">
+                              <label
+                                htmlFor={`${parentId}_NONE`}
+                                className={buildClassName([
+                                  "tree__product-name",
+                                  "tree__product-name--none",
+                                ])}
+                              >
+                                {translations.OPTIONS_FORM.NONE}
+                              </label>
+                            </div>
+                            <div className="tree__column"></div>
+                            <div className="tree__column"></div>
+                            <div
+                              className={buildClassName([
+                                "tree__column",
+                                "tree__column--price",
+                              ])}
+                            >
+                              {!noneSelected && (
+                                <span
+                                  className={buildClassName([
+                                    "price",
+                                    "price--decrease",
+                                  ])}
+                                >
+                                  {priceDifferencetext}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+      )}
+    </>
+  );
+};
+
+export default NoneOption;

package/src/booking-wizard/features/product-options/option-booking-airline-group.tsx

@@ -1,64 +1,64 @@
-import {
-  AirlineBookingPackageOption,
-  AirportBookingPackageOption,
-  BookingAirlineGroup,
-  BookingAirportGroup,
-  BookingOptionGroup,
-  PerBookingPackageOption,
-} from "@qite/tide-client/build/types";
-import OptionBookingGroup from "./option-booking-group";
-import React from "react";
-
-interface OptionBookingAirlineGroupProps {
-  airGroup: BookingAirlineGroup<AirlineBookingPackageOption>;
-  onGroupChange?: (
-    group:
-      | BookingAirlineGroup<AirlineBookingPackageOption>
-      | BookingAirportGroup<AirportBookingPackageOption>
-  ) => void;
-}
-
-const OptionBookingAirlineGroup: React.FC<OptionBookingAirlineGroupProps> = ({
-  airGroup,
-  onGroupChange,
-}) => {
-  const handleOnGroupChange = (
-    group: BookingOptionGroup<PerBookingPackageOption>
-  ) => {
-    const updatedGroups = airGroup.groups?.map((g) =>
-      g.name === group.name ? group : g
-    );
-
-    const updatedAirlineGroup = Object.assign({}, airGroup, {
-      groups: updatedGroups,
-    });
-    if (onGroupChange) onGroupChange(updatedAirlineGroup);
-  };
-
-  const groups = airGroup.groups.map(
-    (group) =>
-      ({
-        name: group.name,
-        title: group.title,
-        options: group.options,
-      } as BookingOptionGroup<PerBookingPackageOption>)
-  );
-
-  return (
-    <div className="booking-card__airline-group-body">
-      <h4 className="booking-card__airline-group-heading">{airGroup.label}</h4>
-      {groups.map((group, i) => (
-        <OptionBookingGroup
-          key={`${airGroup.label}_${group.name}_${i}`}
-          group={group}
-          firstClassName={"booking-card__group-body"}
-          secondClassName={"booking-card__group-heading"}
-          parentId={`booking_${airGroup.label}_${group.name}`}
-          onGroupChange={handleOnGroupChange}
-        />
-      ))}
-    </div>
-  );
-};
-
-export default OptionBookingAirlineGroup;
+import {
+  AirlineBookingPackageOption,
+  AirportBookingPackageOption,
+  BookingAirlineGroup,
+  BookingAirportGroup,
+  BookingOptionGroup,
+  PerBookingPackageOption,
+} from "@qite/tide-client/build/types";
+import OptionBookingGroup from "./option-booking-group";
+import React from "react";
+
+interface OptionBookingAirlineGroupProps {
+  airGroup: BookingAirlineGroup<AirlineBookingPackageOption>;
+  onGroupChange?: (
+    group:
+      | BookingAirlineGroup<AirlineBookingPackageOption>
+      | BookingAirportGroup<AirportBookingPackageOption>
+  ) => void;
+}
+
+const OptionBookingAirlineGroup: React.FC<OptionBookingAirlineGroupProps> = ({
+  airGroup,
+  onGroupChange,
+}) => {
+  const handleOnGroupChange = (
+    group: BookingOptionGroup<PerBookingPackageOption>
+  ) => {
+    const updatedGroups = airGroup.groups?.map((g) =>
+      g.name === group.name ? group : g
+    );
+
+    const updatedAirlineGroup = Object.assign({}, airGroup, {
+      groups: updatedGroups,
+    });
+    if (onGroupChange) onGroupChange(updatedAirlineGroup);
+  };
+
+  const groups = airGroup.groups.map(
+    (group) =>
+      ({
+        name: group.name,
+        title: group.title,
+        options: group.options,
+      } as BookingOptionGroup<PerBookingPackageOption>)
+  );
+
+  return (
+    <div className="booking-card__airline-group-body">
+      <h4 className="booking-card__airline-group-heading">{airGroup.label}</h4>
+      {groups.map((group, i) => (
+        <OptionBookingGroup
+          key={`${airGroup.label}_${group.name}_${i}`}
+          group={group}
+          firstClassName={"booking-card__group-body"}
+          secondClassName={"booking-card__group-heading"}
+          parentId={`booking_${airGroup.label}_${group.name}`}
+          onGroupChange={handleOnGroupChange}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default OptionBookingAirlineGroup;