@pisell/private-materials 3.4.88 → 3.4.89

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

@@ -2,10 +2,12 @@ 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

@@ -71,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:
@@ -79,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);
 
@@ -89,7 +98,7 @@ var MWCreditCardList = function MWCreditCardList(props, ref) {
 
             // 解除loading
             setLoading(false);
-          case 6:
+          case 10:
           case "end":
             return _context.stop();
         }
@@ -127,15 +136,12 @@ var MWCreditCardList = function MWCreditCardList(props, ref) {
             // 关闭管理卡模式
             setManage(false);
 
-            // 重置确认按钮loading状态
-            setOkLoading(false);
-
             // 选中第一个卡
             setCurrentCard(0);
 
             // 异步 获取信用卡列表
             _getCreditCardList();
-          case 7:
+          case 6:
           case "end":
             return _context2.stop();
         }
@@ -157,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
     };
   });
 
@@ -270,11 +285,6 @@ var MWCreditCardList = function MWCreditCardList(props, ref) {
    * @Author: zhiwei.Wang
    * @Date: 2024-08-16 11:11
    */
-  // 确认按钮loading状态
-  var _useState13 = useState(false),
-    _useState14 = _slicedToArray(_useState13, 2),
-    okLoading = _useState14[0],
-    setOkLoading = _useState14[1];
   var _useDebounceFn = useDebounceFn(function () {
       var _props$onChange;
       // 管理卡模式下, 则执行删除卡操作
@@ -284,9 +294,6 @@ var MWCreditCardList = function MWCreditCardList(props, ref) {
         return;
       }
 
-      // 展示loading, 防止重复点击
-      setOkLoading(true);
-
       // 否则回调到外部
       var cur = creditCardList.find(function (d) {
         return d.id === currentCard;
@@ -346,7 +353,12 @@ var MWCreditCardList = function MWCreditCardList(props, ref) {
     onOk: onOk,
     okButtonProps: {
       disabled: !currentCard,
-      loading: okLoading
+      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;