From d306cb688eb48f075d000ffd2bbc271e86e6e1ba Mon Sep 17 00:00:00 2001 From: automated-signal <37887102+automated-signal@users.noreply.github.com> Date: Mon, 14 Jul 2025 09:29:14 -0500 Subject: [PATCH] Introduce new DonationVerificationModal to kick off 3ds verification Co-authored-by: Scott Nonnenberg --- _locales/en/messages.json | 12 ++++++ .../components/DonationVerificationModal.scss | 13 ++++++ stylesheets/manifest.scss | 1 + .../DonationVerificationModal.stories.tsx | 26 +++++++++++ ts/components/DonationVerificationModal.tsx | 43 +++++++++++++++++++ 5 files changed, 95 insertions(+) create mode 100644 stylesheets/components/DonationVerificationModal.scss create mode 100644 ts/components/DonationVerificationModal.stories.tsx create mode 100644 ts/components/DonationVerificationModal.tsx diff --git a/_locales/en/messages.json b/_locales/en/messages.json index cc35076518..8a8eaa9e36 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__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", diff --git a/stylesheets/components/DonationVerificationModal.scss b/stylesheets/components/DonationVerificationModal.scss new file mode 100644 index 0000000000..cb4c5b645d --- /dev/null +++ b/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; +} diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index c899a4bf39..4cf14362bd 100644 --- a/stylesheets/manifest.scss +++ b/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'; diff --git a/ts/components/DonationVerificationModal.stories.tsx b/ts/components/DonationVerificationModal.stories.tsx new file mode 100644 index 0000000000..920cfb913e --- /dev/null +++ b/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; + +const defaultProps = { + i18n, + onCancel: action('onCancel'), + onOpenBrowser: action('onOpenBrowser'), +}; + +export function Default(): JSX.Element { + return ; +} diff --git a/ts/components/DonationVerificationModal.tsx b/ts/components/DonationVerificationModal.tsx new file mode 100644 index 0000000000..0b75f1f269 --- /dev/null +++ b/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 = ( + <> + + + + ); + + return ( + + {i18n('icu:Donations__3dsValidationNeeded__Description')} + + ); +}