mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-05 23:50:08 +00:00
Refactoring of subscription panel to improve maintainability and match Figma design exactly. Extracted business logic into `useSubscriptionCredits` and `useSubscriptionActions` composables, added comprehensive testing, and enhanced the design system with proper semantic tokens. - Extract credit calculations and action handlers into reusable composables - Add component and unit tests with proper mocking patterns - Update terminology from "API Nodes" to "Partner Nodes" - Make credit breakdown dynamic using real API data instead of hardcoded values - Add semantic design tokens for modal card surfaces with light/dark theme support - Reduce component complexity from ~100 lines to ~25 lines of logic - Improve layout spacing, typography, and responsive behavior to match Figma specs <img width="1948" height="1494" alt="Selection_2220" src="https://github.com/user-attachments/assets/b922582d-7edf-4884-b787-ad783c896b80" /> <img width="1948" height="1494" alt="Selection_2219" src="https://github.com/user-attachments/assets/50a9f263-9adb-439d-8a89-94a498d394e3" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6378-update-subscription-panel-for-new-designs-29b6d73d3650815c9ce2c5977ac7f893) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com>
62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { computed } from 'vue'
|
|
|
|
import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
|
|
import { formatMetronomeCurrency } from '@/utils/formatUtil'
|
|
|
|
/**
|
|
* Composable for handling subscription credit calculations and formatting
|
|
*/
|
|
export function useSubscriptionCredits() {
|
|
const authStore = useFirebaseAuthStore()
|
|
|
|
const totalCredits = computed(() => {
|
|
if (!authStore.balance?.amount_micros) return '0.00'
|
|
try {
|
|
return formatMetronomeCurrency(authStore.balance.amount_micros, 'usd')
|
|
} catch (error) {
|
|
console.error(
|
|
'[useSubscriptionCredits] Error formatting total credits:',
|
|
error
|
|
)
|
|
return '0.00'
|
|
}
|
|
})
|
|
|
|
const monthlyBonusCredits = computed(() => {
|
|
const balance = authStore.balance as any
|
|
if (!balance?.cloud_credit_balance_micros) return '0.00'
|
|
try {
|
|
return formatMetronomeCurrency(balance.cloud_credit_balance_micros, 'usd')
|
|
} catch (error) {
|
|
console.error(
|
|
'[useSubscriptionCredits] Error formatting monthly bonus credits:',
|
|
error
|
|
)
|
|
return '0.00'
|
|
}
|
|
})
|
|
|
|
const prepaidCredits = computed(() => {
|
|
const balance = authStore.balance as any
|
|
if (!balance?.prepaid_balance_micros) return '0.00'
|
|
try {
|
|
return formatMetronomeCurrency(balance.prepaid_balance_micros, 'usd')
|
|
} catch (error) {
|
|
console.error(
|
|
'[useSubscriptionCredits] Error formatting prepaid credits:',
|
|
error
|
|
)
|
|
return '0.00'
|
|
}
|
|
})
|
|
|
|
const isLoadingBalance = computed(() => authStore.isFetchingBalance)
|
|
|
|
return {
|
|
totalCredits,
|
|
monthlyBonusCredits,
|
|
prepaidCredits,
|
|
isLoadingBalance
|
|
}
|
|
}
|