@pisell/private-materials 6.3.115 → 6.3.117

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

@@ -10,7 +10,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useState, useMemo, useContext, useImperativeHandle, forwardRef } from 'react';
 import { locales } from '@pisell/utils';
-import { Form, Row, Col, Checkbox } from 'antd';
+import { Form, Row, Col, Checkbox, Divider } from 'antd';
 import { PisellModal, PisellInput, PisellDatePicker, PisellAlert, Iconfont, PisellToast, PisellText } from '@pisell/materials';
 import { Context } from "../../../model";
 import "./index.less";
@@ -77,7 +77,11 @@ var formatName = function formatName(card_name) {
  * @Date: 2024-08-16 11:13
  */
 var AddMWCreditCard = function AddMWCreditCard(props, ref) {
-  var onCreate = props.onCreate;
+  var onCreate = props.onCreate,
+    _props$shopName = props.shopName,
+    shopName = _props$shopName === void 0 ? '' : _props$shopName,
+    _props$btnLoading = props.btnLoading,
+    btnLoading = _props$btnLoading === void 0 ? false : _props$btnLoading;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -233,11 +237,20 @@ var AddMWCreditCard = function AddMWCreditCard(props, ref) {
   var onSubmit = function onSubmit() {
     form.submit();
   };
+
+  /**
+   * @title: 关闭弹窗
+   * @description: 供外部调用，直接关闭添加卡片弹窗
+   */
+  var close = function close() {
+    setOpen(false);
+  };
   useImperativeHandle(ref, function () {
     return {
       init: init,
       onReset: onReset,
-      onSubmit: onSubmit
+      onSubmit: onSubmit,
+      close: close
     };
   });
 
@@ -264,18 +277,40 @@ var AddMWCreditCard = function AddMWCreditCard(props, ref) {
     }
   }, [state.payGroup]);
   return /*#__PURE__*/React.createElement(PisellModal, {
-    title: /*#__PURE__*/React.createElement("div", null, locales.getText('tocPay.text.addCard')),
+    title: /*#__PURE__*/React.createElement("div", {
+      className: "secure-card-payment-title"
+    }, locales.getText('tocPay.text.secureCardPayment'), /*#__PURE__*/React.createElement(Iconfont, {
+      type: "pisell2-shield-tick",
+      className: "secure-card-payment-title-icon"
+    })),
     open: open,
     onCancel: onCancel,
     cancelVisible: false,
     onOk: onSubmit,
     okText: okText,
     bodyStyle: {
-      padding: 24
+      padding: 24,
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    okButtonProps: {
+      loading: btnLoading,
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: ""
-  }, /*#__PURE__*/React.createElement(Form, {
+    className: "add-mw-credit-card-wrap"
+  }, /*#__PURE__*/React.createElement(PisellAlert, {
+    className: "secure-card-tip-alert",
+    icon: /*#__PURE__*/React.createElement(Iconfont, {
+      type: "pisell2-shield-tick"
+    }),
+    showIcon: true,
+    message: locales.getText('tocPay.text.secureBankInfo')
+  }), /*#__PURE__*/React.createElement(Form, {
     layout: "vertical",
     form: form,
     onFinish: onFinish,
@@ -329,23 +364,32 @@ var AddMWCreditCard = function AddMWCreditCard(props, ref) {
     }]
   }, /*#__PURE__*/React.createElement(PisellInput, {
     placeholder: locales.getText('tocPay.text.incorrectName')
-  }))), /*#__PURE__*/React.createElement(Col, {
-    span: 24
-  }, /*#__PURE__*/React.createElement(Form.Item, {
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "merchant-authorization-text"
+  }, locales.getText('tocPay.text.merchantAuthorizationBefore'), /*#__PURE__*/React.createElement("span", {
+    className: "merchant-shop-name"
+  }, shopName), locales.getText('tocPay.text.merchantAuthorizationAfter')), /*#__PURE__*/React.createElement(Divider, {
+    className: "secure-card-divider"
+  }), /*#__PURE__*/React.createElement(Form.Item, {
     name: "is_save",
     valuePropName: "checked",
-    initialValue: true
+    initialValue: true,
+    className: "save-card-form-item"
   }, /*#__PURE__*/React.createElement(Checkbox, null, /*#__PURE__*/React.createElement("span", {
     className: "save-card-checkbox-text"
-  }, locales.getText('tocPay.text.saveCardForNextTime'))))), /*#__PURE__*/React.createElement(Col, {
-    span: 24
-  }, /*#__PURE__*/React.createElement(PisellAlert, {
-    className: "save-card-alert",
-    icon: /*#__PURE__*/React.createElement(Iconfont, {
-      type: "pisell2-shield-tick"
-    }),
-    showIcon: true,
-    message: locales.getText('tocPay.text.secureBankInfo')
-  }))))));
+  }, locales.getText('tocPay.text.saveCardForNextTime')))), /*#__PURE__*/React.createElement("div", {
+    className: "save-card-encryption-text"
+  }, locales.getText('tocPay.text.saveCardEncryption'))), /*#__PURE__*/React.createElement("div", {
+    className: "three-d-secure-section"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "three-d-secure-badge"
+  }, /*#__PURE__*/React.createElement(Iconfont, {
+    type: "pisell2-shield-01",
+    className: "three-d-secure-icon"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "three-d-secure-badge-text"
+  }, "3D")), /*#__PURE__*/React.createElement("span", {
+    className: "three-d-secure-text"
+  }, locales.getText('tocPay.text.threeDSecureProtection')))));
 };
 export default /*#__PURE__*/forwardRef(AddMWCreditCard);

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

@@ -1,3 +1,4 @@
+/* 表单 label 样式 */
 .pisell-lowcode-form-item-label {
   color: var(--Gray-900, #101828);
   font-size: 14px;
@@ -6,20 +7,120 @@
   line-height: 20px;
 }
 
+/* 标题区域 */
+.secure-card-payment-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+}
+
+.secure-card-payment-title-icon {
+  color: #12b76a;
+  font-size: 20px;
+}
+
+/* 外层容器 - flex 列布局，使 3D Secure 内容少时贴底 */
+.add-mw-credit-card-wrap {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+/* 安全提示 Alert - 顶部 */
+.secure-card-tip-alert {
+  margin-bottom: 12px;
+  .pisell-lowcode-alert-message {
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 18px;
+    color: #027a48;
+  }
+}
+
+/* 授权说明文案 */
+.merchant-authorization-text {
+  color: var(--Gray-600, #475467);
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  margin-top: 4px;
+}
+
+/* shopName 蓝色高亮 */
+.merchant-shop-name {
+  color: #1570EF;
+}
+
+/* 分割线 */
+.secure-card-divider {
+  margin: 16px 0;
+}
+
+/* 保存卡片 Checkbox */
+.save-card-form-item {
+  margin-bottom: 4px !important;
+}
+
 .save-card-checkbox-text {
   color: var(--Gray-900, #101828);
-  font-size: 16px;
+  font-size: 14px;
   font-style: normal;
   font-weight: 500;
 }
 
-.save-card-alert {
+/* 保存卡片加密提示 */
+.save-card-encryption-text {
+  color: var(--Gray-500, #667085);
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  padding-left: 24px;
+  margin-bottom: 24px;
+}
 
-  .pisell-lowcode-alert-message {
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-  }
+/* 3D Secure 安全说明 - margin-top: auto 使其内容少时贴底，多时跟随流 */
+.three-d-secure-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px 0;
+  margin-top: auto;
+}
+
+.three-d-secure-badge {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+}
+
+.three-d-secure-icon {
+  color: #2e90fa;
+  font-size: 32px;
+}
 
-}
+.three-d-secure-badge-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 10px;
+  font-weight: 700;
+  color: #2e90fa;
+  line-height: 1;
+}
+
+.three-d-secure-text {
+  color: var(--Gray-600, #475467);
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.less';
+export interface MWCreditCardListRef {
+    init: (order: any) => void;
+    close: () => void;
+}
+interface MWCreditCardListProps {
+    onAdd?: () => void;
+    onChange?: (cardId: number) => void;
+    btnLoading?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<MWCreditCardListProps & React.RefAttributes<any>>;
+export default _default;

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

@@ -15,6 +15,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useState, useImperativeHandle, forwardRef, useMemo, useContext } from 'react';
 import { Button } from 'antd';
 import { locales } from '@pisell/utils';
+import { useDebounceFn } from 'ahooks';
 import { PisellModal, Iconfont, PisellCheckboxGroup, PisellRow, getBankCardTypeImg, PisellLoading, PisellText } from '@pisell/materials';
 import classNames from 'classnames';
 import { Context } from "../../../model";
@@ -70,7 +71,7 @@ var MWCreditCardList = function MWCreditCardList(props, ref) {
    */
   var _getCreditCardList = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var cardList;
+      var cardList, _props$onAdd;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -78,6 +79,15 @@ var MWCreditCardList = function MWCreditCardList(props, ref) {
             return getCreditCardList();
           case 2:
             cardList = _context.sent;
+            if (cardList.length) {
+              _context.next = 7;
+              break;
+            }
+            (_props$onAdd = props.onAdd) === null || _props$onAdd === void 0 || _props$onAdd.call(props);
+            // 解除loading
+            setLoading(false);
+            return _context.abrupt("return");
+          case 7:
             // 设置数据
             setCreditCardList(cardList);
 
@@ -88,7 +98,7 @@ var MWCreditCardList = function MWCreditCardList(props, ref) {
 
             // 解除loading
             setLoading(false);
-          case 6:
+          case 10:
           case "end":
             return _context.stop();
         }
@@ -153,9 +163,18 @@ var MWCreditCardList = function MWCreditCardList(props, ref) {
   var cardChange = function cardChange(id) {
     setCurrentCard(id);
   };
+
+  /**
+   * @title: 关闭弹窗
+   * @description: 供外部调用，直接关闭卡列表弹窗
+   */
+  var close = function close() {
+    setOpen(false);
+  };
   useImperativeHandle(ref, function () {
     return {
-      init: init
+      init: init,
+      close: close
     };
   });
 
@@ -266,21 +285,24 @@ var MWCreditCardList = function MWCreditCardList(props, ref) {
    * @Author: zhiwei.Wang
    * @Date: 2024-08-16 11:11
    */
-  var onOk = function onOk() {
-    var _props$onChange;
-    // 管理卡模式下, 则执行删除卡操作
-    if (manage) {
-      setManage(false);
-      handleBatchDeleteCards();
-      return;
-    }
+  var _useDebounceFn = useDebounceFn(function () {
+      var _props$onChange;
+      // 管理卡模式下, 则执行删除卡操作
+      if (manage) {
+        setManage(false);
+        handleBatchDeleteCards();
+        return;
+      }
 
-    // 否则回调到外部
-    var cur = creditCardList.find(function (d) {
-      return d.id === currentCard;
-    });
-    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, cur);
-  };
+      // 否则回调到外部
+      var cur = creditCardList.find(function (d) {
+        return d.id === currentCard;
+      });
+      (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, cur);
+    }, {
+      wait: 300
+    }),
+    onOk = _useDebounceFn.run;
 
   // 渲染列表
   var renderList = useMemo(function () {
@@ -330,7 +352,13 @@ var MWCreditCardList = function MWCreditCardList(props, ref) {
     okText: manage ? locales.getText('tocPay.text.done') : okText,
     onOk: onOk,
     okButtonProps: {
-      disabled: !currentCard
+      disabled: !currentCard,
+      loading: props.btnLoading,
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }
     },
     bodyStyle: {
       padding: 24

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

@@ -1,4 +1,23 @@
 import React from 'react';
 import './index.less';
-declare const ThreedsLoading: ({ title, showSuccessBackButton, onSuccessBack }: any) => React.JSX.Element;
+interface ThreedsLoadingProps {
+    /** 主标题（单行模式使用，覆盖默认文案） */
+    title?: string;
+    /** 副标题（多行模式第二行，可选） */
+    subtitle?: string;
+    /** 描述说明（多行模式第三行，可选） */
+    description?: string;
+    /** 是否展示"支付完成返回"按钮 */
+    showSuccessBackButton?: boolean;
+    /** "支付完成返回"按钮点击回调 */
+    onSuccessBack?: () => void;
+}
+/**
+ * @title: 等待加载页
+ * @description: 通用的支付等待 loading 页面。
+ *              - 默认单行文案模式（传 title 或使用默认文案）
+ *              - 传入 subtitle / description 后进入多行文案模式
+ *              向后兼容：不传新 props 时行为与原来完全一致。
+ */
+declare const ThreedsLoading: React.FC<ThreedsLoadingProps>;
 export default ThreedsLoading;

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

@@ -2,9 +2,18 @@ import React from 'react';
 import useEngineContext from "../../../../../../../hooks/useEngineContext";
 import "./index.less";
 import { locales } from '@pisell/utils';
+/**
+ * @title: 等待加载页
+ * @description: 通用的支付等待 loading 页面。
+ *              - 默认单行文案模式（传 title 或使用默认文案）
+ *              - 传入 subtitle / description 后进入多行文案模式
+ *              向后兼容：不传新 props 时行为与原来完全一致。
+ */
 var ThreedsLoading = function ThreedsLoading(_ref) {
   var _context$appHelper;
   var title = _ref.title,
+    subtitle = _ref.subtitle,
+    description = _ref.description,
     showSuccessBackButton = _ref.showSuccessBackButton,
     onSuccessBack = _ref.onSuccessBack;
   var context = useEngineContext();
@@ -18,7 +27,11 @@ var ThreedsLoading = function ThreedsLoading(_ref) {
     alt: ""
   }), /*#__PURE__*/React.createElement("div", {
     className: 'threeds-loading-title'
-  }, title || locales.getText('tocPay.text.waitingForBankVerification')), showSuccessBackButton && /*#__PURE__*/React.createElement("div", {
+  }, title || locales.getText('tocPay.text.waitingForBankVerification')), subtitle && /*#__PURE__*/React.createElement("div", {
+    className: 'threeds-loading-subtitle'
+  }, subtitle), description && /*#__PURE__*/React.createElement("div", {
+    className: 'threeds-loading-description'
+  }, description), showSuccessBackButton && /*#__PURE__*/React.createElement("div", {
     onClick: onSuccessBack,
     className: "threeds-loading-success-back-button"
   }, locales.getText('tocPay.text.successBack')));

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

@@ -22,6 +22,26 @@
     color: #353535;
   }
 
+  .threeds-loading-subtitle {
+    margin-top: 8px;
+    padding: 0 40px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: #475467;
+  }
+
+  .threeds-loading-description {
+    margin-top: 4px;
+    padding: 0 40px;
+    text-align: center;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 18px;
+    color: #667085;
+  }
+
   .threeds-loading-success-back-button {
     margin-top: 20px;
     color: #4b6b99;

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

@@ -1,10 +1,16 @@
 import React from 'react';
 import './index.less';
 export interface TDSPayRef {
-    init: (res: any, order: any) => void;
+    /** 初始化 3DS 支付流程
+     * @param res 卡信息（已保存卡含 id，新卡含表单字段）
+     * @param order 订单信息
+     * @param preCheckData 可选，外部预检查已获取的数据（跳过内部 fastPayNew / checkEnrollment）
+     */
+    init: (res: any, order: any, preCheckData?: any) => void;
 }
 export interface TDSPayProps {
     onChange?: (values: any) => void;
+    closeAll: () => void;
 }
 declare const _default: React.ForwardRefExoticComponent<TDSPayProps & React.RefAttributes<any>>;
 export default _default;