feat(web): billing page

labring · May 30, 2023 · 5d2a93b · 5d2a93b
1 parent f6aa6b3
commit 5d2a93b
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 42 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -175,11 +175,15 @@
     "Tel": "Mobile",
     "TelTip": "Please enter a valid Mobile phone number",
     "ToAuth": "Authenticate Now",
-    "UserInfo": "User Information",
+    "UserInfo": "UserInfo",
     "noAuth": "Not Authenticated",
     "showAuth": "Go to Auth",
     "ShutDown": "ShutDown",
-    "Subscription": "Subscription Info"
+    "Subscription": "Subscription Info",
+    "Usage": "Usage",
+    "Avatar": "Avatar",
+    "UserName": "UserName",
+    "Email": "Email"
   },
   "StoragePanel": {
     "All": "Total Capacity",
@@ -432,4 +436,4 @@
   "Fee": "Fee",
   "PleaseCloseApplicationFirst": "Please close your application first.",
   "custom": "Custom"
-}
+}
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -179,7 +179,11 @@
     "TelTip": "请输入有效的手机号码",
     "Registered": "注册时间",
     "ShutDown": "关闭应用",
-    "Subscription": "订阅信息"
+    "Subscription": "订阅信息",
+    "Usage": "费用中心",
+    "Avatar": "头像",
+    "UserName": "用户名",
+    "Email": "邮箱"
   },
   "StoragePanel": {
     "All": "总容量",
@@ -432,4 +436,4 @@
   "Fee": "费用",
   "PleaseCloseApplicationFirst": "请先关闭应用",
   "custom": "自定义"
-}
+}
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -179,7 +179,11 @@
     "TelTip": "请输入有效的手机号码",
     "Registered": "注册时间",
     "ShutDown": "关闭应用",
-    "Subscription": "订阅信息"
+    "Subscription": "订阅信息",
+    "Usage": "费用中心",
+    "Avatar": "头像",
+    "UserName": "用户名",
+    "Email": "邮箱"
   },
   "StoragePanel": {
     "All": "总容量",
@@ -432,4 +436,4 @@
   "Fee": "费用",
   "PleaseCloseApplicationFirst": "请先关闭应用",
   "custom": "自定义"
-}
+}
diff --git a/web/src/apis/v1/api-auto.d.ts b/web/src/apis/v1/api-auto.d.ts
@@ -24,7 +24,6 @@ declare namespace Definitions {
     memory?: number;
     databaseCapacity?: number;
     storageCapacity?: number;
-    isTrialTier?: boolean;
     name?: string;
     state?: string;
     regionId?: string;
@@ -77,7 +76,6 @@ declare namespace Definitions {
     memory?: number;
     databaseCapacity?: number;
     storageCapacity?: number;
-    isTrialTier?: boolean;
   };
 
   export type ApplicationBundle = {
@@ -300,12 +298,11 @@ declare namespace Definitions {
   };
 
   export type CalculatePriceDto = {
-    regionId?: string;
     cpu?: number;
     memory?: number;
     databaseCapacity?: number;
     storageCapacity?: number;
-    isTrialTier?: boolean;
+    regionId?: string;
   };
 
   export type CalculatePriceResultDto = {

diff --git a/web/src/layouts/Header/UserSetting/index.tsx b/web/src/layouts/Header/UserSetting/index.tsx
@@ -5,6 +5,7 @@ import i18n from "@/utils/i18n";
 
 import SettingModal, { TabKeys } from "@/pages/app/setting";
 import PATList from "@/pages/app/setting/PATList";
+import Usage from "@/pages/app/setting/Usage";
 import UserInfo from "@/pages/app/setting/UserInfo";
 export default function UserSetting(props: { name: string; avatar?: string; width: string }) {
   const { t } = useTranslation();
@@ -30,6 +31,11 @@ export default function UserSetting(props: { name: string; avatar?: string; widt
               name: String(t("SettingPanel.UserInfo")),
               component: <UserInfo />,
             },
+            {
+              key: "app-usage",
+              name: String(t("SettingPanel.Usage")),
+              component: <Usage />,
+            },
             {
               key: "pat",
               name: t("Personal Access Token"),

diff --git a/web/src/pages/app/setting/Usage/index.tsx b/web/src/pages/app/setting/Usage/index.tsx
@@ -0,0 +1,59 @@
+import { useTranslation } from "react-i18next";
+import { HStack, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react";
+import { useQuery } from "@tanstack/react-query";
+
+import ChargeButton from "@/components/ChargeButton";
+
+import { BillingControllerFindAllByAppId } from "@/apis/v1/apps";
+import { useAccountQuery } from "@/pages/home/service";
+
+export default function Usage() {
+  const { data: accountRes } = useAccountQuery();
+
+  const { data: billingRes } = useQuery(["billing"], async () => {
+    return BillingControllerFindAllByAppId({
+      appid: "g92ged",
+    });
+  });
+
+  const { t } = useTranslation();
+  return (
+    <div>
+      <h1 className="mb-4 text-2xl font-bold">Usage</h1>
+      <HStack className="mt-4">
+        <span className=" text-grayModern-500">{t("Balance")}:</span>
+        <span>{accountRes?.data?.balance}</span>
+        <ChargeButton>
+          <span className="cursor-pointer text-blue-800">{t("ChargeNow")}</span>
+        </ChargeButton>
+      </HStack>
+
+      <div className="mt-4">
+        <TableContainer>
+          <Table variant="striped" colorScheme="gray">
+            <Thead>
+              <Tr>
+                <Th>AppId</Th>
+                <Th>费用</Th>
+                <Th>扣费时间</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {(billingRes?.data?.list || []).map((item: Definitions.ApplicationBilling) => (
+                <Tr key={item._id}>
+                  <Td>{item.appid}</Td>
+                  <Td>
+                    {item.amount} CPU: {item.detail?.cpu?.amount} Memory:{" "}
+                    {item.detail?.memory?.amount} Database: {item.detail?.databaseCapacity?.amount}{" "}
+                    Storage: {item.detail?.storageCapacity?.amount}
+                  </Td>
+                  <Td>{item.createdAt}</Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/pages/app/setting/UserInfo/index.tsx b/web/src/pages/app/setting/UserInfo/index.tsx
@@ -1,23 +1,22 @@
 import { useState } from "react";
-import { Avatar, Box, HStack, useColorMode } from "@chakra-ui/react";
-import clsx from "clsx";
+import { Avatar, Box, HStack } from "@chakra-ui/react";
 import { t } from "i18next";
 
-import { COLOR_MODE } from "@/constants";
+import ChargeButton from "@/components/ChargeButton";
 import { formatDate, hidePhoneNumber } from "@/utils/format";
 
 import AuthDetail from "./AuthDetail";
 
 import useGlobalStore from "@/pages/globalStore";
+import { useAccountQuery } from "@/pages/home/service";
 export default function UserInfo() {
   const [showAuth, setShowAuth] = useState(false);
 
   const { userInfo } = useGlobalStore((state) => state);
-  const { colorMode } = useColorMode();
-  const darkMode = colorMode === COLOR_MODE.dark;
+  const { data: accountRes } = useAccountQuery();
 
   return (
-    <div className="flex h-full flex-col items-center justify-center">
+    <div className="flex h-full flex-col ">
       {showAuth ? (
         <AuthDetail
           onBack={() => {
@@ -26,23 +25,9 @@ export default function UserInfo() {
         />
       ) : (
         <>
-          <Box className="relative text-center">
-            <Avatar
-              size="lg"
-              name={userInfo?.username}
-              src={userInfo?.profile?.avatar}
-              bgColor="primary.500"
-              color="white"
-              boxShadow="base"
-            />
-            <p
-              className={clsx("mb-2 text-center text-3xl font-medium", {
-                "text-grayModern-900": !darkMode,
-              })}
-            >
-              {userInfo?.username}
-            </p>
-            {/* <span className="inline-block px-2 h-[24px]  rounded-full border border-grayModern-400 text-grayModern-400 pt-[1px]">
+          <h1 className="mb-4 text-2xl font-bold">{t("SettingPanel.UserInfo")}</h1>
+          {/*  <div className="relative flex items-center">
+            <span className="inline-block px-2 h-[24px]  rounded-full border border-grayModern-400 text-grayModern-400 pt-[1px]">
               {t("SettingPanel.noAuth")}
             </span>
             <span
@@ -52,15 +37,46 @@ export default function UserInfo() {
               }}
             >
               {t("SettingPanel.showAuth")}
-            </span> */}
-          </Box>
-          <Box className="mb-20 mt-8 text-lg">
-            <HStack spacing={8}>
-              <span className="w-[80px] text-grayModern-500">{t("SettingPanel.Tel")}:</span>
+            </span>
+          </div> */}
+          <Box className="text-lg">
+            <HStack>
+              <span className=" text-grayModern-500">{t("SettingPanel.Avatar")}:</span>
+              <Avatar
+                size={"xs"}
+                name={userInfo?.username}
+                src={userInfo?.profile?.avatar}
+                bgColor="primary.500"
+                color="white"
+                boxShadow="base"
+              />
+            </HStack>
+
+            <HStack className="mt-4">
+              <span className=" text-grayModern-500">{t("Balance")}:</span>
+              <span>{accountRes?.data?.balance}</span>
+              <ChargeButton>
+                <span className="cursor-pointer text-blue-800">{t("ChargeNow")}</span>
+              </ChargeButton>
+            </HStack>
+
+            <HStack className="mt-4">
+              <span className=" text-grayModern-500">{t("SettingPanel.UserName")}:</span>
+              <span>{userInfo?.username}</span>
+            </HStack>
+
+            <HStack className="mt-4">
+              <span className=" text-grayModern-500">{t("SettingPanel.Email")}:</span>
+              <span>{userInfo?.email ? userInfo?.email : "-"}</span>
+            </HStack>
+
+            <HStack className="mt-4">
+              <span className=" text-grayModern-500">{t("SettingPanel.Tel")}:</span>
               <span>{userInfo?.phone ? hidePhoneNumber(userInfo.phone) : t("NoInfo")}</span>
             </HStack>
-            <HStack spacing={8} className="mt-2">
-              <span className="w-[80px] text-grayModern-500">{t("SettingPanel.Registered")}:</span>
+
+            <HStack className="mt-4">
+              <span className=" text-grayModern-500">{t("SettingPanel.Registered")}:</span>
               <span>{formatDate(userInfo?.createdAt)}</span>
             </HStack>
           </Box>

diff --git a/web/src/pages/app/setting/index.tsx b/web/src/pages/app/setting/index.tsx
@@ -75,7 +75,7 @@ const SettingModal = (props: {
                   );
                 })}
               </SectionList>
-              <div className="w-full">
+              <div className="w-full p-2">
                 {React.cloneElement(item?.component || <></>, {
                   onClose,
                 })}