@pisell/private-materials 6.6.3 → 6.6.4

package/lib/plus/walletPassGallery/index.js

@@ -0,0 +1,500 @@
+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/plus/walletPassGallery/index.tsx
+var walletPassGallery_exports = {};
+__export(walletPassGallery_exports, {
+  default: () => walletPassGallery_default
+});
+module.exports = __toCommonJS(walletPassGallery_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_ahooks = require("ahooks");
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_serve = require("./serve");
+var import_locales = __toESM(require("./locales"));
+var import_utils2 = require("../../utils");
+var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
+var import_passList = __toESM(require("./components/passList"));
+var import_passDetail = __toESM(require("./components/passDetail"));
+var import_index = require("./index.less");
+var { Title } = import_antd.Typography;
+var KEYS = {
+  available: "available",
+  unavailable: "unavailable"
+};
+var ARow = import_antd.Row;
+var ACol = import_antd.Col;
+var TAGS = [
+  "gift_card",
+  "point_card",
+  "product_discount_card",
+  "good_pass",
+  "product_voucher"
+];
+var WalletPassGallery = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const [activeKey, setActiveKey] = (0, import_react.useState)("available");
+  const [currentItemId, setCurrentItemId] = (0, import_react.useState)(void 0);
+  const [isOpenAddModal, setIsOpenAddModal] = (0, import_react.useState)(false);
+  const [currentUnbindItem, setCurrentUnbindItem] = (0, import_react.useState)(null);
+  const context = (0, import_useEngineContext.default)();
+  const utils = ((_a = context == null ? void 0 : context.appHelper) == null ? void 0 : _a.utils) || {};
+  const platform = (0, import_react.useMemo)(() => {
+    if (utils.isMobile) {
+      return utils.isMobile() ? "h5" : "pc";
+    }
+    if (typeof window !== "undefined") {
+      return window.innerWidth <= 768 ? "h5" : "pc";
+    }
+  }, [utils]);
+  const dvaStore = (_c = (_b = utils == null ? void 0 : utils.getStore) == null ? void 0 : _b.call(utils)) == null ? void 0 : _c.getState();
+  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 _getWalletDetail = (0, import_ahooks.useRequest)(import_serve.getWalletDetail, {
+    manual: true
+  });
+  const _getAvailableList = (0, import_ahooks.useInfiniteScroll)(
+    async (d) => {
+      const walletId = new URLSearchParams(window.location.search).get("id");
+      const res = await (0, import_serve.getWalletList)({
+        available: 1,
+        num: 20,
+        skip: (d == null ? void 0 : d.nextId) || 1,
+        tags: TAGS,
+        filter_wallet_id: walletId || void 0,
+        "with": ["customScheduleSnapshot"]
+      });
+      return {
+        list: (res == null ? void 0 : res.list) || [],
+        count: (res == null ? void 0 : res.count) || 0,
+        nextId: (res == null ? void 0 : res.skip) || 1
+      };
+    },
+    {
+      manual: true,
+      onSuccess: (data) => {
+      },
+      isNoMore: (d) => {
+        if (!(d == null ? void 0 : d.list)) return false;
+        return d.list.length >= (d.count || 0);
+      }
+    }
+  );
+  const _getUnavailableList = (0, import_ahooks.useInfiniteScroll)(
+    async (d) => {
+      const walletId = new URLSearchParams(window.location.search).get("id");
+      const res = await (0, import_serve.getWalletList)({
+        available: 0,
+        num: 20,
+        skip: (d == null ? void 0 : d.nextId) || 1,
+        tags: TAGS,
+        filter_wallet_id: walletId || void 0,
+        "with": ["customScheduleSnapshot"]
+      });
+      return {
+        list: (res == null ? void 0 : res.list) || [],
+        count: (res == null ? void 0 : res.count) || 0,
+        nextId: (res == null ? void 0 : res.skip) || 1
+      };
+    },
+    {
+      manual: true,
+      isNoMore: (d) => {
+        if (!(d == null ? void 0 : d.list)) return false;
+        return d.list.length >= (d.count || 0);
+      }
+    }
+  );
+  (0, import_react.useEffect)(() => {
+    const walletId = new URLSearchParams(window.location.search).get("id");
+    if (walletId) {
+      _getWalletDetail.runAsync(walletId);
+    }
+    const req1 = _getAvailableList.loadMoreAsync();
+    const req2 = _getUnavailableList.loadMoreAsync();
+    Promise.all([req1, req2]).then(([data1, data2]) => {
+      if (platform === "h5") return;
+      const list = (data1 == null ? void 0 : data1.list) || [];
+      const firstAvailable = list[0];
+      if (firstAvailable) {
+        setCurrentItemId(firstAvailable.id);
+        return;
+      }
+      const list2 = (data2 == null ? void 0 : data2.list) || [];
+      const firstUnavailable = list2[0];
+      if (firstUnavailable) {
+        setCurrentItemId(firstUnavailable.id);
+        setActiveKey("unavailable");
+      }
+    });
+  }, []);
+  const _getUnbindList = (0, import_ahooks.useRequest)(import_serve.getUnbindList, {
+    manual: true,
+    onSuccess: (data) => {
+      if (data == null ? void 0 : data.length) {
+        setCurrentUnbindItem(data[0]);
+      } else {
+        setCurrentUnbindItem(null);
+        (0, import_materials.PisellToast)({
+          content: import_utils.locales.getText("wallet-pass-gallery.searchNoFound"),
+          duration: 2
+        });
+      }
+    },
+    onError: (e) => {
+      console.log("get unbind list error", e);
+      setCurrentUnbindItem(null);
+      (0, import_materials.PisellToast)({
+        content: import_utils.locales.getText("wallet-pass-gallery.searchNoFound"),
+        duration: 2
+      });
+    }
+  });
+  (0, import_react.useEffect)(() => {
+    document.body.id = "body";
+  }, []);
+  const _avaliable = (0, import_react.useMemo)(() => {
+    var _a2;
+    return ((_a2 = _getAvailableList.data) == null ? void 0 : _a2.list) || [];
+  }, [_getAvailableList.data]);
+  const _unavailable = (0, import_react.useMemo)(() => {
+    var _a2;
+    return ((_a2 = _getUnavailableList.data) == null ? void 0 : _a2.list) || [];
+  }, [_getUnavailableList.data]);
+  const _handleTabChange = (key) => {
+    var _a2, _b2;
+    setActiveKey(key);
+    if (platform === "h5") {
+      setCurrentItemId(void 0);
+      return;
+    }
+    const newId = key === KEYS.unavailable ? (_a2 = _unavailable[0]) == null ? void 0 : _a2.id : (_b2 = _avaliable[0]) == null ? void 0 : _b2.id;
+    setCurrentItemId(newId);
+  };
+  const _handleMenuChange = (key) => {
+    setActiveKey(key);
+    setCurrentItemId(void 0);
+  };
+  const _resetSearchState = () => {
+    setCurrentUnbindItem(null);
+    _getUnbindList.mutate([]);
+  };
+  const _handleCardClick = (id) => {
+    setCurrentItemId(id);
+  };
+  const _handleSearchByCode = async (code) => {
+    if (!code || !code.trim()) {
+      _resetSearchState();
+      return;
+    }
+    try {
+      await _getUnbindList.run({
+        code
+      });
+    } catch (error) {
+      _resetSearchState();
+      (0, import_materials.PisellToast)({
+        content: import_utils.locales.getText("wallet-pass-gallery.searchNoFound"),
+        duration: 2
+      });
+    }
+  };
+  const _handleBind = async () => {
+    if (!(currentUnbindItem == null ? void 0 : currentUnbindItem.code)) return;
+    try {
+      const data = await (0, import_serve.bindCodeToCustomer)({
+        code: currentUnbindItem.code
+      });
+      console.log("bind result", data);
+      if (data) {
+        (0, import_materials.PisellToast)({
+          content: import_utils.locales.getText("wallet-pass-gallery.addSuccess"),
+          duration: 2
+        });
+        _getAvailableList.reloadAsync();
+        _getUnavailableList.reloadAsync();
+      }
+      setIsOpenAddModal(false);
+      _resetSearchState();
+    } catch (error) {
+      (0, import_materials.PisellToast)({
+        content: import_utils.locales.getText("wallet-pass-gallery.addError"),
+        duration: 2
+      });
+    }
+  };
+  const _currentItem = (0, import_react.useMemo)(() => {
+    if (!currentItemId) return null;
+    const found1 = _avaliable.find(
+      (item) => item.id === currentItemId
+    );
+    if (found1) return found1;
+    const found2 = _unavailable.find(
+      (item) => item.id === currentItemId
+    );
+    return found2;
+  }, [currentItemId, _avaliable, _unavailable]);
+  const _pcTitle = /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-pass-gallery_title" }, /* @__PURE__ */ import_react.default.createElement(Title, null, ((_g = utils == null ? void 0 : utils.translation) == null ? void 0 : _g.call(utils, (_f = (_e = _getWalletDetail.data) == null ? void 0 : _e.data) == null ? void 0 : _f.name)) || import_utils.locales.getText("wallet-pass-gallery.wallet")), platform === "pc" ? /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Button,
+    {
+      icon: /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "pisell2-plus" }),
+      size: "large",
+      onClick: () => setIsOpenAddModal(true)
+    },
+    import_utils.locales.getText("wallet-pass-gallery.add")
+  ) : null);
+  const renderAvaliableList = () => {
+    if (platform === "h5") {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_passList.default,
+        {
+          onLoadMore: () => _getAvailableList.loadMoreAsync(),
+          loading: _getAvailableList.loadingMore,
+          hasMore: !_getAvailableList.noMore,
+          dataSource: _avaliable,
+          value: currentItemId,
+          onChange: _handleCardClick
+        }
+      );
+    }
+    return /* @__PURE__ */ import_react.default.createElement(ARow, { gutter: 20, wrap: false }, /* @__PURE__ */ import_react.default.createElement(ACol, { flex: "367px" }, /* @__PURE__ */ import_react.default.createElement(
+      import_passList.default,
+      {
+        onLoadMore: () => _getAvailableList.loadMoreAsync(),
+        loading: _getAvailableList.loadingMore,
+        hasMore: !_getAvailableList.noMore,
+        dataSource: _avaliable,
+        value: currentItemId,
+        onChange: _handleCardClick
+      }
+    )), /* @__PURE__ */ import_react.default.createElement(ACol, { flex: "auto" }, /* @__PURE__ */ import_react.default.createElement(import_passDetail.default, { dataSource: _currentItem, platform })));
+  };
+  const renderUnavailableList = () => {
+    if (platform === "h5") {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_passList.default,
+        {
+          onLoadMore: () => _getUnavailableList.loadMoreAsync(),
+          hasMore: !_getUnavailableList.noMore,
+          loading: _getUnavailableList.loadingMore,
+          dataSource: _unavailable,
+          value: currentItemId,
+          onChange: _handleCardClick
+        }
+      );
+    }
+    return /* @__PURE__ */ import_react.default.createElement(ARow, { gutter: 20, wrap: false }, /* @__PURE__ */ import_react.default.createElement(ACol, { flex: "367px" }, /* @__PURE__ */ import_react.default.createElement(
+      import_passList.default,
+      {
+        onLoadMore: () => _getUnavailableList.loadMoreAsync(),
+        hasMore: !_getUnavailableList.noMore,
+        loading: _getUnavailableList.loadingMore,
+        dataSource: _unavailable,
+        value: currentItemId,
+        onChange: _handleCardClick
+      }
+    )), /* @__PURE__ */ import_react.default.createElement(ACol, { flex: "auto" }, /* @__PURE__ */ import_react.default.createElement(import_passDetail.default, { dataSource: _currentItem, platform })));
+  };
+  const renderTabBar = (props2, DefaultTabBar) => /* @__PURE__ */ import_react.default.createElement("div", { style: { zIndex: 99, position: "sticky", top: 0 } }, /* @__PURE__ */ import_react.default.createElement(DefaultTabBar, { ...props2, style: { background: "white" } }));
+  const renderContent = () => {
+    var _a2, _b2;
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-pass-gallery_content" }, /* @__PURE__ */ import_react.default.createElement(
+      import_materials.Tabs,
+      {
+        defaultActiveKey: "available",
+        activeKey,
+        type: "line",
+        onChange: _handleTabChange,
+        renderTabBar: platform === "h5" ? renderTabBar : void 0,
+        items: [
+          {
+            key: KEYS.available,
+            label: import_utils.locales.getText("wallet-pass-gallery.available"),
+            children: renderAvaliableList(),
+            badge: ((_a2 = _getAvailableList.data) == null ? void 0 : _a2.count) || 0
+          },
+          {
+            key: KEYS.unavailable,
+            label: import_utils.locales.getText("wallet-pass-gallery.unavailable"),
+            children: renderUnavailableList(),
+            badge: ((_b2 = _getUnavailableList.data) == null ? void 0 : _b2.count) || 0
+          }
+        ]
+      }
+    ));
+  };
+  const renderPcContent = () => {
+    return /* @__PURE__ */ import_react.default.createElement("div", null, _pcTitle, renderContent());
+  };
+  const renderSearchCard = (item, index) => {
+    const {
+      id,
+      product_name = "",
+      balance = 0,
+      code = "",
+      encoded = "",
+      expire_date = "",
+      shop,
+      limit_status,
+      product_cover = "",
+      unified_messages = {},
+      par_value = "",
+      tag = "",
+      ...rest
+    } = item;
+    const { title = "" } = unified_messages;
+    const { name = "" } = shop;
+    const isActive = id === (currentUnbindItem == null ? void 0 : currentUnbindItem.id) && platform === "pc";
+    const isEnabled = limit_status === "enable";
+    const isDiscountCard = tag === "product_discount_card";
+    const getBalanceTitle = () => {
+      if (tag === "point_card") {
+        return import_utils.locales.getText("wallet-pass-gallery.points");
+      } else if (tag === "good_pass") {
+        return import_utils.locales.getText("wallet-pass-gallery.goodPass");
+      }
+      return void 0;
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_materials.PisellWalletPassCard,
+      {
+        ...rest,
+        id,
+        type: tag,
+        key: id,
+        balanceTitle: getBalanceTitle(),
+        showDetail: false,
+        showRedeem: false,
+        showQrCode: false,
+        cover: product_cover,
+        disabled: !isEnabled,
+        showDisabledReason: !isEnabled,
+        disabledReason: title,
+        propStyle: { marginBottom: 10 },
+        showBalanceSymbol: !["point_card", "good_pass"].includes(tag),
+        showBalance: tag !== "product_discount_card",
+        active: isActive,
+        name: product_name,
+        qrCode: code,
+        storeName: name,
+        balance: Number(balance),
+        code: encoded,
+        discount: Number(par_value),
+        showDiscount: isDiscountCard,
+        validDate: expire_date,
+        onClick: () => setCurrentUnbindItem(item),
+        style: {
+          cursor: "pointer",
+          width: "100%",
+          marginTop: 8
+        }
+      }
+    );
+  };
+  const renderH5Content = () => {
+    var _a2, _b2, _c2, _d2, _e2, _f2;
+    const _walletBar = !((_c2 = (_b2 = (_a2 = utils == null ? void 0 : utils.interaction) == null ? void 0 : _a2.utils) == null ? void 0 : _b2.isAppEnv) == null ? void 0 : _c2.call(_b2)) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-pass-gallery-bar" }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "pisell-wallet-pass-gallery-header-bar-arrow",
+        onClick: () => {
+          history.back();
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "pisell2-chevron-left" })
+    ), /* @__PURE__ */ import_react.default.createElement("span", { className: "header-title" }, ((_f2 = utils == null ? void 0 : utils.translation) == null ? void 0 : _f2.call(utils, (_e2 = (_d2 = _getWalletDetail.data) == null ? void 0 : _d2.data) == null ? void 0 : _e2.name)) || import_utils.locales.getText("wallet-pass-gallery.wallet")));
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, _walletBar, renderContent(), /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          padding: 24
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { size: "large", onClick: () => setIsOpenAddModal(true), block: true }, import_utils.locales.getText("wallet-pass-gallery.button.add"))
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_materials.PisellModal,
+      {
+        platform: "h5",
+        visible: !!_currentItem,
+        onCancel: () => setCurrentItemId(""),
+        footer: null,
+        title: import_utils.locales.getText("wallet-pass-gallery.details")
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_passDetail.default, { dataSource: _currentItem, platform })
+    ));
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(
+        "pisell-wallet-pass-gallery",
+        `pisell-wallet-pass-gallery-${platform}`
+      )
+    },
+    platform === "pc" ? renderPcContent() : renderH5Content()
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellModal,
+    {
+      title: import_utils.locales.getText("wallet-pass-gallery.add"),
+      platform: platform === "pc" ? "pc" : "h5",
+      mobileModalHeight: "auto",
+      open: isOpenAddModal,
+      onCancel: () => setIsOpenAddModal(false),
+      cancelVisible: false,
+      destroyOnClose: true,
+      okText: import_utils.locales.getText("wallet-pass-gallery.confirm"),
+      okButtonProps: { disabled: !(currentUnbindItem == null ? void 0 : currentUnbindItem.code) },
+      onOk: _handleBind
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { margin: "24px 0" } }, /* @__PURE__ */ import_react.default.createElement(
+      import_materials.PisellInformationEntry,
+      {
+        title: import_utils.locales.getText("wallet-pass-gallery.addModalTitle"),
+        entryModes: [
+          {
+            type: "scanCode",
+            name: import_utils.locales.getText("wallet-pass-gallery.scanBarQrCode")
+          },
+          {
+            type: "input",
+            name: import_utils.locales.getText("wallet-pass-gallery.enterCodes")
+          }
+        ],
+        searchDescribe: import_utils.locales.getText(
+          "wallet-pass-gallery.searchDescribe"
+        ),
+        onChange: _handleSearchByCode,
+        onChangeType: _resetSearchState
+      }
+    ), (_getUnbindList.data || []).map(renderSearchCard))
+  ));
+};
+var walletPassGallery_default = WalletPassGallery;

package/lib/plus/walletPassGallery/index.less

@@ -0,0 +1,115 @@
+.pisell-wallet-pass-gallery {
+  background-color: #fff;
+
+  &_content {
+    margin: 0 auto;
+    padding: 0 20px;
+  }
+
+  &-pc {
+    padding-bottom: 20px;
+    .pisell-wallet-pass-gallery_list {
+      max-height: calc(100vh - 128px);
+      overflow-y: auto;
+    }
+  }
+
+  &-h5 {
+    height: 100%;
+    width: 100vw;
+    padding: 0px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .pisell-wallet-pass-gallery_content {
+      flex: 1;
+      width: 100%;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      padding: 0px;
+    }
+
+    .pisell-lowcode-tabs-content {
+      padding: 0 20px;
+    }
+  }
+
+  .pisell-wallet-pass-gallery_title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 20px 0 20px;
+
+    h1 {
+      margin: 0;
+    }
+  }
+
+  .pisell-lowcode-menu-root.pisell-lowcode-menu-vertical {
+    border-right: none;
+  }
+
+  .pisell-lowcode-wallet-menu {
+    margin: 0;
+
+    .pisell-lowcode-menu-item {
+      height: 72px;
+      margin: 0;
+      line-height: 72px;
+      padding: 0;
+      border-bottom: 1px solid #f2f4f7;
+      box-sizing: border-box;
+
+      .pisell-lowcode-wallet-menu-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .pisell-lowcode-wallet-menu-title {
+          color: var(--Gray-900, #101828);
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 500;
+          line-height: 24px;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+
+  // WalletBar 样式（迁移并适配当前组件类名）
+  .pisell-wallet-pass-gallery-bar {
+    position: relative;
+    height: 68px;
+    width: 100vw;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    background-color: #fff;
+    padding: 0 12px;
+    border-bottom: 1px solid #d0d5de;
+    color: var(--Gray-900, #101828);
+    text-align: center;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 68px;
+
+    .pisell-wallet-pass-gallery-header-bar-arrow {
+      position: absolute;
+      font-size: 24px;
+      top: 0px;
+      left: 22px;
+    }
+
+    .header-title {
+      flex: 1;
+      text-align: center;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      margin-left: -24px;
+    }
+  }
+}