[web] add error messages for payment failing on upgrade (#27054)

* [web] add error messages for payment failing to upgrade modal
* [web] show payment error on preview change page
* [web] add separate message for 3ds failure

GitOrigin-RevId: b2680ff9b4f01e42f31c1c11457f216a5eadf49d

services/web/test/frontend/features/subscription/components/dashboard/states/active/change-plan/change-plan.test.tsx

@@ -238,11 +238,11 @@ describe('<ChangePlanModal />', function () {
 
       screen.getByRole('button', { name: 'Processing…' })
 
-      await screen.findByText('Sorry, something went wrong. ', { exact: false })
-      await screen.findByText('Please try again. ', { exact: false })
-      await screen.findByText('If the problem continues please contact us.', {
-        exact: false,
-      })
+      await screen.findAllByText(
+        (content, element) =>
+          element?.textContent ===
+          'Sorry, something went wrong. Please try again. If the problem continues please contact us.'
+      )
 
       expect(
         within(screen.getByRole('dialog'))

services/web/test/frontend/features/subscription/components/shared/payment-error-notification.test.tsx

@@ -0,0 +1,103 @@
+import { expect } from 'chai'
+import { render, screen } from '@testing-library/react'
+import PaymentErrorNotification from '../../../../../../frontend/js/features/subscription/components/shared/payment-error-notification'
+import { FetchError } from '@/infrastructure/fetch-json'
+import { billingPortalUrl } from '@/features/subscription/data/subscription-url'
+
+describe('<PaymentErrorNotification />', function () {
+  it('does not render if error is missing', function () {
+    render(<PaymentErrorNotification error={null} />)
+
+    expect(screen.queryByRole('link')).to.be.null
+  })
+
+  it('renders a generic error if adviceCode is missing', function () {
+    const error = { data: { adviceCode: null } } as FetchError
+
+    render(<PaymentErrorNotification error={error} />)
+
+    expect(
+      screen.queryAllByText(
+        (content, element) =>
+          element?.textContent ===
+          'Sorry, something went wrong. Please try again. If the problem continues please contact us.'
+      ).length
+    ).to.be.greaterThan(0)
+
+    const link = screen.queryByRole('link')
+    expect(link).to.exist
+    expect(link?.getAttribute('href')).to.equal('/contact')
+  })
+
+  it('renders an error if adviceCode is missing but clientSecret is present', function () {
+    const error = { data: { clientSecret: 'cs_12345' } } as FetchError
+
+    render(<PaymentErrorNotification error={error} />)
+
+    expect(
+      screen.queryAllByText(
+        (content, element) =>
+          element?.textContent ===
+          'We couldn’t complete your payment because authentication wasn’t successful. Please try again or choose a different payment method. If the problem continues please contact us.'
+      ).length
+    ).to.be.greaterThan(0)
+
+    const link = screen.queryByRole('link')
+    expect(link).to.exist
+    expect(link?.getAttribute('href')).to.equal('/contact')
+  })
+
+  it('renders a error to try again if adviceCode is try_again_later', function () {
+    const error = { data: { adviceCode: 'try_again_later' } } as FetchError
+
+    render(<PaymentErrorNotification error={error} />)
+
+    expect(
+      screen.queryAllByText(
+        (content, element) =>
+          element?.textContent ===
+          'We were unable to process your payment. Please try again later or contact us for assistance.'
+      ).length
+    ).to.be.greaterThan(0)
+
+    const link = screen.queryByRole('link')
+    expect(link).to.exist
+    expect(link?.getAttribute('href')).to.equal('/contact')
+  })
+
+  it('renders an error to update payment method if adviceCode do_not_try_again', function () {
+    const error = { data: { adviceCode: 'do_not_try_again' } } as FetchError
+
+    render(<PaymentErrorNotification error={error} />)
+
+    expect(
+      screen.queryAllByText(
+        (content, element) =>
+          element?.textContent ===
+          'Your payment was declined. Please update your billing information and try again.'
+      ).length
+    ).to.be.greaterThan(0)
+
+    const link = screen.queryByRole('link')
+    expect(link).to.exist
+    expect(link?.getAttribute('href')).to.equal(billingPortalUrl)
+  })
+
+  it('renders an error to update payment method if adviceCode confirm_card_data', function () {
+    const error = { data: { adviceCode: 'confirm_card_data' } } as FetchError
+
+    render(<PaymentErrorNotification error={error} />)
+
+    expect(
+      screen.queryAllByText(
+        (content, element) =>
+          element?.textContent ===
+          'Your payment was declined. Please update your billing information and try again.'
+      ).length
+    ).to.be.greaterThan(0)
+
+    const link = screen.queryByRole('link')
+    expect(link).to.exist
+    expect(link?.getAttribute('href')).to.equal(billingPortalUrl)
+  })
+})