@qite/tide-booking-component 1.3.2 → 1.3.4

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

@@ -1,317 +1,317 @@
-import {
-  BookingPackageLine,
-  PerPackageOption,
-} from "@qite/tide-client/build/types";
-import { compact, first, isEmpty, sortBy, uniqBy } from "lodash";
-import React from "react";
-import { buildClassName } from "../../../shared/utils/class-util";
-import { getPriceDifferenceText } from "../../../shared/utils/localization-util";
-import { getDateText } from "../sidebar/sidebar-util";
-
-interface OptionItemProps {
-  option: PerPackageOption;
-  parentId: string;
-  index: number;
-  selectedPrice: number;
-  onOptionChange?: (option: PerPackageOption, index: number) => void;
-}
-
-const OptionItem: React.FC<OptionItemProps> = ({
-  option,
-  parentId,
-  index,
-  selectedPrice,
-  onOptionChange,
-}) => {
-  const priceDifference =
-    option.requirementType === 1
-      ? option.isSelected
-        ? -option.line.price
-        : option.line.price
-      : option.requirementType === 2 || option.requirementType === 3
-      ? option.line.price - selectedPrice
-      : 0;
-
-  const accommodations = uniqBy(
-    compact(
-      [option.line, ...option.alternatives].map((option) => {
-        if (!option.accommodationCode) {
-          return undefined;
-        }
-
-        return {
-          accommodationCode: option.accommodationCode,
-          accommodationName: option.accommodationName,
-        };
-      })
-    ),
-    "accommodationCode"
-  );
-
-  const regimes = uniqBy(
-    compact(
-      [option.line, ...option.alternatives]
-        .filter((x) => x.accommodationCode === option.line.accommodationCode)
-        .map((option) => {
-          return {
-            regimeCode: option.regimeCode,
-            regimeName: option.regimeName,
-          };
-        })
-    ),
-    "regimeCode"
-  );
-
-  const handleAccommodationChange: React.FormEventHandler<HTMLSelectElement> = (
-    e
-  ) => {
-    const accommodationCode = e.currentTarget.value;
-
-    var accommodationAlternatives = option.alternatives.filter(
-      (x) => x.accommodationCode == accommodationCode
-    );
-
-    if (accommodationAlternatives) {
-      const alternative =
-        accommodationAlternatives.find(
-          (x) => x.regimeCode == option.line.regimeCode
-        ) ?? accommodationAlternatives[0];
-
-      updateOption(alternative);
-    }
-
-    e.preventDefault();
-  };
-
-  const handleRegimeChange: React.FormEventHandler<HTMLSelectElement> = (e) => {
-    const regimeCode = e.currentTarget.value;
-    const alternative = option.alternatives.find(
-      (x) =>
-        x.accommodationCode === option.line.accommodationCode &&
-        x.regimeCode == regimeCode
-    );
-
-    updateOption(alternative);
-
-    e.preventDefault();
-  };
-
-  const handleSelectionChange: React.FormEventHandler<HTMLInputElement> = (
-    e
-  ) => {
-    const updatedOption = {
-      ...option,
-      isSelected: e.currentTarget.checked,
-    };
-
-    // Bubble up option changes
-    if (onOptionChange) onOptionChange(updatedOption, index);
-  };
-
-  const updateOption = (alternative?: BookingPackageLine) => {
-    if (alternative) {
-      const updatedAlternatives = [option.line, ...option.alternatives]
-        .filter((x) => x != alternative)
-        .sort((x, y) => x.price - y.price);
-
-      const updatedOption = {
-        ...option,
-        line: alternative,
-        alternatives: updatedAlternatives,
-      };
-
-      // Bubble up option changes
-      if (onOptionChange) onOptionChange(updatedOption, index);
-    }
-  };
-
-  const getAccommodationPriceDifference = (accommodation: {
-    accommodationCode: string;
-    accommodationName: string;
-  }) => {
-    if (option.line.accommodationCode === accommodation.accommodationCode)
-      return "";
-
-    var currentPrice = option.line.price;
-    var accommodationPrice = first(
-      sortBy(
-        option.alternatives.filter(
-          (x) => x.accommodationCode === accommodation.accommodationCode
-        ),
-        (x) => x.price
-      )
-    )?.price;
-
-    const priceDifference = (accommodationPrice ?? 0) - currentPrice;
-    if (priceDifference !== 0) {
-      return `(${getPriceDifferenceText(priceDifference)})`;
-    } else {
-      return "";
-    }
-  };
-
-  const getRegimePriceDifference = (regime: {
-    regimeCode: string;
-    regimeName: string;
-  }) => {
-    if (option.line.regimeCode === regime.regimeCode) return "";
-
-    var currentPrice = option.line.price;
-    var regimePrice = option.alternatives.find(
-      (x) =>
-        x.accommodationCode === option.line.accommodationCode &&
-        x.regimeCode === regime.regimeCode
-    )?.price;
-
-    const priceDifference = (regimePrice ?? 0) - currentPrice;
-    if (priceDifference !== 0) {
-      return `(${getPriceDifferenceText(priceDifference)})`;
-    } else {
-      return "";
-    }
-  };
-
-  return (
-    <>
-      {option.requirementType === 0 && (
-        <input
-          type="checkbox"
-          id={`${parentId}_${index}`}
-          className={buildClassName([
-            "checkbox__input",
-            "checkbox__input--parent",
-          ])}
-          defaultChecked={true}
-          disabled={true}
-        ></input>
-      )}
-      {option.requirementType === 1 && (
-        <input
-          type="checkbox"
-          id={`${parentId}_${index}`}
-          className={buildClassName([
-            "checkbox__input",
-            "checkbox__input--parent",
-          ])}
-          defaultChecked={option.isSelected}
-          onChange={handleSelectionChange}
-        ></input>
-      )}
-      {(option.requirementType === 2 || option.requirementType === 3) && (
-        <input
-          type="radio"
-          value={index}
-          id={`${parentId}_${index}`}
-          name={parentId}
-          className={buildClassName([
-            "radiobutton__input",
-            "radiobutton__input--parent",
-          ])}
-          defaultChecked={option.isSelected}
-          onChange={handleSelectionChange}
-        ></input>
-      )}
-      <span className="radiobutton__label-text">
-        <div className="date-list">
-          <span className="date-list__item">
-            {getDateText(option.line.startDate, true)}
-          </span>
-          <span className="date-list__item">
-            {getDateText(option.line.endDate, true)}
-          </span>
-        </div>
-      </span>
-      <div className="tree__columns-actions">
-        <div className="tree__columns">
-          <div className="tree__column">
-            <div className="tree__product-name">{option.line.productName}</div>
-          </div>
-          {isEmpty(option.alternatives) && (
-            <>
-              <div className="tree__column">
-                <span className="tree__product-name">
-                  {option.line.accommodationName}
-                </span>
-              </div>
-              <div className="tree__column">
-                <span className="tree__product-name">
-                  {option.line.regimeName}
-                </span>
-              </div>
-            </>
-          )}
-          {!isEmpty(option.alternatives) && (
-            <>
-              <div className="tree__column">
-                <div className="select-wrapper">
-                  <div className="select-wrapper__select">
-                    <select onChange={handleAccommodationChange}>
-                      {accommodations.map((accommodation) => (
-                        <option
-                          defaultValue={option.line.accommodationCode}
-                          key={accommodation.accommodationCode}
-                          value={accommodation.accommodationCode}
-                        >
-                          {accommodation.accommodationName}{" "}
-                          {getAccommodationPriceDifference(accommodation)}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-                </div>
-              </div>
-              <div className="tree__column">
-                <div className="select-wrapper">
-                  {regimes?.length > 1 && (
-                    <div className="select-wrapper__select">
-                      <select
-                        defaultValue={option.line.regimeCode}
-                        onChange={handleRegimeChange}
-                      >
-                        {regimes.map((regime) => (
-                          <option
-                            key={regime.regimeCode}
-                            value={regime.regimeCode}
-                          >
-                            {regime.regimeName}{" "}
-                            {getRegimePriceDifference(regime)}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                  )}
-                  {regimes.length === 1 && (
-                    <>
-                      {
-                        regimes.find(
-                          (x) => x.regimeCode == option.line.regimeCode
-                        )?.regimeName
-                      }
-                    </>
-                  )}
-                </div>
-              </div>
-            </>
-          )}
-          <div
-            className={buildClassName(["tree__column", "tree__column--price"])}
-          >
-            {!option.isSelected && (
-              <span
-                className={buildClassName([
-                  "price",
-                  priceDifference > 0 && "price--increase",
-                  priceDifference < 0 && "price--decrease",
-                ])}
-              >
-                {getPriceDifferenceText(priceDifference)}
-              </span>
-            )}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default OptionItem;
+import {
+  BookingPackageLine,
+  PerPackageOption,
+} from "@qite/tide-client/build/types";
+import { compact, first, isEmpty, sortBy, uniqBy } from "lodash";
+import React from "react";
+import { buildClassName } from "../../../shared/utils/class-util";
+import { getPriceDifferenceText } from "../../../shared/utils/localization-util";
+import { getDateText } from "../sidebar/sidebar-util";
+
+interface OptionItemProps {
+  option: PerPackageOption;
+  parentId: string;
+  index: number;
+  selectedPrice: number;
+  onOptionChange?: (option: PerPackageOption, index: number) => void;
+}
+
+const OptionItem: React.FC<OptionItemProps> = ({
+  option,
+  parentId,
+  index,
+  selectedPrice,
+  onOptionChange,
+}) => {
+  const priceDifference =
+    option.requirementType === 1
+      ? option.isSelected
+        ? -option.line.price
+        : option.line.price
+      : option.requirementType === 2 || option.requirementType === 3
+      ? option.line.price - selectedPrice
+      : 0;
+
+  const accommodations = uniqBy(
+    compact(
+      [option.line, ...option.alternatives].map((option) => {
+        if (!option.accommodationCode) {
+          return undefined;
+        }
+
+        return {
+          accommodationCode: option.accommodationCode,
+          accommodationName: option.accommodationName,
+        };
+      })
+    ),
+    "accommodationCode"
+  );
+
+  const regimes = uniqBy(
+    compact(
+      [option.line, ...option.alternatives]
+        .filter((x) => x.accommodationCode === option.line.accommodationCode)
+        .map((option) => {
+          return {
+            regimeCode: option.regimeCode,
+            regimeName: option.regimeName,
+          };
+        })
+    ),
+    "regimeCode"
+  );
+
+  const handleAccommodationChange: React.FormEventHandler<HTMLSelectElement> = (
+    e
+  ) => {
+    const accommodationCode = e.currentTarget.value;
+
+    var accommodationAlternatives = option.alternatives.filter(
+      (x) => x.accommodationCode == accommodationCode
+    );
+
+    if (accommodationAlternatives) {
+      const alternative =
+        accommodationAlternatives.find(
+          (x) => x.regimeCode == option.line.regimeCode
+        ) ?? accommodationAlternatives[0];
+
+      updateOption(alternative);
+    }
+
+    e.preventDefault();
+  };
+
+  const handleRegimeChange: React.FormEventHandler<HTMLSelectElement> = (e) => {
+    const regimeCode = e.currentTarget.value;
+    const alternative = option.alternatives.find(
+      (x) =>
+        x.accommodationCode === option.line.accommodationCode &&
+        x.regimeCode == regimeCode
+    );
+
+    updateOption(alternative);
+
+    e.preventDefault();
+  };
+
+  const handleSelectionChange: React.FormEventHandler<HTMLInputElement> = (
+    e
+  ) => {
+    const updatedOption = {
+      ...option,
+      isSelected: e.currentTarget.checked,
+    };
+
+    // Bubble up option changes
+    if (onOptionChange) onOptionChange(updatedOption, index);
+  };
+
+  const updateOption = (alternative?: BookingPackageLine) => {
+    if (alternative) {
+      const updatedAlternatives = [option.line, ...option.alternatives]
+        .filter((x) => x != alternative)
+        .sort((x, y) => x.price - y.price);
+
+      const updatedOption = {
+        ...option,
+        line: alternative,
+        alternatives: updatedAlternatives,
+      };
+
+      // Bubble up option changes
+      if (onOptionChange) onOptionChange(updatedOption, index);
+    }
+  };
+
+  const getAccommodationPriceDifference = (accommodation: {
+    accommodationCode: string;
+    accommodationName: string;
+  }) => {
+    if (option.line.accommodationCode === accommodation.accommodationCode)
+      return "";
+
+    var currentPrice = option.line.price;
+    var accommodationPrice = first(
+      sortBy(
+        option.alternatives.filter(
+          (x) => x.accommodationCode === accommodation.accommodationCode
+        ),
+        (x) => x.price
+      )
+    )?.price;
+
+    const priceDifference = (accommodationPrice ?? 0) - currentPrice;
+    if (priceDifference !== 0) {
+      return `(${getPriceDifferenceText(priceDifference)})`;
+    } else {
+      return "";
+    }
+  };
+
+  const getRegimePriceDifference = (regime: {
+    regimeCode: string;
+    regimeName: string;
+  }) => {
+    if (option.line.regimeCode === regime.regimeCode) return "";
+
+    var currentPrice = option.line.price;
+    var regimePrice = option.alternatives.find(
+      (x) =>
+        x.accommodationCode === option.line.accommodationCode &&
+        x.regimeCode === regime.regimeCode
+    )?.price;
+
+    const priceDifference = (regimePrice ?? 0) - currentPrice;
+    if (priceDifference !== 0) {
+      return `(${getPriceDifferenceText(priceDifference)})`;
+    } else {
+      return "";
+    }
+  };
+
+  return (
+    <>
+      {option.requirementType === 0 && (
+        <input
+          type="checkbox"
+          id={`${parentId}_${index}`}
+          className={buildClassName([
+            "checkbox__input",
+            "checkbox__input--parent",
+          ])}
+          defaultChecked={true}
+          disabled={true}
+        ></input>
+      )}
+      {option.requirementType === 1 && (
+        <input
+          type="checkbox"
+          id={`${parentId}_${index}`}
+          className={buildClassName([
+            "checkbox__input",
+            "checkbox__input--parent",
+          ])}
+          defaultChecked={option.isSelected}
+          onChange={handleSelectionChange}
+        ></input>
+      )}
+      {(option.requirementType === 2 || option.requirementType === 3) && (
+        <input
+          type="radio"
+          value={index}
+          id={`${parentId}_${index}`}
+          name={parentId}
+          className={buildClassName([
+            "radiobutton__input",
+            "radiobutton__input--parent",
+          ])}
+          defaultChecked={option.isSelected}
+          onChange={handleSelectionChange}
+        ></input>
+      )}
+      <span className="radiobutton__label-text">
+        <div className="date-list">
+          <span className="date-list__item">
+            {getDateText(option.line.startDate, true)}
+          </span>
+          <span className="date-list__item">
+            {getDateText(option.line.endDate, true)}
+          </span>
+        </div>
+      </span>
+      <div className="tree__columns-actions">
+        <div className="tree__columns">
+          <div className="tree__column">
+            <div className="tree__product-name">{option.line.productName}</div>
+          </div>
+          {isEmpty(option.alternatives) && (
+            <>
+              <div className="tree__column">
+                <span className="tree__product-name">
+                  {option.line.accommodationName}
+                </span>
+              </div>
+              <div className="tree__column">
+                <span className="tree__product-name">
+                  {option.line.regimeName}
+                </span>
+              </div>
+            </>
+          )}
+          {!isEmpty(option.alternatives) && (
+            <>
+              <div className="tree__column">
+                <div className="select-wrapper">
+                  <div className="select-wrapper__select">
+                    <select onChange={handleAccommodationChange}>
+                      {accommodations.map((accommodation) => (
+                        <option
+                          defaultValue={option.line.accommodationCode}
+                          key={accommodation.accommodationCode}
+                          value={accommodation.accommodationCode}
+                        >
+                          {accommodation.accommodationName}{" "}
+                          {getAccommodationPriceDifference(accommodation)}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+              </div>
+              <div className="tree__column">
+                <div className="select-wrapper">
+                  {regimes?.length > 1 && (
+                    <div className="select-wrapper__select">
+                      <select
+                        defaultValue={option.line.regimeCode}
+                        onChange={handleRegimeChange}
+                      >
+                        {regimes.map((regime) => (
+                          <option
+                            key={regime.regimeCode}
+                            value={regime.regimeCode}
+                          >
+                            {regime.regimeName}{" "}
+                            {getRegimePriceDifference(regime)}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                  )}
+                  {regimes.length === 1 && (
+                    <>
+                      {
+                        regimes.find(
+                          (x) => x.regimeCode == option.line.regimeCode
+                        )?.regimeName
+                      }
+                    </>
+                  )}
+                </div>
+              </div>
+            </>
+          )}
+          <div
+            className={buildClassName(["tree__column", "tree__column--price"])}
+          >
+            {!option.isSelected && (
+              <span
+                className={buildClassName([
+                  "price",
+                  priceDifference > 0 && "price--increase",
+                  priceDifference < 0 && "price--decrease",
+                ])}
+              >
+                {getPriceDifferenceText(priceDifference)}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default OptionItem;