@pisell/private-materials 6.3.109 → 6.3.111

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

@@ -11,17 +11,24 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useState, useEffect, useContext, useRef, useImperativeHandle, forwardRef } from 'react';
 import MWCreditCardList from "./List";
 import AddMWCreditCard from "./Add";
+import { fastPayNew } from "./List/serve";
 import TDSPay from "./TDSPay";
 import { Context } from "../../model";
+import { preCheckEnrollment } from "./tds2";
+import { getPayGroupParamsFromStorage, setPayNumber } from "../../payGroup";
+import { locales } from '@pisell/utils';
+import { PisellToast } from '@pisell/materials';
+import TDSErrorModal from "./components/TDSErrorModal";
 import "./index.less";
+import useEngineContext from "../../../../../hooks/useEngineContext";
 /**
  * @title: 信用卡支付
- * @description:
- * @param {any} props
+ * @description: 整合信用卡列表、添加卡、3DS 验证，
+ *              在 onChange/onAdd 时前置执行 3DS 预检查，
+ *              失败时弹出 TDSErrorModal 阻断支付。
+ * @param {MWCreditCardProps} props
  * @param {any} ref
  * @return {*}
- * @Author: zhiwei.Wang
- * @Date: 2024-08-16 11:02
  */
 var MWCreditCard = function MWCreditCard(props, ref) {
   // 信用卡列表
@@ -30,21 +37,35 @@ var MWCreditCard = function MWCreditCard(props, ref) {
   var AddMWCreditCardRef = useRef();
   // 3ds验证
   var TDSPayRef = useRef();
+  var context = useEngineContext();
+  var utils = context.appHelper.utils || {};
+
   // 订单信息
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     order = _useState2[0],
     setOrder = _useState2[1];
+  // 3DS 错误弹窗可见性（预检查：卡不支持 3DS）
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tdsErrorVisible = _useState4[0],
+    setTdsErrorVisible = _useState4[1];
+  // 银行验证失败弹窗可见性（700500：银行安全验证未通过）
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    bankVerifyFailVisible = _useState6[0],
+    setBankVerifyFailVisible = _useState6[1];
+  // 预检查 loading
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    loading = _useState8[0],
+    setLoading = _useState8[1];
   var _useContext = useContext(Context),
     state = _useContext.state;
 
   /**
    * @title: 初始化
-   * @description:
-   * @param {any} res
-   * @return {*}
-   * @Author: zhiwei.Wang
-   * @Date: 2024-08-16 11:02
+   * @description: 展示信用卡列表
    */
   var init = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(res) {
@@ -67,25 +88,101 @@ var MWCreditCard = function MWCreditCard(props, ref) {
   }();
 
   /**
-   * @title: 3ds验证
-   * @description:
-   * @param {any} card
-   * @return {*}
-   * @Author: zhiwei.Wang
-   * @Date: 2024-08-16 11:02
+   * @title: 关闭所有弹窗
+   * @description: 关闭 List + Add 弹窗（供"使用其他支付方式"按钮调用）
+   */
+  var closeAll = function closeAll() {
+    var _MWCreditCardListRef$2, _AddMWCreditCardRef$c;
+    (_MWCreditCardListRef$2 = MWCreditCardListRef.current) === null || _MWCreditCardListRef$2 === void 0 || _MWCreditCardListRef$2.close();
+    (_AddMWCreditCardRef$c = AddMWCreditCardRef.current) === null || _AddMWCreditCardRef$c === void 0 || _AddMWCreditCardRef$c.close();
+  };
+
+  /**
+   * @title: 已保存卡的 3DS 验证（含预检查）
+   * @description: 选择已保存卡时，先调用 fastPayNew API，
+   *              若返回 type=3ds 则执行 preCheckEnrollment 前置检查，
+   *              失败时弹出 TDSErrorModal；成功时传入 TDSPay.init。
+   * @param {any} card 已保存的卡信息
    */
   var fastPay = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(card) {
-      var _TDSPayRef$current;
+      var _utils$Toast, _utils$Toast$loading, _state$payGroup, _state$payGroup2, _state$payGroup3, params, _state$payCallback, _yield$fastPayNew, data, _TDSPayRef$current, _TDSPayRef$current2, _utils$Toast2, _utils$Toast2$hide;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            (_TDSPayRef$current = TDSPayRef.current) === null || _TDSPayRef$current === void 0 || _TDSPayRef$current.init(card, order);
-          case 1:
+            _context2.prev = 0;
+            setLoading(true);
+            utils === null || utils === void 0 || (_utils$Toast = utils.Toast) === null || _utils$Toast === void 0 || (_utils$Toast$loading = _utils$Toast.loading) === null || _utils$Toast$loading === void 0 || _utils$Toast$loading.call(_utils$Toast, locales.getText('tocPay.text.checkingCard'), 0, undefined, true);
+
+            // 获取交易组
+            params = getPayGroupParamsFromStorage((_state$payGroup = state.payGroup) === null || _state$payGroup === void 0 ? void 0 : _state$payGroup.order_id, {
+              card_id: card.id
+            });
+            if (params) {
+              _context2.next = 7;
+              break;
+            }
+            (_state$payCallback = state.payCallback) === null || _state$payCallback === void 0 || _state$payCallback.call(state, {
+              key: 'fail',
+              data: {
+                res: card,
+                fn: 'MWCreditCard.fastPay.noParams',
+                message: locales.getText('tocPay.text.getParamsFail')
+              }
+            });
+            return _context2.abrupt("return");
+          case 7:
+            _context2.next = 9;
+            return fastPayNew({
+              order_id: (_state$payGroup2 = state.payGroup) === null || _state$payGroup2 === void 0 ? void 0 : _state$payGroup2.order_id,
+              params: params
+            });
+          case 9:
+            _yield$fastPayNew = _context2.sent;
+            data = _yield$fastPayNew.data;
+            // 设置交易号
+            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 类型直接走 TDSPay（不需要 3DS 验证）
+            if (!((data === null || data === void 0 ? void 0 : data.type) === 'token')) {
+              _context2.next = 15;
+              break;
+            }
+            (_TDSPayRef$current = TDSPayRef.current) === null || _TDSPayRef$current === void 0 || _TDSPayRef$current.init(card, order, data);
+            return _context2.abrupt("return");
+          case 15:
+            if (!((data === null || data === void 0 ? void 0 : data.type) === '3ds')) {
+              _context2.next = 18;
+              break;
+            }
+            // 数据已经包含 pay_info，说明 fastPayNew 返回的就是 checkEnrollment 的结果
+            // 直接传给 TDSPay（跳过内部 checkEnrollment）
+            (_TDSPayRef$current2 = TDSPayRef.current) === null || _TDSPayRef$current2 === void 0 || _TDSPayRef$current2.init(card, order, data);
+            return _context2.abrupt("return");
+          case 18:
+            _context2.next = 23;
+            break;
+          case 20:
+            _context2.prev = 20;
+            _context2.t0 = _context2["catch"](0);
+            if ((_context2.t0 === null || _context2.t0 === void 0 ? void 0 : _context2.t0.code) === 700500) {
+              setTdsErrorVisible(true);
+            } else {
+              PisellToast({
+                content: (_context2.t0 === null || _context2.t0 === void 0 ? void 0 : _context2.t0.message) || '',
+                duration: 2
+              });
+            }
+          case 23:
+            _context2.prev = 23;
+            setLoading(false);
+            utils === null || utils === void 0 || (_utils$Toast2 = utils.Toast) === null || _utils$Toast2 === void 0 || (_utils$Toast2$hide = _utils$Toast2.hide) === null || _utils$Toast2$hide === void 0 || _utils$Toast2$hide.call(_utils$Toast2);
+            return _context2.finish(23);
+          case 27:
           case "end":
             return _context2.stop();
         }
-      }, _callee2);
+      }, _callee2, null, [[0, 20, 23, 27]]);
     }));
     return function fastPay(_x2) {
       return _ref2.apply(this, arguments);
@@ -93,16 +190,126 @@ var MWCreditCard = function MWCreditCard(props, ref) {
   }();
 
   /**
-   * @title: 添加卡并3ds验证
-   * @description:
-   * @param {any} res
-   * @return {*}
-   * @Author: zhiwei.Wang
-   * @Date: 2024-08-16 11:02
+   * @title: 新卡支付（含 3DS 预检查）
+   * @description: 添加新卡时，先构建 cardInfo 并执行 preCheckEnrollment，
+   *              失败时弹出 TDSErrorModal；成功时传入 TDSPay.init。
+   * @param {any} res 新卡表单数据
+   */
+  var onCreate = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(res) {
+      var _utils$Toast3, _utils$Toast3$loading, _state$payGroup4, _state$payGroup5, _TDSPayRef$current3, _cardInfo, _state$payCallback2, preCheckData, _utils$Toast4, _utils$Toast4$hide;
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.prev = 0;
+            setLoading(true);
+            utils === null || utils === void 0 || (_utils$Toast3 = utils.Toast) === null || _utils$Toast3 === void 0 || (_utils$Toast3$loading = _utils$Toast3.loading) === null || _utils$Toast3$loading === void 0 || _utils$Toast3$loading.call(_utils$Toast3, locales.getText('tocPay.text.checkingCard'), 0, undefined, true);
+
+            // 构建卡信息
+            _cardInfo = {
+              card_name: res.card_name,
+              card_number: res.card_number,
+              card_expiry_month: res.date.format('MM'),
+              card_expiry_year: res.date.format('YY'),
+              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) {
+              _context3.next = 8;
+              break;
+            }
+            (_state$payCallback2 = state.payCallback) === null || _state$payCallback2 === void 0 || _state$payCallback2.call(state, {
+              key: 'fail',
+              data: {
+                _cardInfo: _cardInfo,
+                message: locales.getText('tocPay.text.getParamsFail'),
+                fn: 'MWCreditCard.onCreate.noCardInfo'
+              }
+            });
+            return _context3.abrupt("return");
+          case 8:
+            _context3.next = 10;
+            return preCheckEnrollment((_state$payGroup5 = state.payGroup) === null || _state$payGroup5 === void 0 ? void 0 : _state$payGroup5.order_id, _cardInfo);
+          case 10:
+            preCheckData = _context3.sent;
+            // 预检查通过，传入 TDSPay（跳过内部 checkEnrollment）
+            (_TDSPayRef$current3 = TDSPayRef.current) === null || _TDSPayRef$current3 === void 0 || _TDSPayRef$current3.init(res, order, preCheckData);
+            _context3.next = 17;
+            break;
+          case 14:
+            _context3.prev = 14;
+            _context3.t0 = _context3["catch"](0);
+            if ((_context3.t0 === null || _context3.t0 === void 0 ? void 0 : _context3.t0.code) === 700500) {
+              setTdsErrorVisible(true);
+            } else {
+              PisellToast({
+                content: (_context3.t0 === null || _context3.t0 === void 0 ? void 0 : _context3.t0.message) || '',
+                duration: 2
+              });
+            }
+          case 17:
+            _context3.prev = 17;
+            setLoading(false);
+            utils === null || utils === void 0 || (_utils$Toast4 = utils.Toast) === null || _utils$Toast4 === void 0 || (_utils$Toast4$hide = _utils$Toast4.hide) === null || _utils$Toast4$hide === void 0 || _utils$Toast4$hide.call(_utils$Toast4);
+            return _context3.finish(17);
+          case 21:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3, null, [[0, 14, 17, 21]]);
+    }));
+    return function onCreate(_x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  /**
+   * @title: TDSPay 支付回调包装
+   * @description: 拦截 bankVerifyFailed 信号弹出银行验证失败弹窗，
+   *              其余 key 正常透传给全局 payCallback。
+   * @param {any} res TDSPay 回调结果
+   */
+  var handleTDSPayChange = function handleTDSPayChange(res) {
+    var _state$payCallback3;
+    if ((res === null || res === void 0 ? void 0 : res.key) === 'bankVerifyFailed') {
+      setBankVerifyFailVisible(true);
+      return;
+    }
+    (_state$payCallback3 = state.payCallback) === null || _state$payCallback3 === void 0 || _state$payCallback3.call(state, res);
+  };
+
+  /**
+   * @title: TDS 错误弹窗 - 更换卡片
+   * @description: 关闭错误弹窗，留在选择卡片页面
+   */
+  var handleUseAnotherCard = function handleUseAnotherCard() {
+    setTdsErrorVisible(false);
+    setBankVerifyFailVisible(false);
+  };
+
+  /**
+   * @title: TDS 错误弹窗 - 使用其他支付方式
+   * @description: 关闭所有弹窗，返回支付方式列表
+   */
+  var handleUseAnotherPayment = function handleUseAnotherPayment() {
+    setTdsErrorVisible(false);
+    setBankVerifyFailVisible(false);
+    closeAll();
+  };
+
+  /**
+   * @title: TDS 错误弹窗 - 稍后支付
+   * @description: 关闭弹窗，触发 payCallback cancel 跳转至订单详情页
    */
-  var onCreate = function onCreate(res) {
-    var _TDSPayRef$current2;
-    (_TDSPayRef$current2 = TDSPayRef.current) === null || _TDSPayRef$current2 === void 0 || _TDSPayRef$current2.init(res, order);
+  var handlePayLater = function handlePayLater() {
+    var _state$payCallback4;
+    setTdsErrorVisible(false);
+    setBankVerifyFailVisible(false);
+    closeAll();
+    (_state$payCallback4 = state.payCallback) === null || _state$payCallback4 === void 0 || _state$payCallback4.call(state, {
+      key: 'cancel'
+    });
   };
   useImperativeHandle(ref, function () {
     return {
@@ -115,16 +322,36 @@ var MWCreditCard = function MWCreditCard(props, ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MWCreditCardList, {
     ref: MWCreditCardListRef,
     onAdd: function onAdd() {
-      var _AddMWCreditCardRef$c;
-      (_AddMWCreditCardRef$c = AddMWCreditCardRef.current) === null || _AddMWCreditCardRef$c === void 0 || _AddMWCreditCardRef$c.init();
+      var _AddMWCreditCardRef$c2;
+      (_AddMWCreditCardRef$c2 = AddMWCreditCardRef.current) === null || _AddMWCreditCardRef$c2 === void 0 || _AddMWCreditCardRef$c2.init();
     },
-    onChange: fastPay
+    onChange: fastPay,
+    btnLoading: loading
   }), /*#__PURE__*/React.createElement(AddMWCreditCard, {
     ref: AddMWCreditCardRef,
-    onCreate: onCreate
+    onCreate: onCreate,
+    shopName: props.shopName,
+    btnLoading: loading
   }), /*#__PURE__*/React.createElement(TDSPay, {
     ref: TDSPayRef,
-    onChange: state.payCallback
+    onChange: handleTDSPayChange,
+    closeAll: closeAll
+  }), /*#__PURE__*/React.createElement(TDSErrorModal, {
+    open: tdsErrorVisible,
+    type: "tds-not-supported",
+    shopPhone: props.shopPhone,
+    shopEmail: props.shopEmail,
+    onUseAnotherCard: handleUseAnotherCard,
+    onUseAnotherPayment: handleUseAnotherPayment,
+    onPayLater: handlePayLater
+  }), /*#__PURE__*/React.createElement(TDSErrorModal, {
+    open: bankVerifyFailVisible,
+    type: "bank-verify-failed",
+    shopPhone: props.shopPhone,
+    shopEmail: props.shopEmail,
+    onUseAnotherCard: handleUseAnotherCard,
+    onUseAnotherPayment: handleUseAnotherPayment,
+    onPayLater: handlePayLater
   }));
 };
 export default /*#__PURE__*/forwardRef(MWCreditCard);

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

@@ -1,3 +1,13 @@
+/**
+ * 取消当前支付流程中残留的 message 监听器和定时器，
+ * 并 reject 挂起的 Promise 使 startPayment 的 await 结束。
+ * reject 值为 0，startPayment catch 中 `if (err === 0) return` 会静默处理。
+ */
+export declare const cancelCurrentPayment: () => void;
+interface PaymentOptions {
+    callback?: (res: any) => void;
+    isCancelled?: () => boolean;
+}
 /**
  * @title: 点击支付
  * @description:
@@ -6,7 +16,16 @@
  * @Author: Wzw
  * @Date: 2022-10-22 10:05
  */
-export declare const startPayment: ({ orderId, cardInfo, payData }: any, callback?: any) => Promise<boolean | undefined>;
+export declare const startPayment: ({ orderId, cardInfo, payData }: any, options?: PaymentOptions) => Promise<boolean | undefined>;
+/**
+ * @title: 前置检查 - 提交卡信息到后端（预检查版本）
+ * @description: 与 checkEnrollment 调用相同 API，但不包含 Toast/callback/closeIframe 等副作用。
+ *              失败时直接 throw error，由调用方（MWCreditCard）捕获并展示 3DS 错误弹窗。
+ * @param {string} orderId 订单ID
+ * @param {any} cardInfo 卡信息
+ * @return {Promise<any>} 返回后端数据（含 pay_info），失败则 throw
+ */
+export declare const preCheckEnrollment: (orderId: string, cardInfo: any) => Promise<any>;
 /*******
  * @title: 步骤2
  * @description: 提交卡信息到后端
@@ -14,7 +33,7 @@ export declare const startPayment: ({ orderId, cardInfo, payData }: any, callbac
  * @Author: Wzw
  * @Date: 2022-10-18 10:26
  */
-export declare const checkEnrollment: (orderId: string, cardInfo: any, callback: any) => Promise<any>;
+export declare const checkEnrollment: (orderId: string, cardInfo: any, options?: PaymentOptions) => Promise<any>;
 /**
  * @title: 步骤3
  * @description: 创建iframe, 监听
@@ -32,7 +51,7 @@ export declare const createThreeDSMethodIframe: (threeDSMethodData: any, callbac
  * @Author: Wzw
  * @Date: 2022-10-18 10:43
  */
-export declare const checkTDSAuth: (step2: any, step3: any, callback?: any) => Promise<any>;
+export declare const checkTDSAuth: (step2: any, step3: any, options?: PaymentOptions) => Promise<any>;
 /**
  * @title: 步骤5
  * @description:  监听
@@ -59,3 +78,4 @@ export declare const checkPARes: (step2: any, step4: any, step5: any) => Promise
  * @Date: 2022-10-18 14:28
  */
 export declare const paymentEnd: (props: any, callback: any) => void;
+export {};