@pisell/private-materials 3.4.87 → 3.4.89

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

@@ -33,6 +33,7 @@ __export(TDSPay_exports, {
 });
 module.exports = __toCommonJS(TDSPay_exports);
 var import_react = __toESM(require("react"));
+var import_antd = require("antd");
 var import_materials = require("@pisell/materials");
 var import_ThreedsLoading = __toESM(require("./ThreedsLoading"));
 var import_tds2 = require("../tds2");
@@ -42,35 +43,69 @@ var import_payGroup = require("../../../payGroup");
 var import_index = require("./index.less");
 var import_utils = require("@pisell/utils");
 var TDSPay = (props, ref) => {
-  const { onChange } = props;
+  const { onChange, closeAll } = props;
   const [open, setOpen] = (0, import_react.useState)(false);
+  const [showCloseConfirm, setShowCloseConfirm] = (0, import_react.useState)(false);
+  const sessionIdRef = (0, import_react.useRef)(0);
+  const payingRef = (0, import_react.useRef)(false);
   const { state } = (0, import_react.useContext)(import_model.Context);
-  const init = async (res, order) => {
+  (0, import_react.useEffect)(() => {
+    return () => {
+      sessionIdRef.current += 1;
+      (0, import_tds2.cancelCurrentPayment)();
+    };
+  }, []);
+  const createSessionCallback = (session) => (res) => {
+    if (sessionIdRef.current !== session) return;
+    setOpen(false);
+    setShowCloseConfirm(false);
+    payingRef.current = false;
+    if (res.key === "hideModal") return;
+    onChange == null ? void 0 : onChange(res);
+  };
+  const init = async (res, order, preCheckData) => {
+    if (payingRef.current) return;
+    payingRef.current = true;
+    sessionIdRef.current += 1;
+    (0, import_tds2.cancelCurrentPayment)();
+    const session = sessionIdRef.current;
     setOpen(true);
+    const isCancelled = () => sessionIdRef.current !== session;
+    const callback = createSessionCallback(session);
+    if (preCheckData) {
+      (0, import_tds2.startPayment)({ payData: preCheckData }, { callback, isCancelled });
+      return;
+    }
     if (res.id) {
-      _fastPayNew(res);
+      _fastPayNew(res, callback, isCancelled);
     } else {
-      newCardPay(res);
+      newCardPay(res, callback, isCancelled);
     }
   };
-  const payCallback = (res) => {
+  const handleCloseClick = () => {
+    setShowCloseConfirm(true);
+  };
+  const handleContinueWaiting = () => {
+    setShowCloseConfirm(false);
+  };
+  const handleViewOrder = () => {
+    sessionIdRef.current += 1;
+    (0, import_tds2.cancelCurrentPayment)();
+    payingRef.current = false;
+    setShowCloseConfirm(false);
     setOpen(false);
-    if (res.key === "hideModal") {
-      return;
-    }
-    onChange == null ? void 0 : onChange(res);
+    closeAll == null ? void 0 : closeAll();
+    onChange == null ? void 0 : onChange({ key: "cancel" });
   };
-  const _fastPayNew = async (res) => {
+  const _fastPayNew = async (res, callback, isCancelled) => {
     var _a, _b, _c;
     try {
       const params = (0, import_payGroup.getPayGroupParamsFromStorage)(
         (_a = state.payGroup) == null ? void 0 : _a.order_id,
-        {
-          card_id: res.id
-        }
+        { card_id: res.id }
       );
       if (!params) {
-        payCallback == null ? void 0 : payCallback({
+        callback({
           key: "fail",
           data: {
             res,
@@ -84,15 +119,16 @@ var TDSPay = (props, ref) => {
         order_id: (_b = state.payGroup) == null ? void 0 : _b.order_id,
         params
       });
+      if (isCancelled()) return;
       (0, import_payGroup.setPayNumber)((_c = state.payGroup) == null ? void 0 : _c.order_id, data == null ? void 0 : data.pay_number);
       if ((data == null ? void 0 : data.type) === "token") {
-        payCallback == null ? void 0 : payCallback({ key: "success", data });
+        callback({ key: "success", data });
       }
       if ((data == null ? void 0 : data.type) === "3ds") {
-        (0, import_tds2.startPayment)({ payData: data }, payCallback);
+        (0, import_tds2.startPayment)({ payData: data }, { callback, isCancelled });
       }
     } catch (e) {
-      payCallback == null ? void 0 : payCallback({
+      callback({
         key: "fail",
         data: {
           res,
@@ -102,7 +138,7 @@ var TDSPay = (props, ref) => {
       });
     }
   };
-  const newCardPay = (res) => {
+  const newCardPay = (res, callback, isCancelled) => {
     var _a, _b;
     let _cardInfo = {
       card_name: res.card_name,
@@ -117,7 +153,7 @@ var TDSPay = (props, ref) => {
       _cardInfo
     );
     if (!_cardInfo) {
-      payCallback == null ? void 0 : payCallback({
+      callback({
         key: "fail",
         data: {
           _cardInfo,
@@ -129,7 +165,7 @@ var TDSPay = (props, ref) => {
     }
     (0, import_tds2.startPayment)(
       { orderId: (_b = state.payGroup) == null ? void 0 : _b.order_id, cardInfo: _cardInfo },
-      payCallback
+      { callback, isCancelled }
     );
   };
   (0, import_react.useImperativeHandle)(
@@ -138,17 +174,55 @@ var TDSPay = (props, ref) => {
       init
     })
   );
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
     import_materials.PisellModal,
     {
       platform: "h5",
       open,
       footer: false,
       header: false,
-      closable: false,
+      closable: true,
+      onCancel: handleCloseClick,
       bodyStyle: { padding: 0 }
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react.default.createElement(import_ThreedsLoading.default, null), /* @__PURE__ */ import_react.default.createElement("div", { id: "threeds-container" }))
-  );
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react.default.createElement(
+      import_ThreedsLoading.default,
+      {
+        title: import_utils.locales.getText("tocPay.text.processingPayment"),
+        subtitle: import_utils.locales.getText("tocPay.text.securityCheckRequired"),
+        description: import_utils.locales.getText("tocPay.text.doNotClosePage")
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("div", { id: "threeds-container" }))
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellModal,
+    {
+      open: showCloseConfirm,
+      closable: false,
+      footer: null,
+      header: false,
+      mobileModalHeight: "auto",
+      headerDivider: false,
+      footerDivider: false,
+      bodyStyle: { padding: 24 },
+      transitionName: "pisell-move-down"
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "tds-close-confirm-modal" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "tds-close-confirm-title" }, import_utils.locales.getText("tocPay.text.stopWaitingTitle")), /* @__PURE__ */ import_react.default.createElement("div", { className: "tds-close-confirm-desc" }, import_utils.locales.getText("tocPay.text.stopWaitingDesc")), /* @__PURE__ */ import_react.default.createElement("div", { className: "tds-close-confirm-actions" }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        type: "primary",
+        block: true,
+        className: "tds-close-confirm-btn-primary",
+        onClick: handleContinueWaiting
+      },
+      import_utils.locales.getText("tocPay.text.continueWaiting")
+    ), /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "tds-close-confirm-link",
+        onClick: handleViewOrder
+      },
+      import_utils.locales.getText("tocPay.text.viewOrder")
+    )))
+  ));
 };
 var TDSPay_default = (0, import_react.forwardRef)(TDSPay);

package/lib/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/lib/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/lib/components/pay/toC/PaymentMethods/MWCreditCard/components/TDSErrorModal/index.js

@@ -0,0 +1,107 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pay/toC/PaymentMethods/MWCreditCard/components/TDSErrorModal/index.tsx
+var TDSErrorModal_exports = {};
+__export(TDSErrorModal_exports, {
+  default: () => TDSErrorModal_default
+});
+module.exports = __toCommonJS(TDSErrorModal_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_utils = require("@pisell/utils");
+var import_index = require("./index.less");
+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"
+  }
+};
+var TDSErrorModal = ({
+  open,
+  type = "tds-not-supported",
+  shopPhone,
+  shopEmail,
+  onUseAnotherCard,
+  onUseAnotherPayment,
+  onPayLater
+}) => {
+  const showContact = !!(shopPhone || shopEmail);
+  const textKeys = (0, import_react.useMemo)(() => TEXT_KEY_MAP[type], [type]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_materials.PisellModal,
+    {
+      open,
+      closable: false,
+      footer: null,
+      header: false,
+      mobileModalHeight: "auto",
+      headerDivider: false,
+      footerDivider: false,
+      bodyStyle: { padding: 24 },
+      transitionName: "pisell-move-down"
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "tds-error-modal" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "tds-error-modal-title" }, import_utils.locales.getText(textKeys.title)), /* @__PURE__ */ import_react.default.createElement("div", { className: "tds-error-modal-desc" }, import_utils.locales.getText(textKeys.desc)), /* @__PURE__ */ import_react.default.createElement("div", { className: "tds-error-modal-actions" }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        type: "primary",
+        block: true,
+        className: "tds-error-modal-btn-primary",
+        onClick: onUseAnotherCard
+      },
+      import_utils.locales.getText("tocPay.text.useAnotherCard")
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        block: true,
+        className: "tds-error-modal-btn-secondary",
+        onClick: onUseAnotherPayment
+      },
+      import_utils.locales.getText("tocPay.text.useAnotherPayment")
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        block: true,
+        className: "tds-error-modal-btn-secondary",
+        onClick: onPayLater
+      },
+      import_utils.locales.getText("tocPay.text.payLater")
+    )), showContact && /* @__PURE__ */ import_react.default.createElement("div", { className: "tds-error-modal-contact" }, import_utils.locales.getText("tocPay.text.paymentTroubleContact")(
+      shopPhone || "",
+      shopEmail || ""
+    )))
+  );
+};
+var TDSErrorModal_default = TDSErrorModal;

package/lib/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/lib/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;

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

@@ -35,27 +35,148 @@ module.exports = __toCommonJS(MWCreditCard_exports);
 var import_react = __toESM(require("react"));
 var import_List = __toESM(require("./List"));
 var import_Add = __toESM(require("./Add"));
+var import_serve = require("./List/serve");
 var import_TDSPay = __toESM(require("./TDSPay"));
 var import_model = require("../../model");
+var import_tds2 = require("./tds2");
+var import_payGroup = require("../../payGroup");
+var import_utils = require("@pisell/utils");
+var import_materials = require("@pisell/materials");
+var import_TDSErrorModal = __toESM(require("./components/TDSErrorModal"));
 var import_index = require("./index.less");
+var import_useEngineContext = __toESM(require("../../../../../hooks/useEngineContext"));
 var MWCreditCard = (props, ref) => {
   const MWCreditCardListRef2 = (0, import_react.useRef)();
   const AddMWCreditCardRef2 = (0, import_react.useRef)();
   const TDSPayRef2 = (0, import_react.useRef)();
+  const context = (0, import_useEngineContext.default)();
+  const utils = context.appHelper.utils || {};
   const [order, setOrder] = (0, import_react.useState)(null);
+  const [tdsErrorVisible, setTdsErrorVisible] = (0, import_react.useState)(false);
+  const [bankVerifyFailVisible, setBankVerifyFailVisible] = (0, import_react.useState)(false);
+  const [loading, setLoading] = (0, import_react.useState)(false);
   const { state } = (0, import_react.useContext)(import_model.Context);
   const init = async (res) => {
     var _a;
     setOrder(res.order);
     (_a = MWCreditCardListRef2.current) == null ? void 0 : _a.init(order);
   };
+  const closeAll = () => {
+    var _a, _b;
+    (_a = MWCreditCardListRef2.current) == null ? void 0 : _a.close();
+    (_b = AddMWCreditCardRef2.current) == null ? void 0 : _b.close();
+  };
   const fastPay = async (card) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    try {
+      setLoading(true);
+      (_b = (_a = utils == null ? void 0 : utils.Toast) == null ? void 0 : _a.loading) == null ? void 0 : _b.call(_a, import_utils.locales.getText("tocPay.text.checkingCard"), 0, void 0, true);
+      const params = (0, import_payGroup.getPayGroupParamsFromStorage)(
+        (_c = state.payGroup) == null ? void 0 : _c.order_id,
+        { card_id: card.id }
+      );
+      if (!params) {
+        (_d = state.payCallback) == null ? void 0 : _d.call(state, {
+          key: "fail",
+          data: {
+            res: card,
+            fn: "MWCreditCard.fastPay.noParams",
+            message: import_utils.locales.getText("tocPay.text.getParamsFail")
+          }
+        });
+        return;
+      }
+      const { data } = await (0, import_serve.fastPayNew)({
+        order_id: (_e = state.payGroup) == null ? void 0 : _e.order_id,
+        params
+      });
+      (0, import_payGroup.setPayNumber)((_f = state.payGroup) == null ? void 0 : _f.order_id, data == null ? void 0 : data.pay_number);
+      if ((data == null ? void 0 : data.type) === "token") {
+        (_g = TDSPayRef2.current) == null ? void 0 : _g.init(card, order, data);
+        return;
+      }
+      if ((data == null ? void 0 : data.type) === "3ds") {
+        (_h = TDSPayRef2.current) == null ? void 0 : _h.init(card, order, data);
+        return;
+      }
+    } catch (e) {
+      if ((e == null ? void 0 : e.code) === 700500) {
+        setTdsErrorVisible(true);
+      } else {
+        (0, import_materials.PisellToast)({ content: (e == null ? void 0 : e.message) || "", duration: 2 });
+      }
+    } finally {
+      setLoading(false);
+      (_j = (_i = utils == null ? void 0 : utils.Toast) == null ? void 0 : _i.hide) == null ? void 0 : _j.call(_i);
+    }
+  };
+  const onCreate = async (res) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    try {
+      setLoading(true);
+      (_b = (_a = utils == null ? void 0 : utils.Toast) == null ? void 0 : _a.loading) == null ? void 0 : _b.call(_a, import_utils.locales.getText("tocPay.text.checkingCard"), 0, void 0, true);
+      let _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 = (0, import_payGroup.getPayGroupParamsFromStorage)(
+        (_c = state.payGroup) == null ? void 0 : _c.order_id,
+        _cardInfo
+      );
+      if (!_cardInfo) {
+        (_d = state.payCallback) == null ? void 0 : _d.call(state, {
+          key: "fail",
+          data: {
+            _cardInfo,
+            message: import_utils.locales.getText("tocPay.text.getParamsFail"),
+            fn: "MWCreditCard.onCreate.noCardInfo"
+          }
+        });
+        return;
+      }
+      const preCheckData = await (0, import_tds2.preCheckEnrollment)(
+        (_e = state.payGroup) == null ? void 0 : _e.order_id,
+        _cardInfo
+      );
+      (_f = TDSPayRef2.current) == null ? void 0 : _f.init(res, order, preCheckData);
+    } catch (e) {
+      if ((e == null ? void 0 : e.code) === 700500) {
+        setTdsErrorVisible(true);
+      } else {
+        (0, import_materials.PisellToast)({ content: (e == null ? void 0 : e.message) || "", duration: 2 });
+      }
+    } finally {
+      setLoading(false);
+      (_h = (_g = utils == null ? void 0 : utils.Toast) == null ? void 0 : _g.hide) == null ? void 0 : _h.call(_g);
+    }
+  };
+  const handleTDSPayChange = (res) => {
     var _a;
-    (_a = TDSPayRef2.current) == null ? void 0 : _a.init(card, order);
+    if ((res == null ? void 0 : res.key) === "bankVerifyFailed") {
+      setBankVerifyFailVisible(true);
+      return;
+    }
+    (_a = state.payCallback) == null ? void 0 : _a.call(state, res);
   };
-  const onCreate = (res) => {
+  const handleUseAnotherCard = () => {
+    setTdsErrorVisible(false);
+    setBankVerifyFailVisible(false);
+  };
+  const handleUseAnotherPayment = () => {
+    setTdsErrorVisible(false);
+    setBankVerifyFailVisible(false);
+    closeAll();
+  };
+  const handlePayLater = () => {
     var _a;
-    (_a = TDSPayRef2.current) == null ? void 0 : _a.init(res, order);
+    setTdsErrorVisible(false);
+    setBankVerifyFailVisible(false);
+    closeAll();
+    (_a = state.payCallback) == null ? void 0 : _a.call(state, { key: "cancel" });
   };
   (0, import_react.useImperativeHandle)(
     ref,
@@ -73,8 +194,31 @@ var MWCreditCard = (props, ref) => {
         var _a;
         (_a = AddMWCreditCardRef2.current) == null ? void 0 : _a.init();
       },
-      onChange: fastPay
+      onChange: fastPay,
+      btnLoading: loading
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(import_Add.default, { ref: AddMWCreditCardRef2, onCreate, shopName: props.shopName, btnLoading: loading }), /* @__PURE__ */ import_react.default.createElement(import_TDSPay.default, { ref: TDSPayRef2, onChange: handleTDSPayChange, closeAll }), /* @__PURE__ */ import_react.default.createElement(
+    import_TDSErrorModal.default,
+    {
+      open: tdsErrorVisible,
+      type: "tds-not-supported",
+      shopPhone: props.shopPhone,
+      shopEmail: props.shopEmail,
+      onUseAnotherCard: handleUseAnotherCard,
+      onUseAnotherPayment: handleUseAnotherPayment,
+      onPayLater: handlePayLater
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_TDSErrorModal.default,
+    {
+      open: bankVerifyFailVisible,
+      type: "bank-verify-failed",
+      shopPhone: props.shopPhone,
+      shopEmail: props.shopEmail,
+      onUseAnotherCard: handleUseAnotherCard,
+      onUseAnotherPayment: handleUseAnotherPayment,
+      onPayLater: handlePayLater
     }
-  ), /* @__PURE__ */ import_react.default.createElement(import_Add.default, { ref: AddMWCreditCardRef2, onCreate }), /* @__PURE__ */ import_react.default.createElement(import_TDSPay.default, { ref: TDSPayRef2, onChange: state.payCallback }));
+  ));
 };
 var MWCreditCard_default = (0, import_react.forwardRef)(MWCreditCard);