[Refactor] Extract CreditTopUpOption component (#3685)

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -34,58 +34,14 @@
         >{{ $t('credits.topUp.quickPurchase') }}:</span
       >
       <div class="grid grid-cols-[2fr_1fr] gap-2">
-        <template v-for="amount in amountOptions" :key="amount">
-          <div class="flex items-center gap-2">
-            <Tag
-              severity="secondary"
-              icon="pi pi-dollar"
-              rounded
-              class="text-amber-400 p-1"
-            />
-            <span class="text-xl">{{ amount }}</span>
-          </div>
-          <Button
-            :severity="
-              preselectedAmountOption === amount ? 'primary' : 'secondary'
-            "
-            :outlined="preselectedAmountOption !== amount"
-            :label="$t('credits.topUp.buyNow')"
-            @click="handleBuyNow(amount)"
-          />
-        </template>
-
-        <div class="flex items-center gap-2">
-          <Tag
-            severity="secondary"
-            icon="pi pi-dollar"
-            rounded
-            class="text-amber-400 p-1"
-          />
-          <InputNumber
-            v-model="customAmount"
-            :min="1"
-            :max="1000"
-            :step="1"
-            show-buttons
-            :allow-empty="false"
-            :highlight-on-focus="true"
-            pt:pc-input-text:root="w-24"
-            @blur="
-              (e: InputNumberBlurEvent) => (customAmount = Number(e.value))
-            "
-            @input="
-              (e: InputNumberInputEvent) => (customAmount = Number(e.value))
-            "
-          />
-        </div>
-        <ProgressSpinner v-if="loading" class="w-8 h-8" />
-        <Button
-          v-else
-          :label="$t('credits.topUp.buyNow')"
-          severity="secondary"
-          outlined
-          @click="handleBuyNow(customAmount)"
+        <CreditTopUpOption
+          v-for="amount in amountOptions"
+          :key="amount"
+          :amount="amount"
+          :preselected="amount === preselectedAmountOption"
         />
+
+        <CreditTopUpOption :amount="100" :preselected="false" editable />
       </div>
     </div>
   </div>
@@ -93,17 +49,11 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import InputNumber, {
-  type InputNumberBlurEvent,
-  type InputNumberInputEvent
-} from 'primevue/inputnumber'
-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 CreditTopUpOption from './credit/CreditTopUpOption.vue'
 
 const {
   isInsufficientCredits = false,
@@ -115,25 +65,9 @@ const {
   preselectedAmountOption?: number
 }>()
 
-const authStore = useFirebaseAuthStore()
 const authService = useFirebaseAuthService()
-const customAmount = ref<number>(100)
-const didClickBuyNow = ref(false)
-const loading = computed(() => authStore.loading)
 
 const handleSeeDetails = async () => {
   await authService.accessBillingPortal()
 }
-
-const handleBuyNow = async (amount: number) => {
-  await authService.purchaseCredits(amount)
-  didClickBuyNow.value = true
-}
-
-onBeforeUnmount(() => {
-  if (didClickBuyNow.value) {
-    // If clicked buy now, then returned back to the dialog and closed, fetch the balance
-    void authService.fetchBalance()
-  }
-})
 </script>

src/components/dialog/content/credit/CreditTopUpOption.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="flex items-center gap-2">
+    <Tag
+      severity="secondary"
+      icon="pi pi-dollar"
+      rounded
+      class="text-amber-400 p-1"
+    />
+    <InputNumber
+      v-if="editable"
+      v-model="customAmount"
+      :min="1"
+      :max="1000"
+      :step="1"
+      show-buttons
+      :allow-empty="false"
+      :highlight-on-focus="true"
+      pt:pc-input-text:root="w-24"
+      @blur="(e: InputNumberBlurEvent) => (customAmount = Number(e.value))"
+      @input="(e: InputNumberInputEvent) => (customAmount = Number(e.value))"
+    />
+    <span v-else class="text-xl">{{ amount }}</span>
+  </div>
+  <ProgressSpinner v-if="loading" class="w-8 h-8" />
+  <Button
+    v-else
+    :severity="preselected ? 'primary' : 'secondary'"
+    :outlined="!preselected"
+    :label="$t('credits.topUp.buyNow')"
+    @click="handleBuyNow"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import InputNumber, {
+  type InputNumberBlurEvent,
+  type InputNumberInputEvent
+} from 'primevue/inputnumber'
+import ProgressSpinner from 'primevue/progressspinner'
+import Tag from 'primevue/tag'
+import { onBeforeUnmount, ref } from 'vue'
+
+import { useFirebaseAuthService } from '@/services/firebaseAuthService'
+
+const authService = useFirebaseAuthService()
+
+const {
+  amount,
+  preselected,
+  editable = false
+} = defineProps<{
+  amount: number
+  preselected: boolean
+  editable?: boolean
+}>()
+
+const customAmount = ref(amount)
+const didClickBuyNow = ref(false)
+const loading = ref(false)
+
+const handleBuyNow = async () => {
+  loading.value = true
+  await authService.purchaseCredits(editable ? customAmount.value : amount)
+  loading.value = false
+  didClickBuyNow.value = true
+}
+
+onBeforeUnmount(() => {
+  if (didClickBuyNow.value) {
+    // If clicked buy now, then returned back to the dialog and closed, fetch the balance
+    void authService.fetchBalance()
+  }
+})
+</script>