feat(web): add user billing page (#1195)

labring · May 31, 2023 · 2fed138 · 2fed138
1 parent ac49ded
commit 2fed138
Show file tree

Hide file tree

Showing 19 changed files with 364 additions and 218 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",
@@ -431,5 +435,9 @@
   "ServerStatus": "STATUS",
   "Fee": "Fee",
   "PleaseCloseApplicationFirst": "Please close your application first.",
-  "custom": "Custom"
-}
+  "custom": "Custom",
+  "CostTime": "CostTime",
+  "Duration": "Duration",
+  "State": "State",
+  "TotalAmount": "Total"
+}
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": "总容量",
@@ -431,5 +435,8 @@
   "ServerStatus": "服务状态",
   "Fee": "费用",
   "PleaseCloseApplicationFirst": "请先关闭应用",
-  "custom": "自定义"
-}
+  "custom": "自定义",
+  "CostTime": "扣费时间",
+  "Duration": "计费周期",
+  "TotalAmount": "总费用"
+}
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": "总容量",
@@ -431,5 +435,9 @@
   "ServerStatus": "服务状态",
   "Fee": "费用",
   "PleaseCloseApplicationFirst": "请先关闭应用",
-  "custom": "自定义"
-}
+  "custom": "自定义",
+  "CostTime": "扣费时间",
+  "Duration": "计费周期",
+  "State": "状态",
+  "TotalAmount": "总费用"
+}
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 = {
@@ -984,15 +981,7 @@ declare namespace Paths {
     export type Responses = any;
   }
 
-  namespace BillingControllerFindAllByAppId {
-    export type QueryParameters = any;
-
-    export type BodyParameters = any;
-
-    export type Responses = any;
-  }
-
-  namespace BillingControllerFindOne {
+  namespace BillingControllerFindAll {
     export type QueryParameters = any;
 
     export type BodyParameters = any;

diff --git a/web/src/apis/v1/apps.ts b/web/src/apis/v1/apps.ts
@@ -841,43 +841,3 @@ export async function DependencyControllerRemove(params: Definitions.DeleteDepen
     data: params,
   });
 }
-
-/**
- * Get billings of an application
- */
-export async function BillingControllerFindAllByAppId(
-  params: Paths.BillingControllerFindAllByAppId.BodyParameters,
-): Promise<{
-  error: string;
-  data: Paths.BillingControllerFindAllByAppId.Responses;
-}> {
-  // /v1/apps/{appid}/billings
-  let _params: { [key: string]: any } = {
-    appid: useGlobalStore.getState().currentApp?.appid || "",
-    ...params,
-  };
-  return request(`/v1/apps/${_params.appid}/billings`, {
-    method: "GET",
-    params: params,
-  });
-}
-
-/**
- * Get billing by id
- */
-export async function BillingControllerFindOne(
-  params: Paths.BillingControllerFindOne.BodyParameters,
-): Promise<{
-  error: string;
-  data: Definitions.ApplicationBilling;
-}> {
-  // /v1/apps/{appid}/billings/{id}
-  let _params: { [key: string]: any } = {
-    appid: useGlobalStore.getState().currentApp?.appid || "",
-    ...params,
-  };
-  return request(`/v1/apps/${_params.appid}/billings/${_params.id}`, {
-    method: "GET",
-    params: params,
-  });
-}
diff --git a/web/src/apis/v1/billings.ts b/web/src/apis/v1/billings.ts
@@ -0,0 +1,31 @@
+// @ts-ignore
+/* eslint-disable */
+///////////////////////////////////////////////////////////////////////
+//                                                                   //
+// this file is autogenerated by service-generate                    //
+// do not edit this file manually                                    //
+//                                                                   //
+///////////////////////////////////////////////////////////////////////
+/// <reference path = "api-auto.d.ts" />
+import request from "@/utils/request";
+import useGlobalStore from "@/pages/globalStore";
+
+/**
+ * Get billings of an application
+ */
+export async function BillingControllerFindAll(
+  params: Paths.BillingControllerFindAll.BodyParameters,
+): Promise<{
+  error: string;
+  data: Paths.BillingControllerFindAll.Responses;
+}> {
+  // /v1/billings
+  let _params: { [key: string]: any } = {
+    appid: useGlobalStore.getState().currentApp?.appid || "",
+    ...params,
+  };
+  return request(`/v1/billings`, {
+    method: "GET",
+    params: params,
+  });
+}
diff --git a/web/src/components/EditableTable/NormalTr/index.tsx b/web/src/components/EditableTable/NormalTr/index.tsx
@@ -26,40 +26,34 @@ const NormalTr = function (props: {
           </Td>
         );
       })}
-      <Td maxWidth="150px" className="flex">
-        <>
-          {configuration?.operationButtonsRender
-            ? configuration.operationButtonsRender(data)
-            : null}
-          {!configuration?.hiddenEditButton ? (
-            <IconWrap
-              className="mr-2"
-              tooltip={
-                configuration?.editButtonText ? configuration.editButtonText : t("Edit").toString()
-              }
-              size={20}
-            >
-              <EditIcon fontSize={15} onClick={() => onEdit(data[configuration.key])} />
-            </IconWrap>
-          ) : null}
-          <ConfirmButton
-            onSuccessAction={() => onDelete(data[configuration.key])}
-            headerText={
+      <Td className="mr-2 flex items-end justify-end">
+        {configuration?.operationButtonsRender ? configuration.operationButtonsRender(data) : null}
+        {!configuration?.hiddenEditButton ? (
+          <IconWrap
+            className="mr-2"
+            tooltip={
+              configuration?.editButtonText ? configuration.editButtonText : t("Edit").toString()
+            }
+            size={20}
+          >
+            <EditIcon fontSize={15} onClick={() => onEdit(data[configuration.key])} />
+          </IconWrap>
+        ) : null}
+        <ConfirmButton
+          onSuccessAction={() => onDelete(data[configuration.key])}
+          headerText={
+            configuration?.deleteButtonText ? configuration.deleteButtonText : String(t("Delete"))
+          }
+          bodyText={t("DeleteConfirm")}
+        >
+          <IconWrap
+            tooltip={
               configuration?.deleteButtonText ? configuration.deleteButtonText : String(t("Delete"))
             }
-            bodyText={t("DeleteConfirm")}
           >
-            <IconWrap
-              tooltip={
-                configuration?.deleteButtonText
-                  ? configuration.deleteButtonText
-                  : String(t("Delete"))
-              }
-            >
-              <DeleteIcon fontSize={15} />
-            </IconWrap>
-          </ConfirmButton>
-        </>
+            <DeleteIcon fontSize={15} />
+          </IconWrap>
+        </ConfirmButton>
       </Td>
     </>
   );

diff --git a/web/src/components/EditableTable/index.tsx b/web/src/components/EditableTable/index.tsx
@@ -98,7 +98,9 @@ const EditableTable = function (props: {
                 {columnList.map((item: TColumnItem) => {
                   return <Th key={item.key}>{item.name}</Th>;
                 })}
-                <Th key="operation">{t("Operation")}</Th>
+                <Th key="operation" isNumeric>
+                  {t("Operation")}
+                </Th>
               </Tr>
             </Thead>
             <Tbody className="font-mono">