@pisell/private-materials 6.6.1 → 6.7.1

package/es/plus/walletPassGallery/components/timelineSection/index.js

@@ -0,0 +1,176 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useMemo, useCallback } from 'react';
+import { useRequest } from 'ahooks';
+import dayjs from 'dayjs';
+import timezonePlugin from 'dayjs/plugin/timezone';
+import utcPlugin from 'dayjs/plugin/utc';
+import { locales } from '@pisell/utils';
+import { Timeline, Skeleton, PisellEmpty, usePisellConfig, PisellModal, PisellStatisticList, Button } from '@pisell/materials';
+import { getAssetList } from "../../serve";
+import "./index.less";
+dayjs.extend(timezonePlugin);
+dayjs.extend(utcPlugin);
+var stateTimeUnix = 1723255863; // 2024.8.10 时间戳
+var TimelineSection = function TimelineSection(props) {
+  var code = props.code,
+    tag = props.tag,
+    timezone = props.timezone;
+  var _usePisellConfig = usePisellConfig(),
+    _usePisellConfig$symb = _usePisellConfig.symbol,
+    symbol = _usePisellConfig$symb === void 0 ? '$' : _usePisellConfig$symb;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isShowtimeLineDetail = _React$useState2[0],
+    setIsShowtimeLineDetail = _React$useState2[1];
+  var _React$useState3 = React.useState(true),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isSpending = _React$useState4[0],
+    setIsSpending = _React$useState4[1];
+  var _React$useState5 = React.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    timeLineDetail = _React$useState6[0],
+    setTimeLineDetail = _React$useState6[1];
+  var assetActionEnum = useMemo(function () {
+    return {
+      recharge: tag === 'point_card' ? locales.getText('wallet-pass-gallery.pointsEarned') : locales.getText('wallet-pass-gallery.recharge'),
+      order_expend: tag === 'point_card' ? locales.getText('wallet-pass-gallery.pointsRedeemed') : locales.getText('wallet-pass-gallery.spending'),
+      order_refund: locales.getText('wallet-pass-gallery.refund'),
+      expire: locales.getText('wallet-pass-gallery.expire')
+    };
+  }, [tag]);
+  var formatCurrencyAmount = useCallback(function () {
+    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var isNegative = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!amount) return '';
+    if (tag === 'good_pass') return locales.getText('wallet-pass-gallery.goodPass.usedCredit')(parseInt(amount));
+    var absAmount = amount.startsWith('-') ? amount.substring(1) : amount;
+    var showSymbol = !['point_card', 'good_pass'].includes(tag);
+    return isNegative ? "-".concat(showSymbol ? symbol : '').concat(absAmount) : "".concat(showSymbol ? symbol : '').concat(amount);
+  }, [symbol, tag]);
+  var timeTreeNode = useCallback(function (data) {
+    var _data$action = data.action,
+      action = _data$action === void 0 ? '' : _data$action,
+      _data$created_at = data.created_at,
+      created_at = _data$created_at === void 0 ? '' : _data$created_at,
+      _data$amount = data.amount,
+      amount = _data$amount === void 0 ? '' : _data$amount,
+      _data$currency_symbol = data.currency_symbol,
+      currency_symbol = _data$currency_symbol === void 0 ? '' : _data$currency_symbol;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-wallet-pass-gallery_timeline-node"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-wallet-pass-gallery_timeline-node-left"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "pisell-wallet-pass-gallery_timeline-node-action"
+    }, action ? assetActionEnum[action] : ''), created_at && /*#__PURE__*/React.createElement("p", {
+      className: "pisell-wallet-pass-gallery_timeline-node-time"
+    }, created_at, (action === 'recharge' || action === 'order_expend') && /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "pisell-wallet-pass-gallery_timeline-node-detail-link",
+      onClick: function onClick() {
+        setIsShowtimeLineDetail(true);
+        setIsSpending(action === 'order_expend');
+        setTimeLineDetail(data);
+      },
+      style: {
+        background: 'transparent',
+        border: 'none',
+        padding: 0
+      }
+    }, locales.getText('wallet-pass-gallery.viewDetails')))), /*#__PURE__*/React.createElement("div", {
+      className: "pisell-wallet-pass-gallery_timeline-node-amount".concat(action === 'recharge' ? ' pisell-wallet-pass-gallery_timeline-node-amount-positive' : '').concat(action === 'order_expend' ? ' pisell-wallet-pass-gallery_timeline-node-amount-negative' : '')
+    }, amount && currency_symbol ? formatCurrencyAmount(amount, action === 'order_expend') : ''));
+  }, [assetActionEnum, formatCurrencyAmount]);
+  var assetListReq = useRequest(function () {
+    return getAssetList({
+      num: '99',
+      skip: '1',
+      card_id: code,
+      sourceType: tag,
+      tag: tag,
+      business_object: 'customer'
+    });
+  }, {
+    ready: !!code,
+    refreshDeps: [code, tag]
+  });
+  var timelineItems = useMemo(function () {
+    var _assetListReq$data;
+    var list = ((_assetListReq$data = assetListReq.data) === null || _assetListReq$data === void 0 ? void 0 : _assetListReq$data.list) || [];
+    if (!Array.isArray(list) || list.length === 0) return [];
+    var filteredByAction = list.filter(function (item) {
+      return !!assetActionEnum[item.action || ''];
+    });
+    var filteredByTime = filteredByAction.filter(function (item) {
+      var itemUnix = dayjs.tz((item === null || item === void 0 ? void 0 : item.created_at) || '', timezone).unix();
+      if ((item === null || item === void 0 ? void 0 : item.action) === 'order_expend' && itemUnix < stateTimeUnix) return false;
+      if ((item === null || item === void 0 ? void 0 : item.tag) === 'point_card' && itemUnix < stateTimeUnix) return false;
+      return true;
+    });
+    var nonZeroPoint = filteredByTime.filter(function (it) {
+      return !(it.tag === 'point_card' && (it.amount === '0' || parseFloat(it.amount || '0') === 0));
+    });
+    return nonZeroPoint.map(function (item) {
+      return {
+        children: assetActionEnum[(item === null || item === void 0 ? void 0 : item.action) || ''] ? timeTreeNode(item) : null
+      };
+    });
+  }, [assetListReq.data, assetActionEnum, timeTreeNode, timezone, stateTimeUnix]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-pass-gallery_timeline-subtitle"
+  }, locales.getText('wallet-pass-gallery.activelog')), assetListReq.loading ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-pass-gallery_timeline-loading"
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    active: true,
+    paragraph: {
+      rows: 6
+    },
+    round: true
+  })) : timelineItems.length > 0 ? /*#__PURE__*/React.createElement(Timeline, {
+    items: timelineItems,
+    className: "pisell-wallet-pass-gallery_timeline-list"
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-pass-gallery_timeline-empty"
+  }, /*#__PURE__*/React.createElement(PisellEmpty, null)), /*#__PURE__*/React.createElement(PisellModal, {
+    platform: 'pc',
+    mobileModalHeight: "auto",
+    cancelVisible: false,
+    destroyOnClose: true,
+    onCancel: function onCancel() {
+      return setIsShowtimeLineDetail(false);
+    },
+    title: isSpending ? locales.getText('wallet-pass-gallery.spendingDetails') : locales.getText('wallet-pass-gallery.rechargeDetails'),
+    open: isShowtimeLineDetail,
+    footer: [/*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      block: true,
+      size: "large",
+      onClick: function onClick() {
+        return setIsShowtimeLineDetail(false);
+      }
+    }, locales.getText('wallet-pass-gallery.done'))]
+  }, /*#__PURE__*/React.createElement(PisellStatisticList, {
+    data: [{
+      label: locales.getText('wallet-pass-gallery.date'),
+      value: (timeLineDetail === null || timeLineDetail === void 0 ? void 0 : timeLineDetail.created_at) || ''
+    }, {
+      label: isSpending ? locales.getText('wallet-pass-gallery.spending') : locales.getText('wallet-pass-gallery.recharge'),
+      value: formatCurrencyAmount((timeLineDetail === null || timeLineDetail === void 0 ? void 0 : timeLineDetail.amount) || '', isSpending)
+    }, {
+      label: locales.getText('wallet-pass-gallery.viewOrder'),
+      value: timeLineDetail && timeLineDetail !== null && timeLineDetail !== void 0 && timeLineDetail.resource_code ? "#".concat(timeLineDetail === null || timeLineDetail === void 0 ? void 0 : timeLineDetail.resource_code) : timeLineDetail !== null && timeLineDetail !== void 0 && timeLineDetail.transaction_id ? "#".concat(timeLineDetail === null || timeLineDetail === void 0 ? void 0 : timeLineDetail.transaction_id) : '',
+      isLink: !!(timeLineDetail && timeLineDetail !== null && timeLineDetail !== void 0 && timeLineDetail.resource_id),
+      link: timeLineDetail && timeLineDetail !== null && timeLineDetail !== void 0 && timeLineDetail.resource_id ? "/order/details?id=".concat(timeLineDetail === null || timeLineDetail === void 0 ? void 0 : timeLineDetail.resource_id) : undefined
+    }],
+    labelColor: "#101828",
+    valueColor: "#101828",
+    backgroundColors: ['#fff'],
+    isHasBorder: false
+  })));
+};
+export default TimelineSection;

package/es/plus/walletPassGallery/components/timelineSection/index.less

@@ -0,0 +1,67 @@
+.pisell-wallet-pass-gallery_timeline-node {
+  display: flex;
+  justify-content: space-between;
+
+  &-left {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-action {
+    color: #101828;
+    font-size: 14px;
+    font-weight: 500;
+    margin: 0 0 4px;
+  }
+
+  &-time {
+    color: #667085;
+    font-size: 12px;
+    margin: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  &-detail-link {
+    color: var(--theme-color, #7F56D9);
+    margin-left: 8px;
+    cursor: pointer;
+    font-size: 12px;
+  }
+
+  &-amount {
+    font-size: 14px;
+    font-weight: 500;
+
+    &-positive {
+      color: #12B76A;
+    }
+
+    &-negative {
+      color: #F04438;
+    }
+  }
+}
+
+.pisell-wallet-pass-gallery_timeline-list {
+  padding: 8px 0;
+}
+
+.pisell-wallet-pass-gallery_timeline-subtitle {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  color: #101828;
+  margin-bottom: 16px;
+}
+
+.pisell-wallet-pass-gallery_timeline-empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+
+.pisell-wallet-pass-gallery_timeline-loading {
+  min-height: 160px;
+}

package/es/plus/walletPassGallery/components/usageRule/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.less';
+interface UsageRulesProps {
+    className?: string;
+    style?: React.CSSProperties;
+    dataSource?: any;
+}
+declare function UsageRules({ className, style, dataSource }: UsageRulesProps): JSX.Element | null;
+export default UsageRules;

package/es/plus/walletPassGallery/components/usageRule/index.js

@@ -0,0 +1,248 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useMemo } from 'react';
+import { Typography } from '@pisell/materials';
+import { locales } from '@pisell/utils';
+import "./index.less";
+var Text = Typography.Text;
+function UsageRules(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style,
+    dataSource = _ref.dataSource;
+  var _ref2 = dataSource || {},
+    _ref2$extension_data = _ref2.extension_data,
+    extension_data = _ref2$extension_data === void 0 ? [] : _ref2$extension_data,
+    _ref2$customer_order_ = _ref2.customer_order_behavior_count,
+    customer_order_behavior_count = _ref2$customer_order_ === void 0 ? 0 : _ref2$customer_order_,
+    _ref2$total_order_beh = _ref2.total_order_behavior_count,
+    total_order_behavior_count = _ref2$total_order_beh === void 0 ? 0 : _ref2$total_order_beh;
+  var creditsData = useMemo(function () {
+    var usageCreditsItem = extension_data.find(function (item) {
+      return item.field_key === 'usage_credits';
+    });
+    return usageCreditsItem === null || usageCreditsItem === void 0 ? void 0 : usageCreditsItem.value;
+  }, [extension_data]);
+  var rules = useMemo(function () {
+    if (!creditsData) return [];
+    var rules = [];
+
+    // Add daily limit if exists
+    if (creditsData.max_per_day > 0) {
+      rules.push({
+        type: 'daily',
+        limit: creditsData.max_per_day,
+        description: '',
+        // Will be filled by localized text
+        resetTime: '' // Will be filled by localized text
+      });
+    }
+
+    // Add weekly limit if exists
+    if (creditsData.max_per_week > 0) {
+      rules.push({
+        type: 'weekly',
+        limit: creditsData.max_per_week,
+        description: '',
+        // Will be filled by localized text
+        resetTime: '' // Will be filled by localized text
+      });
+    }
+
+    // Add monthly limit if exists
+    if (creditsData.max_per_month > 0) {
+      rules.push({
+        type: 'monthly',
+        limit: creditsData.max_per_month,
+        description: '',
+        // Will be filled by localized text
+        resetTime: '' // Will be filled by localized text
+      });
+    }
+    return rules;
+  }, [creditsData]);
+
+  // Generate personal limit data
+  var personalLimit = useMemo(function () {
+    if (!creditsData) return undefined;
+    var totalCredits = creditsData.total_credits || 0;
+    var perUserLimit = creditsData.per_user_limit || 0;
+
+    // 使用 total_credits 和 per_user_limit 中的较小值且非 0 的值作为总数
+    // 如果 totalCredits 是 0，则使用 perUserLimit
+    var total = 0;
+    if (totalCredits > 0 && perUserLimit > 0) {
+      total = Math.min(totalCredits, perUserLimit);
+    } else {
+      total = Math.max(totalCredits, perUserLimit);
+    }
+
+    // 单张卡剩余多少
+    var total_remaining = 0;
+    if (totalCredits > 0) {
+      total_remaining = totalCredits - (total_order_behavior_count || 0);
+    }
+    // 个人剩余多少
+    var perUser_remaining = 0;
+    if (perUserLimit > 0) {
+      perUser_remaining = perUserLimit - (customer_order_behavior_count || 0);
+    }
+    var remaining = 0;
+    if (total_remaining > 0 && perUser_remaining > 0) {
+      remaining = Math.min(total_remaining, perUser_remaining);
+    } else {
+      // 如果有一个是 0，还需要看是否是因为配置是 0 才导致的 0
+      // 先看总次数是不是剩余 0，是因为什么剩余 0
+      if (total_remaining === 0) {
+        if (totalCredits === 0) {
+          // 代表不限制总使用次数
+          remaining = perUser_remaining;
+        } else {
+          // 代表限制总使用次数，但是总使用次数为 0，则 remaining 为 0
+          remaining = 0;
+        }
+      } else {
+        // 如果剩余总使用次数大于 0，个人使用次数为 0，则 remaining 为 0
+        if (perUser_remaining === 0) {
+          remaining = 0;
+        }
+      }
+    }
+    return {
+      total: total,
+      remaining: remaining,
+      note: '' // Will be filled by localized text
+    };
+  }, [creditsData, total_order_behavior_count, customer_order_behavior_count]);
+
+  // Helper function to interpolate text with variables
+  var interpolateText = function interpolateText(text, variables) {
+    var ret = text.replace(/\{(\w+)\}/g, function (match, key) {
+      return variables[key] !== undefined ? variables[key] : match;
+    });
+    return ret;
+  };
+
+  // Get localized text with fallback
+  var getText = function getText(key, fallback) {
+    return (locales === null || locales === void 0 ? void 0 : locales.getText(key)) || fallback || key;
+  };
+
+  // Generate rule description with limit value
+  var getRuleDescription = function getRuleDescription(type, limit) {
+    // Handle unlimited case (limit = 0 means unlimited)
+    if (limit === 0 && type === 'monthly') {
+      return getText('wallet-pass-gallery.monthlyLimitUnlimited', '无限制');
+    }
+    var templateKey = "wallet-pass-gallery.".concat(type, "LimitDesc");
+    var template = getText(templateKey, '');
+    return interpolateText(template, {
+      limit: limit
+    });
+  };
+
+  // Generate rule reset time text
+  var getRuleResetTime = function getRuleResetTime(type) {
+    var resetKey = "wallet-pass-gallery.".concat(type, "Reset");
+    return getText(resetKey, '');
+  };
+
+  // Default rules with localized text
+  var defaultRules = [{
+    type: 'daily',
+    limit: 3,
+    description: getRuleDescription('daily', 3),
+    resetTime: getRuleResetTime('daily')
+  }, {
+    type: 'weekly',
+    limit: 15,
+    description: getRuleDescription('weekly', 15),
+    resetTime: getRuleResetTime('weekly')
+  }, {
+    type: 'monthly',
+    limit: 60,
+    description: getRuleDescription('monthly', 60),
+    resetTime: getRuleResetTime('monthly')
+  }];
+
+  // Process rules to add localized descriptions
+  var processedRules = rules ? rules.map(function (rule) {
+    return _objectSpread(_objectSpread({}, rule), {}, {
+      description: getRuleDescription(rule.type, rule.limit),
+      resetTime: getRuleResetTime(rule.type)
+    });
+  }) : defaultRules;
+  var finalRules = processedRules;
+  var getRuleLabel = function getRuleLabel(type) {
+    switch (type) {
+      case 'daily':
+        return getText('wallet-pass-gallery.dailyLimit', '每日限制:');
+      case 'weekly':
+        return getText('wallet-pass-gallery.weeklyLimit', '每周限制:');
+      case 'monthly':
+        return getText('wallet-pass-gallery.monthlyLimit', '每月限制:');
+      default:
+        return getText('wallet-pass-gallery.dailyLimit', '限制:');
+    }
+  };
+  if (!creditsData) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-pass-gallery_usage-rules ".concat(className),
+    style: style
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "pisell-wallet-pass-gallery_usage-rules-title"
+  }, getText('wallet-pass-gallery.usageRules', '使用规则')), /*#__PURE__*/React.createElement(Text, {
+    className: "pisell-wallet-pass-gallery_usage-rules-subtitle"
+  }, getText('wallet-pass-gallery.usageRulesSubtitle', '请仔细阅读以下使用条件')), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-pass-gallery_usage-rules-section"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "pisell-wallet-pass-gallery_usage-rules-section-title"
+  }, getText('wallet-pass-gallery.timeUsageLimits', '时间使用限制')), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-pass-gallery_usage-rules-list"
+  }, finalRules.length > 0 ? finalRules.map(function (rule, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "pisell-wallet-pass-gallery_usage-rules-item"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-wallet-pass-gallery_usage-rules-item-content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "pisell-wallet-pass-gallery_usage-rules-item-main-line"
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: "pisell-wallet-pass-gallery_usage-rules-item-label"
+    }, getRuleLabel(rule.type)), /*#__PURE__*/React.createElement(Text, {
+      className: "pisell-wallet-pass-gallery_usage-rules-item-description"
+    }, rule.description)), rule.resetTime && /*#__PURE__*/React.createElement(Text, {
+      className: "pisell-wallet-pass-gallery_usage-rules-item-reset"
+    }, rule.resetTime)));
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-pass-gallery_usage-rules-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-pass-gallery_usage-rules-item-content"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "pisell-wallet-pass-gallery_usage-rules-item-description"
+  }, getText('wallet-pass-gallery.monthlyLimitUnlimited', '无限制')))))), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-pass-gallery_usage-rules-section"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "pisell-wallet-pass-gallery_usage-rules-section-title"
+  }, getText('wallet-pass-gallery.totalQuantityControl', '总量控制')), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-pass-gallery_usage-rules-item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-pass-gallery_usage-rules-item-content"
+  }, personalLimit && personalLimit.total > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+    className: "pisell-wallet-pass-gallery_usage-rules-item-label"
+  }, getText('wallet-pass-gallery.personalLimit', '个人限额:')), /*#__PURE__*/React.createElement(Text, {
+    className: "pisell-wallet-pass-gallery_usage-rules-item-description"
+  }, interpolateText(getText('wallet-pass-gallery.personalLimitDesc', '您最多可使用此券{total}次(剩余{remaining}次)'), {
+    total: personalLimit.total,
+    remaining: personalLimit.remaining
+  })), /*#__PURE__*/React.createElement(Text, {
+    className: "pisell-wallet-pass-gallery_usage-rules-item-note"
+  }, getText('wallet-pass-gallery.voucherExpireNote', '用完后此券将自动失效'))) : /*#__PURE__*/React.createElement(Text, {
+    className: "pisell-wallet-pass-gallery_usage-rules-item-description"
+  }, getText('wallet-pass-gallery.monthlyLimitUnlimited', '无限制'))))));
+}
+export default UsageRules;

package/es/plus/walletPassGallery/components/usageRule/index.less

@@ -0,0 +1,157 @@
+.pisell-wallet-pass-gallery_usage-rules {
+  padding: 16px;
+  background: #ffffff;
+  border-radius: 8px;
+  border: 1px solid #f0f0f0;
+  margin-top: 16px;
+  margin-bottom: 20px;
+
+  // 确保所有Text组件都是块级元素
+  .ant-typography {
+    display: block !important;
+    width: 100% !important;
+    margin-bottom: 0 !important;
+  }
+
+  &-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #000000;
+    line-height: 24px;
+    margin-bottom: 8px;
+    display: block;
+    width: 100%;
+  }
+
+  &-subtitle {
+    font-size: 14px;
+    color: #6B7280;
+    line-height: 20px;
+    margin-bottom: 24px;
+    display: block;
+    width: 100%;
+  }
+
+  &-section {
+    margin-bottom: 24px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &-title {
+      font-size: 16px;
+      font-weight: 500;
+      color: #6B7280;
+      line-height: 20px;
+      margin-bottom: 16px;
+      display: block;
+      width: 100%;
+    }
+  }
+
+  &-list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  &-item {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+
+    &::before {
+      content: '•';
+      color: #697281;
+      font-size: 16px;
+      line-height: 20px;
+      font-weight: bold;
+      margin-right: 8px;
+      flex-shrink: 0;
+      margin-top: 0;
+    }
+
+    &-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &-main-line {
+      margin-bottom: 4px;
+    }
+
+    &-label {
+      font-size: 14px;
+      font-weight: 600;
+      color: #000000;
+      line-height: 20px;
+      display: inline;
+      margin-right: 4px;
+    }
+
+    &-description {
+      font-size: 14px;
+      color: #000000;
+      line-height: 20px;
+      display: inline;
+      word-wrap: break-word;
+    }
+
+    &-reset {
+      font-size: 14px;
+      color: #000000;
+      line-height: 20px;
+      display: block;
+      width: 100%;
+    }
+
+    &-note {
+      font-size: 14px;
+      color: #000000;
+      line-height: 20px;
+      margin-top: 4px;
+      display: block;
+      width: 100%;
+    }
+  }
+
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .pisell-wallet-pass-gallery_usage-rules {
+    padding: 12px;
+    margin-top: 12px;
+
+    &-title {
+      font-size: 16px;
+    }
+
+    &-subtitle {
+      font-size: 13px;
+    }
+
+    &-section {
+      margin-bottom: 20px;
+
+      &-title {
+        font-size: 15px;
+      }
+    }
+
+    &-item {
+      &::before {
+        font-size: 14px;
+        margin-right: 6px;
+      }
+
+      &-label,
+      &-description,
+      &-reset,
+      &-note {
+        font-size: 13px;
+      }
+    }
+  }
+}

package/es/plus/walletPassGallery/index.d.ts

@@ -0,0 +1,6 @@
+import './index.less';
+export interface WalletPassGalleryProps {
+    [key: string]: any;
+}
+declare const WalletPassGallery: (props: WalletPassGalleryProps) => JSX.Element;
+export default WalletPassGallery;