[backport cloud/1.35] Refactor(cloud)/yearly credits monthly (#7592)

Backport of #7584 to `cloud/1.35`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7592-backport-cloud-1-35-Refactor-cloud-yearly-credits-monthly-2cc6d73d36508117b100f88f8888f787)
by [Unito](https://www.unito.io)

Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>

src/locales/en/main.json

@@ -1918,7 +1918,7 @@
     "viewMoreDetails": "View more details",
     "learnMore": "Learn more",
     "billedMonthly": "Billed monthly",
-    "billedAnnually": "{total} Billed annually",
+    "billedYearly": "{total} Billed yearly",
     "monthly": "Monthly",
     "yearly": "Yearly",
     "messageSupport": "Message support",
@@ -1930,72 +1930,16 @@
     "yearlyDiscount": "20% DISCOUNT",
     "tiers": {
       "founder": {
-        "name": "Founder's Edition",
+        "name": "Founder's Edition"
-        "price": "20",
-        "benefits": {
-          "monthlyCredits": "5,460",
-          "monthlyCreditsLabel": "monthly credits",
-          "maxDuration": "30 min",
-          "maxDurationLabel": "max duration of each workflow run",
-          "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
-          "addCreditsLabel": "Add more credits whenever",
-          "customLoRAsLabel": "Import your own LoRAs"
-        }
       },
       "standard": {
-        "name": "Standard",
+        "name": "Standard"
-        "price": {
-          "monthly": "20",
-          "yearly": "16",
-          "annualTotal": "$192"
-        },
-        "benefits": {
-          "monthlyCredits": "4,200",
-          "monthlyCreditsLabel": "monthly credits",
-          "maxDuration": "30 min",
-          "maxDurationLabel": "max duration of each workflow run",
-          "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
-          "addCreditsLabel": "Add more credits whenever",
-          "customLoRAsLabel": "Import your own LoRAs",
-          "videoEstimate": "120"
-        }
       },
       "creator": {
-        "name": "Creator",
+        "name": "Creator"
-        "price": {
-          "monthly": "35",
-          "yearly": "28",
-          "annualTotal": "$336"
-        },
-
-        "benefits": {
-          "monthlyCredits": "7,400",
-          "monthlyCreditsLabel": "monthly credits",
-          "maxDuration": "30 min",
-          "maxDurationLabel": "max duration of each workflow run",
-          "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
-          "addCreditsLabel": "Add more credits whenever",
-          "customLoRAsLabel": "Import your own LoRAs",
-          "videoEstimate": "288"
-        }
       },
       "pro": {
-        "name": "Pro",
+        "name": "Pro"
-        "price": {
-          "monthly": "100",
-          "yearly": "80",
-          "annualTotal": "$960"
-        },
-        "benefits": {
-          "monthlyCredits": "21,100",
-          "monthlyCreditsLabel": "monthly credits",
-          "maxDuration": "1 hr",
-          "maxDurationLabel": "max duration of each workflow run",
-          "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
-          "addCreditsLabel": "Add more credits whenever",
-          "customLoRAsLabel": "Import your own LoRAs",
-          "videoEstimate": "815"
-        }
       }
     },
     "required": {
@@ -2025,6 +1969,7 @@
     "currentPlan": "Current Plan",
     "subscribeTo": "Subscribe to {plan}",
     "monthlyCreditsLabel": "Monthly credits",
+    "yearlyCreditsLabel": "Total yearly credits",
     "maxDurationLabel": "Max duration of each workflow run",
     "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
     "addCreditsLabel": "Add more credits whenever",
@@ -2036,11 +1981,6 @@
     "upgradePlan": "Upgrade Plan",
     "upgradeTo": "Upgrade to {plan}",
     "changeTo": "Change to {plan}",
-    "credits": {
-      "standard": "4,200",
-      "creator": "7,400",
-      "pro": "21,100"
-    },
     "maxDuration": {
       "standard": "30 min",
       "creator": "30 min",
@@ -2466,4 +2406,4 @@
     "recentReleases": "Recent releases",
     "helpCenterMenu": "Help Center Menu"
   }
-}
+}

src/platform/cloud/subscription/components/PricingTable.vue

@@ -73,7 +73,7 @@
                     v-show="currentBillingCycle === 'yearly'"
                     class="line-through text-2xl text-muted-foreground"
                   >
-                    ${{ tier.price.monthly }}
+                    ${{ tier.pricing.monthly }}
                   </span>
                   ${{ getPrice(tier) }}
                 </span>
@@ -87,8 +87,8 @@
                 <span class="text-sm text-muted-foreground">
                   {{
                     currentBillingCycle === 'yearly'
-                      ? t('subscription.billedAnnually', {
+                      ? t('subscription.billedYearly', {
-                          total: tier.price.annualTotal
+                          total: `$${getAnnualTotal(tier)}`
                         })
                       : t('subscription.billedMonthly')
                   }}
@@ -102,14 +102,18 @@
               <span
                 class="font-inter text-sm font-normal leading-normal text-foreground"
               >
-                {{ t('subscription.monthlyCreditsLabel') }}
+                {{
+                  currentBillingCycle === 'yearly'
+                    ? t('subscription.yearlyCreditsLabel')
+                    : t('subscription.monthlyCreditsLabel')
+                }}
               </span>
               <div class="flex flex-row items-center gap-1">
                 <i class="icon-[lucide--component] text-amber-400 text-sm" />
                 <span
                   class="font-inter text-sm font-bold leading-normal text-base-foreground"
                 >
-                  {{ tier.credits }}
+                  {{ n(getCreditsDisplay(tier)) }}
                 </span>
               </div>
             </div>
@@ -171,7 +175,7 @@
                 <span
                   class="font-inter text-sm font-bold leading-normal text-base-foreground"
                 >
-                  {{ tier.videoEstimate }}
+                  {{ n(tier.pricing.videoEstimate) }}
                 </span>
               </div>
             </div>
@@ -242,6 +246,7 @@ import Popover from 'primevue/popover'
 import SelectButton from 'primevue/selectbutton'
 import type { ToggleButtonPassThroughMethodOptions } from 'primevue/togglebutton'
 import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useErrorHandling } from '@/composables/useErrorHandling'
@@ -271,15 +276,26 @@ interface BillingCycleOption {
   value: BillingCycle
 }
 
+interface TierPricing {
+  monthly: number
+  yearly: number
+  credits: number
+  videoEstimate: number
+}
+
+const TIER_PRICING: Record<TierKey, TierPricing> = {
+  standard: { monthly: 20, yearly: 16, credits: 4200, videoEstimate: 164 },
+  creator: { monthly: 35, yearly: 28, credits: 7400, videoEstimate: 288 },
+  pro: { monthly: 100, yearly: 80, credits: 21100, videoEstimate: 821 }
+} as const
+
 interface PricingTierConfig {
   id: SubscriptionTier
   key: TierKey
   name: string
-  price: Record<BillingCycle, string> & { annualTotal: string }
+  pricing: TierPricing
-  credits: string
   maxDuration: string
   customLoRAs: boolean
-  videoEstimate: string
   isPopular?: boolean
 }
 
@@ -300,49 +316,32 @@ const tiers: PricingTierConfig[] = [
     id: 'STANDARD',
     key: 'standard',
     name: t('subscription.tiers.standard.name'),
-    price: {
+    pricing: TIER_PRICING.standard,
-      monthly: t('subscription.tiers.standard.price.monthly'),
-      yearly: t('subscription.tiers.standard.price.yearly'),
-      annualTotal: t('subscription.tiers.standard.price.annualTotal')
-    },
-    credits: t('subscription.credits.standard'),
     maxDuration: t('subscription.maxDuration.standard'),
     customLoRAs: false,
-    videoEstimate: t('subscription.tiers.standard.benefits.videoEstimate'),
     isPopular: false
   },
   {
     id: 'CREATOR',
     key: 'creator',
     name: t('subscription.tiers.creator.name'),
-    price: {
+    pricing: TIER_PRICING.creator,
-      monthly: t('subscription.tiers.creator.price.monthly'),
-      yearly: t('subscription.tiers.creator.price.yearly'),
-      annualTotal: t('subscription.tiers.creator.price.annualTotal')
-    },
-    credits: t('subscription.credits.creator'),
     maxDuration: t('subscription.maxDuration.creator'),
     customLoRAs: true,
-    videoEstimate: t('subscription.tiers.creator.benefits.videoEstimate'),
     isPopular: true
   },
   {
     id: 'PRO',
     key: 'pro',
     name: t('subscription.tiers.pro.name'),
-    price: {
+    pricing: TIER_PRICING.pro,
-      monthly: t('subscription.tiers.pro.price.monthly'),
-      yearly: t('subscription.tiers.pro.price.yearly'),
-      annualTotal: t('subscription.tiers.pro.price.annualTotal')
-    },
-    credits: t('subscription.credits.pro'),
     maxDuration: t('subscription.maxDuration.pro'),
     customLoRAs: true,
-    videoEstimate: t('subscription.tiers.pro.benefits.videoEstimate'),
     isPopular: false
   }
 ]
 
+const { n } = useI18n()
 const { getAuthHeader } = useFirebaseAuthStore()
 const { isActiveSubscription, subscriptionTier } = useSubscription()
 const { accessBillingPortal, reportError } = useFirebaseAuthActions()
@@ -383,8 +382,14 @@ const getButtonTextClass = (tier: PricingTierConfig): string =>
     ? 'font-inter text-sm font-bold leading-normal text-base-background'
     : 'font-inter text-sm font-bold leading-normal text-primary-foreground'
 
-const getPrice = (tier: PricingTierConfig): string =>
+const getPrice = (tier: PricingTierConfig): number =>
-  tier.price[currentBillingCycle.value]
+  tier.pricing[currentBillingCycle.value]
+
+const getAnnualTotal = (tier: PricingTierConfig): number =>
+  tier.pricing.yearly * 12
+
+const getCreditsDisplay = (tier: PricingTierConfig): number =>
+  tier.pricing.credits * (currentBillingCycle.value === 'yearly' ? 12 : 1)
 
 const initiateCheckout = async (tierKey: TierKey) => {
   const authHeader = await getAuthHeader()