@pisell/private-materials 6.3.14 → 6.4.1

package/lib/components/booking/components/customiseItemModal/index.js

@@ -0,0 +1,285 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/booking/components/customiseItemModal/index.tsx
+var customiseItemModal_exports = {};
+__export(customiseItemModal_exports, {
+  default: () => customiseItemModal_default
+});
+module.exports = __toCommonJS(customiseItemModal_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var import_pisellNumberSelector = __toESM(require("../../../../pro/pisellNumberSelector"));
+var import_pisellPriceKeyboardModal = __toESM(require("../../../../pro/pisellPriceKeyboardModal"));
+var import_useEngineContext = __toESM(require("../../../../hooks/useEngineContext"));
+var import_index = require("./index.less");
+var CustomiseItemModal = ({
+  visible = false,
+  onClose,
+  onSave,
+  currencySymbol = "$",
+  disabled = false
+}) => {
+  var _a, _b;
+  const [productName, setProductName] = (0, import_react.useState)("");
+  const [vouchersApplicable, setVouchersApplicable] = (0, import_react.useState)(false);
+  const [priceType, setPriceType] = (0, import_react.useState)("sell");
+  const [sellPrice, setSellPrice] = (0, import_react.useState)("");
+  const [deductionPrice, setDeductionPrice] = (0, import_react.useState)("");
+  const [quantity, setQuantity] = (0, import_react.useState)(1);
+  const [showPriceKeyboard, setShowPriceKeyboard] = (0, import_react.useState)(false);
+  const [currentTriggerRef, setCurrentTriggerRef] = (0, import_react.useState)(void 0);
+  const sellPriceButtonRef = (0, import_react.useRef)(null);
+  const deductionPriceButtonRef = (0, import_react.useRef)(null);
+  const context = (0, import_useEngineContext.default)();
+  const Toast = (_b = (_a = context.appHelper) == null ? void 0 : _a.utils) == null ? void 0 : _b.Toast;
+  const resetForm = () => {
+    setProductName("");
+    setVouchersApplicable(false);
+    setPriceType("sell");
+    setSellPrice("");
+    setDeductionPrice("");
+    setQuantity(1);
+    setShowPriceKeyboard(false);
+  };
+  (0, import_react.useEffect)(() => {
+    if (visible) {
+      resetForm();
+    }
+  }, [visible]);
+  const showKeyboard = (triggerRef, priceType2) => {
+    setCurrentTriggerRef(triggerRef);
+    setPriceType(priceType2);
+    setShowPriceKeyboard(true);
+  };
+  const handleClose = () => {
+    resetForm();
+    onClose == null ? void 0 : onClose();
+  };
+  const handleSave = () => {
+    const currentPriceValue = priceType === "sell" ? sellPrice : deductionPrice;
+    if (!currentPriceValue || currentPriceValue.trim() === "") {
+      const priceTypeName = priceType === "sell" ? import_utils.locales.getText("pisell2.customise-item.sell-price") : import_utils.locales.getText("pisell2.customise-item.manual-deduction-price");
+      const errorMessage = import_utils.locales.getText("pisell2.customise-item.price-required-error")(priceTypeName);
+      if (Toast) {
+        Toast.info(errorMessage);
+      } else {
+        alert(errorMessage);
+      }
+      return;
+    }
+    const data = {
+      productName: productName || import_utils.locales.getText("pisell2.customise-item.default-product-name"),
+      vouchersApplicable,
+      priceType,
+      priceValue: currentPriceValue,
+      quantity
+    };
+    onSave == null ? void 0 : onSave(data);
+    handleClose();
+  };
+  const validateProductName = (value) => {
+    return value.length <= 60;
+  };
+  const handleProductNameChange = (e) => {
+    const value = e.target.value;
+    if (validateProductName(value)) {
+      setProductName(value);
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Modal,
+    {
+      open: visible,
+      onCancel: handleClose,
+      footer: null,
+      closable: false,
+      width: 800,
+      centered: true,
+      className: "customise-item-modal"
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-modal-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-modal-header" }, /* @__PURE__ */ import_react.default.createElement("h2", { className: "customise-item-modal-title" }, import_utils.locales.getText("pisell2.customise-item.modal-title")), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        type: "text",
+        onClick: handleClose,
+        className: "customise-item-modal-close",
+        size: "large"
+      },
+      "×"
+    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-modal-body" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-modal-illustration" }, /* @__PURE__ */ import_react.default.createElement(
+      "img",
+      {
+        src: "https://static.pisellcdn.com/custom-product-img.png",
+        alt: "Custom item illustration",
+        className: "customise-item-illustration-image",
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "contain"
+        }
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-modal-form" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-form-group" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "customise-item-form-label" }, import_utils.locales.getText("pisell2.customise-item.product-name")), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Input,
+      {
+        value: productName,
+        onChange: handleProductNameChange,
+        placeholder: import_utils.locales.getText(
+          "pisell2.customise-item.default-product-name"
+        ),
+        maxLength: 60,
+        className: "customise-item-product-name-input",
+        disabled
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-form-group" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-vouchers-checkbox" }, /* @__PURE__ */ import_react.default.createElement(
+      "label",
+      {
+        className: "vouchers-label",
+        onClick: () => !disabled && setVouchersApplicable(!vouchersApplicable)
+      },
+      import_utils.locales.getText("pisell2.customise-item.vouchers-applicable")
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Checkbox,
+      {
+        checked: vouchersApplicable,
+        onChange: (e) => setVouchersApplicable(e.target.checked),
+        disabled,
+        className: "vouchers-checkbox-input"
+      }
+    ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-form-group" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-price-option" }, /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: `customise-item-radio ${priceType === "sell" ? "active purple" : ""}`,
+        onClick: () => setPriceType("sell")
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "radio-dot" })
+    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-price-content" }, /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: `customise-item-price-title ${priceType === "sell" ? "purple" : ""}`
+      },
+      currencySymbol,
+      " ",
+      import_utils.locales.getText("pisell2.customise-item.sell-price")
+    ), /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        ref: sellPriceButtonRef,
+        type: "button",
+        className: `customise-item-price-input ${priceType === "sell" ? "active purple" : ""}`,
+        onClick: () => showKeyboard(sellPriceButtonRef, "sell"),
+        disabled
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", { className: "price-currency" }, currencySymbol),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `price-input-display ${!sellPrice ? "placeholder" : ""}` }, sellPrice || import_utils.locales.getText(
+        "pisell2.customise-item.amount-placeholder"
+      ))
+    ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-price-option" }, /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        className: `customise-item-radio ${priceType === "deduction" ? "active red" : ""}`,
+        onClick: () => setPriceType("deduction")
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "radio-dot" })
+    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-price-content" }, /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: `customise-item-price-title ${priceType === "deduction" ? "red" : ""}`
+      },
+      currencySymbol,
+      " ",
+      import_utils.locales.getText(
+        "pisell2.customise-item.manual-deduction-price"
+      )
+    ), /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        ref: deductionPriceButtonRef,
+        type: "button",
+        className: `customise-item-price-input ${priceType === "deduction" ? "active red" : ""}`,
+        onClick: () => showKeyboard(deductionPriceButtonRef, "deduction"),
+        disabled
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", { className: "price-currency" }, currencySymbol),
+      /* @__PURE__ */ import_react.default.createElement("span", { className: "price-minus" }, "-"),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `price-input-display ${!deductionPrice ? "placeholder" : ""}` }, deductionPrice || import_utils.locales.getText(
+        "pisell2.customise-item.amount-placeholder"
+      ))
+    )))), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-modal-footer" }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        type: "primary",
+        size: "large",
+        onClick: handleSave,
+        disabled,
+        className: "customise-item-save-btn"
+      },
+      import_utils.locales.getText("pisell2.customise-item.save")
+    )))), /* @__PURE__ */ import_react.default.createElement("div", { className: "customise-item-quantity-selector-fixed" }, /* @__PURE__ */ import_react.default.createElement(
+      import_pisellNumberSelector.default,
+      {
+        value: quantity,
+        min: 1,
+        max: 999,
+        step: 1,
+        disabled,
+        onChange: (value) => {
+          if (value < 1) {
+            setQuantity(1);
+          } else {
+            setQuantity(value);
+          }
+        },
+        size: "middle",
+        enablePriceAdjust: true
+      }
+    ))),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_pisellPriceKeyboardModal.default,
+      {
+        visible: showPriceKeyboard,
+        value: priceType === "sell" ? sellPrice : deductionPrice,
+        onChange: (val) => {
+          if (priceType === "sell") {
+            setSellPrice(String(val));
+          } else {
+            setDeductionPrice(String(val));
+          }
+        },
+        onClose: () => setShowPriceKeyboard(false),
+        triggerRef: currentTriggerRef,
+        showCurrencySymbol: true,
+        useThousandsSeparator: false
+      }
+    )
+  );
+};
+var customiseItemModal_default = CustomiseItemModal;