@pisell/private-materials 6.3.109 → 6.3.111

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

@@ -71,7 +71,7 @@ var formatName = (card_name) => {
   }
 };
 var AddMWCreditCard = (props, ref) => {
-  const { onCreate } = props;
+  const { onCreate, shopName = "", btnLoading = false } = props;
   const [open, setOpen] = (0, import_react.useState)(false);
   const [form] = import_antd.Form.useForm();
   const { state } = (0, import_react.useContext)(import_model.Context);
@@ -147,12 +147,16 @@ var AddMWCreditCard = (props, ref) => {
   const onSubmit = () => {
     form.submit();
   };
+  const close = () => {
+    setOpen(false);
+  };
   (0, import_react.useImperativeHandle)(
     ref,
     () => ({
       init,
       onReset,
-      onSubmit
+      onSubmit,
+      close
     })
   );
   const okText = (0, import_react.useMemo)(() => {
@@ -167,15 +171,37 @@ var AddMWCreditCard = (props, ref) => {
   return /* @__PURE__ */ import_react.default.createElement(
     import_materials.PisellModal,
     {
-      title: /* @__PURE__ */ import_react.default.createElement("div", null, import_utils.locales.getText("tocPay.text.addCard")),
+      title: /* @__PURE__ */ import_react.default.createElement("div", { className: "secure-card-payment-title" }, import_utils.locales.getText("tocPay.text.secureCardPayment"), /* @__PURE__ */ import_react.default.createElement(
+        import_materials.Iconfont,
+        {
+          type: "pisell2-shield-tick",
+          className: "secure-card-payment-title-icon"
+        }
+      )),
       open,
       onCancel,
       cancelVisible: false,
       onOk: onSubmit,
       okText,
-      bodyStyle: { padding: 24 }
+      bodyStyle: { padding: 24, display: "flex", flexDirection: "column" },
+      okButtonProps: {
+        loading: btnLoading,
+        style: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        }
+      }
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "" }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "add-mw-credit-card-wrap" }, /* @__PURE__ */ import_react.default.createElement(
+      import_materials.PisellAlert,
+      {
+        className: "secure-card-tip-alert",
+        icon: /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-shield-tick" }),
+        showIcon: true,
+        message: import_utils.locales.getText("tocPay.text.secureBankInfo")
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
       import_antd.Form,
       {
         layout: "vertical",
@@ -246,24 +272,21 @@ var AddMWCreditCard = (props, ref) => {
             placeholder: import_utils.locales.getText("tocPay.text.incorrectName")
           }
         )
-      )), /* @__PURE__ */ import_react.default.createElement(import_antd.Col, { span: 24 }, /* @__PURE__ */ import_react.default.createElement(
+      ))),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "merchant-authorization-text" }, import_utils.locales.getText("tocPay.text.merchantAuthorizationBefore"), /* @__PURE__ */ import_react.default.createElement("span", { className: "merchant-shop-name" }, shopName), import_utils.locales.getText("tocPay.text.merchantAuthorizationAfter")),
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { className: "secure-card-divider" }),
+      /* @__PURE__ */ import_react.default.createElement(
         import_antd.Form.Item,
         {
           name: "is_save",
           valuePropName: "checked",
-          initialValue: true
+          initialValue: true,
+          className: "save-card-form-item"
         },
         /* @__PURE__ */ import_react.default.createElement(import_antd.Checkbox, null, /* @__PURE__ */ import_react.default.createElement("span", { className: "save-card-checkbox-text" }, import_utils.locales.getText("tocPay.text.saveCardForNextTime")))
-      )), /* @__PURE__ */ import_react.default.createElement(import_antd.Col, { span: 24 }, /* @__PURE__ */ import_react.default.createElement(
-        import_materials.PisellAlert,
-        {
-          className: "save-card-alert",
-          icon: /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-shield-tick" }),
-          showIcon: true,
-          message: import_utils.locales.getText("tocPay.text.secureBankInfo")
-        }
-      )))
-    ))
+      ),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: "save-card-encryption-text" }, import_utils.locales.getText("tocPay.text.saveCardEncryption"))
+    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "three-d-secure-section" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "three-d-secure-badge" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Iconfont, { type: "pisell2-shield-01", className: "three-d-secure-icon" }), /* @__PURE__ */ import_react.default.createElement("span", { className: "three-d-secure-badge-text" }, "3D")), /* @__PURE__ */ import_react.default.createElement("span", { className: "three-d-secure-text" }, import_utils.locales.getText("tocPay.text.threeDSecureProtection"))))
   );
 };
 var Add_default = (0, import_react.forwardRef)(AddMWCreditCard);

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

@@ -50,7 +50,13 @@ var MWCreditCardList = (props, ref) => {
   const [manage, setManage] = (0, import_react.useState)(false);
   const [order, setOrder] = (0, import_react.useState)(null);
   const _getCreditCardList = async () => {
+    var _a;
     const cardList = await (0, import_serve.getCreditCardList)();
+    if (!cardList.length) {
+      (_a = props.onAdd) == null ? void 0 : _a.call(props);
+      setLoading(false);
+      return;
+    }
     setCreditCardList(cardList);
     if (cardList.length) {
       setCurrentCard(cardList[0].id);
@@ -64,15 +70,18 @@ var MWCreditCardList = (props, ref) => {
     setOrder(_order);
     setOpen(true);
     setManage(false);
-    setOkLoading(false);
     setCurrentCard(0);
     _getCreditCardList();
   };
   const cardChange = (id) => {
     setCurrentCard(id);
   };
+  const close = () => {
+    setOpen(false);
+  };
   (0, import_react.useImperativeHandle)(ref, () => ({
-    init
+    init,
+    close
   }));
   const renderOption = (d, active) => {
     return /* @__PURE__ */ import_react.default.createElement(
@@ -139,7 +148,6 @@ var MWCreditCardList = (props, ref) => {
       });
     }
   };
-  const [okLoading, setOkLoading] = (0, import_react.useState)(false);
   const { run: onOk } = (0, import_ahooks.useDebounceFn)(
     () => {
       var _a;
@@ -148,7 +156,6 @@ var MWCreditCardList = (props, ref) => {
         handleBatchDeleteCards();
         return;
       }
-      setOkLoading(true);
       let cur = creditCardList.find((d) => d.id === currentCard);
       (_a = props.onChange) == null ? void 0 : _a.call(props, cur);
     },
@@ -186,7 +193,12 @@ var MWCreditCardList = (props, ref) => {
       onOk,
       okButtonProps: {
         disabled: !currentCard,
-        loading: okLoading
+        loading: props.btnLoading,
+        style: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        }
       },
       bodyStyle: { padding: 24 }
     },

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

@@ -36,7 +36,13 @@ var import_react = __toESM(require("react"));
 var import_useEngineContext = __toESM(require("../../../../../../../hooks/useEngineContext"));
 var import_index = require("./index.less");
 var import_utils = require("@pisell/utils");
-var ThreedsLoading = ({ title, showSuccessBackButton, onSuccessBack }) => {
+var ThreedsLoading = ({
+  title,
+  subtitle,
+  description,
+  showSuccessBackButton,
+  onSuccessBack
+}) => {
   var _a;
   const context = (0, import_useEngineContext.default)();
   const { config } = ((_a = context.appHelper) == null ? void 0 : _a.constants) || {};
@@ -47,6 +53,6 @@ var ThreedsLoading = ({ title, showSuccessBackButton, onSuccessBack }) => {
       src: config.static + "/static/stripe_loading.gif",
       alt: ""
     }
-  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "threeds-loading-title" }, title || import_utils.locales.getText("tocPay.text.waitingForBankVerification")), showSuccessBackButton && /* @__PURE__ */ import_react.default.createElement("div", { onClick: onSuccessBack, className: "threeds-loading-success-back-button" }, import_utils.locales.getText("tocPay.text.successBack")));
+  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "threeds-loading-title" }, title || import_utils.locales.getText("tocPay.text.waitingForBankVerification")), subtitle && /* @__PURE__ */ import_react.default.createElement("div", { className: "threeds-loading-subtitle" }, subtitle), description && /* @__PURE__ */ import_react.default.createElement("div", { className: "threeds-loading-description" }, description), showSuccessBackButton && /* @__PURE__ */ import_react.default.createElement("div", { onClick: onSuccessBack, className: "threeds-loading-success-back-button" }, import_utils.locales.getText("tocPay.text.successBack")));
 };
 var ThreedsLoading_default = ThreedsLoading;

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

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;
+}