feat(client): add badge benefit to progress modal copy (#45142)

* feat: add badge benefit to progress modal copy

* Update client/src/redux/index.js

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:",

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({
     </div>
   );
 
+  const renderABtestProgressText = () => {
+    if (isAVariant) return getDonationText();
+    else <b>{t('donate.duration-5')}</b>;
+  };
+
   const progressDonationText = (
     <div className='text-center progress-modal-text'>
       <div className='donation-icon-container'>
@@ -137,7 +147,7 @@ function DonateModal({
       <Row>
         {!closeLabel && (
           <Col sm={10} smOffset={1} xs={12}>
-            {getDonationText()}
+            {renderABtestProgressText()}
           </Col>
         )}
       </Row>

client/src/redux/index.js

@@ -221,7 +221,6 @@ export const shouldRequestDonationSelector = state => {
   const canRequestProgressDonation = state[MainApp].canRequestProgressDonation;
   const isDonating = isDonatingSelector(state);
   const recentlyClaimedBlock = recentlyClaimedBlockSelector(state);
-  const isAVariant = isAVariantSelector(state);
 
   // don't request donation if already donating
   if (isDonating) return false;
@@ -234,16 +233,9 @@ export const shouldRequestDonationSelector = state => {
 
   // donations only appear after the user has completed ten challenges (i.e.
   // not before the 11th challenge has mounted)
-  // the follwoing is an AB test for increasing the completed challenge requirement to 20
-  if (isAVariant) {
   if (completedChallenges.length < 10) {
     return false;
   }
-  } else {
-    if (completedChallenges.length < 20) {
-      return false;
-    }
-  }
 
   // this will mean we have completed 3 or more challenges this browser session
   // and enough challenges overall to not be new

config/donation-settings.js

@@ -94,7 +94,7 @@ const patreonDefaultPledgeAmount = 500;
 
 const aBTestConfig = {
   isTesting: true,
-  type: 'increaceChallengesCompleted'
+  type: 'badgeProgressModalCopy'
 };
 
 module.exports = {