feat: add a billing holder page

2026-06-08 15:43:21 +08:00
parent 636190b8e6
commit 09821aab85
13 changed files with 170 additions and 1 deletions
@@ -0,0 +1,80 @@
+import { IconFont } from '@gpustack/core-ui';
+import { useIntl } from '@umijs/max';
+import { Button, Result, Typography } from 'antd';
+import PageBox from '../_components/page-box';
+
+// OSS-only upsell page for the billing module. The real Billing UI ships
+// in the enterprise plugin and shadows this route via
+// `routes.extensions.ts` — when the enterprise plugin is loaded, the
+// merger removes this entry by name. So this file is what users see on
+// the OSS build only.
+const Billing: React.FC = () => {
+  const intl = useIntl();
+  const features = [
+    'billing.upsell.feature.usage',
+    'billing.upsell.feature.invoices',
+    'billing.upsell.feature.budgets',
+    'billing.upsell.feature.chargeback'
+  ];
+  return (
+    <PageBox>
+      <div
+        style={{
+          // Use a viewport-relative min-height so flex centering has
+          // something to work against — percentage heights through
+          // PageBox's wrapper chain don't always resolve. The offset
+          // accounts for the global header + the page title bar.
+          minHeight: 'calc(100vh - 180px)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}
+      >
+        <Result
+          icon={
+            <IconFont
+              type="icon-billing-outlined"
+              style={{ fontSize: 64, color: 'var(--ant-color-primary)' }}
+            />
+          }
+          title={intl.formatMessage({ id: 'billing.upsell.title' })}
+          subTitle={intl.formatMessage({ id: 'billing.upsell.subtitle' })}
+          extra={
+            <div
+              style={{
+                maxWidth: 520,
+                margin: '0 auto',
+                textAlign: 'left'
+              }}
+            >
+              <Typography.Title level={5} style={{ marginBottom: 12 }}>
+                {intl.formatMessage({
+                  id: 'billing.upsell.featuresTitle'
+                })}
+              </Typography.Title>
+              <ul style={{ paddingLeft: 20, marginBottom: 24 }}>
+                {features.map((id) => (
+                  <li key={id} style={{ marginBottom: 6 }}>
+                    {intl.formatMessage({ id })}
+                  </li>
+                ))}
+              </ul>
+              <div style={{ textAlign: 'center' }}>
+                <Button
+                  type="primary"
+                  href="https://gpustack.ai/enterprise"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {intl.formatMessage({ id: 'billing.upsell.cta' })}
+                </Button>
+              </div>
+            </div>
+          }
+        />
+      </div>
+    </PageBox>
+  );
+};
+
+export default Billing;