@pisell/private-materials 6.8.11 → 6.8.12

package/lib/pro/skuDetailModal/index.js

@@ -35,7 +35,6 @@ module.exports = __toCommonJS(skuDetailModal_exports);
 var import_react = __toESM(require("react"));
 var import_materials = require("@pisell/materials");
 var import_decimal = __toESM(require("decimal.js"));
-var import_cloneDeep = __toESM(require("lodash/cloneDeep"));
 var import_utils = require("@pisell/utils");
 var import_Delete_wght300_24px = __toESM(require("@pisell/icon/es/Delete_wght300_24px"));
 var import_locales = __toESM(require("./locales"));
@@ -44,31 +43,135 @@ var import_pisellNumberSelector = __toESM(require("../pisellNumberSelector"));
 var import_noteModal = __toESM(require("../../plus/noteModal"));
 var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
 var import_priceKeyboard = require("../priceKeyboard");
+var import_skuOptionsSelection = __toESM(require("../../plus/skuOptionsSelection"));
+var import_serve = require("../../components/booking/info/service/serve");
+var import_utils2 = require("./utils");
+var import_model = require("../../components/booking/info/model");
+var import_useToast = __toESM(require("../../hooks/useToast"));
 var SkuDetailModal = ({ onConfirm, onRemove, onClose }, ref) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const [open, setOpen] = (0, import_react.useState)(false);
   const [productData, setProductData] = (0, import_react.useState)(null);
   const [note, setNote] = (0, import_react.useState)("");
   const [quantity, setQuantity] = (0, import_react.useState)(1);
-  const [priceOverride, setPriceOverride] = (0, import_react.useState)(0);
+  const [priceOverride, setPriceOverride] = (0, import_react.useState)(null);
+  const [showPriceAdjustModal, setShowPriceAdjustModal] = (0, import_react.useState)(false);
   const [discounts, setDiscounts] = (0, import_react.useState)([]);
   const [noteModalOpen, setNoteModalOpen] = (0, import_react.useState)(false);
-  const [showPriceAdjustModal, setShowPriceAdjustModal] = (0, import_react.useState)(false);
+  const [skuValue, setSkuValue] = (0, import_react.useState)({
+    price: 0,
+    product_id: 0,
+    product_variant_id: 0,
+    bundle: [],
+    option: []
+  });
+  const [skuDefaultValue, setSkuDefaultValue] = (0, import_react.useState)({
+    product_id: 0,
+    price: 0,
+    product_variant_id: 0,
+    bundle: [],
+    option: []
+  });
+  const openParamsRef = (0, import_react.useRef)(null);
+  const Toast = (0, import_useToast.default)();
+  const skuOptionsSelectionRef = (0, import_react.useRef)(null);
+  const [stockAlertOpen, setStockAlertOpen] = (0, import_react.useState)(false);
+  const [stockAlertDontShowAgainChecked, setStockAlertDontShowAgainChecked] = (0, import_react.useState)(false);
+  const pendingConfirmDataRef = (0, import_react.useRef)(null);
+  const [currentStep, setCurrentStep] = (0, import_react.useState)(0);
+  const procedureRef = (0, import_react.useRef)(null);
   const context = (0, import_useEngineContext.default)();
-  const { store } = ((_a = context.appHelper) == null ? void 0 : _a.utils) || {};
+  const { store, getData } = ((_a = context.appHelper) == null ? void 0 : _a.utils) || {};
+  const { state: bookingState } = (0, import_react.useContext)(import_model.Context) || {};
   const symbol = ((_d = (_c = (_b = store == null ? void 0 : store.getState) == null ? void 0 : _b.call(store)) == null ? void 0 : _c.global) == null ? void 0 : _d.symbol) || "$";
   import_utils.locales.init(import_locales.default, ((_f = (_e = context == null ? void 0 : context.engine) == null ? void 0 : _e.props) == null ? void 0 : _f.locale) || "en");
   (0, import_react.useImperativeHandle)(ref, () => ({
-    open: (data) => {
-      var _a2, _b2, _c2;
-      const _data = (0, import_cloneDeep.default)(data);
+    open: async (data) => {
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k, _l, _m, _n, _o, _p;
+      setCurrentStep(1);
+      if ("date" in data && !("_extend" in data)) {
+        openParamsRef.current = data;
+        const open_deposit = (getData == null ? void 0 : getData("bookingv2_deposit")) || 0;
+        const productDetail = await (0, import_serve.getProductDetail)(String(data.id), {
+          schedule_date: data.date,
+          is_eject: data.is_eject,
+          open_deposit
+        });
+        const apiData = (productDetail == null ? void 0 : productDetail.data) || {};
+        const basePrice = Number((apiData == null ? void 0 : apiData.price) || 0);
+        const hydratedData = {
+          ...apiData,
+          id: (apiData == null ? void 0 : apiData.id) || data.id,
+          product_id: (apiData == null ? void 0 : apiData.product_id) || data.id,
+          _extend: {
+            ...(apiData == null ? void 0 : apiData._extend) || {},
+            product_name: (apiData == null ? void 0 : apiData.title) || (apiData == null ? void 0 : apiData.product_name) || "",
+            quantity: 1,
+            price: basePrice,
+            total: basePrice,
+            origin_total: basePrice,
+            note: "",
+            skuValue: {
+              product_id: (apiData == null ? void 0 : apiData.id) || data.id,
+              product_variant_id: 0,
+              bundle: [],
+              option: []
+            }
+          }
+        };
+        const isEject = Number((apiData == null ? void 0 : apiData.is_eject) ?? data.is_eject ?? 0) === 1;
+        if (!isEject) {
+          onConfirm == null ? void 0 : onConfirm(hydratedData);
+          modalCloseAction();
+          return;
+        }
+        setProductData(hydratedData);
+        setNote("");
+        setQuantity((apiData == null ? void 0 : apiData.min_num_unit) || 1);
+        setDiscounts([]);
+        setSkuValue({
+          product_id: hydratedData.id,
+          product_variant_id: 0,
+          bundle: [],
+          option: []
+        });
+        setSkuDefaultValue({
+          product_id: hydratedData.id,
+          product_variant_id: 0,
+          bundle: [],
+          option: [],
+          price: ((_a2 = hydratedData == null ? void 0 : hydratedData._extend) == null ? void 0 : _a2.price) || 0
+        });
+        setPriceOverride(null);
+        setShowPriceAdjustModal(false);
+        setOpen(true);
+        return;
+      }
+      openParamsRef.current = null;
+      const _data = safeClone(data);
       setProductData(_data);
-      setNote(((_a2 = _data == null ? void 0 : _data._extend) == null ? void 0 : _a2.note) || "");
-      setQuantity(((_b2 = _data == null ? void 0 : _data._extend) == null ? void 0 : _b2.quantity) || 1);
-      setPriceOverride(((_c2 = _data == null ? void 0 : _data._extend) == null ? void 0 : _c2.total) || 0);
+      console.log(_data, "_data");
+      setNote(((_b2 = _data == null ? void 0 : _data._extend) == null ? void 0 : _b2.note) || "");
+      setQuantity(((_c2 = _data == null ? void 0 : _data._extend) == null ? void 0 : _c2.quantity) || 1);
       setDiscounts((_data == null ? void 0 : _data.discount_list) || []);
-      setOpen(true);
-      console.log("data>>>>>", _data);
+      console.log({
+        product_id: _data == null ? void 0 : _data.product_id,
+        product_variant_id: ((_e2 = (_d2 = _data == null ? void 0 : _data._extend) == null ? void 0 : _d2.other) == null ? void 0 : _e2.product_variant_id) || 0,
+        bundle: ((_g2 = (_f2 = _data == null ? void 0 : _data._extend) == null ? void 0 : _f2.other) == null ? void 0 : _g2.bundle) || [],
+        option: ((_i2 = (_h2 = _data == null ? void 0 : _data._extend) == null ? void 0 : _h2.other) == null ? void 0 : _i2.option) || []
+      }, "skuValue");
+      setSkuDefaultValue({
+        product_id: _data == null ? void 0 : _data.product_id,
+        product_variant_id: ((_k = (_j2 = _data == null ? void 0 : _data._extend) == null ? void 0 : _j2.other) == null ? void 0 : _k.product_variant_id) || 0,
+        price: ((_l = _data == null ? void 0 : _data._extend) == null ? void 0 : _l.price) || 0,
+        bundle: ((_n = (_m = _data == null ? void 0 : _data._extend) == null ? void 0 : _m.other) == null ? void 0 : _n.bundle) || [],
+        option: ((_p = (_o = _data == null ? void 0 : _data._extend) == null ? void 0 : _o.other) == null ? void 0 : _p.option) || []
+      });
+      setPriceOverride(getInitialPriceOverrideFromProductData({ productData: _data }));
+      setShowPriceAdjustModal(false);
+      setTimeout(() => {
+        setOpen(true);
+      }, 0);
     }
   }));
   const priceText = (0, import_react.useMemo)(() => {
@@ -77,12 +180,17 @@ var SkuDetailModal = ({ onConfirm, onRemove, onClose }, ref) => {
     const priceSign = Number(price) < 0 ? "-" : "";
     return `${priceSign}${symbol}${Math.abs(Number(price))}`;
   }, [(_g = productData == null ? void 0 : productData._extend) == null ? void 0 : _g.price, symbol]);
+  const unitPrice = (0, import_react.useMemo)(() => {
+    const activeSkuValue = (skuValue == null ? void 0 : skuValue.product_id) ? skuValue : skuDefaultValue;
+    return getSelectedUnitPrice({ productData, skuValue: activeSkuValue });
+  }, [productData, skuValue, skuDefaultValue]);
+  const displayUnitPrice = (0, import_react.useMemo)(() => {
+    if (priceOverride === null || typeof priceOverride === "undefined") return unitPrice;
+    return priceOverride;
+  }, [priceOverride, unitPrice]);
   const subtotal = (0, import_react.useMemo)(() => {
-    var _a2;
-    const dePrice = new import_decimal.default(((_a2 = productData == null ? void 0 : productData._extend) == null ? void 0 : _a2.price) || "0");
-    const deQuantity = new import_decimal.default(quantity || "1");
-    return dePrice.mul(deQuantity);
-  }, [(_h = productData == null ? void 0 : productData._extend) == null ? void 0 : _h.price, quantity]);
+    return new import_decimal.default(unitPrice || 0);
+  }, [unitPrice]);
   const subtotalText = (0, import_react.useMemo)(() => {
     const priceSign = subtotal.toNumber() < 0 ? "-" : "";
     return `${priceSign}${symbol}${subtotal.abs().toNumber().toFixed(2)}`;
@@ -101,52 +209,94 @@ var SkuDetailModal = ({ onConfirm, onRemove, onClose }, ref) => {
     return "0.00";
   }, [discounts, quantity]);
   const finalTotal = (0, import_react.useMemo)(() => {
-    const deTotal = new import_decimal.default(priceOverride || "0");
+    const deTotal = new import_decimal.default(displayUnitPrice || "0");
     const deQuantity = new import_decimal.default(quantity || "1");
     return deTotal.mul(deQuantity);
-  }, [priceOverride, quantity]);
+  }, [displayUnitPrice, quantity]);
   const totalText = (0, import_react.useMemo)(() => {
     const priceSign = finalTotal.toNumber() < 0 ? "-" : "";
     return `${priceSign}${symbol}${finalTotal.abs().toNumber().toFixed(2)}`;
   }, [finalTotal, symbol]);
-  const priceChange = (0, import_react.useMemo)(() => {
-    var _a2;
-    const dePrice = new import_decimal.default(((_a2 = productData == null ? void 0 : productData._extend) == null ? void 0 : _a2.price) || "0");
-    const dePriceOverride = new import_decimal.default(priceOverride || "0");
-    const deQuantity = new import_decimal.default(quantity || "1");
-    return dePriceOverride.minus(dePrice).mul(deQuantity);
-  }, [priceOverride, quantity, (_i = productData == null ? void 0 : productData._extend) == null ? void 0 : _i.price]);
-  const priceChangeText = (0, import_react.useMemo)(() => {
-    const priceChangeNumber = priceChange.toNumber();
-    const priceChangeSign = priceChangeNumber > 0 ? "+" : priceChangeNumber < 0 ? "-" : "";
-    const absPriceChange = priceChange.abs().toNumber().toFixed(2);
-    return `${priceChangeSign}${symbol}${absPriceChange}`;
-  }, [priceChange, symbol]);
   const priceOverrideText = (0, import_react.useMemo)(() => {
-    const prefix = `(${import_utils.locales.getText(
-      "pisell2.text.sku.detail.modal.price.override"
-    )} `;
-    const priceOverrideNumber = new import_decimal.default(priceOverride || "0");
-    const priceOverrideSign = priceOverrideNumber.toNumber() < 0 ? "-" : "";
-    const absPriceOverride = priceOverrideNumber.abs().toNumber().toFixed(2);
-    return `${prefix}${priceOverrideSign}${symbol}${absPriceOverride})`;
+    if (priceOverride === null || typeof priceOverride === "undefined") return "";
+    const prefix = `(${import_utils.locales.getText("pisell2.text.sku.detail.modal.price.override")} `;
+    const overrideNumber = new import_decimal.default(priceOverride || 0);
+    const sign = overrideNumber.toNumber() < 0 ? "-" : "";
+    const absValue = overrideNumber.abs().toNumber().toFixed(2);
+    return `${prefix}${sign}${symbol}${absValue})`;
   }, [priceOverride, symbol]);
+  const priceChangeText = (0, import_react.useMemo)(() => {
+    if (priceOverride === null || typeof priceOverride === "undefined") return "";
+    const diff = new import_decimal.default(priceOverride || 0).minus(new import_decimal.default(unitPrice || 0)).mul(new import_decimal.default(quantity || 1));
+    const diffNumber = diff.toNumber();
+    const diffSign = diffNumber > 0 ? "+" : diffNumber < 0 ? "-" : "";
+    const absDiff = diff.abs().toNumber().toFixed(2);
+    return `${diffSign}${symbol}${absDiff}`;
+  }, [priceOverride, unitPrice, quantity, symbol]);
   const modalCloseAction = () => {
     setOpen(false);
     setProductData(null);
     setNote("");
     setQuantity(1);
-    setPriceOverride(0);
     setNoteModalOpen(false);
+    setPriceOverride(null);
     setShowPriceAdjustModal(false);
     setDiscounts([]);
+    openParamsRef.current = null;
   };
   const handleCancel = () => {
     modalCloseAction();
     onClose == null ? void 0 : onClose();
   };
-  const handleConfirm = () => {
+  const handleCheckStock = (params) => {
+    var _a2, _b2;
+    const value = (params == null ? void 0 : params.value) || skuValue;
+    const data = (params == null ? void 0 : params.data) || productData;
+    if (!data) return true;
+    if ((value == null ? void 0 : value.product_variant_id) && data) {
+      const variantItem = (_a2 = data == null ? void 0 : data.variant) == null ? void 0 : _a2.find(
+        (item) => item.id === value.product_variant_id
+      );
+      const variantCanSell = (0, import_utils2.checkSkuStockCanSell)(variantItem);
+      if (!variantCanSell.hasStock) {
+        return false;
+      }
+    }
+    if (((_b2 = value == null ? void 0 : value.bundle) == null ? void 0 : _b2.length) > 0 && data) {
+      const bundleCanSell = value == null ? void 0 : value.bundle.every((item) => {
+        const data2 = (0, import_utils2.checkSkuStockCanSell)(item);
+        return data2.hasStock;
+      });
+      if (!bundleCanSell) {
+        return false;
+      }
+    }
+    const productCanSell = (0, import_utils2.checkSkuStockCanSell)(data);
+    if (!productCanSell.hasStock) {
+      return false;
+    }
+    return true;
+  };
+  const handleConfirm = async () => {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k, _l, _m, _n, _o, _p, _q, _r;
+    if (currentStep === 0) {
+      (_b2 = (_a2 = procedureRef.current) == null ? void 0 : _a2.goToStep) == null ? void 0 : _b2.call(_a2, 1);
+      setCurrentStep(1);
+      return;
+    }
+    const requiredOptionValidation = (_e2 = (_d2 = (_c2 = bookingState == null ? void 0 : bookingState.bookingConfig) == null ? void 0 : _c2.config) == null ? void 0 : _d2.product_setting_tab) == null ? void 0 : _e2.required_option_validation;
+    const shouldValidate = Number(requiredOptionValidation ?? 1) !== 0;
+    if (shouldValidate) {
+      try {
+        const isValid = await ((_g2 = (_f2 = skuOptionsSelectionRef.current) == null ? void 0 : _f2.validate) == null ? void 0 : _g2.call(_f2));
+        if (!isValid) return;
+      } catch (error) {
+        console.log("sku_detail_modal_validate_error>>>>>", error);
+        return;
+      }
+    }
     if (productData && onConfirm) {
+      const latestSkuValue = ((_i2 = (_h2 = skuOptionsSelectionRef.current) == null ? void 0 : _h2.getTransformValues) == null ? void 0 : _i2.call(_h2)) || skuValue || skuDefaultValue;
       const updatedData = {
         ...productData,
         discount_list: discounts || [],
@@ -154,25 +304,81 @@ var SkuDetailModal = ({ onConfirm, onRemove, onClose }, ref) => {
           ...(productData == null ? void 0 : productData._extend) || {},
           quantity,
           note,
-          total: priceOverride
+          // 上层 getProductTotalPrice 依赖 other 来计算（组合规格/套餐/单规格）
+          other: getOtherFromSkuValue({
+            productData,
+            skuValue: latestSkuValue
+          }),
+          skuValue: getOtherFromSkuValue({
+            productData,
+            skuValue: latestSkuValue
+          }),
+          ...priceOverride !== null && typeof priceOverride !== "undefined" ? { total: priceOverride } : {}
         }
       };
+      const stockValidation = Number(
+        ((_l = (_k = (_j2 = bookingState == null ? void 0 : bookingState.bookingConfig) == null ? void 0 : _j2.config) == null ? void 0 : _k.stock_setting) == null ? void 0 : _l.stock_validation) ?? 0
+      );
+      const allowAddToCartWhenOutStock = Number(
+        ((_o = (_n = (_m = bookingState == null ? void 0 : bookingState.bookingConfig) == null ? void 0 : _m.config) == null ? void 0 : _n.stock_setting) == null ? void 0 : _o.allow_add_to_cart_when_out_stock) ?? 0
+      );
+      const enableDontShowAgainToday = Number(
+        ((_r = (_q = (_p = bookingState == null ? void 0 : bookingState.bookingConfig) == null ? void 0 : _p.config) == null ? void 0 : _q.stock_setting) == null ? void 0 : _r.do_not_show_again_today) ?? 0
+      );
+      if (stockValidation === 1) {
+        const hasStock = handleCheckStock({
+          value: latestSkuValue,
+          data: productData
+        });
+        if (!hasStock) {
+          if (allowAddToCartWhenOutStock !== 1) {
+            Toast == null ? void 0 : Toast.fail(import_utils.locales.getText("pisell2.skuOptionsSelection.variantItemCard.soldOut"));
+            return;
+          }
+          const productId = Number((productData == null ? void 0 : productData.product_id) || 0);
+          const shouldSkipAlert = enableDontShowAgainToday === 1 && hasHiddenStockAlertForToday({ productId });
+          if (!shouldSkipAlert) {
+            pendingConfirmDataRef.current = updatedData;
+            setStockAlertDontShowAgainChecked(false);
+            setStockAlertOpen(true);
+            return;
+          }
+        }
+      }
       onConfirm(updatedData);
       modalCloseAction();
     }
   };
+  const handleStockAlertCancel = () => {
+    pendingConfirmDataRef.current = null;
+    setStockAlertOpen(false);
+    setStockAlertDontShowAgainChecked(false);
+  };
+  const handleStockAlertContinue = () => {
+    var _a2, _b2, _c2;
+    const pendingData = pendingConfirmDataRef.current;
+    if (!pendingData) {
+      setStockAlertOpen(false);
+      return;
+    }
+    const enableDontShowAgainToday = Number(
+      ((_c2 = (_b2 = (_a2 = bookingState == null ? void 0 : bookingState.bookingConfig) == null ? void 0 : _a2.config) == null ? void 0 : _b2.stock_setting) == null ? void 0 : _c2.do_not_show_again_today) ?? 0
+    );
+    if (enableDontShowAgainToday === 1 && stockAlertDontShowAgainChecked) {
+      const productId = Number((productData == null ? void 0 : productData.product_id) || 0);
+      setHiddenStockAlertForToday({ productId });
+    }
+    onConfirm == null ? void 0 : onConfirm(pendingData);
+    pendingConfirmDataRef.current = null;
+    setStockAlertOpen(false);
+    modalCloseAction();
+  };
   const handleRemove = () => {
     if (productData && onRemove) {
       onRemove(productData);
       modalCloseAction();
     }
   };
-  const handleManualPriceChange = () => {
-    if (productData) {
-      console.log("Manual price change for:", productData.id);
-      onOpenPriceAdjust();
-    }
-  };
   const handleQuantityChange = (value) => {
     if (value && value > 0) {
       setQuantity(value);
@@ -189,7 +395,8 @@ var SkuDetailModal = ({ onConfirm, onRemove, onClose }, ref) => {
   const onNoteCancel = () => {
     setNoteModalOpen(false);
   };
-  const onOpenPriceAdjust = () => {
+  const handleManualPriceChange = () => {
+    if (!productData) return;
     setShowPriceAdjustModal(true);
   };
   const handlePriceAdjustConfirm = (value) => {
@@ -203,93 +410,170 @@ var SkuDetailModal = ({ onConfirm, onRemove, onClose }, ref) => {
     if (!title) return "";
     return Array.from(title).slice(0, 2).join("");
   }, [productData == null ? void 0 : productData.title]);
+  const isCreateMode = !!openParamsRef.current;
+  const leftContent = () => {
+    return (
+      /* 左侧商品图片和操作 */
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "sku-detail-left" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "sku-detail-left-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "product-image" }, (productData == null ? void 0 : productData.cover) ? /* @__PURE__ */ import_react.default.createElement("img", { src: (productData == null ? void 0 : productData.cover) || "" }) : /* @__PURE__ */ import_react.default.createElement("div", { className: "product-cover-text" }, coverText)), /* @__PURE__ */ import_react.default.createElement("div", { className: "product-info" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "product-info-left" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "product-name" }, (productData == null ? void 0 : productData.title) || ""), /* @__PURE__ */ import_react.default.createElement("div", { className: "product-spec" }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "product-actions" }, /* @__PURE__ */ import_react.default.createElement(
+        import_materials.Button,
+        {
+          size: "large",
+          className: "add-note-btn",
+          onClick: () => setNoteModalOpen(true)
+        },
+        import_utils.locales.getText("pisell2.text.sku.detail.modal.btn.add.note")
+      )), note && /* @__PURE__ */ import_react.default.createElement("div", { className: "note-section" }, /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("pisell2.text.sku.detail.modal.note")), /* @__PURE__ */ import_react.default.createElement("div", { className: "note-text", onClick: () => setNoteModalOpen(true) }, note))), /* @__PURE__ */ import_react.default.createElement("div", { className: "price-summary-section" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "price-item" }, /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("pisell2.text.sku.detail.modal.subtotal")), /* @__PURE__ */ import_react.default.createElement("div", null, subtotalText)), /* @__PURE__ */ import_react.default.createElement("div", { className: "price-item" }, /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("pisell2.text.sku.detail.modal.discount"), discountsCount > 0 && /* @__PURE__ */ import_react.default.createElement("span", { className: "price-item-danger" }, " (", discountsCount, ")")), /* @__PURE__ */ import_react.default.createElement("div", { className: "price-item-danger" }, discountsCount > 0 ? "-" : "", symbol, totalDiscounts)), /* @__PURE__ */ import_react.default.createElement("div", { className: "price-item-total" }, /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("pisell2.text.sku.detail.modal.total"), /* @__PURE__ */ import_react.default.createElement("span", { className: "price-item-total-gst" }, "（", (productData == null ? void 0 : productData.is_charge_tax) ? import_utils.locales.getText("pisell2.text.sku.detail.modal.gst.incl") : import_utils.locales.getText("pisell2.text.sku.detail.modal.gst.excl"), "）")), /* @__PURE__ */ import_react.default.createElement("div", null, totalText))))
+    );
+  };
   if (!productData) return null;
+  const rightContent = () => {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "sku-detail-right-content" }, currentStep === 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "sku-detail-right-content-detail" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "sku-detail-right-content-detail-title" }, (productData == null ? void 0 : productData.title) || ""), /* @__PURE__ */ import_react.default.createElement("div", { className: "sku-detail-right-content-detail-description" }, (productData == null ? void 0 : productData.subtitle) || "")), currentStep === 1 && /* @__PURE__ */ import_react.default.createElement(
+      import_skuOptionsSelection.default,
+      {
+        ref: skuOptionsSelectionRef,
+        dataSource: productData,
+        value: skuDefaultValue,
+        skuCardConfig: {
+          title: {
+            lineClamp: 1
+          },
+          subTitle: {
+            lineClamp: 1
+          }
+        },
+        onChange: (v) => {
+          setSkuValue(v);
+        },
+        customScrollParent: ".pisell-sku-detail-modal .sku-detail-right-content"
+      }
+    ));
+  };
+  const leftHeaderClose = () => {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "sku-detail-left-close", onClick: handleCancel }, /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-x-close" }), import_utils.locales.getText("pisell2.text.sku.detail.modal.btn.close"));
+  };
+  const leftHeaderBack = () => {
+    if (currentStep === 0) {
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "sku-detail-left-back-placeholder" });
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "sku-detail-left-back",
+        onClick: () => {
+          var _a2, _b2;
+          (_b2 = (_a2 = procedureRef.current) == null ? void 0 : _a2.goToStep) == null ? void 0 : _b2.call(_a2, 0);
+          setCurrentStep(0);
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-arrow-left" }),
+      import_utils.locales.getText("pisell2.text.sku.detail.modal.btn.back")
+    );
+  };
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
     import_materials.PisellModal,
     {
       platform: "pc",
       open,
-      title: "",
+      header: null,
       headerDivider: false,
       footer: null,
       onCancel: handleCancel,
+      closable: false,
       destroyOnClose: true,
       width: 880,
       className: "pisell-sku-detail-modal"
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "sku-detail-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "sku-detail-content-main" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "sku-detail-left" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "product-image" }, productData.cover ? /* @__PURE__ */ import_react.default.createElement("img", { src: productData.cover || "" }) : /* @__PURE__ */ import_react.default.createElement("div", { className: "product-cover-text" }, coverText)), /* @__PURE__ */ import_react.default.createElement("div", { className: "product-actions" }, /* @__PURE__ */ import_react.default.createElement(
-      import_materials.Button,
-      {
-        size: "large",
-        className: "add-note-btn",
-        onClick: () => setNoteModalOpen(true)
-      },
-      import_utils.locales.getText(
-        "pisell2.text.sku.detail.modal.btn.add.note"
-      )
-    ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "sku-detail-right" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "product-info" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "product-info-left" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "product-name" }, (productData == null ? void 0 : productData.title) || ""), /* @__PURE__ */ import_react.default.createElement("div", { className: "product-spec" })), /* @__PURE__ */ import_react.default.createElement("div", { className: "item-price" }, priceText)), /* @__PURE__ */ import_react.default.createElement("div", { className: "quantity-section" }, /* @__PURE__ */ import_react.default.createElement("span", null, import_utils.locales.getText("pisell2.text.sku.detail.modal.quantity")), /* @__PURE__ */ import_react.default.createElement(
-      import_pisellNumberSelector.default,
+    /* @__PURE__ */ import_react.default.createElement(
+      import_materials.PisellProcedure,
       {
-        value: quantity,
-        onChange: handleQuantityChange,
-        min: 1,
-        max: 99999,
-        step: 1,
-        size: "middle",
-        enablePriceAdjust: true
+        ref: procedureRef,
+        className: "pisell-sku-procedure",
+        mode: "modal",
+        defaultCurrent: currentStep,
+        onStepsChange: (result) => {
+          setCurrentStep(result.currentStep);
+        },
+        headerProps: {
+          showBackOnFirstStep: true,
+          showSteps: true,
+          left: leftHeaderBack(),
+          right: leftHeaderClose(),
+          stepsProps: {
+            items: [
+              {
+                title: import_utils.locales.getText("pisell2.text.sku.detail.modal.step.details"),
+                description: ""
+              },
+              {
+                title: import_utils.locales.getText(
+                  "pisell2.text.sku.detail.modal.step.select.bundle"
+                ),
+                description: ""
+              }
+            ]
+          }
+        },
+        onFirstStepBack: () => {
+          handleCancel();
+        },
+        showSideBar: true,
+        showFooter: true,
+        bodyProps: {
+          direction: "horizontal",
+          contentOrder: "sidebar-first",
+          contentSlot: rightContent(),
+          sidebarSlot: leftContent(),
+          sidebarContainerSelector: ".pisell-sku-detail-modal"
+        },
+        footerProps: {
+          position: "fixed-bottom",
+          style: { height: "72px !important" },
+          leftSlot: /* @__PURE__ */ import_react.default.createElement("div", { className: "quantity-section" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "quantity-section-title" }, import_utils.locales.getText("pisell2.text.sku.detail.modal.quantity")), /* @__PURE__ */ import_react.default.createElement(
+            import_pisellNumberSelector.default,
+            {
+              value: quantity,
+              width: "120px",
+              onChange: handleQuantityChange,
+              min: 1,
+              max: 99999,
+              step: 1,
+              size: "middle",
+              enablePriceAdjust: true
+            }
+          )),
+          actions: /* @__PURE__ */ import_react.default.createElement("div", { className: "sku-detail-content-footer" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "modal-actions" }, isCreateMode ? /* @__PURE__ */ import_react.default.createElement(
+            import_materials.Button,
+            {
+              type: "default",
+              size: "large",
+              className: "sku-detail-content-footer-remove-btn",
+              onClick: handleCancel
+            },
+            import_utils.locales.getText("pisell2.text.cancel") || "Cancel"
+          ) : /* @__PURE__ */ import_react.default.createElement(
+            import_materials.Button,
+            {
+              type: "primary",
+              danger: true,
+              size: "large",
+              icon: /* @__PURE__ */ import_react.default.createElement(import_Delete_wght300_24px.default, { style: { fontSize: 20 } }),
+              className: "sku-detail-content-footer-remove-btn",
+              onClick: handleRemove
+            },
+            import_utils.locales.getText("pisell2.text.sku.detail.modal.btn.remove")
+          ), /* @__PURE__ */ import_react.default.createElement(
+            import_materials.Button,
+            {
+              type: "primary",
+              size: "large",
+              onClick: handleConfirm,
+              className: "sku-detail-content-footer-confirm-btn"
+            },
+            currentStep === 0 ? /* @__PURE__ */ import_react.default.createElement("span", { className: "sku-detail-content-footer-confirm-btn-text" }, import_utils.locales.getText("pisell2.text.sku.detail.modal.btn.next")) : /* @__PURE__ */ import_react.default.createElement("span", { className: "sku-detail-content-footer-confirm-btn-text" }, import_utils.locales.getText("pisell2.text.sku.detail.modal.btn.confirm"))
+          )))
+        }
       }
-    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "note-section" }, note && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("pisell2.text.sku.detail.modal.note")), /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: "note-text",
-        onClick: () => setNoteModalOpen(true)
-      },
-      note
-    ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "price-summary-section" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "price-item" }, /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("pisell2.text.sku.detail.modal.subtotal")), /* @__PURE__ */ import_react.default.createElement("div", null, subtotalText)), /* @__PURE__ */ import_react.default.createElement("div", { className: "price-item" }, /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("pisell2.text.sku.detail.modal.discount"), discountsCount > 0 && /* @__PURE__ */ import_react.default.createElement("span", { className: "price-item-danger" }, " (", discountsCount, ")")), /* @__PURE__ */ import_react.default.createElement("div", { className: "price-item-danger" }, discountsCount > 0 ? "-" : "", symbol, totalDiscounts)), /* @__PURE__ */ import_react.default.createElement("div", { className: "price-item" }, /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText(
-      "pisell2.text.sku.detail.modal.manual.price.change"
-    ), /* @__PURE__ */ import_react.default.createElement(
-      "span",
-      {
-        className: "price-item-override",
-        onClick: onOpenPriceAdjust
-      },
-      priceOverrideText
-    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "price-item-danger" }, discountsCount > 0 ? `${symbol}0.00` : priceChangeText)), /* @__PURE__ */ import_react.default.createElement("div", { className: "price-item-total" }, /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("pisell2.text.sku.detail.modal.total"), /* @__PURE__ */ import_react.default.createElement("span", { className: "price-item-total-gst" }, "（", (productData == null ? void 0 : productData.is_charge_tax) ? import_utils.locales.getText(
-      "pisell2.text.sku.detail.modal.gst.incl"
-    ) : import_utils.locales.getText(
-      "pisell2.text.sku.detail.modal.gst.excl"
-    ), "）")), /* @__PURE__ */ import_react.default.createElement("div", null, totalText))))), /* @__PURE__ */ import_react.default.createElement("div", { className: "sku-detail-content-footer" }, /* @__PURE__ */ import_react.default.createElement(
-      import_materials.Button,
-      {
-        type: "primary",
-        danger: true,
-        size: "large",
-        icon: /* @__PURE__ */ import_react.default.createElement(import_Delete_wght300_24px.default, { style: { fontSize: 20 } }),
-        className: "sku-detail-content-footer-remove-btn",
-        onClick: handleRemove
-      },
-      import_utils.locales.getText("pisell2.text.sku.detail.modal.btn.remove")
-    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "modal-actions" }, /* @__PURE__ */ import_react.default.createElement(
-      import_materials.Button,
-      {
-        type: "default",
-        size: "large",
-        onClick: handleManualPriceChange,
-        className: "sku-detail-content-footer-price-btn"
-      },
-      /* @__PURE__ */ import_react.default.createElement("span", { className: "sku-detail-content-footer-price-btn-text" }, import_utils.locales.getText(
-        "pisell2.text.sku.detail.modal.btn.manual.price.change"
-      ))
-    ), /* @__PURE__ */ import_react.default.createElement(
-      import_materials.Button,
-      {
-        type: "primary",
-        size: "large",
-        onClick: handleConfirm,
-        className: "sku-detail-content-footer-confirm-btn"
-      },
-      import_utils.locales.getText("pisell2.text.sku.detail.modal.btn.confirm")
-    )))),
+    ),
     noteModalOpen && /* @__PURE__ */ import_react.default.createElement(
       import_noteModal.default,
       {
@@ -309,15 +593,145 @@ var SkuDetailModal = ({ onConfirm, onRemove, onClose }, ref) => {
           onCancel: () => setShowPriceAdjustModal(false)
         },
         enableExceedMaxAmount: true,
-        originalValue: priceOverride,
-        defaultValue: priceOverride,
+        originalValue: displayUnitPrice || 0,
+        defaultValue: displayUnitPrice || 0,
         onEnter: (discountAmount) => {
-          const finalPrice = new import_decimal.default(priceOverride || 0).minus(discountAmount).toNumber();
-          handlePriceAdjustConfirm(finalPrice);
+          const nextUnitPrice = new import_decimal.default(displayUnitPrice || 0).minus(discountAmount).toNumber();
+          handlePriceAdjustConfirm(nextUnitPrice);
         },
         selectType: "dark"
       }
     )
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellModal,
+    {
+      platform: "pc",
+      open: stockAlertOpen,
+      title: import_utils.locales.getText("pisell2.text.sku.detail.modal.stock.alert.title"),
+      headerDivider: false,
+      footer: /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%", display: "flex", justifyContent: "flex-end", gap: 12 } }, /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { size: "large", onClick: handleStockAlertCancel }, import_utils.locales.getText(
+        "pisell2.text.sku.detail.modal.stock.alert.btn.cancel"
+      )), /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { type: "primary", size: "large", onClick: handleStockAlertContinue }, import_utils.locales.getText(
+        "pisell2.text.sku.detail.modal.stock.alert.btn.continue"
+      ))),
+      width: 520,
+      centered: true,
+      destroyOnClose: true,
+      maskClosable: false,
+      zIndex: 2e3,
+      onCancel: handleStockAlertCancel
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "40px 0 0 0" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "#344054", fontSize: 14, lineHeight: "22px" } }, import_utils.locales.getText("pisell2.text.sku.detail.modal.stock.alert.desc")), Number(
+      ((_j = (_i = (_h = bookingState == null ? void 0 : bookingState.bookingConfig) == null ? void 0 : _h.config) == null ? void 0 : _i.stock_setting) == null ? void 0 : _j.do_not_show_again_today) ?? 0
+    ) === 1 && /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 16 } }, /* @__PURE__ */ import_react.default.createElement(
+      import_materials.Checkbox,
+      {
+        checked: stockAlertDontShowAgainChecked,
+        onChange: (e) => {
+          var _a2;
+          setStockAlertDontShowAgainChecked(!!((_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.checked));
+        }
+      },
+      import_utils.locales.getText(
+        "pisell2.text.sku.detail.modal.stock.alert.checkbox"
+      )
+    )))
   ));
 };
 var skuDetailModal_default = (0, import_react.forwardRef)(SkuDetailModal);
+function getLocalDayKey() {
+  const now = /* @__PURE__ */ new Date();
+  const yyyy = String(now.getFullYear());
+  const mm = String(now.getMonth() + 1).padStart(2, "0");
+  const dd = String(now.getDate()).padStart(2, "0");
+  return `${yyyy}-${mm}-${dd}`;
+}
+function getStockAlertStorageKey(params) {
+  return `pisell2_stock_alert_hidden_${params.productId}`;
+}
+function hasHiddenStockAlertForToday(params) {
+  try {
+    if (!params.productId) return false;
+    if (typeof window === "undefined") return false;
+    const key = getStockAlertStorageKey(params);
+    const value = window.localStorage.getItem(key);
+    return value === getLocalDayKey();
+  } catch (error) {
+    return false;
+  }
+}
+function setHiddenStockAlertForToday(params) {
+  try {
+    if (!params.productId) return;
+    if (typeof window === "undefined") return;
+    const key = getStockAlertStorageKey(params);
+    window.localStorage.setItem(key, getLocalDayKey());
+  } catch (error) {
+  }
+}
+function safeClone(value) {
+  try {
+    if (typeof structuredClone === "function") return structuredClone(value);
+  } catch (error) {
+  }
+  return JSON.parse(JSON.stringify(value));
+}
+function getSelectedUnitPrice(params) {
+  var _a, _b;
+  const { productData, skuValue } = params;
+  if (!productData) return 0;
+  let price = new import_decimal.default(((_a = productData == null ? void 0 : productData._extend) == null ? void 0 : _a.price) ?? (productData == null ? void 0 : productData.price) ?? 0);
+  if (skuValue == null ? void 0 : skuValue.product_variant_id) {
+    const variantItem = (_b = productData == null ? void 0 : productData.variant) == null ? void 0 : _b.find(
+      (item) => Number(item == null ? void 0 : item.id) === Number(skuValue.product_variant_id)
+    );
+    if (variantItem) {
+      price = new import_decimal.default((variantItem == null ? void 0 : variantItem.price) ?? (variantItem == null ? void 0 : variantItem.base_price) ?? 0);
+    }
+  }
+  if (Array.isArray(skuValue == null ? void 0 : skuValue.bundle) && skuValue.bundle.length > 0) {
+    price = skuValue.bundle.reduce((accumulator, currentValue) => {
+      const currentPrice = new import_decimal.default((currentValue == null ? void 0 : currentValue.price) || 0);
+      const currentNum = new import_decimal.default((currentValue == null ? void 0 : currentValue.num) || 0);
+      return accumulator.add(currentPrice.mul(currentNum));
+    }, price);
+  }
+  if (Array.isArray(skuValue == null ? void 0 : skuValue.option) && skuValue.option.length > 0) {
+    price = skuValue.option.reduce((accumulator, currentValue) => {
+      const currentPrice = new import_decimal.default((currentValue == null ? void 0 : currentValue.price) || 0);
+      const currentNum = new import_decimal.default((currentValue == null ? void 0 : currentValue.num) || 0);
+      return accumulator.add(currentPrice.mul(currentNum));
+    }, price);
+  }
+  return price.toNumber();
+}
+function getOtherFromSkuValue(params) {
+  var _a;
+  const { productData, skuValue } = params;
+  const other = {
+    product_variant_id: (skuValue == null ? void 0 : skuValue.product_variant_id) || 0,
+    bundle: (skuValue == null ? void 0 : skuValue.bundle) || [],
+    option: (skuValue == null ? void 0 : skuValue.option) || []
+  };
+  if (other.product_variant_id && productData) {
+    const variantItem = (_a = productData == null ? void 0 : productData.variant) == null ? void 0 : _a.find(
+      (item) => Number(item == null ? void 0 : item.id) === Number(other.product_variant_id)
+    );
+    if (variantItem) {
+      other.price = Number((variantItem == null ? void 0 : variantItem.price) ?? (variantItem == null ? void 0 : variantItem.base_price) ?? 0);
+    }
+  }
+  return other;
+}
+function getInitialPriceOverrideFromProductData(params) {
+  var _a, _b, _c;
+  const data = params.productData;
+  if (!data) return null;
+  const total = Number((_a = data == null ? void 0 : data._extend) == null ? void 0 : _a.total);
+  const originTotal = Number((_b = data == null ? void 0 : data._extend) == null ? void 0 : _b.origin_total);
+  const basePrice = Number(((_c = data == null ? void 0 : data._extend) == null ? void 0 : _c.price) ?? (data == null ? void 0 : data.price) ?? 0);
+  if (!Number.isFinite(total)) return null;
+  if (Number.isFinite(originTotal) && total !== originTotal) return total;
+  if (Number.isFinite(basePrice) && total !== basePrice) return total;
+  return null;
+}