mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-29 18:52:19 +00:00
cloud: fix credits tooltips (#6655)
Moves the refresh button's tooltip to the monthy bonus tooltip (correct, intended tooltip assignments). ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6655-cloud-fix-credits-tooltips-2a86d73d365081b585ecf19af574a10a) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -2041,6 +2041,7 @@
|
|||||||
"beta": "BETA",
|
"beta": "BETA",
|
||||||
"perMonth": "USD / month",
|
"perMonth": "USD / month",
|
||||||
"renewsDate": "Renews {date}",
|
"renewsDate": "Renews {date}",
|
||||||
|
"refreshesOn": "Refreshes to ${monthlyCreditBonusUsd} on {date}",
|
||||||
"expiresDate": "Expires {date}",
|
"expiresDate": "Expires {date}",
|
||||||
"manageSubscription": "Manage subscription",
|
"manageSubscription": "Manage subscription",
|
||||||
"partnerNodesBalance": "\"Partner Nodes\" Credit Balance",
|
"partnerNodesBalance": "\"Partner Nodes\" Credit Balance",
|
||||||
@@ -2052,7 +2053,7 @@
|
|||||||
"monthlyCreditsRollover": "These credits will rollover to the next month",
|
"monthlyCreditsRollover": "These credits will rollover to the next month",
|
||||||
"monthlyBonusDescription": "Monthly credit bonus",
|
"monthlyBonusDescription": "Monthly credit bonus",
|
||||||
"prepaidDescription": "Pre-paid credits",
|
"prepaidDescription": "Pre-paid credits",
|
||||||
"prepaidCreditsInfo": "Credits purchased separately that don't expire",
|
"prepaidCreditsInfo": "Pre-paid credits expire after 1 year from purchase date.",
|
||||||
"nextBillingCycle": "next billing cycle",
|
"nextBillingCycle": "next billing cycle",
|
||||||
"yourPlanIncludes": "Your plan includes:",
|
"yourPlanIncludes": "Your plan includes:",
|
||||||
"viewMoreDetails": "View more details",
|
"viewMoreDetails": "View more details",
|
||||||
@@ -2060,7 +2061,7 @@
|
|||||||
"messageSupport": "Message support",
|
"messageSupport": "Message support",
|
||||||
"invoiceHistory": "Invoice history",
|
"invoiceHistory": "Invoice history",
|
||||||
"benefits": {
|
"benefits": {
|
||||||
"benefit1": "Monthly credits for Partner Nodes — top up when needed",
|
"benefit1": "$10 in monthly credits for Partner Nodes — top up when needed",
|
||||||
"benefit2": "Up to 30 min runtime per job"
|
"benefit2": "Up to 30 min runtime per job"
|
||||||
},
|
},
|
||||||
"required": {
|
"required": {
|
||||||
@@ -2072,7 +2073,7 @@
|
|||||||
"subscribeToRunFull": "Subscribe to Run",
|
"subscribeToRunFull": "Subscribe to Run",
|
||||||
"subscribeNow": "Subscribe Now",
|
"subscribeNow": "Subscribe Now",
|
||||||
"subscribeToComfyCloud": "Subscribe to Comfy Cloud",
|
"subscribeToComfyCloud": "Subscribe to Comfy Cloud",
|
||||||
"partnerNodesCredits": "Partner Nodes credits"
|
"partnerNodesCredits": "Partner Nodes pricing table"
|
||||||
},
|
},
|
||||||
"userSettings": {
|
"userSettings": {
|
||||||
"title": "User Settings",
|
"title": "User Settings",
|
||||||
@@ -2353,4 +2354,5 @@
|
|||||||
"message": "Nodes just got a new look and feel",
|
"message": "Nodes just got a new look and feel",
|
||||||
"tryItOut": "Try it out"
|
"tryItOut": "Try it out"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -95,7 +95,6 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
v-tooltip="refreshTooltip"
|
|
||||||
icon="pi pi-sync"
|
icon="pi pi-sync"
|
||||||
text
|
text
|
||||||
size="small"
|
size="small"
|
||||||
@@ -142,7 +141,7 @@
|
|||||||
{{ $t('subscription.monthlyBonusDescription') }}
|
{{ $t('subscription.monthlyBonusDescription') }}
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
v-tooltip="$t('subscription.monthlyCreditsRollover')"
|
v-tooltip="refreshTooltip"
|
||||||
icon="pi pi-question-circle"
|
icon="pi pi-question-circle"
|
||||||
text
|
text
|
||||||
rounded
|
rounded
|
||||||
|
|||||||
@@ -8,6 +8,8 @@ import { useTelemetry } from '@/platform/telemetry'
|
|||||||
import { useDialogService } from '@/services/dialogService'
|
import { useDialogService } from '@/services/dialogService'
|
||||||
import { useCommandStore } from '@/stores/commandStore'
|
import { useCommandStore } from '@/stores/commandStore'
|
||||||
|
|
||||||
|
const MONTHLY_CREDIT_BONUS_USD = 10
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Composable for handling subscription panel actions and loading states
|
* Composable for handling subscription panel actions and loading states
|
||||||
*/
|
*/
|
||||||
@@ -24,7 +26,10 @@ export function useSubscriptionActions() {
|
|||||||
const refreshTooltip = computed(() => {
|
const refreshTooltip = computed(() => {
|
||||||
const date =
|
const date =
|
||||||
formattedRenewalDate.value || t('subscription.nextBillingCycle')
|
formattedRenewalDate.value || t('subscription.nextBillingCycle')
|
||||||
return `Refreshes on ${date}`
|
return t('subscription.refreshesOn', {
|
||||||
|
monthlyCreditBonusUsd: MONTHLY_CREDIT_BONUS_USD,
|
||||||
|
date
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|||||||
@@ -7,8 +7,11 @@ const mockFetchBalance = vi.fn()
|
|||||||
const mockFetchStatus = vi.fn()
|
const mockFetchStatus = vi.fn()
|
||||||
const mockShowTopUpCreditsDialog = vi.fn()
|
const mockShowTopUpCreditsDialog = vi.fn()
|
||||||
const mockExecute = vi.fn()
|
const mockExecute = vi.fn()
|
||||||
const mockT = vi.fn((key: string) => {
|
const mockT = vi.fn((key: string, values?: any) => {
|
||||||
if (key === 'subscription.nextBillingCycle') return 'next billing cycle'
|
if (key === 'subscription.nextBillingCycle') return 'next billing cycle'
|
||||||
|
if (key === 'subscription.refreshesOn') {
|
||||||
|
return `Refreshes to $${values?.monthlyCreditBonusUsd} on ${values?.date}`
|
||||||
|
}
|
||||||
return key
|
return key
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -65,13 +68,15 @@ describe('useSubscriptionActions', () => {
|
|||||||
describe('refreshTooltip', () => {
|
describe('refreshTooltip', () => {
|
||||||
it('should format tooltip with renewal date', () => {
|
it('should format tooltip with renewal date', () => {
|
||||||
const { refreshTooltip } = useSubscriptionActions()
|
const { refreshTooltip } = useSubscriptionActions()
|
||||||
expect(refreshTooltip.value).toBe('Refreshes on 2024-12-31')
|
expect(refreshTooltip.value).toBe('Refreshes to $10 on 2024-12-31')
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should use fallback text when no renewal date', () => {
|
it('should use fallback text when no renewal date', () => {
|
||||||
mockFormattedRenewalDate.value = ''
|
mockFormattedRenewalDate.value = ''
|
||||||
const { refreshTooltip } = useSubscriptionActions()
|
const { refreshTooltip } = useSubscriptionActions()
|
||||||
expect(refreshTooltip.value).toBe('Refreshes on next billing cycle')
|
expect(refreshTooltip.value).toBe(
|
||||||
|
'Refreshes to $10 on next billing cycle'
|
||||||
|
)
|
||||||
expect(mockT).toHaveBeenCalledWith('subscription.nextBillingCycle')
|
expect(mockT).toHaveBeenCalledWith('subscription.nextBillingCycle')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user