Introduce new donation progress modals

Co-authored-by: Scott Nonnenberg <scott@signal.org>
Co-authored-by: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>

_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__Processing": {
+    "messageformat": "Processing donation...",
+    "description": "Explainer text for donation progress dialog"
+  },
+  "icu:Donations__StillProcessing": {
+    "messageformat": "Still processing",
+    "description": "Title of the dialog shown when the user has made a donation and it's taking some time to complete the process"
+  },
+  "icu:Donations__StillProcessing__Description": {
+    "messageformat": "Your donation is still being processed. This can take a few minutes.",
+    "description": "An explanation for the 'still processing' dialog"
+  },
   "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"

stylesheets/components/DonationProgressModal.scss

@@ -0,0 +1,26 @@
+// Copyright 2025 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+@use '../mixins';
+@use '../variables';
+
+.DonationProgressModal__width-container {
+  max-width: 204px;
+}
+
+.DonationProgressModal {
+  padding-top: 15px;
+  padding-bottom: 15px;
+  text-align: center;
+  outline: none;
+}
+
+.DonationProgressModal__text {
+  margin-top: 20px;
+  color: light-dark(variables.$color-gray-60, variables.$color-gray-25);
+  @include mixins.font-body-2;
+}
+
+.DonationProgressModal .SpinnerV2__Path {
+  color: variables.$color-ultramarine;
+}

stylesheets/components/DonationStillProcessingModal.scss

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

stylesheets/manifest.scss

@@ -96,6 +96,8 @@
 @use 'components/DeleteMessagesModal.scss';
 @use 'components/DisappearingTimeDialog.scss';
 @use 'components/DisappearingTimerSelect.scss';
+@use 'components/DonationProgressModal.scss';
+@use 'components/DonationStillProcessingModal.scss';
 @use 'components/DonationVerificationModal.scss';
 @use 'components/DraftGifMessageSendModal.scss';
 @use 'components/EditConversationAttributesModal.scss';

ts/components/DonationProgressModal.stories.tsx

@@ -0,0 +1,25 @@
+// Copyright 2025 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 './DonationProgressModal';
+import { DonationProgressModal } from './DonationProgressModal';
+
+const { i18n } = window.SignalContext;
+
+export default {
+  title: 'Components/DonationProgressModal',
+} satisfies Meta<PropsType>;
+
+const defaultProps = {
+  i18n,
+  onClose: action('onClose'),
+};
+
+export function Default(): JSX.Element {
+  return <DonationProgressModal {...defaultProps} />;
+}

ts/components/DonationProgressModal.tsx

@@ -0,0 +1,31 @@
+// Copyright 2025 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 { SpinnerV2 } from './SpinnerV2';
+
+export type PropsType = {
+  i18n: LocalizerType;
+  onClose: () => void;
+};
+
+export function DonationProgressModal(props: PropsType): JSX.Element {
+  const { i18n, onClose } = props;
+
+  return (
+    <Modal
+      i18n={i18n}
+      moduleClassName="DonationProgressModal"
+      modalName="DonationProgressModal"
+      onClose={onClose}
+    >
+      <SpinnerV2 size={58} strokeWidth={8} />
+      <div className="DonationProgressModal__text">
+        {i18n('icu:Donations__Processing')}
+      </div>
+    </Modal>
+  );
+}

ts/components/DonationStillProcessingModal.stories.tsx

@@ -0,0 +1,25 @@
+// Copyright 2025 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 './DonationStillProcessingModal';
+import { DonationStillProcessingModal } from './DonationStillProcessingModal';
+
+const { i18n } = window.SignalContext;
+
+export default {
+  title: 'Components/DonationStillProcessingModal',
+} satisfies Meta<PropsType>;
+
+const defaultProps = {
+  i18n,
+  onClose: action('onClose'),
+};
+
+export function Default(): JSX.Element {
+  return <DonationStillProcessingModal {...defaultProps} />;
+}

ts/components/DonationStillProcessingModal.tsx

@@ -0,0 +1,33 @@
+// Copyright 2025 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 } from './Button';
+
+export type PropsType = {
+  i18n: LocalizerType;
+  onClose: () => unknown;
+};
+
+export function DonationStillProcessingModal(props: PropsType): JSX.Element {
+  const { i18n, onClose } = props;
+
+  return (
+    <Modal
+      i18n={i18n}
+      modalFooter={
+        <Button onClick={onClose}>{i18n('icu:Confirmation--confirm')}</Button>
+      }
+      hasXButton
+      moduleClassName="DonationStillProcessingModal"
+      modalName="DonationStillProcessingModal"
+      onClose={onClose}
+      title={i18n('icu:Donations__StillProcessing')}
+    >
+      {i18n('icu:Donations__StillProcessing__Description')}
+    </Modal>
+  );
+}

ts/components/DonationVerificationModal.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2025 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';

ts/components/DonationVerificationModal.tsx

@@ -1,4 +1,4 @@
-// Copyright 2021 Signal Messenger, LLC
+// Copyright 2025 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';