fix: resolve TypeScript errors in TopUpCreditsDialogContent story

- Remove unused context parameter
- Add required currency field to mock balance data
- Use proper typing for Firebase auth store balance object

src/components/dialog/content/TopUpCreditsDialogContent.stories.ts

@@ -1,9 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
+import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import TopUpCreditsDialogContent from './TopUpCreditsDialogContent.vue'
 
 interface TopUpCreditsStoryArgs {
   refreshDate?: string
+  isInsufficientCredits?: boolean
+  subscriptionTiersEnabled?: boolean
 }
 
 const meta: Meta<TopUpCreditsStoryArgs> = {
@@ -13,6 +16,14 @@ const meta: Meta<TopUpCreditsStoryArgs> = {
     refreshDate: {
       control: 'text',
       description: 'Date when credits refresh'
+    },
+    isInsufficientCredits: {
+      control: 'boolean',
+      description: 'Show insufficient credits message (legacy design only)'
+    },
+    subscriptionTiersEnabled: {
+      control: 'boolean',
+      description: 'Feature flag to control design (new vs legacy)'
     }
   },
   parameters: {
@@ -22,20 +33,60 @@ const meta: Meta<TopUpCreditsStoryArgs> = {
           'Credit top-up dialog content. Design is controlled by the `subscription_tiers_enabled` feature flag (defaults to new design).'
       }
     }
-  }
+  },
+  decorators: [
+    (_story) => {
+      // Mock the Firebase Auth store with realistic data
+      const authStore = useFirebaseAuthStore()
+
+      // Set up mock balance data - using cents as the backend actually sends
+      authStore.balance = {
+        amount_micros: 1055, // 10.55 USD worth = 2226 credits
+        cloud_credit_balance_micros: 422, // 4.22 USD worth
+        prepaid_balance_micros: 211, // 2.11 USD worth
+        currency: 'USD'
+      }
+      authStore.isFetchingBalance = false
+
+      return {
+        template: `
+          <div class="p-4 max-w-md mx-auto bg-surface-primary">
+            <story />
+          </div>
+        `
+      }
+    }
+  ]
 }
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const NewDesign: Story = {
+  args: {
+    refreshDate: 'Dec 16, 2025',
+    subscriptionTiersEnabled: true
+  }
+}
+
+export const NewDesignWithoutRefresh: Story = {
+  args: {
+    refreshDate: undefined,
+    subscriptionTiersEnabled: true
+  }
+}
+
+export const LegacyDesign: Story = {
   args: {
-    refreshDate: 'Dec 16, 2025'
+    refreshDate: 'Dec 16, 2025',
+    subscriptionTiersEnabled: false
   }
 }
 
-export const WithoutRefreshDate: Story = {
+export const LegacyInsufficientCredits: Story = {
   args: {
-    refreshDate: undefined
+    refreshDate: undefined,
+    isInsufficientCredits: true,
+    subscriptionTiersEnabled: false
   }
 }