[Refactor] Split authStore into authStore and authService (#3612)

Co-authored-by: github-actions <github-actions@github.com>

src/components/dialog/content/SettingDialogContent.vue

@@ -69,7 +69,7 @@ import { computed, watch } from 'vue'
 import SearchBox from '@/components/common/SearchBox.vue'
 import { useSettingSearch } from '@/composables/setting/useSettingSearch'
 import { useSettingUI } from '@/composables/setting/useSettingUI'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { useFirebaseAuthService } from '@/services/firebaseAuthService'
 import { SettingTreeNode } from '@/stores/settingStore'
 import { ISettingGroup, SettingParams } from '@/types/settingTypes'
 import { flattenTree } from '@/utils/treeUtil'
@@ -107,7 +107,7 @@ const {
   getSearchResults
 } = useSettingSearch()
 
-const authStore = useFirebaseAuthStore()
+const authService = useFirebaseAuthService()
 
 // Sort groups for a category
 const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
@@ -140,7 +140,7 @@ watch(activeCategory, (_, oldValue) => {
     activeCategory.value = oldValue
   }
   if (activeCategory.value?.key === 'credits') {
-    void authStore.fetchBalance()
+    void authService.fetchBalance()
   }
 })
 </script>

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -109,8 +109,9 @@ import ProgressSpinner from 'primevue/progressspinner'
 import Tag from 'primevue/tag'
 import { computed, onBeforeUnmount, ref } from 'vue'
 
+import { useFirebaseAuthService } from '@/services/firebaseAuthService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { formatMetronomeCurrency, usdToMicros } from '@/utils/formatUtil'
+import { formatMetronomeCurrency } from '@/utils/formatUtil'
 
 const {
   isInsufficientCredits = false,
@@ -123,6 +124,7 @@ const {
 }>()
 
 const authStore = useFirebaseAuthStore()
+const authService = useFirebaseAuthService()
 const customAmount = ref<number>(100)
 const didClickBuyNow = ref(false)
 const loading = computed(() => authStore.loading)
@@ -133,29 +135,18 @@ const formattedBalance = computed(() => {
 })
 
 const handleSeeDetails = async () => {
-  const response = await authStore.accessBillingPortal()
-  if (!response?.billing_portal_url) return
-  window.open(response.billing_portal_url, '_blank')
+  await authService.accessBillingPortal()
 }
 
 const handleBuyNow = async (amount: number) => {
-  const response = await authStore.initiateCreditPurchase({
-    amount_micros: usdToMicros(amount),
-    currency: 'usd'
-  })
-
-  if (!response?.checkout_url) return
-
+  await authService.purchaseCredits(amount)
   didClickBuyNow.value = true
-
-  // Go to Stripe checkout page
-  window.open(response.checkout_url, '_blank')
 }
 
 onBeforeUnmount(() => {
   if (didClickBuyNow.value) {
     // If clicked buy now, then returned back to the dialog and closed, fetch the balance
-    void authStore.fetchBalance()
+    void authService.fetchBalance()
   }
 })
 </script>

src/components/dialog/content/setting/CreditsPanel.vue

@@ -51,7 +51,7 @@
             text
             size="small"
             severity="secondary"
-            @click="() => authStore.fetchBalance()"
+            @click="() => authService.fetchBalance()"
           />
         </div>
       </div>
@@ -128,6 +128,7 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useDialogService } from '@/services/dialogService'
+import { useFirebaseAuthService } from '@/services/firebaseAuthService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import { formatMetronomeCurrency } from '@/utils/formatUtil'
 
@@ -141,6 +142,7 @@ interface CreditHistoryItemData {
 const { t } = useI18n()
 const dialogService = useDialogService()
 const authStore = useFirebaseAuthStore()
+const authService = useFirebaseAuthService()
 const loading = computed(() => authStore.loading)
 const balanceLoading = computed(() => authStore.isFetchingBalance)
 const formattedBalance = computed(() => {
@@ -159,13 +161,7 @@ const handlePurchaseCreditsClick = () => {
 }
 
 const handleCreditsHistoryClick = async () => {
-  const response = await authStore.accessBillingPortal()
-  if (!response) return
-
-  const { billing_portal_url } = response
-  if (billing_portal_url) {
-    window.open(billing_portal_url, '_blank')
-  }
+  await authService.accessBillingPortal()
 }
 
 const handleMessageSupport = () => {

src/components/dialog/content/signin/SignInForm.vue

@@ -81,14 +81,14 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { type SignInData, signInSchema } from '@/schemas/signInSchema'
+import { useFirebaseAuthService } from '@/services/firebaseAuthService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { useToastStore } from '@/stores/toastStore'
 
 const authStore = useFirebaseAuthStore()
+const firebaseAuthService = useFirebaseAuthService()
 const loading = computed(() => authStore.loading)
 
 const { t } = useI18n()
-const toast = useToastStore()
 
 const emit = defineEmits<{
   submit: [values: SignInData]
@@ -102,19 +102,6 @@ const onSubmit = (event: FormSubmitEvent) => {
 
 const handleForgotPassword = async (email: string) => {
   if (!email) return
-  await authStore.sendPasswordReset(email)
-  if (authStore.error) {
-    toast.add({
-      severity: 'error',
-      summary: t('auth.login.forgotPasswordError'),
-      detail: authStore.error
-    })
-  } else {
-    toast.add({
-      severity: 'success',
-      summary: t('auth.login.passwordResetSent'),
-      detail: t('auth.login.passwordResetSentDetail')
-    })
-  }
+  await firebaseAuthService.sendPasswordReset(email)
 }
 </script>