From 3b9d7e180a07e12e6a188174722f8dc800ec56ba Mon Sep 17 00:00:00 2001 From: automated-signal <37887102+automated-signal@users.noreply.github.com> Date: Fri, 18 Jul 2025 18:19:18 -0500 Subject: [PATCH] Fixes and improvements to Donations Home Page Co-authored-by: yash-signal --- _locales/en/messages.json | 16 ++++- images/icons/v3/open/open.svg | 1 + .../components/PreferencesDonations.scss | 55 ++++++++++++++-- .../DonationPrivacyInformationModal.tsx | 62 +++++++++++++++++++ ts/components/PreferencesDonations.tsx | 59 +++++++++++++----- 5 files changed, 170 insertions(+), 23 deletions(-) create mode 100644 images/icons/v3/open/open.svg create mode 100644 ts/components/DonationPrivacyInformationModal.tsx diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 34baa8b390..a9086934e9 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -8807,20 +8807,32 @@ "description": "Title shown at the top of the donations preferences page" }, "icu:PreferencesDonations__description": { - "messageformat": "Private messaging, funded by you. No ads, no tracking, no compromise. Donate now to support Signal. Learn more", + "messageformat": "Private messaging, funded by you. No ads, no tracking, no compromise. Donate now to support Signal. Read more", "description": "Description text explaining Signal's donation model with learn more link" }, "icu:PreferencesDonations__donate-button": { "messageformat": "Donate", "description": "Button text to make a donation" }, + "icu:PreferencesDonations__my-support": { + "messageformat": "My Support", + "description": "Section header for the user's current donations" + }, "icu:PreferencesDonations__donate-button-with-amount": { "messageformat": "Donate {formattedCurrencyAmount}", "description": "Button text to make a donation after selecting a currency amount. Amount includes the currency symbol and is formatted in the locale's standard format. Examples: Donate $10; Donate ¥1000; Donate €10" }, "icu:PreferencesDonations__mobile-info": { "messageformat": "Badges and monthly donations can be managed on your mobile device.", - "description": "(Deleted 2025/07/09) Information about donations receipt syncing limitations" + "description": "Information about some donations features only existing on mobile" + }, + "icu:PreferencesDonations__privacy-modal-title": { + "messageformat": "Your information is private", + "description": "Title for the modal that explains donation privacy information" + }, + "icu:PreferencesDonations__privacy-modal-content": { + "messageformat": "Signal does not collect or store any of your personal information when you make a donation.We use Stripe as our payment processor to receive your donations. We don't access, store, or save any of the information you provide to them.Signal does not and cannot connect your donation to your Signal account.Thank you for your support!", + "description": "Content for the modal that explains donation privacy information" }, "icu:PreferencesDonations__receipts": { "messageformat": "Receipts", diff --git a/images/icons/v3/open/open.svg b/images/icons/v3/open/open.svg new file mode 100644 index 0000000000..9fdedc67df --- /dev/null +++ b/images/icons/v3/open/open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/stylesheets/components/PreferencesDonations.scss b/stylesheets/components/PreferencesDonations.scss index b91d305e95..4615447a76 100644 --- a/stylesheets/components/PreferencesDonations.scss +++ b/stylesheets/components/PreferencesDonations.scss @@ -50,6 +50,7 @@ height: 0.5px; border: none; margin: 0; + margin-bottom: 12px; background-color: light-dark( variables.$color-black-alpha-12, variables.$color-white-alpha-12 @@ -59,8 +60,9 @@ &__section-header { @include mixins.font-body-2-bold; width: 100%; - margin-top: 24px; - margin-bottom: 8px; + margin-top: 12px; + margin-bottom: 12px; + padding-inline: 8px; color: light-dark( variables.$color-black-alpha-85, variables.$color-white-alpha-85 @@ -68,7 +70,6 @@ } &__list { - margin-top: 24px; width: 100%; } @@ -81,7 +82,7 @@ align-items: center; gap: 12px; padding-block: 12px; - padding-inline: 24px; + padding-inline: 8px; border-radius: 5px; } @@ -143,6 +144,30 @@ ); } } + + &__open { + &::before { + content: ''; + display: block; + width: 20px; + height: 20px; + @include mixins.color-svg( + '../images/icons/v3/open/open.svg', + light-dark(variables.$color-gray-45, variables.$color-gray-25) + ); + } + } + } + + &__mobile-info { + @include mixins.font-subtitle; + margin-top: 18px; + align-self: flex-start; + padding-inline: 8px; + color: light-dark( + variables.$color-black-alpha-50, + variables.$color-white-alpha-50 + ); } } @@ -339,3 +364,25 @@ ); } } + +.DonationPrivacyInformationModal { + &__footer { + display: flex; + justify-content: space-between; + align-items: center; + gap: 16px; + } + + &__faqs-link { + @include mixins.button-reset; + + & { + color: variables.$color-ultramarine; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } +} diff --git a/ts/components/DonationPrivacyInformationModal.tsx b/ts/components/DonationPrivacyInformationModal.tsx new file mode 100644 index 0000000000..ab129f54d7 --- /dev/null +++ b/ts/components/DonationPrivacyInformationModal.tsx @@ -0,0 +1,62 @@ +// Copyright 2025 Signal Messenger, LLC +// SPDX-License-Identifier: AGPL-3.0-only + +import React, { useCallback } from 'react'; +import { Modal } from './Modal'; +import { Button } from './Button'; +import { I18n } from './I18n'; +import type { LocalizerType } from '../types/Util'; +import { openLinkInWebBrowser } from '../util/openLinkInWebBrowser'; + +export type DonationPrivacyInformationModalProps = { + i18n: LocalizerType; + onClose: () => void; +}; + +export function DonationPrivacyInformationModal({ + i18n, + onClose, +}: DonationPrivacyInformationModalProps): JSX.Element { + const handleDonationFAQsClick = () => { + openLinkInWebBrowser( + 'https://support.signal.org/hc/articles/360031949872-Donor-FAQs' + ); + }; + + const modalFooter = ( +
+ + +
+ ); + + const paragraphComponent = useCallback( + (parts: Array) =>

{parts}

, + [] + ); + + return ( + + + + ); +} diff --git a/ts/components/PreferencesDonations.tsx b/ts/components/PreferencesDonations.tsx index 64f0b4f9ee..d52da8daf6 100644 --- a/ts/components/PreferencesDonations.tsx +++ b/ts/components/PreferencesDonations.tsx @@ -28,6 +28,8 @@ import { ToastType } from '../types/Toast'; import { createLogger } from '../logging/log'; import { toLogFormat } from '../types/errors'; import { I18n } from './I18n'; +import { openLinkInWebBrowser } from '../util/openLinkInWebBrowser'; +import { DonationPrivacyInformationModal } from './DonationPrivacyInformationModal'; import type { SubmitDonationType } from '../state/ducks/donations'; import { getHumanDonationAmount } from '../util/currency'; @@ -86,20 +88,6 @@ function isDonationPage(page: SettingsPage): page is DonationPage { ); } -function LearnMoreButton(parts: ReactNode): JSX.Element { - return ( - - ); -} - function DonationsHome({ i18n, userAvatarData, @@ -114,6 +102,24 @@ function DonationsHome({ const avatarData = userAvatarData[0]; const avatarBuffer = avatarData?.buffer; const hasReceipts = donationReceipts.length > 0; + const [showPrivacyModal, setShowPrivacyModal] = useState(false); + + const ReadMoreButtonWithModal = useCallback( + (parts: ReactNode): JSX.Element => { + return ( + + ); + }, + [] + ); return (
@@ -136,7 +142,7 @@ function DonationsHome({
+ {hasReceipts && ( +
+ {i18n('icu:PreferencesDonations__my-support')} +
+ )} + {hasReceipts && ( { - // TODO: Handle donation FAQs action + openLinkInWebBrowser( + 'https://support.signal.org/hc/articles/360031949872-Donor-FAQs' + ); }} > {i18n('icu:PreferencesDonations__faqs')} - + + +
+ {i18n('icu:PreferencesDonations__mobile-info')} +
+ + {showPrivacyModal && ( + setShowPrivacyModal(false)} + /> + )}
); }