[backport cloud/1.34] feat: add Stripe pricing table integration for subscription dialog (conditional on feature flag) (#7292)

Backport of #7288 to `cloud/1.34`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7292-backport-cloud-1-34-feat-add-Stripe-pricing-table-integration-for-subscription-dialog--2c46d73d36508111869ddf32de921b29)
by [Unito](https://www.unito.io)

Co-authored-by: Christian Byrne <cbyrne@comfy.org>

tests-ui/tests/platform/cloud/subscription/components/StripePricingTable.test.ts

@@ -0,0 +1,113 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+import { ref } from 'vue'
+
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
+import StripePricingTable from '@/platform/cloud/subscription/components/StripePricingTable.vue'
+
+const mockLoadStripeScript = vi.fn()
+let currentConfig = {
+  publishableKey: 'pk_test_123',
+  pricingTableId: 'prctbl_123'
+}
+let hasConfig = true
+
+vi.mock('@/config/stripePricingTableConfig', () => ({
+  getStripePricingTableConfig: () => currentConfig,
+  hasStripePricingTableConfig: () => hasConfig
+}))
+
+const mockIsLoaded = ref(false)
+const mockIsLoading = ref(false)
+const mockError = ref(null)
+
+vi.mock(
+  '@/platform/cloud/subscription/composables/useStripePricingTableLoader',
+  () => ({
+    useStripePricingTableLoader: () => ({
+      loadScript: mockLoadStripeScript,
+      isLoaded: mockIsLoaded,
+      isLoading: mockIsLoading,
+      error: mockError
+    })
+  })
+)
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: enMessages }
+})
+
+const mountComponent = () =>
+  mount(StripePricingTable, {
+    global: {
+      plugins: [i18n]
+    }
+  })
+
+describe('StripePricingTable', () => {
+  beforeEach(() => {
+    currentConfig = {
+      publishableKey: 'pk_test_123',
+      pricingTableId: 'prctbl_123'
+    }
+    hasConfig = true
+    mockLoadStripeScript.mockReset().mockResolvedValue(undefined)
+    mockIsLoaded.value = false
+    mockIsLoading.value = false
+    mockError.value = null
+  })
+
+  it('renders the Stripe pricing table when config is available', async () => {
+    const wrapper = mountComponent()
+
+    await flushPromises()
+
+    expect(mockLoadStripeScript).toHaveBeenCalled()
+
+    const stripePricingTable = wrapper.find('stripe-pricing-table')
+    expect(stripePricingTable.exists()).toBe(true)
+    expect(stripePricingTable.attributes('publishable-key')).toBe('pk_test_123')
+    expect(stripePricingTable.attributes('pricing-table-id')).toBe('prctbl_123')
+  })
+
+  it('shows missing config message when credentials are absent', () => {
+    hasConfig = false
+    currentConfig = { publishableKey: '', pricingTableId: '' }
+
+    const wrapper = mountComponent()
+
+    expect(
+      wrapper.find('[data-testid="stripe-table-missing-config"]').exists()
+    ).toBe(true)
+    expect(mockLoadStripeScript).not.toHaveBeenCalled()
+  })
+
+  it('shows loading indicator when script is loading', async () => {
+    // Mock loadScript to never resolve, simulating loading state
+    mockLoadStripeScript.mockImplementation(() => new Promise(() => {}))
+
+    const wrapper = mountComponent()
+    await flushPromises()
+
+    expect(wrapper.find('[data-testid="stripe-table-loading"]').exists()).toBe(
+      true
+    )
+    expect(wrapper.find('stripe-pricing-table').exists()).toBe(false)
+  })
+
+  it('shows error indicator when script fails to load', async () => {
+    // Mock loadScript to reject, simulating error state
+    mockLoadStripeScript.mockRejectedValue(new Error('Script failed to load'))
+
+    const wrapper = mountComponent()
+    await flushPromises()
+
+    expect(wrapper.find('[data-testid="stripe-table-error"]').exists()).toBe(
+      true
+    )
+    expect(wrapper.find('stripe-pricing-table').exists()).toBe(false)
+  })
+})