@pisell/private-materials 6.3.115 → 6.3.117

package/es/components/pay/toC/PaymentMethods/MWCreditCard/TDSPay/index.js

@@ -8,10 +8,11 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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, { useState, useImperativeHandle, forwardRef, useContext } from 'react';
+import React, { useState, useRef, useEffect, useImperativeHandle, forwardRef, useContext } from 'react';
+import { Button } from 'antd';
 import { PisellModal } from '@pisell/materials';
 import ThreedsLoading from "./ThreedsLoading";
-import { startPayment } from "../tds2";
+import { startPayment, cancelCurrentPayment } from "../tds2";
 import { fastPayNew } from "../List/serve";
 import { Context } from "../../../model";
 import { getPayGroupParamsFromStorage, setPayNumber } from "../../../payGroup";
@@ -30,62 +31,138 @@ import { locales } from '@pisell/utils';
  * @Date: 2024-08-16 11:15
  */
 var TDSPay = function TDSPay(props, ref) {
-  var onChange = props.onChange;
+  var onChange = props.onChange,
+    closeAll = props.closeAll;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
+  // 关闭确认弹窗可见性
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showCloseConfirm = _useState4[0],
+    setShowCloseConfirm = _useState4[1];
+  /**
+   * 递增会话 ID：每次 init 递增，旧流程通过比对 ID 判断自身是否已被取代。
+   * 解决了旧 cancelledRef 的缺陷——旧方案用单一 boolean，新 init 的 reset 会误将
+   * 上一次仍在运行的 startPayment 重新"激活"。
+   */
+  var sessionIdRef = useRef(0);
+  // 支付流程进行中标记，阻止并发 init 调用
+  var payingRef = useRef(false);
   var _useContext = useContext(Context),
     state = _useContext.state;
 
+  /** 组件卸载时：递增 sessionId 使旧流程的 isCancelled 失效 + 清理残留的 message 监听器 */
+  useEffect(function () {
+    return function () {
+      sessionIdRef.current += 1;
+      cancelCurrentPayment();
+    };
+  }, []);
+
   /**
-   * @title: 初始化
-   * @description:
-   * @param {any} res
-   * @param {any} order
-   * @return {*}
-   * @Author: zhiwei.Wang
-   * @Date: 2024-08-16 11:15
+   * @title: 创建绑定当前会话的回调
+   * @description: 回调内部比对 sessionId，若已被新会话取代则忽略调用。
+   *              hideModal 为中间态回调（不释放锁）；其他 key 为终态（释放锁 + 通知外部）。
+   */
+  var createSessionCallback = function createSessionCallback(session) {
+    return function (res) {
+      if (sessionIdRef.current !== session) return;
+      setOpen(false);
+      setShowCloseConfirm(false);
+      payingRef.current = false;
+      if (res.key === 'hideModal') return;
+      onChange === null || onChange === void 0 || onChange(res);
+    };
+  };
+
+  /**
+   * @title: 初始化 3DS 支付流程
+   * @description: 若已有流程在执行中则忽略本次调用。
+   *              通过递增 sessionId 自动废弃前一次残留的异步流程。
    */
   var init = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(res, order) {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(res, order, preCheckData) {
+      var session, isCancelled, callback;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
+            if (!payingRef.current) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            payingRef.current = true;
+            sessionIdRef.current += 1;
+            cancelCurrentPayment();
+            session = sessionIdRef.current;
             setOpen(true);
-
+            isCancelled = function isCancelled() {
+              return sessionIdRef.current !== session;
+            };
+            callback = createSessionCallback(session); // 如果有预检查数据，直接走 startPayment（跳过 checkEnrollment）
+            if (!preCheckData) {
+              _context.next = 12;
+              break;
+            }
+            startPayment({
+              payData: preCheckData
+            }, {
+              callback: callback,
+              isCancelled: isCancelled
+            });
+            return _context.abrupt("return");
+          case 12:
             // 已保存的卡
             if (res.id) {
-              _fastPayNew(res);
+              _fastPayNew(res, callback, isCancelled);
             } else {
               // 新卡
-              newCardPay(res);
+              newCardPay(res, callback, isCancelled);
             }
-          case 2:
+          case 13:
           case "end":
             return _context.stop();
         }
       }, _callee);
     }));
-    return function init(_x, _x2) {
+    return function init(_x, _x2, _x3) {
       return _ref.apply(this, arguments);
     };
   }();
 
   /**
-   * @title: 支付结果回调
-   * @description:
-   * @param {any} res
-   * @return {*}
-   * @Author: zhiwei.Wang
-   * @Date: 2024-08-16 11:15
+   * @title: 等待页关闭按钮点击
+   * @description: 点击 PisellModal 关闭按钮时，弹出确认弹窗而非直接关闭
    */
-  var payCallback = function payCallback(res) {
+  var handleCloseClick = function handleCloseClick() {
+    setShowCloseConfirm(true);
+  };
+
+  /**
+   * @title: 确认弹窗 - 继续等待
+   * @description: 关闭确认弹窗，继续等待支付结果
+   */
+  var handleContinueWaiting = function handleContinueWaiting() {
+    setShowCloseConfirm(false);
+  };
+
+  /**
+   * @title: 确认弹窗 - 查看订单
+   * @description: 递增 sessionId 使旧流程的 isCancelled 返回 true，释放锁并关闭弹窗
+   */
+  var handleViewOrder = function handleViewOrder() {
+    sessionIdRef.current += 1;
+    cancelCurrentPayment();
+    payingRef.current = false;
+    setShowCloseConfirm(false);
     setOpen(false);
-    if (res.key === 'hideModal') {
-      return;
-    }
-    onChange === null || onChange === void 0 || onChange(res);
+    closeAll === null || closeAll === void 0 || closeAll();
+    onChange === null || onChange === void 0 || onChange({
+      key: 'cancel'
+    });
   };
 
   /**
@@ -97,13 +174,12 @@ var TDSPay = function TDSPay(props, ref) {
    * @Date: 2024-08-16 11:15
    */
   var _fastPayNew = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(res) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(res, callback, isCancelled) {
       var _state$payGroup, _state$payGroup2, _state$payGroup3, params, _yield$fastPayNew, data;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             _context2.prev = 0;
-            // 获取交易组
             params = getPayGroupParamsFromStorage((_state$payGroup = state.payGroup) === null || _state$payGroup === void 0 ? void 0 : _state$payGroup.order_id, {
               card_id: res.id
             });
@@ -111,7 +187,7 @@ var TDSPay = function TDSPay(props, ref) {
               _context2.next = 5;
               break;
             }
-            payCallback === null || payCallback === void 0 || payCallback({
+            callback({
               key: 'fail',
               data: {
                 res: res,
@@ -129,30 +205,33 @@ var TDSPay = function TDSPay(props, ref) {
           case 7:
             _yield$fastPayNew = _context2.sent;
             data = _yield$fastPayNew.data;
-            // 设置交易号
+            if (!isCancelled()) {
+              _context2.next = 11;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 11:
             setPayNumber((_state$payGroup3 = state.payGroup) === null || _state$payGroup3 === void 0 ? void 0 : _state$payGroup3.order_id, data === null || data === void 0 ? void 0 : data.pay_number);
-
-            // token 直接跳转成功页面
             if ((data === null || data === void 0 ? void 0 : data.type) === 'token') {
-              payCallback === null || payCallback === void 0 || payCallback({
+              callback({
                 key: 'success',
                 data: data
               });
             }
-
-            // 3DS 跳转3DS验证页面
             if ((data === null || data === void 0 ? void 0 : data.type) === '3ds') {
               startPayment({
                 payData: data
-              }, payCallback);
+              }, {
+                callback: callback,
+                isCancelled: isCancelled
+              });
             }
-            _context2.next = 17;
+            _context2.next = 19;
             break;
-          case 14:
-            _context2.prev = 14;
+          case 16:
+            _context2.prev = 16;
             _context2.t0 = _context2["catch"](0);
-            // 失败
-            payCallback === null || payCallback === void 0 || payCallback({
+            callback({
               key: 'fail',
               data: {
                 res: res,
@@ -160,13 +239,13 @@ var TDSPay = function TDSPay(props, ref) {
                 message: locales.getText('tocPay.text.getParamsFail')
               }
             });
-          case 17:
+          case 19:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[0, 14]]);
+      }, _callee2, null, [[0, 16]]);
     }));
-    return function _fastPayNew(_x3) {
+    return function _fastPayNew(_x4, _x5, _x6) {
       return _ref2.apply(this, arguments);
     };
   }();
@@ -179,7 +258,7 @@ var TDSPay = function TDSPay(props, ref) {
    * @Author: zhiwei.Wang
    * @Date: 2024-08-16 11:16
    */
-  var newCardPay = function newCardPay(res) {
+  var newCardPay = function newCardPay(res, callback, isCancelled) {
     var _state$payGroup4, _state$payGroup5;
     var _cardInfo = {
       card_name: res.card_name,
@@ -189,11 +268,9 @@ var TDSPay = function TDSPay(props, ref) {
       card_ccv: res.card_ccv,
       is_save: res.is_save ? 1 : 0
     };
-
-    // 补全交易组信息
     _cardInfo = getPayGroupParamsFromStorage((_state$payGroup4 = state.payGroup) === null || _state$payGroup4 === void 0 ? void 0 : _state$payGroup4.order_id, _cardInfo);
     if (!_cardInfo) {
-      payCallback === null || payCallback === void 0 || payCallback({
+      callback({
         key: 'fail',
         data: {
           _cardInfo: _cardInfo,
@@ -203,31 +280,65 @@ var TDSPay = function TDSPay(props, ref) {
       });
       return;
     }
-
-    // 3ds支付
     startPayment({
       orderId: (_state$payGroup5 = state.payGroup) === null || _state$payGroup5 === void 0 ? void 0 : _state$payGroup5.order_id,
       cardInfo: _cardInfo
-    }, payCallback);
+    }, {
+      callback: callback,
+      isCancelled: isCancelled
+    });
   };
   useImperativeHandle(ref, function () {
     return {
       init: init
     };
   });
-  return /*#__PURE__*/React.createElement(PisellModal, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PisellModal, {
     platform: 'h5',
     open: open,
     footer: false,
     header: false,
-    closable: false,
+    closable: true,
+    onCancel: handleCloseClick,
     bodyStyle: {
       padding: 0
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: ""
-  }, /*#__PURE__*/React.createElement(ThreedsLoading, null), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(ThreedsLoading, {
+    title: locales.getText('tocPay.text.processingPayment'),
+    subtitle: locales.getText('tocPay.text.securityCheckRequired'),
+    description: locales.getText('tocPay.text.doNotClosePage')
+  }), /*#__PURE__*/React.createElement("div", {
     id: "threeds-container"
-  })));
+  }))), /*#__PURE__*/React.createElement(PisellModal, {
+    open: showCloseConfirm,
+    closable: false,
+    footer: null,
+    header: false,
+    mobileModalHeight: "auto",
+    headerDivider: false,
+    footerDivider: false,
+    bodyStyle: {
+      padding: 24
+    },
+    transitionName: "pisell-move-down"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tds-close-confirm-modal"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tds-close-confirm-title"
+  }, locales.getText('tocPay.text.stopWaitingTitle')), /*#__PURE__*/React.createElement("div", {
+    className: "tds-close-confirm-desc"
+  }, locales.getText('tocPay.text.stopWaitingDesc')), /*#__PURE__*/React.createElement("div", {
+    className: "tds-close-confirm-actions"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    block: true,
+    className: "tds-close-confirm-btn-primary",
+    onClick: handleContinueWaiting
+  }, locales.getText('tocPay.text.continueWaiting')), /*#__PURE__*/React.createElement("div", {
+    className: "tds-close-confirm-link",
+    onClick: handleViewOrder
+  }, locales.getText('tocPay.text.viewOrder'))))));
 };
 export default /*#__PURE__*/forwardRef(TDSPay);

package/es/components/pay/toC/PaymentMethods/MWCreditCard/TDSPay/index.less

@@ -0,0 +1,47 @@
+/** 关闭确认弹窗样式 */
+.tds-close-confirm-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.tds-close-confirm-title {
+  color: var(--Gray-900, #101828);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+  margin-bottom: 8px;
+}
+
+.tds-close-confirm-desc {
+  color: var(--Gray-600, #475467);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 24px;
+  white-space: pre-line;
+}
+
+.tds-close-confirm-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.tds-close-confirm-btn-primary {
+  height: 44px;
+  font-size: 16px;
+  font-weight: 500;
+  border-radius: 8px;
+}
+
+.tds-close-confirm-link {
+  color: var(--Gray-500, #667085);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  cursor: pointer;
+  text-decoration: underline;
+  padding: 4px 0;
+}

package/es/components/pay/toC/PaymentMethods/MWCreditCard/components/TDSErrorModal/index.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import './index.less';
+/** 弹窗场景类型 */
+export declare type TDSErrorModalType = 'tds-not-supported' | 'bank-verify-failed';
+export interface TDSErrorModalProps {
+    /** 弹窗是否可见 */
+    open: boolean;
+    /**
+     * 弹窗场景类型，决定标题与描述文案
+     * - 'tds-not-supported'：卡不支持 3DS 验证（默认）
+     * - 'bank-verify-failed'：银行安全验证失败（700500）
+     */
+    type?: TDSErrorModalType;
+    /** 商家联系电话 */
+    shopPhone?: string;
+    /** 商家联系邮箱 */
+    shopEmail?: string;
+    /** 更换卡片（留在卡列表页面） */
+    onUseAnotherCard?: () => void;
+    /** 使用其他支付方式（返回支付方式列表） */
+    onUseAnotherPayment?: () => void;
+    /** 稍后支付（跳转订单详情页） */
+    onPayLater?: () => void;
+}
+/**
+ * @title: 支付错误弹窗（通用）
+ * @description: 根据 type 展示不同文案，按钮行为一致：
+ *              更换卡片 / 使用其他支付方式 / 稍后支付。
+ *              支持两种场景：
+ *              1. tds-not-supported —— 预检查发现卡不支持 3DS 验证
+ *              2. bank-verify-failed —— 3DS 流程中银行安全验证失败（700500）
+ */
+declare const TDSErrorModal: React.FC<TDSErrorModalProps>;
+export default TDSErrorModal;

package/es/components/pay/toC/PaymentMethods/MWCreditCard/components/TDSErrorModal/index.js

@@ -0,0 +1,83 @@
+import React, { useMemo } from 'react';
+import { Button } from 'antd';
+import { PisellModal } from '@pisell/materials';
+import { locales } from '@pisell/utils';
+import "./index.less";
+
+/** 弹窗场景类型 */
+
+/** 不同场景对应的 i18n key 映射 */
+var TEXT_KEY_MAP = {
+  /** 预检查：卡不支持 3DS 验证 */
+  'tds-not-supported': {
+    title: 'tocPay.text.tdsErrorTitle',
+    desc: 'tocPay.text.tdsErrorDesc'
+  },
+  /** 支付中：银行安全验证失败（700500） */
+  'bank-verify-failed': {
+    title: 'tocPay.text.bankVerifyFailedTitle',
+    desc: 'tocPay.text.bankVerifyFailedDesc'
+  }
+};
+/**
+ * @title: 支付错误弹窗（通用）
+ * @description: 根据 type 展示不同文案，按钮行为一致：
+ *              更换卡片 / 使用其他支付方式 / 稍后支付。
+ *              支持两种场景：
+ *              1. tds-not-supported —— 预检查发现卡不支持 3DS 验证
+ *              2. bank-verify-failed —— 3DS 流程中银行安全验证失败（700500）
+ */
+var TDSErrorModal = function TDSErrorModal(_ref) {
+  var open = _ref.open,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'tds-not-supported' : _ref$type,
+    shopPhone = _ref.shopPhone,
+    shopEmail = _ref.shopEmail,
+    onUseAnotherCard = _ref.onUseAnotherCard,
+    onUseAnotherPayment = _ref.onUseAnotherPayment,
+    onPayLater = _ref.onPayLater;
+  /** 是否展示底部联系方式（电话或邮箱至少有一个） */
+  var showContact = !!(shopPhone || shopEmail);
+
+  /** 根据 type 获取对应的 i18n key */
+  var textKeys = useMemo(function () {
+    return TEXT_KEY_MAP[type];
+  }, [type]);
+  return /*#__PURE__*/React.createElement(PisellModal, {
+    open: open,
+    closable: false,
+    footer: null,
+    header: false,
+    mobileModalHeight: "auto",
+    headerDivider: false,
+    footerDivider: false,
+    bodyStyle: {
+      padding: 24
+    },
+    transitionName: "pisell-move-down"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tds-error-modal"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tds-error-modal-title"
+  }, locales.getText(textKeys.title)), /*#__PURE__*/React.createElement("div", {
+    className: "tds-error-modal-desc"
+  }, locales.getText(textKeys.desc)), /*#__PURE__*/React.createElement("div", {
+    className: "tds-error-modal-actions"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    block: true,
+    className: "tds-error-modal-btn-primary",
+    onClick: onUseAnotherCard
+  }, locales.getText('tocPay.text.useAnotherCard')), /*#__PURE__*/React.createElement(Button, {
+    block: true,
+    className: "tds-error-modal-btn-secondary",
+    onClick: onUseAnotherPayment
+  }, locales.getText('tocPay.text.useAnotherPayment')), /*#__PURE__*/React.createElement(Button, {
+    block: true,
+    className: "tds-error-modal-btn-secondary",
+    onClick: onPayLater
+  }, locales.getText('tocPay.text.payLater'))), showContact && /*#__PURE__*/React.createElement("div", {
+    className: "tds-error-modal-contact"
+  }, locales.getText('tocPay.text.paymentTroubleContact')(shopPhone || '', shopEmail || ''))));
+};
+export default TDSErrorModal;

package/es/components/pay/toC/PaymentMethods/MWCreditCard/components/TDSErrorModal/index.less

@@ -0,0 +1,52 @@
+.tds-error-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.tds-error-modal-title {
+  color: var(--Gray-900, #101828);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+  margin-bottom: 8px;
+}
+
+.tds-error-modal-desc {
+  color: var(--Gray-600, #475467);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  margin-bottom: 24px;
+  white-space: pre-line;
+}
+
+.tds-error-modal-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.tds-error-modal-btn-primary {
+  font-size: 16px;
+  font-weight: 500;
+  border-radius: 8px;
+}
+
+.tds-error-modal-btn-secondary {
+  font-size: 16px;
+  font-weight: 500;
+  border-radius: 8px;
+}
+
+.tds-error-modal-contact {
+  color: var(--Gray-500, #667085);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  text-align: center;
+  padding-top: 8px;
+  border-top: 1px solid var(--Gray-200, #eaecf0);
+  word-break: break-word;
+}

package/es/components/pay/toC/PaymentMethods/MWCreditCard/index.d.ts

@@ -1,7 +1,15 @@
 import React from 'react';
 import './index.less';
+interface MWCreditCardProps {
+    /** 店铺名称，用于授权说明文案 */
+    shopName?: string;
+    /** 商家联系电话（用于 3DS 错误弹窗联系方式） */
+    shopPhone?: string;
+    /** 商家联系邮箱（用于 3DS 错误弹窗联系方式） */
+    shopEmail?: string;
+}
 export interface MWCreditCardRef {
     init: (res: any) => void;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+declare const _default: React.ForwardRefExoticComponent<MWCreditCardProps & React.RefAttributes<unknown>>;
 export default _default;