diff --git a/app/javascript/mastodon/features/donate/api.ts b/app/javascript/mastodon/features/donate/api.ts index fee0687e13b..7a721a17daf 100644 --- a/app/javascript/mastodon/features/donate/api.ts +++ b/app/javascript/mastodon/features/donate/api.ts @@ -34,7 +34,7 @@ export function useDonateApi() { if (!seed) { return; } - fetchCampaign({ locale: LOCALE, seed, source: 'web' }) + fetchCampaign({ locale: LOCALE, seed }) .then((res) => { setResponse(res); }) @@ -71,7 +71,8 @@ async function fetchCampaign( url.searchParams.append(key, value.toString()); } } - url.searchParams.append('platform', 'web'); + url.searchParams.append('platform', 'android'); + url.searchParams.append('source', 'menu'); const response = await fetch(url); if (!response.ok) { @@ -83,6 +84,5 @@ async function fetchCampaign( interface DonateServerRequest { locale: string; seed: number; - source: string; return_url?: string; } diff --git a/app/javascript/mastodon/features/donate/donate_modal.scss b/app/javascript/mastodon/features/donate/donate_modal.scss index 6495b391eea..4be265c2fdc 100644 --- a/app/javascript/mastodon/features/donate/donate_modal.scss +++ b/app/javascript/mastodon/features/donate/donate_modal.scss @@ -48,6 +48,10 @@ } } + .title { + flex-grow: 1; + } + .button.toggle:not(.active) { background-color: inherit; border: 2px solid var(--button-color); diff --git a/app/javascript/mastodon/features/donate/donate_modal.tsx b/app/javascript/mastodon/features/donate/donate_modal.tsx index 00d2a16250a..ad98a660b3e 100644 --- a/app/javascript/mastodon/features/donate/donate_modal.tsx +++ b/app/javascript/mastodon/features/donate/donate_modal.tsx @@ -1,7 +1,7 @@ import type { FC, SyntheticEvent } from 'react'; import { forwardRef, useCallback, useMemo, useState } from 'react'; -import { defineMessages, useIntl } from 'react-intl'; +import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import classNames from 'classnames'; @@ -24,6 +24,9 @@ interface DonateModalProps { const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' }, + one_time: { id: 'donate.frequency.one_time', defaultMessage: 'Just once' }, + monthly: { id: 'donate.frequency.monthly', defaultMessage: 'Monthly' }, + yearly: { id: 'donate.frequency.yearly', defaultMessage: 'Yearly' }, }); // eslint-disable-next-line @typescript-eslint/no-unused-vars -- React throws a warning if not set. @@ -36,9 +39,8 @@ const DonateModal: FC = forwardRef(({ onClose }, ref) => {
- - By supporting Mastodon, you help sustain a global network that - values people over profit. Will you join us today? + + {donationData?.donation_message} = forwardRef(({ onClose }, ref) => { DonateModal.displayName = 'DonateModal'; const DonateForm: FC<{ data: DonateServerResponse }> = ({ data }) => { + const intl = useIntl(); + const [frequency, setFrequency] = useState('one_time'); const handleFrequencyToggle = useCallback((value: DonationFrequency) => { return () => { @@ -84,20 +88,22 @@ const DonateForm: FC<{ data: DonateServerResponse }> = ({ data }) => { ); const [amount, setAmount] = useState( - () => data.amounts[frequency][data.default_currency]?.[0] ?? 'EUR', + () => data.amounts[frequency][data.default_currency]?.[0] ?? 1000, ); const handleAmountChange = useCallback((event: SyntheticEvent) => { - if ( - event.target instanceof HTMLButtonElement || - event.target instanceof HTMLInputElement - ) { - setAmount(Number.parseInt(event.target.value)); + let newAmount = 1; + if (event.target instanceof HTMLButtonElement) { + newAmount = Number.parseInt(event.target.value); + } else if (event.target instanceof HTMLInputElement) { + newAmount = event.target.valueAsNumber * 100; } + setAmount(newAmount); }, []); const amountOptions: SelectItem[] = useMemo(() => { const formatter = new Intl.NumberFormat('en', { style: 'currency', currency, + maximumFractionDigits: 0, }); return Object.values(data.amounts[frequency][currency] ?? {}).map( (value) => ({ @@ -110,18 +116,14 @@ const DonateForm: FC<{ data: DonateServerResponse }> = ({ data }) => { return ( <>
- - One Time - - - Monthly - + {(Object.keys(data.amounts) as DonationFrequency[]).map((freq) => ( + + ))}
@@ -134,8 +136,8 @@ const DonateForm: FC<{ data: DonateServerResponse }> = ({ data }) => {
@@ -153,12 +155,18 @@ const DonateForm: FC<{ data: DonateServerResponse }> = ({ data }) => {

- You will be redirected to joinmastodon.org for secure payment +

);