@qite/tide-booking-component 0.0.2-preview.8 → 1.0.0-preview

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

@@ -0,0 +1,210 @@
+import {
+  BookingOptionGroup,
+  BookingOptionPax,
+  BookingOptionUnit,
+  PerBookingPackageOption,
+  PerPackageOption,
+} from "@qite/tide-client/build/types";
+import { isEmpty } from "lodash";
+import React from "react";
+import { buildClassName } from "../../utils/class-util";
+import NoneOption from "./none-option";
+import OptionItem from "./option-item";
+import OptionPaxCard from "./option-pax-card";
+import OptionUnitsCard from "./option-units-card";
+
+interface OptionBookingGroupProps {
+  optionId?: string;
+  group: BookingOptionGroup<PerBookingPackageOption>;
+  firstClassName: string;
+  secondClassName: string;
+  parentId: string;
+  onGroupChange?: (
+    group: BookingOptionGroup<PerBookingPackageOption>,
+    optionId?: string
+  ) => void;
+}
+
+const OptionBookingGroup: React.FC<OptionBookingGroupProps> = ({
+  optionId,
+  group,
+  firstClassName,
+  secondClassName,
+  parentId,
+  onGroupChange,
+}) => {
+  const handleOptionChange = (option: PerPackageOption, index: number) => {
+    const updatedGroup = {
+      ...group,
+      options: group.options.map((o, i) => {
+        return i === index
+          ? option
+          : {
+              ...o,
+              isSelected: option.requirementType === 2 ? false : o.isSelected,
+            };
+      }),
+    } as BookingOptionGroup<PerBookingPackageOption>;
+
+    if (onGroupChange) onGroupChange(updatedGroup, optionId);
+  };
+
+  const handleChildGroupChange = (
+    childGroup: BookingOptionGroup<PerBookingPackageOption>,
+    optionId?: string
+  ) => {
+    const updatedGroup = {
+      ...group,
+      options: group.options.map((groupOption) => {
+        return groupOption.line.entryLineGuid === optionId
+          ? {
+              ...groupOption,
+              groups: groupOption.groups.map((optionGroup) => {
+                return optionGroup.name === childGroup.name
+                  ? childGroup
+                  : optionGroup;
+              }),
+            }
+          : groupOption;
+      }),
+    };
+
+    if (onGroupChange) onGroupChange(updatedGroup, optionId);
+  };
+
+  const handleOnPaxChange = (pax: BookingOptionPax[], index?: number) => {
+    const updatedGroup = {
+      ...group,
+      options: group.options.map((groupOption, i) => {
+        return {
+          ...groupOption,
+          pax: i === index ? pax : groupOption.pax,
+        };
+      }),
+    };
+
+    if (onGroupChange) onGroupChange(updatedGroup, optionId);
+  };
+
+  const handleOnUnitsChange = (units: BookingOptionUnit[], index?: number) => {
+    const updatedGroup = {
+      ...group,
+      options: group.options.map((groupOption, i) => {
+        return {
+          ...groupOption,
+          units: i === index ? units : groupOption.units,
+        };
+      }),
+    };
+
+    if (onGroupChange) onGroupChange(updatedGroup, optionId);
+  };
+
+  const handleNoneSelectionChanged = () => {
+    const updatedGroup = {
+      ...group,
+      options: group.options.map((groupOption) => ({
+        ...groupOption,
+        isSelected: false,
+      })),
+    };
+
+    if (onGroupChange) onGroupChange(updatedGroup, optionId);
+  };
+
+  const selectedPrice =
+    group.name === ""
+      ? 0
+      : group.options.find((x) => x.isSelected)?.line.price ?? 0;
+
+  return (
+    <div className={firstClassName}>
+      {group.title && <h4 className={secondClassName}>{group.title}</h4>}
+      <table className={buildClassName(["table", "table--striped"])}>
+        <tbody>
+          {group.options.map((option, index) => (
+            <tr key={option.line.entryLineGuid}>
+              <td>
+                <div
+                  className={buildClassName([
+                    "tree",
+                    option.isSelected && "tree--selected",
+                  ])}
+                >
+                  <div className="tree__level">
+                    <div className="tree__header">
+                      <div className="tree__description-collapse">
+                        <div
+                          className={buildClassName([
+                            (option.requirementType === 0 ||
+                              option.requirementType === 1) &&
+                              "checkbox",
+                            option.requirementType === 2 && "radiobutton",
+                          ])}
+                        >
+                          <label
+                            htmlFor={`${parentId}_${index}`}
+                            className={buildClassName([
+                              (option.requirementType === 0 ||
+                                option.requirementType === 1) &&
+                                "checkbox__label",
+                              option.requirementType === 2 &&
+                                "radiobutton__label",
+                            ])}
+                          >
+                            <OptionItem
+                              option={option}
+                              parentId={parentId}
+                              index={index}
+                              selectedPrice={selectedPrice}
+                              onOptionChange={handleOptionChange}
+                            />
+                            {!isEmpty(option.groups) && (
+                              <div className="tree__body">
+                                {option.groups.map((optionGroup) => (
+                                  <OptionBookingGroup
+                                    optionId={option.line.entryLineGuid}
+                                    group={optionGroup}
+                                    firstClassName={"tree__level"}
+                                    secondClassName={"tree__level-heading"}
+                                    parentId={`${parentId}_${optionGroup.name}`}
+                                    onGroupChange={handleChildGroupChange}
+                                  />
+                                ))}
+                              </div>
+                            )}
+                            {!isEmpty(option.units) && (
+                              <OptionUnitsCard
+                                units={option.units}
+                                parentIndex={index}
+                                onUnitsChange={handleOnUnitsChange}
+                              />
+                            )}
+                            {!isEmpty(option.pax) && (
+                              <OptionPaxCard
+                                pax={option.pax}
+                                parentIndex={index}
+                                onPaxChange={handleOnPaxChange}
+                              />
+                            )}
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          ))}
+          <NoneOption
+            group={group}
+            parentId={parentId}
+            handleNoneSelectionChanged={handleNoneSelectionChanged}
+          />
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default OptionBookingGroup;

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

@@ -0,0 +1,321 @@
+import {
+  BookingPackageLine,
+  PerPackageOption,
+} from "@qite/tide-client/build/types";
+import { compact, first, isEmpty, sortBy, uniqBy } from "lodash";
+import React from "react";
+import { buildClassName } from "../../utils/class-util";
+import { formatPrice } from "../../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.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].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 getPriceDifferenceText = (price: number) => {
+    return price > 0
+      ? `+ ${formatPrice(Math.abs(price))}`
+      : `- ${formatPrice(Math.abs(price))}`;
+  };
+
+  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 && (
+        <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)}
+          </span>
+          <span className="date-list__item">
+            {getDateText(option.line.endDate)}
+          </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;

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

@@ -0,0 +1,102 @@
+import {
+  BookingOptionGroup,
+  BookingOptionPax,
+  PerPaxPackageOption,
+} from "@qite/tide-client/build/types";
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { buildClassName } from "../../utils/class-util";
+import { selectBookingPackagePax } from "../booking/selectors";
+import OptionPaxGroup from "./option-pax-group";
+
+interface OptionPaxCardProps {
+  pax: BookingOptionPax[];
+  parentIndex?: number;
+  onPaxChange?: (pax: BookingOptionPax[], index?: number) => void;
+}
+
+const OptionPaxCard: React.FC<OptionPaxCardProps> = ({
+  pax,
+  parentIndex,
+  onPaxChange,
+}) => {
+  const [toggleStates, setToggleStates] = useState<boolean[]>();
+
+  useEffect(() => {
+    if (!toggleStates || toggleStates.length !== pax.length) {
+      setToggleStates(pax.map(() => true));
+    }
+  }, [pax, toggleStates, setToggleStates]);
+
+  const bookingPax = useSelector(selectBookingPackagePax);
+
+  const getPaxName = (id: number) => {
+    const item = bookingPax.find((x) => x.id === id);
+    return `${item?.firstName} ${item?.lastName}`;
+  };
+
+  const onGroupChange = (
+    group: BookingOptionGroup<PerPaxPackageOption>,
+    paxId: number
+  ) => {
+    const updatedPax = pax.map((p) => {
+      return p.id !== paxId
+        ? p
+        : {
+            ...p,
+            groups: p.groups.map((pg) => {
+              return pg.name !== group.name ? pg : group;
+            }),
+          };
+    });
+
+    if (onPaxChange) onPaxChange(updatedPax, parentIndex);
+  };
+
+  return (
+    <>
+      {pax.map((p, i) => (
+        <div
+          key={i}
+          className={buildClassName([
+            "booking-card__group",
+            toggleStates && toggleStates[i] && "booking-card__group--active",
+          ])}
+        >
+          <div className="booking-card__group-header">
+            <h3 className="booking-card__body-heading">{getPaxName(p.id)}</h3>
+            <div className="booking-card__actions">
+              <button
+                type="button"
+                className="booking-card__toggle"
+                onClick={() => {
+                  setToggleStates(
+                    toggleStates?.map((s, si) => (si == i ? !s : s))
+                  );
+                }}
+              ></button>
+            </div>
+          </div>
+          {toggleStates &&
+            toggleStates[i] &&
+            p.groups.map(
+              (pg) =>
+                pg && (
+                  <OptionPaxGroup
+                    key={pg.name}
+                    paxId={p.id}
+                    group={pg}
+                    firstClassName={"booking-card__group-body"}
+                    secondClassName={"booking-card__group-heading"}
+                    parentId={`${p.id}_${pg.name}`}
+                    onGroupChange={onGroupChange}
+                  />
+                )
+            )}
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default OptionPaxCard;