@pisell/private-materials 3.4.87 → 3.4.89

package/es/components/pay/toC/PaymentList/payment/google_pay2.svg

@@ -0,0 +1,9 @@
+<svg width="46" height="32" viewBox="0 0 46 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="45" height="31" rx="3.5" fill="white"/>
+<rect x="0.5" y="0.5" width="45" height="31" rx="3.5" stroke="#F2F4F7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.4108 20.7039V16.7911H23.4303C24.2579 16.7911 24.9563 16.5138 25.5257 15.9669L25.6624 15.8282C26.7025 14.696 26.6342 12.9321 25.5257 11.8846C24.9715 11.33 24.2123 11.0296 23.4303 11.045H20.1885V20.7039H21.4108ZM21.4109 15.6048V12.2311H23.4611C23.9016 12.2311 24.3192 12.4006 24.6305 12.7087C25.2911 13.3557 25.3063 14.434 24.6685 15.1041C24.3572 15.4353 23.9167 15.6202 23.4611 15.6048H21.4109ZM31.3639 14.6112C30.84 14.1259 30.1263 13.8795 29.2229 13.8795C28.0613 13.8795 27.1882 14.3108 26.6112 15.1658L27.6893 15.8513C28.0841 15.2659 28.6231 14.9732 29.3064 14.9732C29.7391 14.9732 30.1567 15.135 30.4832 15.4277C30.802 15.7049 30.9842 16.1055 30.9842 16.5291V16.8141C30.5135 16.5522 29.9214 16.4136 29.1925 16.4136C28.3422 16.4136 27.6589 16.6138 27.1502 17.0221C26.6416 17.4303 26.3834 17.9695 26.3834 18.655C26.3682 19.2789 26.634 19.872 27.1047 20.2725C27.583 20.7039 28.1904 20.9195 28.904 20.9195C29.7467 20.9195 30.4148 20.5421 30.9235 19.7873H30.9767V20.7039H32.1458V16.6292C32.1458 15.7743 31.8877 15.0964 31.3639 14.6112ZM28.046 19.4869C27.7954 19.3021 27.6436 19.0017 27.6436 18.6782C27.6436 18.3161 27.8106 18.0157 28.1371 17.777C28.4712 17.5382 28.8889 17.4149 29.3824 17.4149C30.0658 17.4072 30.5974 17.5613 30.977 17.8694C30.977 18.3932 30.772 18.8476 30.3696 19.2327C30.0051 19.6025 29.5115 19.8104 28.9952 19.8104C28.6535 19.8181 28.3194 19.7026 28.046 19.4869ZM34.7734 23.6077L38.858 14.0952H37.5294L35.6389 18.8399H35.6162L33.6802 14.0952H32.3516L35.0316 20.2803L33.5132 23.6077H34.7734Z" fill="#3C4043"/>
+<path d="M17.1905 15.9439C17.1905 15.5665 17.1601 15.1891 17.0994 14.8193H11.9443V16.9529H14.8977C14.7762 17.6384 14.3814 18.2546 13.8044 18.6398V20.0262H15.5658C16.5983 19.0634 17.1905 17.6385 17.1905 15.9439Z" fill="#4285F4"/>
+<path d="M11.9452 21.3662C13.4181 21.3662 14.6632 20.8732 15.5666 20.0259L13.8053 18.6395C13.3118 18.9784 12.6816 19.1709 11.9452 19.1709C10.5179 19.1709 9.31074 18.1927 8.87799 16.8833H7.06348V18.316C7.98971 20.1877 9.88015 21.3662 11.9452 21.3662Z" fill="#34A853"/>
+<path d="M8.87795 16.8834C8.65015 16.1978 8.65015 15.4507 8.87795 14.7575V13.3325H7.06315C6.28103 14.8961 6.28103 16.7447 7.06315 18.3083L8.87795 16.8834Z" fill="#FBBC04"/>
+<path d="M11.9452 12.47C12.7272 12.4546 13.4788 12.755 14.0406 13.3018L15.6046 11.7151C14.61 10.7754 13.3042 10.2593 11.9452 10.2747C9.88015 10.2747 7.98971 11.4609 7.06348 13.3326L8.87799 14.7653C9.31074 13.4482 10.5179 12.47 11.9452 12.47Z" fill="#EA4335"/>
+</svg>

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

@@ -4,9 +4,15 @@ export interface AddMWCreditCardRef {
     init: () => void;
     onReset: () => void;
     onSubmit: () => void;
+    close: () => void;
 }
 export interface AddMWCreditCardProps {
+    /** 创建卡片回调 */
     onCreate?: (values: any) => void;
+    /** 店铺名称，用于授权说明文案 */
+    shopName?: string;
+    /** 按钮 loading */
+    btnLoading?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<AddMWCreditCardProps & React.RefAttributes<any>>;
 export default _default;

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

@@ -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;