Introduce new DonationVerificationModal to kick off 3ds verification

Co-authored-by: Scott Nonnenberg <scott@signal.org>

_locales/en/messages.json

@@ -8882,6 +8882,18 @@
     "messageformat": "Thank you for supporting Signal. Your contribution helps fuel the mission of protecting free expression and enabling secure global communication for millions around the world, through open source privacy technology. If you’re a resident of the United States, please retain this receipt for your tax records. Signal Technology Foundation is a tax-exempt nonprofit organization in the United States under section 501c3 of the Internal Revenue Code. Our Federal Tax ID is 82-4506840.",
     "description": "Footer text shown on donation receipts explaining tax deductibility and Signal's mission"
   },
+  "icu:Donations__3dsValidationNeeded": {
+    "messageformat": "Additional verification required",
+    "description": "Title of the dialog shown when the user's payment method requires a redirect to a verification website"
+  },
+  "icu:Donations__3dsValidationNeeded__Description": {
+    "messageformat": "Your credit card issuer requires an additional verification step in a web browser.",
+    "description": "An explanation for the 'verification required' dialog"
+  },
+  "icu:Donations__3dsValidationNeeded__OpenBrowser": {
+    "messageformat": "Open browser",
+    "description": "When external payment method validation is required, this button will open that external verification website"
+  },
   "icu:WhatsNew__bugfixes": {
     "messageformat": "This version contains a number of small tweaks and bug fixes to keep Signal running smoothly.",
     "description": "Release notes for releases that only include bug fixes",

stylesheets/components/DonationVerificationModal.scss

@@ -0,0 +1,13 @@
+// Copyright 2025 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+@use '../mixins';
+
+.DonationVerificationModal__width-container {
+  max-width: 420px;
+}
+
+// We include both for specificity
+.module-Modal__title.DonationVerificationModal__title {
+  @include mixins.font-title-medium;
+}

stylesheets/manifest.scss

@@ -96,6 +96,7 @@
 @use 'components/DeleteMessagesModal.scss';
 @use 'components/DisappearingTimeDialog.scss';
 @use 'components/DisappearingTimerSelect.scss';
+@use 'components/DonationVerificationModal.scss';
 @use 'components/DraftGifMessageSendModal.scss';
 @use 'components/EditConversationAttributesModal.scss';
 @use 'components/EditHistoryMessagesModal.scss';

ts/components/DonationVerificationModal.stories.tsx

@@ -0,0 +1,26 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import { action } from '@storybook/addon-actions';
+
+import type { Meta } from '@storybook/react';
+import type { PropsType } from './DonationVerificationModal';
+import { DonationVerificationModal } from './DonationVerificationModal';
+
+const { i18n } = window.SignalContext;
+
+export default {
+  title: 'Components/DonationVerificationModal',
+} satisfies Meta<PropsType>;
+
+const defaultProps = {
+  i18n,
+  onCancel: action('onCancel'),
+  onOpenBrowser: action('onOpenBrowser'),
+};
+
+export function Default(): JSX.Element {
+  return <DonationVerificationModal {...defaultProps} />;
+}

ts/components/DonationVerificationModal.tsx

@@ -0,0 +1,43 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import type { LocalizerType } from '../types/Util';
+import { Modal } from './Modal';
+import { Button, ButtonVariant } from './Button';
+
+export type PropsType = {
+  i18n: LocalizerType;
+  onCancel: () => unknown;
+  onOpenBrowser: () => unknown;
+};
+
+export function DonationVerificationModal(props: PropsType): JSX.Element {
+  const { i18n, onCancel, onOpenBrowser } = props;
+
+  const footer = (
+    <>
+      <Button variant={ButtonVariant.Secondary} onClick={onCancel}>
+        {i18n('icu:confirmation-dialog--Cancel')}
+      </Button>
+      <Button onClick={onOpenBrowser}>
+        {i18n('icu:Donations__3dsValidationNeeded__OpenBrowser')}
+      </Button>
+    </>
+  );
+
+  return (
+    <Modal
+      hasXButton
+      i18n={i18n}
+      modalFooter={footer}
+      moduleClassName="DonationVerificationModal"
+      modalName="DonationVerificationModal"
+      onClose={onCancel}
+      title={i18n('icu:Donations__3dsValidationNeeded')}
+    >
+      {i18n('icu:Donations__3dsValidationNeeded__Description')}
+    </Modal>
+  );
+}