mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-07 16:40:05 +00:00
Transforms the subscription credits panel from legacy design to tier-based layout with Creator tier details, updated typography using design system tokens, improved responsive credit breakdown layout, and better subscription management flow. Updates credit formatting to remove unnecessary decimals and Credits suffix, replaces external Stripe billing portal with inline dialog, and reorganizes plan benefits section with proper v-for structure matching Figma specifications. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7307-feat-update-subscription-panel-with-tier-based-design-and-improved-UX-2c56d73d365081ef8b63e262a6822c72) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org>
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
|
|
import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
|
|
|
|
/**
|
|
* Composable for handling subscription credit calculations and formatting
|
|
*/
|
|
export function useSubscriptionCredits() {
|
|
const authStore = useFirebaseAuthStore()
|
|
const { locale } = useI18n()
|
|
|
|
const formatBalance = (maybeCents?: number) => {
|
|
// Backend returns cents despite the *_micros naming convention.
|
|
const cents = maybeCents ?? 0
|
|
const amount = formatCreditsFromCents({
|
|
cents,
|
|
locale: locale.value,
|
|
numberOptions: {
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0
|
|
}
|
|
})
|
|
return amount
|
|
}
|
|
|
|
const totalCredits = computed(() =>
|
|
formatBalance(authStore.balance?.amount_micros)
|
|
)
|
|
|
|
const monthlyBonusCredits = computed(() =>
|
|
formatBalance(authStore.balance?.cloud_credit_balance_micros)
|
|
)
|
|
|
|
const prepaidCredits = computed(() =>
|
|
formatBalance(authStore.balance?.prepaid_balance_micros)
|
|
)
|
|
|
|
const isLoadingBalance = computed(() => authStore.isFetchingBalance)
|
|
|
|
return {
|
|
totalCredits,
|
|
monthlyBonusCredits,
|
|
prepaidCredits,
|
|
isLoadingBalance
|
|
}
|
|
}
|