[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
2025-07-15 08:05:19 +00:00
parent 2ac46151f8
commit ea2ba8cdbe
9 changed files with 213 additions and 33 deletions
@@ -0,0 +1,66 @@
+import { FetchError } from '@/infrastructure/fetch-json'
+import { Trans } from 'react-i18next'
+import OLNotification from '@/features/ui/components/ol/ol-notification'
+import { billingPortalUrl } from '../../data/subscription-url'
+
+type Props = {
+  error: FetchError | null
+}
+
+export default function PaymentErrorNotification({ error }: Props) {
+  if (!error) {
+    return
+  }
+
+  let message
+  switch (error.data?.adviceCode) {
+    case 'try_again_later':
+      message = (
+        <Trans
+          i18nKey="payment_error_intermittent_error"
+          components={[
+            /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+            <a href="/contact" target="_blank" />,
+          ]}
+        />
+      )
+      break
+    case 'do_not_try_again':
+    case 'confirm_card_data':
+      message = (
+        <Trans
+          i18nKey="payment_error_update_payment_method"
+          components={[
+            /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+            <a href={billingPortalUrl} />,
+          ]}
+        />
+      )
+      break
+    default:
+      // clientSecret indicates they needed to pass a 3DS challenge
+      if (error.data?.clientSecret) {
+        message = (
+          <Trans
+            i18nKey="payment_error_3ds_failed"
+            components={[
+              /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+              <a href="/contact" target="_blank" />,
+            ]}
+          />
+        )
+      } else {
+        message = (
+          <Trans
+            i18nKey="payment_error_generic"
+            components={[
+              /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+              <a href="/contact" target="_blank" />,
+            ]}
+          />
+        )
+      }
+  }
+
+  return <OLNotification type="error" aria-live="polite" content={message} />
+}