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

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

@@ -0,0 +1,169 @@
+import {
+  BookingOptionGroup,
+  PerPackageOption,
+  PerPaxPackageOption,
+} 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";
+
+interface OptionPaxGroupProps {
+  paxId: number;
+  optionId?: string;
+  group: BookingOptionGroup<PerPaxPackageOption>;
+  firstClassName: string;
+  secondClassName: string;
+  parentId: string;
+  onGroupChange?: (
+    group: BookingOptionGroup<PerPaxPackageOption>,
+    paxId: number,
+    optionId?: string
+  ) => void;
+}
+
+const OptionPaxGroup: React.FC<OptionPaxGroupProps> = ({
+  paxId,
+  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<PerPaxPackageOption>;
+
+    if (onGroupChange) onGroupChange(updatedGroup, paxId, optionId);
+  };
+
+  const handleChildGroupChange = (
+    childGroup: BookingOptionGroup<PerPaxPackageOption>,
+    paxId: number,
+    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, paxId, optionId);
+  };
+
+  const handleNoneSelectionChanged = () => {
+    const updatedGroup = {
+      ...group,
+      options: group.options.map((groupOption) => ({
+        ...groupOption,
+        isSelected: false,
+      })),
+    };
+
+    if (onGroupChange) onGroupChange(updatedGroup, paxId, 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) => (
+                                  <OptionPaxGroup
+                                    paxId={paxId}
+                                    optionId={option.line.entryLineGuid}
+                                    group={optionGroup}
+                                    firstClassName={"tree__level"}
+                                    secondClassName={"tree__level-heading"}
+                                    parentId={`${parentId}_${optionGroup.name}`}
+                                    onGroupChange={handleChildGroupChange}
+                                  />
+                                ))}
+                              </div>
+                            )}
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          ))}
+          <NoneOption
+            group={group}
+            parentId={parentId}
+            handleNoneSelectionChanged={handleNoneSelectionChanged}
+          />
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default OptionPaxGroup;

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

@@ -0,0 +1,300 @@
+import {
+  BookingPackagePax,
+  BookingPackageRoom,
+} from "@qite/tide-client/build/types";
+import { compact, first, sortBy, uniqBy } from "lodash";
+import React from "react";
+import { buildClassName } from "../../utils/class-util";
+import translations from "../../translations/translations.json";
+import { getDatePeriodText, getDateText } from "../sidebar/sidebar-util";
+import { useSelector } from "react-redux";
+import { selectProductAttributes } from "../booking/selectors";
+import { formatPrice } from "../../utils/localization-util";
+
+interface OptionRoomProps {
+  packageRoom: BookingPackageRoom;
+  pax: BookingPackagePax[];
+  onRoomChange: (
+    index: number,
+    accommodationCode: string,
+    regimeCode: string
+  ) => void;
+}
+
+const OptionRoom: React.FC<OptionRoomProps> = ({
+  packageRoom,
+  pax,
+  onRoomChange,
+}) => {
+  const selectedOption = packageRoom?.options.find((x) => x.isSelected);
+
+  let daysAndNightsText = "";
+  let startDate = "";
+  let endDate = "";
+  let productName = "";
+
+  if (packageRoom.index === 0) {
+    const selectedOption = packageRoom.options.find((x) => x.isSelected);
+
+    if (selectedOption) {
+      startDate = getDateText(selectedOption.from) ?? "";
+      endDate = getDateText(selectedOption.to) ?? "";
+      daysAndNightsText =
+        getDatePeriodText(selectedOption.from, selectedOption.to) ?? "";
+
+      const productAttributes = useSelector(selectProductAttributes);
+      productName = productAttributes?.productName ?? "";
+    }
+  }
+
+  const accommodations = uniqBy(
+    compact(
+      packageRoom &&
+        packageRoom.options.map((option) => {
+          if (!option.accommodationCode) {
+            return undefined;
+          }
+
+          return {
+            accommodationCode: option.accommodationCode,
+            accommodationName: option.accommodationName,
+          };
+        })
+    ),
+    "accommodationCode"
+  );
+
+  const regimes = uniqBy(
+    compact(
+      packageRoom &&
+        packageRoom.options.map((option) => {
+          return {
+            regimeCode: option.regimeCode,
+            regimeName: option.regimeName,
+          };
+        })
+    ),
+    "regimeCode"
+  );
+
+  const handleAccommodationChange: React.FormEventHandler<HTMLSelectElement> = (
+    e
+  ) => {
+    const accommodationCode = e.currentTarget.value;
+    var accommodationOptions = packageRoom?.options.filter(
+      (x) => x.accommodationCode == accommodationCode
+    );
+
+    if (accommodationOptions) {
+      const option =
+        accommodationOptions.find(
+          (x) => x.regimeCode == selectedOption?.regimeCode
+        ) ?? accommodationOptions[0];
+
+      if (option) {
+        onRoomChange(
+          packageRoom.index,
+          option.accommodationCode,
+          option.regimeCode
+        );
+      }
+    }
+
+    e.preventDefault();
+  };
+
+  const handleRegimeChange: React.FormEventHandler<HTMLSelectElement> = (e) => {
+    const regimeCode = e.currentTarget.value;
+
+    if (selectedOption) {
+      onRoomChange(
+        packageRoom.index,
+        selectedOption.accommodationCode,
+        regimeCode
+      );
+    }
+
+    e.preventDefault();
+  };
+
+  const getPriceDifferenceText = (price: number) => {
+    return price > 0
+      ? `+ ${formatPrice(Math.abs(price))}`
+      : `- ${formatPrice(Math.abs(price))}`;
+  };
+
+  const getAccommodationPriceDifference = (accommodation: {
+    accommodationCode: string;
+    accommodationName: string;
+  }) => {
+    const selectedOption = packageRoom.options.find((x) => x.isSelected);
+    if (selectedOption?.accommodationCode === accommodation.accommodationCode)
+      return "";
+
+    var currentPrice = selectedOption?.price;
+    var accommodationPrice = first(
+      sortBy(
+        packageRoom.options.filter(
+          (x) => x.accommodationCode === accommodation.accommodationCode
+        ),
+        (x) => x.price
+      )
+    )?.price;
+
+    var priceDifference = (accommodationPrice ?? 0) - (currentPrice ?? 0);
+    if (priceDifference !== 0) {
+      return `(${getPriceDifferenceText(priceDifference)})`;
+    } else {
+      return "";
+    }
+  };
+
+  const getRegimePriceDifference = (regime: {
+    regimeCode: string;
+    regimeName: string;
+  }) => {
+    const selectedOption = packageRoom.options.find((x) => x.isSelected);
+    if (selectedOption?.regimeCode === regime.regimeCode) return "";
+
+    var currentPrice = selectedOption?.price;
+    var regimePrice = packageRoom.options.find(
+      (x) =>
+        x.accommodationCode === selectedOption?.accommodationCode &&
+        x.regimeCode === regime.regimeCode
+    )?.price;
+
+    var priceDifference = (regimePrice ?? 0) - (currentPrice ?? 0);
+    if (priceDifference !== 0) {
+      return `(${getPriceDifferenceText(priceDifference)})`;
+    } else {
+      return "";
+    }
+  };
+
+  return (
+    <tr>
+      <td>
+        <div className="tree">
+          <div className="tree__level">
+            <div className="tree__header">
+              <div className="tree__description-collapse">
+                <div
+                  className={buildClassName([
+                    "radiobutton",
+                    "radiobutton--label",
+                    "radiobutton--package-label",
+                  ])}
+                >
+                  <div className="radiobutton__label">
+                    <span
+                      className={buildClassName([
+                        "radiobutton__input",
+                        "radiobutton__input--parent",
+                      ])}
+                    ></span>
+                    <span className="radiobutton__label-text">
+                      <div className="date-list">
+                        {startDate && endDate && (
+                          <>
+                            <span className="date-list__item">{startDate}</span>
+                            <span className="date-list__item">{endDate}</span>
+                          </>
+                        )}
+                      </div>
+                      <p>{daysAndNightsText}</p>
+                    </span>
+                    <div className="tree__columns-actions">
+                      <div className="tree__columns">
+                        <div className="tree__column">
+                          <span className="tree__product-name">
+                            {productName}
+                          </span>
+                        </div>
+                        <div className="tree__column">
+                          <span className="tree__package-label">
+                            {translations.OPTIONS_FORM.UNIT_TITLE}{" "}
+                            {packageRoom.index + 1}:{" "}
+                            <span className="tree__package-label-pax">
+                              {pax.map((p, i) => (
+                                <span
+                                  key={i}
+                                  title={`${p.firstName} ${p.lastName}`}
+                                >
+                                  {i > 0 && ", "} {p.firstName} {p.lastName[0]}.
+                                </span>
+                              ))}
+                            </span>
+                          </span>
+                          <div className="select-wrapper">
+                            <div className="select-wrapper__select">
+                              <select
+                                defaultValue={selectedOption?.accommodationCode}
+                                onChange={handleAccommodationChange}
+                              >
+                                {accommodations.map((accommodation) => (
+                                  <option
+                                    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={selectedOption?.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 == selectedOption?.regimeCode
+                                  )?.regimeName
+                                }
+                              </>
+                            )}
+                          </div>
+                        </div>
+                        <div
+                          className={buildClassName([
+                            "tree__column",
+                            "tree__column--price",
+                          ])}
+                        ></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+export default OptionRoom;

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

@@ -0,0 +1,192 @@
+import {
+  BookingOptionGroup,
+  BookingOptionPax,
+  PerPackageOption,
+  PerUnitPackageOption,
+} 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";
+
+interface OptionUnitGroupProps {
+  unitIndex: number;
+  optionId?: string;
+  group: BookingOptionGroup<PerUnitPackageOption>;
+  firstClassName: string;
+  secondClassName: string;
+  parentId: string;
+  onGroupChange?: (
+    group: BookingOptionGroup<PerUnitPackageOption>,
+    unitIndex: number,
+    optionId?: string
+  ) => void;
+}
+
+const OptionUnitGroup: React.FC<OptionUnitGroupProps> = ({
+  unitIndex,
+  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<PerUnitPackageOption>;
+
+    if (onGroupChange) onGroupChange(updatedGroup, unitIndex, optionId);
+  };
+
+  const handleChildGroupChange = (
+    childGroup: BookingOptionGroup<PerUnitPackageOption>,
+    unitIndex: number,
+    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, unitIndex, 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, unitIndex, optionId);
+  };
+
+  const handleNoneSelectionChanged = () => {
+    const updatedGroup = {
+      ...group,
+      options: group.options.map((groupOption) => ({
+        ...groupOption,
+        isSelected: false,
+      })),
+    };
+
+    if (onGroupChange) onGroupChange(updatedGroup, unitIndex, 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) => (
+                                  <OptionUnitGroup
+                                    unitIndex={unitIndex}
+                                    optionId={option.line.entryLineGuid}
+                                    group={optionGroup}
+                                    firstClassName={"tree__level"}
+                                    secondClassName={"tree__level-heading"}
+                                    parentId={`${parentId}_${optionGroup.name}`}
+                                    onGroupChange={handleChildGroupChange}
+                                  />
+                                ))}
+                              </div>
+                            )}
+                            {!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 OptionUnitGroup;