From abd3afaaeb69ddebba0c39d8d14ef89a70806a74 Mon Sep 17 00:00:00 2001 From: automated-signal <37887102+automated-signal@users.noreply.github.com> Date: Mon, 14 Jul 2025 17:52:45 -0500 Subject: [PATCH] Introduce new donation progress modals Co-authored-by: Scott Nonnenberg Co-authored-by: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com> --- _locales/en/messages.json | 12 +++++++ .../components/DonationProgressModal.scss | 26 +++++++++++++++ .../DonationStillProcessingModal.scss | 17 ++++++++++ stylesheets/manifest.scss | 2 ++ .../DonationProgressModal.stories.tsx | 25 ++++++++++++++ ts/components/DonationProgressModal.tsx | 31 +++++++++++++++++ .../DonationStillProcessingModal.stories.tsx | 25 ++++++++++++++ .../DonationStillProcessingModal.tsx | 33 +++++++++++++++++++ .../DonationVerificationModal.stories.tsx | 2 +- ts/components/DonationVerificationModal.tsx | 2 +- 10 files changed, 173 insertions(+), 2 deletions(-) create mode 100644 stylesheets/components/DonationProgressModal.scss create mode 100644 stylesheets/components/DonationStillProcessingModal.scss create mode 100644 ts/components/DonationProgressModal.stories.tsx create mode 100644 ts/components/DonationProgressModal.tsx create mode 100644 ts/components/DonationStillProcessingModal.stories.tsx create mode 100644 ts/components/DonationStillProcessingModal.tsx diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 8a8eaa9e36..4c6b5c8f75 100644 --- a/_locales/en/messages.json +++ b/_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" diff --git a/stylesheets/components/DonationProgressModal.scss b/stylesheets/components/DonationProgressModal.scss new file mode 100644 index 0000000000..f3bfc6f1f0 --- /dev/null +++ b/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; +} diff --git a/stylesheets/components/DonationStillProcessingModal.scss b/stylesheets/components/DonationStillProcessingModal.scss new file mode 100644 index 0000000000..39b64a2a44 --- /dev/null +++ b/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; +} diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index 4cf14362bd..808c5ca58a 100644 --- a/stylesheets/manifest.scss +++ b/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'; diff --git a/ts/components/DonationProgressModal.stories.tsx b/ts/components/DonationProgressModal.stories.tsx new file mode 100644 index 0000000000..1c25531c69 --- /dev/null +++ b/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; + +const defaultProps = { + i18n, + onClose: action('onClose'), +}; + +export function Default(): JSX.Element { + return ; +} diff --git a/ts/components/DonationProgressModal.tsx b/ts/components/DonationProgressModal.tsx new file mode 100644 index 0000000000..6f0797a464 --- /dev/null +++ b/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 ( + + +
+ {i18n('icu:Donations__Processing')} +
+ + ); +} diff --git a/ts/components/DonationStillProcessingModal.stories.tsx b/ts/components/DonationStillProcessingModal.stories.tsx new file mode 100644 index 0000000000..1904a59594 --- /dev/null +++ b/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; + +const defaultProps = { + i18n, + onClose: action('onClose'), +}; + +export function Default(): JSX.Element { + return ; +} diff --git a/ts/components/DonationStillProcessingModal.tsx b/ts/components/DonationStillProcessingModal.tsx new file mode 100644 index 0000000000..81061345c6 --- /dev/null +++ b/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 ( + {i18n('icu:Confirmation--confirm')} + } + hasXButton + moduleClassName="DonationStillProcessingModal" + modalName="DonationStillProcessingModal" + onClose={onClose} + title={i18n('icu:Donations__StillProcessing')} + > + {i18n('icu:Donations__StillProcessing__Description')} + + ); +} diff --git a/ts/components/DonationVerificationModal.stories.tsx b/ts/components/DonationVerificationModal.stories.tsx index 920cfb913e..4048b68bbb 100644 --- a/ts/components/DonationVerificationModal.stories.tsx +++ b/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'; diff --git a/ts/components/DonationVerificationModal.tsx b/ts/components/DonationVerificationModal.tsx index 0b75f1f269..45a62c71fe 100644 --- a/ts/components/DonationVerificationModal.tsx +++ b/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';