diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json index bb5b519227..c036304f9a 100644 --- a/client/i18n/locales/english/translations.json +++ b/client/i18n/locales/english/translations.json @@ -331,6 +331,7 @@ "duration-2": "Become a monthly supporter of our nonprofit.", "duration-3": "Become an annual supporter of our nonprofit", "duration-4": "Become a supporter of our nonprofit", + "duration-5": "Support our nonprofit and earn a supporter profile badge.", "nicely-done": "Nicely done. You just completed {{block}}.", "credit-card": "Credit Card", "credit-card-2": "Or donate with a credit card:", diff --git a/client/src/components/Donation/donation-modal.tsx b/client/src/components/Donation/donation-modal.tsx index 1829e7f435..27ffa552c7 100644 --- a/client/src/components/Donation/donation-modal.tsx +++ b/client/src/components/Donation/donation-modal.tsx @@ -14,7 +14,8 @@ import { closeDonationModal, isDonationModalOpenSelector, recentlyClaimedBlockSelector, - executeGA + executeGA, + isAVariantSelector } from '../../redux'; import { isLocationSuperBlock } from '../../utils/path-parsers'; import { playTone } from '../../utils/tone'; @@ -24,9 +25,11 @@ import DonateForm from './donate-form'; const mapStateToProps = createSelector( isDonationModalOpenSelector, recentlyClaimedBlockSelector, - (show: boolean, recentlyClaimedBlock: string) => ({ + isAVariantSelector, + (show: boolean, recentlyClaimedBlock: string, isAVariant: boolean) => ({ show, - recentlyClaimedBlock + recentlyClaimedBlock, + isAVariant }) ); @@ -46,6 +49,7 @@ type DonateModalProps = { location: WindowLocation | undefined; recentlyClaimedBlock: string; show: boolean; + isAVariant: boolean; }; function DonateModal({ @@ -53,7 +57,8 @@ function DonateModal({ closeDonationModal, executeGA, location, - recentlyClaimedBlock + recentlyClaimedBlock, + isAVariant }: DonateModalProps): JSX.Element { const [closeLabel, setCloseLabel] = React.useState(false); const { t } = useTranslation(); @@ -129,6 +134,11 @@ function DonateModal({ ); + const renderABtestProgressText = () => { + if (isAVariant) return getDonationText(); + else {t('donate.duration-5')}; + }; + const progressDonationText = (