From 25359575dbd0495ee8ceb8608194e4d58f471aae Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Fri, 25 Apr 2025 15:02:36 -0400
Subject: [PATCH] [Refactor] Extract user credit component (#3630)

---
 src/components/common/UserCredit.vue          | 39 +++++++++++++++++++
 .../content/TopUpCreditsDialogContent.vue     | 17 +-------
 .../dialog/content/setting/CreditsPanel.vue   | 23 +----------
 3 files changed, 43 insertions(+), 36 deletions(-)
 create mode 100644 src/components/common/UserCredit.vue

diff --git a/src/components/common/UserCredit.vue b/src/components/common/UserCredit.vue
new file mode 100644
index 000000000..e1abb7598
--- /dev/null
+++ b/src/components/common/UserCredit.vue
@@ -0,0 +1,39 @@
+<template>
+  <div v-if="balanceLoading" class="flex items-center gap-1">
+    <div class="flex items-center gap-2">
+      <Skeleton shape="circle" width="1.5rem" height="1.5rem" />
+    </div>
+    <div class="flex-1"></div>
+    <Skeleton width="8rem" height="2rem" />
+  </div>
+  <div v-else class="flex items-center gap-1">
+    <Tag
+      severity="secondary"
+      icon="pi pi-dollar"
+      rounded
+      class="text-amber-400 p-1"
+    />
+    <div :class="textClass">{{ formattedBalance }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Skeleton from 'primevue/skeleton'
+import Tag from 'primevue/tag'
+import { computed } from 'vue'
+
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { formatMetronomeCurrency } from '@/utils/formatUtil'
+
+const { textClass } = defineProps<{
+  textClass?: string
+}>()
+
+const authStore = useFirebaseAuthStore()
+const balanceLoading = computed(() => authStore.isFetchingBalance)
+
+const formattedBalance = computed(() => {
+  if (!authStore.balance) return '0.00'
+  return formatMetronomeCurrency(authStore.balance.amount_micros, 'usd')
+})
+</script>
diff --git a/src/components/dialog/content/TopUpCreditsDialogContent.vue b/src/components/dialog/content/TopUpCreditsDialogContent.vue
index d836874a6..5580bfdfd 100644
--- a/src/components/dialog/content/TopUpCreditsDialogContent.vue
+++ b/src/components/dialog/content/TopUpCreditsDialogContent.vue
@@ -16,15 +16,7 @@
           {{ $t('credits.yourCreditBalance') }}
         </div>
         <div class="flex items-center justify-between w-full">
-          <div class="flex items-center gap-2">
-            <Tag
-              severity="secondary"
-              icon="pi pi-dollar"
-              rounded
-              class="text-amber-400 p-1"
-            />
-            <span class="text-2xl">{{ formattedBalance }}</span>
-          </div>
+          <UserCredit text-class="text-2xl" />
           <Button
             outlined
             severity="secondary"
@@ -109,9 +101,9 @@ import ProgressSpinner from 'primevue/progressspinner'
 import Tag from 'primevue/tag'
 import { computed, onBeforeUnmount, ref } from 'vue'
 
+import UserCredit from '@/components/common/UserCredit.vue'
 import { useFirebaseAuthService } from '@/services/firebaseAuthService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { formatMetronomeCurrency } from '@/utils/formatUtil'
 
 const {
   isInsufficientCredits = false,
@@ -129,11 +121,6 @@ const customAmount = ref<number>(100)
 const didClickBuyNow = ref(false)
 const loading = computed(() => authStore.loading)
 
-const formattedBalance = computed(() => {
-  if (!authStore.balance) return '0.000'
-  return formatMetronomeCurrency(authStore.balance.amount_micros, 'usd')
-})
-
 const handleSeeDetails = async () => {
   await authService.accessBillingPortal()
 }
diff --git a/src/components/dialog/content/setting/CreditsPanel.vue b/src/components/dialog/content/setting/CreditsPanel.vue
index b8af03ab4..58a2b1190 100644
--- a/src/components/dialog/content/setting/CreditsPanel.vue
+++ b/src/components/dialog/content/setting/CreditsPanel.vue
@@ -12,22 +12,7 @@
           {{ $t('credits.yourCreditBalance') }}
         </h3>
         <div class="flex justify-between items-center">
-          <div v-if="balanceLoading" class="flex items-center gap-1">
-            <div class="flex items-center gap-2">
-              <Skeleton shape="circle" width="1.5rem" height="1.5rem" />
-            </div>
-            <div class="flex-1"></div>
-            <Skeleton width="8rem" height="2rem" />
-          </div>
-          <div v-else class="flex items-center gap-1">
-            <Tag
-              severity="secondary"
-              icon="pi pi-dollar"
-              rounded
-              class="text-amber-400 p-1"
-            />
-            <div class="text-3xl font-bold">{{ formattedBalance }}</div>
-          </div>
+          <UserCredit text-class="text-3xl font-bold" />
           <Skeleton v-if="loading" width="2rem" height="2rem" />
           <Button
             v-else
@@ -123,10 +108,10 @@ import DataTable from 'primevue/datatable'
 import Divider from 'primevue/divider'
 import Skeleton from 'primevue/skeleton'
 import TabPanel from 'primevue/tabpanel'
-import Tag from 'primevue/tag'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import UserCredit from '@/components/common/UserCredit.vue'
 import { useDialogService } from '@/services/dialogService'
 import { useFirebaseAuthService } from '@/services/firebaseAuthService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
@@ -145,10 +130,6 @@ const authStore = useFirebaseAuthStore()
 const authService = useFirebaseAuthService()
 const loading = computed(() => authStore.loading)
 const balanceLoading = computed(() => authStore.isFetchingBalance)
-const formattedBalance = computed(() => {
-  if (!authStore.balance) return '0.00'
-  return formatMetronomeCurrency(authStore.balance.amount_micros, 'usd')
-})
 
 const formattedLastUpdateTime = computed(() =>
   authStore.lastBalanceUpdateTime