feat: require compliance confirmation for paid features

Gate payment, redemption, subscription, and invitation reward flows behind an audited compliance acknowledgement.
2026-05-13 22:18:46 +08:00
parent aa56667b8f
commit 0526a22643
57 changed files with 1806 additions and 216 deletions
@@ -20,7 +20,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import { Button } from '@douyinfe/semi-ui';

-const SubscriptionsActions = ({ openCreate, t }) => {
+const SubscriptionsActions = ({ openCreate, t, disabled = false }) => {
  return (
    <div className='flex gap-2 w-full md:w-auto'>
      <Button
@@ -28,6 +28,7 @@ const SubscriptionsActions = ({ openCreate, t }) => {
        className='w-full md:w-auto'
        onClick={openCreate}
        size='small'
+        disabled={disabled}
      >
        {t('新建套餐')}
      </Button>
@@ -228,7 +228,11 @@ const renderPaymentConfig = (text, record, t, enableEpay) => {
  );
 };

-const renderOperations = (text, record, { openEdit, setPlanEnabled, t }) => {
+const renderOperations = (
+  text,
+  record,
+  { openEdit, setPlanEnabled, t, complianceConfirmed },
+) => {
  const isEnabled = record?.plan?.enabled;

  const handleToggle = () => {
@@ -256,11 +260,18 @@ const renderOperations = (text, record, { openEdit, setPlanEnabled, t }) => {
        type='tertiary'
        size='small'
        onClick={() => openEdit(record)}
+        disabled={!complianceConfirmed}
      >
        {t('编辑')}
      </Button>
      {isEnabled ? (
-        <Button theme='light' type='danger' size='small' onClick={handleToggle}>
+        <Button
+          theme='light'
+          type='danger'
+          size='small'
+          onClick={handleToggle}
+          disabled={!complianceConfirmed}
+        >
          {t('禁用')}
        </Button>
      ) : (
@@ -269,6 +280,7 @@ const renderOperations = (text, record, { openEdit, setPlanEnabled, t }) => {
          type='primary'
          size='small'
          onClick={handleToggle}
+          disabled={!complianceConfirmed}
        >
          {t('启用')}
        </Button>
@@ -282,6 +294,7 @@ export const getSubscriptionsColumns = ({
  openEdit,
  setPlanEnabled,
  enableEpay,
+  complianceConfirmed = true,
 }) => {
  return [
    {
@@ -351,7 +364,12 @@ export const getSubscriptionsColumns = ({
      fixed: 'right',
      width: 160,
      render: (text, record) =>
-        renderOperations(text, record, { openEdit, setPlanEnabled, t }),
+        renderOperations(text, record, {
+          openEdit,
+          setPlanEnabled,
+          t,
+          complianceConfirmed,
+        }),
    },
  ];
 };
@@ -35,6 +35,7 @@ const SubscriptionsTable = (subscriptionsData) => {
    setPlanEnabled,
    t,
    enableEpay,
+    complianceConfirmed,
  } = subscriptionsData;

  const columns = useMemo(() => {
@@ -43,8 +44,9 @@ const SubscriptionsTable = (subscriptionsData) => {
      openEdit,
      setPlanEnabled,
      enableEpay,
+      complianceConfirmed,
    });
-  }, [t, openEdit, setPlanEnabled, enableEpay]);
+  }, [t, openEdit, setPlanEnabled, enableEpay, complianceConfirmed]);

  const tableColumns = useMemo(() => {
    return compactMode
@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */

-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Banner } from '@douyinfe/semi-ui';
 import CardPro from '../../common/ui/CardPro';
 import SubscriptionsTable from './SubscriptionsTable';
@@ -28,12 +28,14 @@ import { useSubscriptionsData } from '../../../hooks/subscriptions/useSubscripti
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { createCardProPagination } from '../../../helpers/utils';
 import { StatusContext } from '../../../context/Status';
+import { API } from '../../../helpers';

 const SubscriptionsPage = () => {
  const subscriptionsData = useSubscriptionsData();
  const isMobile = useIsMobile();
  const [statusState] = useContext(StatusContext);
  const enableEpay = !!statusState?.status?.enable_online_topup;
+  const [complianceConfirmed, setComplianceConfirmed] = useState(true);

  const {
    showEdit,
@@ -47,6 +49,22 @@ const SubscriptionsPage = () => {
    t,
  } = subscriptionsData;

+  useEffect(() => {
+    const loadComplianceStatus = async () => {
+      try {
+        const res = await API.get('/api/user/topup/info');
+        if (res.data?.success) {
+          setComplianceConfirmed(
+            res.data.data?.payment_compliance_confirmed !== false,
+          );
+        }
+      } catch (error) {
+        // Keep the page usable if status loading fails; backend still enforces.
+      }
+    };
+    loadComplianceStatus();
+  }, []);
+
  return (
    <>
      <AddEditSubscriptionModal
@@ -71,7 +89,11 @@ const SubscriptionsPage = () => {
          <div className='flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full'>
            {/* Mobile: actions first; Desktop: actions left */}
            <div className='order-1 md:order-0 w-full md:w-auto'>
-              <SubscriptionsActions openCreate={openCreate} t={t} />
+              <SubscriptionsActions
+                openCreate={openCreate}
+                t={t}
+                disabled={!complianceConfirmed}
+              />
            </div>
            <Banner
              type='info'
@@ -94,7 +116,21 @@ const SubscriptionsPage = () => {
        })}
        t={t}
      >
-        <SubscriptionsTable {...subscriptionsData} enableEpay={enableEpay} />
+        {!complianceConfirmed && (
+          <Banner
+            type='warning'
+            description={t(
+              '订阅套餐创建和变更已锁定，管理员需先在支付设置中确认合规声明。',
+            )}
+            closeIcon={null}
+            className='!rounded-lg mb-3'
+          />
+        )}
+        <SubscriptionsTable
+          {...subscriptionsData}
+          enableEpay={enableEpay}
+          complianceConfirmed={complianceConfirmed}
+        />
      </CardPro>
    </>
  );