fix: expose 3DS action for plan changes

Amp-Thread-ID: https://ampcode.com/threads/T-019fabb4-5565-73c7-8629-7d9b4a0e6d1a
Co-authored-by: Amp <amp@ampcode.com>

Author: dante01yoon

src/platform/workspace/components/SubscriptionRequiredDialogContentUnified.vue

@@ -64,6 +64,7 @@
         :preview-data="previewData!"
         :team-plan="selectedTeamStop!"
         :is-loading="isSubscribing || isPolling"
+        :action-url="activeCheckoutActionUrl"
         @confirm="handleTeamSubscribe"
         @back="handleBackToPricing"
       />
@@ -93,6 +94,7 @@
         v-else-if="previewVariant === 'personal-change'"
         :preview-data="previewData!"
         :is-loading="isSubscribing || isPolling"
+        :action-url="activeCheckoutActionUrl"
         @confirm="handleConfirmTransition"
         @back="handleBackToPricing"
       />

src/platform/workspace/components/SubscriptionTransitionPreviewWorkspace.test.ts

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 
 import type {
@@ -122,6 +123,31 @@ describe('SubscriptionTransitionPreviewWorkspace', () => {
     expect(screen.getByText('$82.50')).toBeTruthy()
   })
 
+  it('opens verification only from its button without exposing the URL', async () => {
+    const actionUrl = 'https://verify.example/sensitive-token'
+    const open = vi.spyOn(window, 'open').mockReturnValue({} as Window)
+    const { container } = render(SubscriptionTransitionPreviewWorkspace, {
+      props: {
+        previewData: preview({}),
+        actionUrl
+      },
+      global: globalOptions
+    })
+
+    expect(open).not.toHaveBeenCalled()
+    expect(container.innerHTML).not.toContain(actionUrl)
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: 'subscription.preview.completeVerification'
+      })
+    )
+    expect(open).toHaveBeenCalledWith(
+      actionUrl,
+      '_blank',
+      'noopener,noreferrer'
+    )
+  })
+
   it('renders a scheduled downgrade with the after-that block and no charge', () => {
     render(SubscriptionTransitionPreviewWorkspace, {
       props: {

src/platform/workspace/components/SubscriptionTransitionPreviewWorkspace.vue

@@ -122,6 +122,16 @@
     <div class="flex flex-col gap-2 pt-8">
       <SubscriptionTermsNote />
 
+      <Button
+        v-if="actionUrl"
+        variant="primary"
+        size="lg"
+        class="w-full rounded-lg"
+        @click="openVerification"
+      >
+        {{ $t('subscription.preview.completeVerification') }}
+      </Button>
+
       <Button
         variant="tertiary"
         size="lg"
@@ -160,13 +170,15 @@ type PersonalTierKey = 'standard' | 'creator' | 'pro'
 const {
   previewData,
   isLoading = false,
-  teamPlan = null
+  teamPlan = null,
+  actionUrl = null
 } = defineProps<{
   previewData: PreviewSubscribeResponse
   isLoading?: boolean
   /** Set for a team credit-commit change: plan name + refill credits come from
    *  the selected slider stop; all proration money stays driven by previewData. */
   teamPlan?: TeamPlanSelection | null
+  actionUrl?: string | null
 }>()
 
 defineEmits<{
@@ -176,6 +188,11 @@ defineEmits<{
 
 const { t, n } = useI18n()
 
+function openVerification() {
+  if (!actionUrl) return
+  window.open(actionUrl, '_blank', 'noopener,noreferrer')
+}
+
 function formatTierName(tier: string): string {
   return t(`subscription.tiers.${tier.toLowerCase()}.name`)
 }