@pisell/private-materials 6.0.22 → 6.0.23

package/lib/components/wallet/Detail/index.js

@@ -0,0 +1,709 @@
+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/wallet/Detail/index.tsx
+var Detail_exports = {};
+__export(Detail_exports, {
+  default: () => Detail_default
+});
+module.exports = __toCommonJS(Detail_exports);
+var import_react = __toESM(require("react"));
+var import_materials = require("@pisell/materials");
+var import_dayjs = __toESM(require("dayjs"));
+var import_XClose = __toESM(require("@pisell/icon/es/XClose"));
+var import_timezone = __toESM(require("dayjs/plugin/timezone"));
+var import_utils = require("@pisell/utils");
+var import_utc = __toESM(require("dayjs/plugin/utc"));
+var import_materials2 = require("@pisell/materials");
+var import_useEngineContext = __toESM(require("./../../../hooks/useEngineContext"));
+var import_locales = __toESM(require("./locales"));
+var import_serve = require("./serve");
+var import_utils2 = require("./../../../utils");
+var import_components = require("../components");
+var import_index = require("./index.less");
+var { Text } = import_materials2.Typography;
+import_dayjs.default.extend(import_timezone.default);
+import_dayjs.default.extend(import_utc.default);
+var Detail = (0, import_react.forwardRef)((props, ref) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const {
+    detail = {},
+    buttonGroupList = [[]],
+    className,
+    showWalletBar = false,
+    onBack
+  } = props;
+  const {
+    code = "",
+    tag = "",
+    product_title = "",
+    encoded = "",
+    balance,
+    expire_date = "",
+    product = {}
+  } = detail;
+  const { description = "" } = product;
+  const context = (0, import_useEngineContext.default)();
+  const utils = ((_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils) || {};
+  const dvaStore = (_c = (_b = utils == null ? void 0 : utils.getStore) == null ? void 0 : _b.call(utils)) == null ? void 0 : _c.getState();
+  const [TimeLineData, setTimeLineData] = (0, import_react.useState)([]);
+  const [isShowtimeLineDetail, setIsShowtimeLineDetail] = (0, import_react.useState)(false);
+  const [isSpending, setIsSpending] = (0, import_react.useState)(true);
+  const [timeLineDetail, setTimeLineDetail] = (0, import_react.useState)({});
+  const [wechatModalOpen, setWechatModalOpen] = (0, import_react.useState)(false);
+  const [copyUrl, setCopyUrl] = (0, import_react.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+  const [apple_wallet_url, setAppleWalletUrl] = (0, import_react.useState)("");
+  const [google_wallet_url, setGoogleWalletUrl] = (0, import_react.useState)("");
+  const stateTimeUnix = 1723255863;
+  const [listData, setListData] = (0, import_react.useState)([]);
+  const modalContentRef = (0, import_react.useRef)(null);
+  const tabsRef = (0, import_react.useRef)();
+  const [activeTab, setActiveTab] = (0, import_react.useState)("detail");
+  const [isScrolling, setIsScrolling] = (0, import_react.useState)(false);
+  const isUserClickRef = (0, import_react.useRef)(false);
+  const scrollTimeoutRef = (0, import_react.useRef)(null);
+  const [addWalletLoading, setAddWalletLoading] = (0, import_react.useState)(false);
+  const [isAddingToWallet, setIsAddingToWallet] = (0, import_react.useState)(false);
+  const anchorOptions = (0, import_react.useMemo)(
+    () => {
+      const options = [
+        {
+          id: "detail",
+          name: import_utils.locales.getText("page.wallet.detail")
+        }
+      ];
+      if (tag !== "product_discount_card") {
+        options.push({
+          id: "activityLog",
+          name: import_utils.locales.getText("page.wallet.activelog")
+        });
+      }
+      return options;
+    },
+    [tag]
+    // 添加tag作为依赖项，当tag变化时重新计算
+  );
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    addWalletCard
+  }));
+  const addWalletCard = () => {
+    if ((0, import_utils.isIos)()) {
+      onAppleClick();
+    } else {
+      onGoogleClick();
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    let data = [
+      {
+        label: import_utils.locales.getText("page.wallet.cardName"),
+        value: product_title
+      },
+      {
+        label: import_utils.locales.getText("page.wallet.carNumber"),
+        value: encoded,
+        isLink: false
+      },
+      {
+        label: import_utils.locales.getText("page.wallet.validDate"),
+        value: expire_date ? expire_date : import_utils.locales.getText("page.wallet.expireDate")
+      }
+    ];
+    if (tag === "product_discount_card") {
+      data.splice(2, 0, {
+        label: import_utils.locales.getText("page.wallet.discount"),
+        value: balance ? `${Number(balance)}%` : ""
+      });
+    } else if (tag === "point_card") {
+      data.splice(2, 0, {
+        label: import_utils.locales.getText("page.wallet.points"),
+        value: balance ? `${Number(balance)}` : ""
+      });
+    } else {
+      data.splice(2, 0, {
+        label: import_utils.locales.getText("page.wallet.balance"),
+        value: balance ? `${symbol}${Number(balance)}` : ""
+      });
+    }
+    setListData(data);
+  }, [detail]);
+  const { symbol = "$" } = (0, import_materials.usePisellConfig)();
+  import_utils.locales.init(import_locales.default, ((_d = dvaStore == null ? void 0 : dvaStore.core) == null ? void 0 : _d.translateLocale) || "en");
+  import_utils2.request.setRequest(utils == null ? void 0 : utils.request);
+  const { store } = ((_e = context.appHelper) == null ? void 0 : _e.utils) || { store: {} };
+  const platform = (0, import_utils.isMobile)() ? "h5" : "pc";
+  const timezone2 = ((_i = (_h = (_g = (_f = store == null ? void 0 : store.getState) == null ? void 0 : _f.call(store)) == null ? void 0 : _g.global) == null ? void 0 : _h.symbol) == null ? void 0 : _i.shop.timezone) || "Asia/Shanghai";
+  const formatTimeLineDta = (data) => {
+    if (data.length < 0) return [];
+    const filteredData = data.filter(
+      (item) => !(item.tag === "point_card" && (item.amount === "0" || parseFloat(item.amount || "0") === 0))
+    );
+    const formatData = filteredData.map((item) => {
+      return {
+        children: assetActionEnum[(item == null ? void 0 : item.action) || ""] ? timeTreeNode(item) : null
+      };
+    });
+    return formatData;
+  };
+  const formatCurrencyAmount = (amount = "", isNegative = false) => {
+    if (!amount) return "";
+    const absAmount = amount.startsWith("-") ? amount.substring(1) : amount;
+    return isNegative ? `-${tag !== "point_card" ? symbol : ""}${absAmount}` : `${tag !== "point_card" ? symbol : ""}${amount}`;
+  };
+  const getDetail = async () => {
+    const { apple_wallet_url: apple_wallet_url2 = "", google_wallet_url: google_wallet_url2 = "" } = await (0, import_serve.getDetailApi)({ id: detail.id || "" });
+    setAppleWalletUrl(apple_wallet_url2);
+    setGoogleWalletUrl(google_wallet_url2);
+  };
+  (0, import_react.useEffect)(() => {
+    if (detail.id) {
+      getDetail();
+    }
+  }, [detail.id]);
+  const timeTreeNode = (data) => {
+    const {
+      action = "",
+      created_at = "",
+      amount = "",
+      currency_symbol = ""
+    } = data;
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-detail-timeline-node" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-detail-timeline-node-left" }, /* @__PURE__ */ import_react.default.createElement("p", { className: "wallet-detail-timeline-node-action" }, action ? assetActionEnum[action] : ""), created_at && /* @__PURE__ */ import_react.default.createElement("p", { className: "wallet-detail-timeline-node-time" }, created_at, (action === "recharge" || action === "order_expend") && // @ts-ignore 忽略TypeScript错误，React类型定义问题
+    /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: "wallet-detail-timeline-node-detail-link",
+        onClick: () => {
+          setIsShowtimeLineDetail(true);
+          setIsSpending(action === "order_expend");
+          setTimeLineDetail(data);
+        }
+      },
+      import_utils.locales.getText("page.wallet.viewDetails")
+    ))), /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `wallet-detail-timeline-node-amount${action === "recharge" ? " wallet-detail-timeline-node-amount-positive" : ""}${action === "order_expend" ? " wallet-detail-timeline-node-amount-negative" : ""}`
+      },
+      amount && currency_symbol ? formatCurrencyAmount(amount, action === "order_expend") : ""
+    ));
+  };
+  const getTimeTreeList = async () => {
+    var _a2, _b2, _c2, _d2;
+    setIsLoading(true);
+    try {
+      const { list = [] } = await (0, import_serve.getAssetList)({
+        num: "99",
+        skip: "1",
+        card_id: code,
+        sourceType: tag,
+        tag,
+        business_object: "customer"
+      });
+      let filterList = list.filter(
+        (item) => !!assetActionEnum[item.action || ""]
+      );
+      for (let i = filterList.length - 1; i >= 0; i--) {
+        if (((_a2 = filterList[i]) == null ? void 0 : _a2.action) === "order_expend" && import_dayjs.default.tz((_b2 = filterList[i]) == null ? void 0 : _b2.created_at, timezone2).unix() < stateTimeUnix) {
+          filterList.splice(i, 1);
+        }
+        if (((_c2 = filterList[i]) == null ? void 0 : _c2.tag) === "point_card" && import_dayjs.default.tz((_d2 = filterList[i]) == null ? void 0 : _d2.created_at, timezone2).unix() < stateTimeUnix) {
+          filterList.splice(i, 1);
+        }
+      }
+      setTimeLineData(formatTimeLineDta(filterList));
+    } catch (error) {
+      console.error("Failed to fetch asset list:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (code) {
+      getTimeTreeList();
+    }
+  }, [code]);
+  const addWalletPass = async (url, type) => {
+    if (!url) {
+      (0, import_materials2.PisellToast)({
+        content: import_utils.locales.getText("page.wallet.urlEmpty") || "钱包链接为空",
+        duration: 2
+      });
+      return false;
+    }
+    if (isWechat()) {
+      setWechatModalOpen(true);
+      setCopyUrl(url);
+      return false;
+    }
+    setAddWalletLoading(true);
+    try {
+      if (type === "apple") {
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const passData = await response.arrayBuffer();
+        const blob = new Blob([passData], { type: "application/vnd.apple.pkpass" });
+        const downloadUrl = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = downloadUrl;
+        a.download = "pass.pkpass";
+        a.click();
+        URL.revokeObjectURL(downloadUrl);
+      } else {
+        window.open(url);
+      }
+    } catch (error) {
+      console.error("Failed to add wallet:", error);
+      (0, import_materials2.PisellToast)({
+        content: import_utils.locales.getText("page.wallet.error.addFailed"),
+        duration: 3
+      });
+    } finally {
+      setAddWalletLoading(false);
+    }
+  };
+  const onAppleClick = async () => {
+    await addWalletPass(apple_wallet_url, "apple");
+  };
+  const onGoogleClick = async () => {
+    await addWalletPass(google_wallet_url, "google");
+  };
+  const isWechat = () => {
+    return /MicroMessenger/i.test(window.navigator.userAgent);
+  };
+  const httpCopyToClipboard = (text) => {
+    const textArea = document.createElement("textarea");
+    textArea.value = text;
+    textArea.style.position = "fixed";
+    textArea.style.top = "-10000px";
+    textArea.style.left = "-10000px";
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textArea);
+  };
+  const copyToClipboard = (text) => {
+    if (navigator.clipboard) {
+      return navigator.clipboard.writeText(text);
+    } else {
+      return httpCopyToClipboard(text);
+    }
+  };
+  const onCopyClick = () => {
+    copyToClipboard(copyUrl);
+    (0, import_materials2.PisellToast)({
+      content: import_utils.locales.getText("page.wallet.copySuccess"),
+      duration: 2
+    });
+    setWechatModalOpen(false);
+  };
+  const cardContentRef = (0, import_react.useRef)(null);
+  const handleTabChange = (key) => {
+    setActiveTab(typeof key === "string" ? key : key.toString());
+    if (platform === "h5") {
+      setIsScrolling(true);
+      setTimeout(() => {
+        setIsScrolling(false);
+      }, 500);
+    }
+    if (isUserClickRef.current) {
+      const section = document.querySelector(
+        `[data-section="${typeof key === "string" ? key : key.toString()}"]`
+      );
+      if (section && cardContentRef.current) {
+        const sectionTop = section.getBoundingClientRect().top;
+        const contentTop = cardContentRef.current.getBoundingClientRect().top;
+        const scrollTop = cardContentRef.current.scrollTop + (sectionTop - contentTop) - 50;
+        cardContentRef.current.scrollTo({
+          top: scrollTop,
+          behavior: "smooth"
+        });
+      }
+      isUserClickRef.current = false;
+    }
+  };
+  const preventScrollPropagation = (0, import_react.useCallback)(
+    (e) => {
+      if (!cardContentRef.current) return;
+      const scrollContainer = cardContentRef.current;
+      const isAtTop = scrollContainer.scrollTop <= 0;
+      const isAtBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop <= scrollContainer.clientHeight + 1;
+      if ("touches" in e) {
+        const touchEvent = e;
+        if (isAtTop && touchEvent.touches[0].clientY > 0 || isAtBottom && touchEvent.touches[0].clientY < 0) {
+          e.stopPropagation();
+        }
+      } else {
+        const wheelEvent = e;
+        if (isAtTop || isAtBottom) {
+          wheelEvent.stopPropagation();
+        }
+      }
+    },
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    if (!cardContentRef.current || platform !== "h5") return;
+    const scrollContainer = cardContentRef.current;
+    const handleTouchMove = (e) => {
+      preventScrollPropagation(e);
+    };
+    scrollContainer.addEventListener("touchmove", handleTouchMove, {
+      passive: false
+    });
+    return () => {
+      scrollContainer.removeEventListener("touchmove", handleTouchMove);
+    };
+  }, [platform, preventScrollPropagation]);
+  (0, import_react.useEffect)(() => {
+    if (!cardContentRef.current) return;
+    let isCurrentlyScrolling = false;
+    let lastScrollTime = 0;
+    let pendingAnchorId = null;
+    const handleScroll = () => {
+      if (isScrolling || isUserClickRef.current) return;
+      lastScrollTime = Date.now();
+      isCurrentlyScrolling = true;
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+      const container2 = cardContentRef.current;
+      if (!container2) return;
+      const scrollTop = container2.scrollTop;
+      const headerHeight = 56;
+      const containerHeight = container2.clientHeight;
+      const sectionPositions = anchorOptions.map((option) => {
+        const element = document.getElementById(option.id) || document.querySelector(`[data-section="${option.id}"]`);
+        if (!element) return null;
+        const elementOffsetTop = element.offsetTop;
+        const elementHeight = element.offsetHeight;
+        const isElementVisible = elementOffsetTop >= scrollTop && elementOffsetTop <= scrollTop + containerHeight || elementOffsetTop + elementHeight >= scrollTop && elementOffsetTop + elementHeight <= scrollTop + containerHeight || elementOffsetTop <= scrollTop && elementOffsetTop + elementHeight >= scrollTop + containerHeight;
+        return {
+          id: option.id,
+          offsetTop: elementOffsetTop,
+          height: elementHeight,
+          distanceFromViewportTop: Math.abs(
+            elementOffsetTop - scrollTop - headerHeight
+          ),
+          isVisible: isElementVisible
+        };
+      }).filter(
+        (section) => section !== null
+      );
+      const visibleSections = sectionPositions.filter(
+        (section) => section.isVisible
+      );
+      if (visibleSections.length === 0) return;
+      const bestSection = visibleSections.reduce(
+        (prev, current) => prev.distanceFromViewportTop < current.distanceFromViewportTop ? prev : current
+      );
+      if (bestSection && activeTab !== bestSection.id) {
+        pendingAnchorId = bestSection.id;
+      }
+      scrollTimeoutRef.current = setTimeout(() => {
+        const timeSinceLastScroll = Date.now() - lastScrollTime;
+        if (timeSinceLastScroll >= 300) {
+          isCurrentlyScrolling = false;
+          if (pendingAnchorId && activeTab !== pendingAnchorId && !isScrolling) {
+            setActiveTab(pendingAnchorId);
+          }
+          pendingAnchorId = null;
+        } else {
+          scrollTimeoutRef.current = setTimeout(() => {
+            isCurrentlyScrolling = false;
+            if (pendingAnchorId && activeTab !== pendingAnchorId && !isScrolling) {
+              setActiveTab(pendingAnchorId);
+            }
+            pendingAnchorId = null;
+          }, 300 - timeSinceLastScroll);
+        }
+      }, 300);
+    };
+    const container = cardContentRef.current;
+    container.addEventListener("scroll", handleScroll);
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, [anchorOptions, activeTab, isScrolling]);
+  const handleBack = (0, import_react.useCallback)(() => {
+    if (onBack) {
+      onBack();
+    }
+    setTimeout(() => {
+      if (cardContentRef.current) {
+        cardContentRef.current.scrollTop = 0;
+      }
+      setActiveTab("detail");
+      setIsScrolling(false);
+    }, 100);
+  }, [onBack]);
+  (0, import_react.useEffect)(() => {
+  }, [onBack, platform]);
+  const detailWrapperRef = (0, import_react.useRef)(null);
+  const [contentHeight, setContentHeight] = (0, import_react.useState)(
+    void 0
+  );
+  const anchorWrapperRef = (0, import_react.useRef)(null);
+  (0, import_react.useLayoutEffect)(() => {
+    const updateContentHeight = () => {
+      if (detailWrapperRef.current) {
+        const viewportHeight = window.innerHeight;
+        const containerTop = detailWrapperRef.current.getBoundingClientRect().top;
+        const detailHeaderEl = anchorWrapperRef.current;
+        let nonScrollableHeight = 0;
+        if (detailHeaderEl) {
+          const headerHeight = detailHeaderEl.getBoundingClientRect().height;
+          nonScrollableHeight = headerHeight + 8;
+        } else {
+          nonScrollableHeight = 60;
+        }
+        const bottomPadding = 10;
+        const footerHeight = platform === "h5" ? 80 : 0;
+        const calculatedHeight = viewportHeight - containerTop - nonScrollableHeight - bottomPadding - footerHeight;
+        const finalHeight = Math.max(
+          Math.min(calculatedHeight, viewportHeight - 80),
+          400
+        );
+        setContentHeight(finalHeight);
+      } else {
+        setContentHeight(void 0);
+      }
+    };
+    const timer = setTimeout(() => {
+      updateContentHeight();
+      setTimeout(updateContentHeight, 200);
+    }, 100);
+    window.addEventListener("resize", updateContentHeight);
+    let resizeObserver = null;
+    if (detailWrapperRef.current) {
+      resizeObserver = new ResizeObserver(() => {
+        updateContentHeight();
+      });
+      resizeObserver.observe(detailWrapperRef.current);
+    }
+    return () => {
+      window.removeEventListener("resize", updateContentHeight);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+      clearTimeout(timer);
+    };
+  }, [platform]);
+  const assetActionEnum = {
+    recharge: tag === "point_card" ? import_utils.locales.getText("page.wallet.pointsEarned") : import_utils.locales.getText("page.wallet.recharge"),
+    order_expend: tag === "point_card" ? import_utils.locales.getText("page.wallet.pointsRedeemed") : import_utils.locales.getText("page.wallet.spending"),
+    order_refund: import_utils.locales.getText("page.wallet.refund"),
+    expire: import_utils.locales.getText("page.wallet.expire")
+  };
+  const handleRecharge = () => {
+    if (props.buttonGroupList && props.buttonGroupList[0] && props.buttonGroupList[0][0]) {
+      const rechargeButton = props.buttonGroupList[0][0];
+      if (rechargeButton.buttonProps && rechargeButton.buttonProps.onClick) {
+        rechargeButton.buttonProps.onClick();
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `wallet-detail${platform === "h5" ? " wallet-detail-h5" : " wallet-detail-pc"} ${className || ""}`,
+      ref: detailWrapperRef
+    },
+    (platform === "h5" || showWalletBar) && /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-detail-header" }, /* @__PURE__ */ import_react.default.createElement(import_components.WalletBar, { setup: "detail", onBack: handleBack })),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `wallet-detail-content ${platform === "h5" ? "wallet-detail-content-h5" : "wallet-detail-content-pc"}`,
+        ref: modalContentRef
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `wallet-detail-card ${platform === "h5" ? "wallet-detail-card-h5" : ""}`
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `wallet-detail-card-header ${platform === "h5" ? "wallet-detail-card-header-h5" : ""}`,
+            ref: anchorWrapperRef
+          },
+          /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-detail-card-header-anchor" }, /* @__PURE__ */ import_react.default.createElement(
+            import_materials2.PisellAnchor,
+            {
+              ref: tabsRef,
+              options: anchorOptions,
+              tab: activeTab,
+              containerRef: cardContentRef,
+              onChange: (key) => {
+                handleTabChange(key);
+              },
+              onTabClick: () => {
+                isUserClickRef.current = true;
+              },
+              platform
+            }
+          ))
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `wallet-detail-card-content ${platform === "h5" ? "wallet-detail-card-content-h5" : "wallet-detail-card-content-pc"} wallet-detail-card-content-hide-scrollbar`,
+            ref: cardContentRef
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            "section",
+            {
+              className: "wallet-detail-card-content-section",
+              "data-section": "detail"
+            },
+            /* @__PURE__ */ import_react.default.createElement(Text, { className: "wallet-detail-card-content-section-title" }, import_utils.locales.getText("page.wallet.details")),
+            platform === "pc" && /* @__PURE__ */ import_react.default.createElement(import_materials2.ButtonGroupPreview, { buttonGroupList }),
+            /* @__PURE__ */ import_react.default.createElement(
+              import_materials2.PisellStatisticList,
+              {
+                data: listData,
+                labelColor: "#667085",
+                valueColor: "#101828",
+                backgroundColors: ["#fff"],
+                isHasBorder: false
+              }
+            ),
+            /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-detail-card-content-tip" }, description ? (
+              // @ts-ignore 忽略TypeScript错误，React类型定义问题
+              /* @__PURE__ */ import_react.default.createElement("div", { dangerouslySetInnerHTML: { __html: description } })
+            ) : null)
+          ),
+          /* @__PURE__ */ import_react.default.createElement(
+            "section",
+            {
+              className: "wallet-detail-card-content-section wallet-detail-card-content-section-timeline",
+              "data-section": "activityLog"
+            },
+            tag !== "product_discount_card" && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-detail-card-content-section-subtitle" }, import_utils.locales.getText("page.wallet.activelog")), isLoading ? /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-detail-timeline-loading" }, /* @__PURE__ */ import_react.default.createElement(import_materials2.Skeleton, { active: true, paragraph: { rows: 6 }, round: true })) : TimeLineData.length > 0 ? /* @__PURE__ */ import_react.default.createElement(
+              import_materials2.Timeline,
+              {
+                items: TimeLineData,
+                className: "wallet-detail-timeline-list"
+              }
+            ) : /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-detail-card-content-section-empty" }, /* @__PURE__ */ import_react.default.createElement(import_materials2.PisellEmpty, null)))
+          )
+        )
+      )
+    ),
+    platform === "h5" && /* @__PURE__ */ import_react.default.createElement(
+      import_components.FooterButtons,
+      {
+        step: "detail",
+        addWalletLoading,
+        onAppleWalletClick: tag === "gift_card" ? addWalletCard : void 0,
+        onRechargeClick: tag === "gift_card" && ((_j = detail == null ? void 0 : detail.machinecode_config) == null ? void 0 : _j.hide_recharge) === 0 ? handleRecharge : void 0,
+        platform,
+        isIOS: (0, import_utils.isIos)()
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_materials2.PisellModal,
+      {
+        platform: platform === "pc" ? "pc" : "h5",
+        mobileModalHeight: "auto",
+        cancelVisible: false,
+        destroyOnClose: true,
+        onCancel: () => setIsShowtimeLineDetail(false),
+        title: isSpending ? import_utils.locales.getText("page.wallet.spendingDetails") : import_utils.locales.getText("page.wallet.rechargeDetails"),
+        open: isShowtimeLineDetail,
+        footer: [
+          /* @__PURE__ */ import_react.default.createElement(
+            import_materials2.Button,
+            {
+              type: "primary",
+              block: true,
+              size: "large",
+              onClick: () => setIsShowtimeLineDetail(false)
+            },
+            import_utils.locales.getText("page.wallet.done")
+          )
+        ]
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_materials2.PisellStatisticList,
+        {
+          data: [
+            {
+              label: import_utils.locales.getText("page.wallet.date"),
+              value: timeLineDetail.created_at || ""
+            },
+            {
+              label: isSpending ? import_utils.locales.getText("page.wallet.spending") : import_utils.locales.getText("page.wallet.recharge"),
+              value: formatCurrencyAmount(
+                (timeLineDetail == null ? void 0 : timeLineDetail.amount) || "",
+                isSpending
+              )
+            },
+            {
+              label: import_utils.locales.getText("page.wallet.viewOrder"),
+              value: !!timeLineDetail.resource_code ? `#${timeLineDetail.resource_code}` : "",
+              isLink: !!timeLineDetail.resource_code,
+              link: `/order/details?id=${timeLineDetail.resource_id}`
+            }
+          ],
+          labelColor: "#101828",
+          valueColor: "#101828",
+          backgroundColors: ["#fff"],
+          isHasBorder: false
+        }
+      )
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_materials2.PisellModal,
+      {
+        platform: platform === "pc" ? "pc" : "h5",
+        mobileModalHeight: "auto",
+        headerDivider: false,
+        closable: true,
+        maskClosable: true,
+        onCancel: () => {
+          setWechatModalOpen(false);
+        },
+        closeIcon: /* @__PURE__ */ import_react.default.createElement(import_XClose.default, { size: 20, style: { fontSize: "24px" } }),
+        open: wechatModalOpen,
+        footer: [
+          /* @__PURE__ */ import_react.default.createElement(import_materials2.Button, { onClick: onCopyClick, block: true, type: "primary", size: "large" }, import_utils.locales.getText("page.wallet.copyButton"))
+        ]
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-detail-copyTitle" }, import_utils.locales.getText("page.wallet.copyTitle")),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-detail-copyText" }, import_utils.locales.getText("page.wallet.copyText"))
+    )
+  );
+});
+var Detail_default = Detail;