fix: #367 failed to fetch account usage

app/components/settings.tsx

@@ -72,7 +72,6 @@ export function Settings(props: { closeSettings: () => void }) {
   }
 
   const [usage, setUsage] = useState<{
-    granted?: number;
     used?: number;
   }>();
   const [loadingUsage, setLoadingUsage] = useState(false);
@@ -81,8 +80,7 @@ export function Settings(props: { closeSettings: () => void }) {
     requestUsage()
       .then((res) =>
         setUsage({
-          granted: res?.total_granted,
+          used: res,
-          used: res?.total_used,
         }),
       )
       .finally(() => {
@@ -285,7 +283,8 @@ export function Settings(props: { closeSettings: () => void }) {
               checked={config.sendPreviewBubble}
               onChange={(e) =>
                 updateConfig(
-                  (config) => (config.sendPreviewBubble = e.currentTarget.checked),
+                  (config) =>
+                    (config.sendPreviewBubble = e.currentTarget.checked),
                 )
               }
             ></input>
@@ -360,10 +359,7 @@ export function Settings(props: { closeSettings: () => void }) {
             subTitle={
               loadingUsage
                 ? Locale.Settings.Usage.IsChecking
-                : Locale.Settings.Usage.SubTitle(
+                : Locale.Settings.Usage.SubTitle(usage?.used ?? "[?]")
-                    usage?.granted ?? "[?]",
-                    usage?.used ?? "[?]",
-                  )
             }
           >
             {loadingUsage ? (

app/locales/cn.ts

@@ -103,8 +103,8 @@ const cn = {
     },
     Usage: {
       Title: "账户余额",
-      SubTitle(granted: any, used: any) {
+      SubTitle(used: any) {
-        return `总共 $${granted}，已使用 $${used}`;
+        return `本月已使用 $${used}`;
       },
       IsChecking: "正在检查…",
       Check: "重新检查",

app/locales/en.ts

@@ -105,8 +105,8 @@ const en: LocaleType = {
     },
     Usage: {
       Title: "Account Balance",
-      SubTitle(granted: any, used: any) {
+      SubTitle(used: any) {
-        return `Total $${granted}, Used $${used}`;
+        return `Used this month $${used}`;
       },
       IsChecking: "Checking...",
       Check: "Check Again",

app/locales/es.ts

@@ -105,8 +105,8 @@ const es: LocaleType = {
     },
     Usage: {
       Title: "Saldo de la cuenta",
-      SubTitle(granted: any, used: any) {
+      SubTitle(used: any) {
-        return `Total $${granted}, Usado $${used}`;
+        return `Usado $${used}`;
       },
       IsChecking: "Comprobando...",
       Check: "Comprobar de nuevo",

app/locales/tw.ts

@@ -103,8 +103,8 @@ const tw: LocaleType = {
     },
     Usage: {
       Title: "帳戶餘額",
-      SubTitle(granted: any, used: any) {
+      SubTitle(used: any) {
-        return `總共 $${granted}，已使用 $${used}`;
+        return `本月已使用 $${used}`;
       },
       IsChecking: "正在檢查…",
       Check: "重新檢查",

app/requests.ts

@@ -48,6 +48,7 @@ export function requestOpenaiClient(path: string) {
       method,
       headers: {
         "Content-Type": "application/json",
+        "Cache-Control": "no-cache",
         path,
         ...getHeaders(),
       },
@@ -69,17 +70,25 @@ export async function requestChat(messages: Message[]) {
 }
 
 export async function requestUsage() {
+  const formatDate = (d: Date) =>
+    `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, "0")}-${d
+      .getDate()
+      .toString()
+      .padStart(2, "0")}`;
+  const ONE_DAY = 24 * 60 * 60 * 1000;
+  const now = new Date(Date.now() + ONE_DAY);
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+  const startDate = formatDate(startOfMonth);
+  const endDate = formatDate(now);
   const res = await requestOpenaiClient(
-    "dashboard/billing/credit_grants?_vercel_no_cache=1",
+    `dashboard/billing/usage?start_date=${startDate}&end_date=${endDate}`,
   )(null, "GET");
 
   try {
     const response = (await res.json()) as {
-      total_available: number;
+      total_usage: number;
-      total_granted: number;
-      total_used: number;
     };
-    return response;
+    return Math.round(response.total_usage) / 100;
   } catch (error) {
     console.error("[Request usage] ", error, res.body);
   }