feat(upgrade): complete upgrade module

Author: hewenguang

src/App.tsx

@@ -6,8 +6,6 @@ import AppContext from '@/hooks/app-context';
 import Layout from '@/layout';
 import Error from '@/layout/error';
 
-const WeixinPay = lazy(() => import('@/page/pay'));
-
 const ChatPage = lazy(() => import('@/page/chat'));
 const ChatHomePage = lazy(() => import('@/page/chat/home'));
 const ChatConversationPage = lazy(() => import('@/page/chat/conversation'));
@@ -27,6 +25,8 @@ const WechatAuthConfirmPage = lazy(
 const GoogleAuthConfirmPage = lazy(
   () => import('@/page/user/google/auth-confirm')
 );
+const UpgradePage = lazy(() => import('@/page/upgrade'));
+const PaymentPage = lazy(() => import('@/page/upgrade/payment'));
 
 const SharePage = lazy(() => import('@/page/share'));
 const SharedResourcePage = lazy(() => import('@/page/shared-resource'));
@@ -82,12 +82,16 @@ const router = createBrowserRouter([
         element: <InvitePage />,
       },
       {
-        path: 'invite/:namespace_id/:invitation_id',
-        element: <InviteRedirectPage />,
+        path: 'upgrade',
+        element: <UpgradePage />,
       },
       {
-        path: 'single/pay',
-        element: <WeixinPay />,
+        path: 'upgrade/payment',
+        element: <PaymentPage />,
+      },
+      {
+        path: 'invite/:namespace_id/:invitation_id',
+        element: <InviteRedirectPage />,
       },
       {
         path: ':namespace_id',

src/interface.ts

@@ -280,3 +280,38 @@ export interface FileInfo {
   post_url: string;
   post_fields: [string, string][];
 }
+
+export enum OrderStatus {
+  PENDING = 'pending',
+  PAID = 'paid',
+  CLOSED = 'closed',
+  REFUNDED = 'refunded',
+}
+
+export enum PaymentMethod {
+  ALIPAY = 'alipay',
+  WECHAT = 'wechat',
+}
+
+export enum PaymentType {
+  NATIVE = 'native',
+  H5 = 'h5',
+  JSAPI = 'jsapi',
+}
+
+export interface Order extends IBase {
+  id: string;
+  order_no: string;
+  user_id: string;
+  product_id: string | null;
+  amount: number;
+  currency: string;
+  status: OrderStatus;
+  payment_method: PaymentMethod | null;
+  payment_type: PaymentType | null;
+  third_party_order_no: string | null;
+  description: string;
+  paid_at: string | null;
+  closed_at: string | null;
+  refunded_at: string | null;
+}

src/page/pay/index.tsx

@@ -1,4 +1,5 @@
 import { Sidebar, SidebarHeader, SidebarRail } from '@/components/ui/sidebar';
+import { UpgradeButton } from '@/page/upgrade/button';
 
 import Content from './content';
 import { FooterSidebar } from './footer';
@@ -31,6 +32,7 @@ export default function MainSidebar() {
         <SidebarHeader className="pt-[16px] gap-[10px] pr-0">
           <Switcher namespaceId={namespaceId} />
           <Header active={chatPage} onActiveKey={handleActiveKey} />
+          <UpgradeButton />
         </SidebarHeader>
         <Content
           data={data}

src/page/sidebar/index.tsx

@@ -0,0 +1,13 @@
+import { useNavigate } from 'react-router-dom';
+
+import { Button } from '@/components/ui/button';
+
+export function UpgradeButton() {
+  const navigate = useNavigate();
+
+  return (
+    <Button size="sm" onClick={() => navigate('/upgrade')}>
+      升级帐户
+    </Button>
+  );
+}

src/page/upgrade/button.tsx

@@ -0,0 +1,26 @@
+import { ArrowLeft } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+import { Button } from '@/components/ui/button';
+
+import { Product } from './product';
+
+export default function UpgradePage() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="container mx-auto py-8 px-4">
+      <div className="mb-6">
+        <Button variant="outline" onClick={() => navigate(-1)}>
+          <ArrowLeft className="h-4 w-4" />
+          返回
+        </Button>
+      </div>
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold mb-2">升级帐户</h1>
+        <p className="text-muted-foreground">选择适合您的套餐，解锁更多功能</p>
+      </div>
+      <Product />
+    </div>
+  );
+}