@pisell/private-materials 3.1.3 → 3.2.2

package/lib/components/wallet/utils/formatUtils.js

@@ -0,0 +1,73 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/wallet/utils/formatUtils.ts
+var formatUtils_exports = {};
+__export(formatUtils_exports, {
+  calculateTotalValue: () => calculateTotalValue,
+  createStatusMap: () => createStatusMap,
+  findCardById: () => findCardById,
+  formatDataToGroups: () => formatDataToGroups,
+  hasAvailableCards: () => hasAvailableCards
+});
+module.exports = __toCommonJS(formatUtils_exports);
+var import_utils = require("@pisell/utils");
+var formatDataToGroups = (dataList) => {
+  const available = {
+    title: import_utils.locales.getText("page.wallet.available"),
+    dataSource: dataList.filter(
+      (item) => item.limit_status === "enable"
+    )
+  };
+  const unavailable = {
+    title: import_utils.locales.getText("page.wallet.unavailable"),
+    dataSource: dataList.filter(
+      (item) => item.limit_status === "disable"
+    )
+  };
+  return [available, unavailable];
+};
+var calculateTotalValue = (dataList, valueField = "balance") => {
+  const enabledCards = dataList.filter(
+    (item) => item.limit_status === "enable"
+  );
+  return enabledCards.reduce(
+    (sum, item) => sum + Number(item[valueField] || 0),
+    0
+  );
+};
+var hasAvailableCards = (dataList) => {
+  return dataList.some((item) => item.limit_status === "enable");
+};
+var findCardById = (dataList, id) => {
+  if (!id) return void 0;
+  return dataList.find((item) => item.id === id);
+};
+var createStatusMap = (translations) => {
+  return (status) => {
+    return translations[status] || status;
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  calculateTotalValue,
+  createStatusMap,
+  findCardById,
+  formatDataToGroups,
+  hasAvailableCards
+});

package/lib/components/walletList/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import './index.less';
+declare module 'react' {
+    interface HTMLAttributes<T> {
+        role?: string;
+    }
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+                children?: React.ReactNode;
+                onClick?: React.MouseEventHandler<HTMLDivElement>;
+                onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+                onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
+                onTouchStart?: React.TouchEventHandler<HTMLDivElement>;
+                onTouchEnd?: React.TouchEventHandler<HTMLDivElement>;
+                role?: string;
+            };
+            img: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
+            span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & {
+                children?: React.ReactNode;
+            };
+        }
+    }
+}
+declare const WalletList: (props: any) => JSX.Element;
+export default WalletList;

package/lib/components/walletList/index.js

@@ -0,0 +1,465 @@
+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/walletList/index.tsx
+var walletList_exports = {};
+__export(walletList_exports, {
+  default: () => walletList_default
+});
+module.exports = __toCommonJS(walletList_exports);
+var import_react = __toESM(require("react"));
+var import_model = require("./model");
+var import_materials = require("@pisell/materials");
+var import_icons = require("@ant-design/icons");
+var import_useEngineContext = __toESM(require("./../../hooks/useEngineContext"));
+var import_serve = require("./serve");
+var import_utils = require("@pisell/utils");
+var import_utils2 = require("./../../utils");
+var import_index = require("./index.less");
+var import_classnames = __toESM(require("classnames"));
+var import_antd = require("antd");
+var import_types = require("./types");
+var getLocalizedName = (name, translateLocale) => {
+  if (!name) return "";
+  return name[translateLocale || "en"] || name.original || "";
+};
+var DEFAULT_WALLET_CARD = {
+  id: "default-wallet-card",
+  code: "Wallet number",
+  shop: {
+    name: "Store name"
+  },
+  isLogin: false,
+  showIcon: false,
+  icon: "",
+  wallet: {
+    name: {
+      original: "Level",
+      "zh-CN": "Level",
+      "zh-HK": "Level",
+      "en": "Level"
+    },
+    metadata: {
+      barcodetype: "barCode",
+      showcaseWalletPass: ["rechargeable", "piont", "voucher", "discount"],
+      coverImage: "",
+      icon: ""
+    }
+  }
+};
+var DEFAULT_BALANCE = {
+  gift_card_balance: 0,
+  point_card_balance: 0,
+  voucher_count: 0,
+  discount_card_count: 0
+};
+var WalletList = (0, import_model.Provider)((props) => {
+  var _a, _b, _c, _d, _e, _f;
+  const { globalState = {} } = props;
+  const { state, dispatch } = (0, import_react.useContext)(import_model.Context);
+  const context = (0, import_useEngineContext.default)();
+  const { constants, utils } = context.appHelper || {};
+  const dvaStore = (_b = (_a = utils == null ? void 0 : utils.getStore) == null ? void 0 : _a.call(utils)) == null ? void 0 : _b.getState();
+  import_utils.locales.init({}, ((_c = dvaStore == null ? void 0 : dvaStore.core) == null ? void 0 : _c.translateLocale) || "en");
+  const isMountedRef = (0, import_react.useRef)(true);
+  const carouselRef = (0, import_react.useRef)(null);
+  const { store } = utils;
+  const symbol = ((_f = (_e = (_d = store == null ? void 0 : store.getState) == null ? void 0 : _d.call(store)) == null ? void 0 : _e.global) == null ? void 0 : _f.symbol) || "$";
+  const prevButtonRef = (0, import_react.useRef)(null);
+  const nextButtonRef = (0, import_react.useRef)(null);
+  const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
+  const requestIdRef = (0, import_react.useRef)("");
+  const isUserLoggedIn = (0, import_react.useMemo)(() => {
+    var _a2, _b2;
+    return !!((_b2 = (_a2 = utils == null ? void 0 : utils.token) == null ? void 0 : _a2.get) == null ? void 0 : _b2.call(_a2)) || false;
+  }, [store]);
+  const {
+    list = [],
+    loading,
+    error,
+    authError,
+    hasAttempted,
+    isLoggedIn
+  } = state;
+  (0, import_react.useEffect)(() => {
+    if (utils == null ? void 0 : utils.request) {
+      import_utils2.request.setRequest(utils.request);
+    }
+  }, [utils == null ? void 0 : utils.request]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      isMountedRef.current = false;
+      requestIdRef.current = "";
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (hasAttempted) return;
+    if (!isUserLoggedIn) {
+      if (isMountedRef.current) {
+        setState({
+          list: [DEFAULT_WALLET_CARD],
+          balance: DEFAULT_BALANCE,
+          loading: false,
+          hasAttempted: true,
+          isLoggedIn: false
+        });
+      }
+      return;
+    }
+    const currentRequestId = Date.now().toString();
+    requestIdRef.current = currentRequestId;
+    const fetchData = async () => {
+      if (!isMountedRef.current) return;
+      if (requestIdRef.current !== currentRequestId) return;
+      await initData(currentRequestId);
+    };
+    fetchData().catch((err) => {
+      if (isMountedRef.current) {
+        console.error("请求数据出错:", err);
+      }
+    });
+  }, [hasAttempted, isUserLoggedIn]);
+  (0, import_react.useEffect)(() => {
+    const timer = setTimeout(() => {
+      if (!isMountedRef.current) return;
+      const prevButton = document.querySelector(
+        ".pisell-lowcode__walletList .slick-prev"
+      );
+      const nextButton = document.querySelector(
+        ".pisell-lowcode__walletList .slick-next"
+      );
+      if (prevButton) {
+        prevButtonRef.current = prevButton;
+      }
+      if (nextButton) {
+        nextButtonRef.current = nextButton;
+      }
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [list]);
+  (0, import_react.useEffect)(() => {
+    if (!isMountedRef.current) return;
+    const timerId = setTimeout(() => {
+      if (!isMountedRef.current) return;
+    }, 500);
+    return () => {
+      clearTimeout(timerId);
+    };
+  }, [list]);
+  const handleAfterChange = (current) => {
+    if (isMountedRef.current) {
+      setCurrentIndex(current);
+    }
+  };
+  const setState = (0, import_react.useCallback)(
+    (payload) => {
+      if (isMountedRef.current) {
+        dispatch({
+          type: "setState",
+          payload
+        });
+      }
+    },
+    [dispatch]
+  );
+  const handlePrevClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (currentIndex === 0) {
+      return;
+    }
+    const newIndex = currentIndex - 1;
+    if (isMountedRef.current) {
+      setCurrentIndex(newIndex);
+    }
+    if (isMountedRef.current && carouselRef.current && typeof carouselRef.current.goTo === "function") {
+      carouselRef.current.goTo(newIndex);
+    }
+  };
+  const handleNextClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (currentIndex === list.length - 1) {
+      return;
+    }
+    const newIndex = currentIndex + 1;
+    if (isMountedRef.current) {
+      setCurrentIndex(newIndex);
+    }
+    if (isMountedRef.current && carouselRef.current && typeof carouselRef.current.goTo === "function") {
+      carouselRef.current.goTo(newIndex);
+    }
+  };
+  const initData = async (requestId) => {
+    var _a2, _b2;
+    if (!isMountedRef.current) return;
+    if (requestIdRef.current !== requestId) return;
+    if (!isUserLoggedIn) {
+      setState({
+        list: [DEFAULT_WALLET_CARD],
+        balance: DEFAULT_BALANCE,
+        loading: false,
+        hasAttempted: true,
+        isLoggedIn: false
+      });
+      return;
+    }
+    if (hasAttempted) return;
+    setState({ loading: true, error: null });
+    try {
+      if (!isMountedRef.current) return;
+      const [walletListData, walletBalanceData] = await Promise.all([
+        (0, import_serve.getWalletList)({}),
+        (0, import_serve.getWalletBalance)()
+      ]);
+      if (!isMountedRef.current || requestIdRef.current !== requestId) return;
+      if (!walletBalanceData || Array.isArray(walletListData) && walletListData.length === 0) {
+        setTimeout(async () => {
+          if (!isMountedRef.current || requestIdRef.current !== requestId) return;
+          try {
+            let retryBalanceData = walletBalanceData;
+            let retryListData = walletListData;
+            if (!walletBalanceData) {
+              retryBalanceData = await (0, import_serve.getWalletBalance)();
+            }
+            if (Array.isArray(walletListData) && walletListData.length === 0) {
+              retryListData = await (0, import_serve.getWalletList)({});
+            }
+            setState({
+              list: retryListData || [],
+              balance: retryBalanceData,
+              // 使用重试后的结果
+              loading: false,
+              hasAttempted: true
+            });
+          } catch (retryErr) {
+            setState({
+              list: walletListData || [],
+              balance: walletBalanceData,
+              loading: false,
+              hasAttempted: true
+            });
+          }
+        }, 2e3);
+      } else {
+        setState({
+          list: walletListData || [],
+          balance: walletBalanceData,
+          loading: false,
+          hasAttempted: true
+        });
+      }
+    } catch (err) {
+      if (!isMountedRef.current || requestIdRef.current !== requestId) return;
+      const isAuthError = (err == null ? void 0 : err.code) === 4001 || ((_a2 = err == null ? void 0 : err.message) == null ? void 0 : _a2.includes("login time out")) || ((_b2 = err == null ? void 0 : err.data) == null ? void 0 : _b2.code) === 4001;
+      setState({
+        loading: false,
+        error: err instanceof Error ? err : new Error("加载失败"),
+        authError: isAuthError,
+        hasAttempted: true
+      });
+    }
+  };
+  const renderWalletCard = (item) => {
+    var _a2;
+    const { code, shop, wallet, id } = item;
+    const { metadata, name } = wallet || {};
+    const {
+      barcodetype = "barCode",
+      showcaseWalletPass = [],
+      coverImage = "",
+      icon = ""
+    } = metadata || {};
+    const { name: shopName } = shop;
+    const { balance } = state;
+    const balanceKeyMap = {
+      gift_card_balance: "rechargeable",
+      point_card_balance: "piont",
+      voucher_count: "voucher",
+      discount_card_count: "discount"
+    };
+    const cardItems = (showcaseWalletPass || []).map(
+      (key) => {
+        var _a3;
+        const balanceKey = (_a3 = Object.entries(balanceKeyMap).find(
+          ([_, value]) => value === key
+        )) == null ? void 0 : _a3[0];
+        return {
+          key,
+          label: key,
+          // 不做多语言处理，保持原样
+          hidden: false,
+          value: balanceKey ? balance[balanceKey] || 0 : 0
+        };
+      }
+    );
+    const cardProps = {
+      // 先应用默认配置
+      ...import_types.DEFAULT_CARD_CONFIG,
+      // 再应用globalState作为兜底
+      ...globalState,
+      // 最后应用API返回的数据，这些拥有最高优先级
+      symbol,
+      cardNo: code,
+      walletName: getLocalizedName(name, (_a2 = dvaStore == null ? void 0 : dvaStore.core) == null ? void 0 : _a2.translateLocale),
+      shopName,
+      codeType: barcodetype,
+      items: cardItems,
+      customBackgroundImage: coverImage,
+      isLogin: isUserLoggedIn
+      // 添加登录状态
+    };
+    return /* @__PURE__ */ import_react.default.createElement(import_materials.WalletCard, { key: id, ...cardProps });
+  };
+  const carouselProps = {
+    className: (0, import_classnames.default)("pisell-lowcode__walletList"),
+    arrows: false,
+    // 关闭组件自带的箭头，我们使用自定义按钮
+    infinite: false,
+    // 禁用循环滚动
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    centerMode: false,
+    autoplay: false,
+    dots: false,
+    // 完全禁用内置的导航点，使用自定义导航点
+    draggable: true,
+    swipe: true,
+    accessibility: true,
+    // 确保键盘导航可用
+    pauseOnHover: true,
+    pauseOnFocus: true,
+    speed: 500,
+    // 设置动画速度
+    useCSS: true,
+    // 使用CSS转换
+    useTransform: true,
+    // 使用CSS转换
+    variableWidth: false,
+    // 不使用可变宽度
+    adaptiveHeight: true,
+    // 使用自适应高度
+    initialSlide: 0,
+    // 从第一张幻灯片开始
+    waitForAnimate: false,
+    // 不等待动画完成
+    afterChange: handleAfterChange,
+    // 添加afterChange事件处理函数
+    // 手动设置当前滑块
+    currentSlide: currentIndex,
+    // 将dots内容渲染为空元素，彻底隐藏
+    appendDots: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "none" } }),
+    responsive: [
+      {
+        breakpoint: 768,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          centerMode: false,
+          infinite: false,
+          // 在响应式设置中也禁用循环滚动
+          swipe: true,
+          draggable: true,
+          accessibility: true,
+          arrows: false
+          // 响应式设置中也关闭箭头
+        }
+      }
+    ]
+  };
+  const renderBalanceCard = (0, import_react.useCallback)((balance) => {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-balance-card", key: balance.id }, /* @__PURE__ */ import_react.default.createElement("div", { className: "balance-card-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "balance-card-title" }, balance.name), /* @__PURE__ */ import_react.default.createElement("div", { className: "balance-card-value" }, balance.value)), /* @__PURE__ */ import_react.default.createElement("div", { className: "balance-card-content" }, balance.items && balance.items.map((item) => /* @__PURE__ */ import_react.default.createElement("div", { className: "balance-item", key: item.key }, /* @__PURE__ */ import_react.default.createElement("div", { className: "balance-item-label" }, item.label), /* @__PURE__ */ import_react.default.createElement("div", { className: "balance-item-value" }, item.value)))));
+  }, []);
+  const renderContent = () => {
+    if (loading) {
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-container pisell-wallet-skeleton" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-content" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-card-skeleton" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Skeleton, { active: true, paragraph: { rows: 6 } }), /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-card-code-skeleton" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Skeleton.Button, { active: true, style: { width: "80%", height: 50 } })))), /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-navigation-skeleton" }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Skeleton.Button,
+        {
+          active: true,
+          style: { width: 40, height: 40, borderRadius: "50%" }
+        }
+      ), /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-dots-container-skeleton" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Skeleton.Button, { active: true, style: { width: 80, height: 20 } })), /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Skeleton.Button,
+        {
+          active: true,
+          style: { width: 40, height: 40, borderRadius: "50%" }
+        }
+      )));
+    }
+    if (list.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-container" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-content" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Carousel, { ref: carouselRef, ...carouselProps }, list.map((item) => renderWalletCard(item)))), list && list.length > 1 && isUserLoggedIn && /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-navigation" }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `wallet-nav-button wallet-prev ${currentIndex === 0 ? "disabled" : ""}`,
+        onClick: handlePrevClick,
+        role: "button"
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_icons.LeftOutlined,
+        {
+          style: {
+            fontSize: "24px",
+            color: currentIndex === 0 ? "#D0D5DD" : "#101828"
+          }
+        }
+      )
+    ), list && list.length <= 5 ? /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-dots-container" }, Array.from({ length: list.length }).map((_, index) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: index,
+        className: `wallet-dot ${index === currentIndex ? "active" : ""}`,
+        onClick: (e) => {
+          e.stopPropagation();
+          if (carouselRef.current) {
+            carouselRef.current.slickGoTo(index);
+          }
+        }
+      }
+    ))) : /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-counter" }, currentIndex + 1, "/", list.length), /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `wallet-nav-button wallet-next ${currentIndex === list.length - 1 ? "disabled" : ""}`,
+        onClick: handleNextClick,
+        role: "button"
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_icons.RightOutlined,
+        {
+          style: {
+            fontSize: "24px",
+            color: currentIndex === list.length - 1 ? "#D0D5DD" : "#101828"
+          }
+        }
+      )
+    )));
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "wallet-list-wrapper" }, renderContent());
+});
+var walletList_default = WalletList;