fix(client): show donation modal on module completion (freeCodeCamp#57583)

Co-authored-by: ahmad abdolsaheb <[email protected]>
Co-authored-by: Oliver Eyton-Williams <[email protected]>
Co-authored-by: Tom <[email protected]>

Author: 4 people

client/gatsby-node.js

@@ -112,6 +112,8 @@ exports.createPages = async function createPages({
               superOrder
               template
               usesMultifileEditor
+              chapter
+              module
             }
           }
         }

client/src/components/Donation/donation-modal-body.tsx

@@ -3,20 +3,19 @@ import { useTranslation } from 'react-i18next';
 import { useFeature } from '@growthbook/growthbook-react';
 import { Col, Row, Modal, Spacer } from '@freecodecamp/ui';
 import { closeDonationModal } from '../../redux/actions';
-import { PaymentContext } from '../../../../shared/config/donation-settings'; //
+import { PaymentContext } from '../../../../shared/config/donation-settings';
 import donationAnimation from '../../assets/images/donation-bear-animation.svg';
 import donationAnimationB from '../../assets/images/new-bear-animation.svg';
 import supporterBear from '../../assets/images/supporter-bear.svg';
 import callGA from '../../analytics/call-ga';
 import MultiTierDonationForm from './multi-tier-donation-form';
 import { ModalBenefitList } from './donation-text-components';
-
-type RecentlyClaimedBlock = null | { block: string; superBlock: string };
+import { DonatableSectionRecentlyCompleted } from './types';
 
 type DonationModalBodyProps = {
   activeDonors?: number;
   closeDonationModal: typeof closeDonationModal;
-  recentlyClaimedBlock: RecentlyClaimedBlock;
+  donatableSectionRecentlyCompleted: DonatableSectionRecentlyCompleted;
   setCanClose: (canClose: boolean) => void;
 };
 
@@ -32,37 +31,39 @@ const Illustration = () => {
 };
 
 function ModalHeader({
-  recentlyClaimedBlock,
   showHeaderAndFooter,
   donationAttempted,
-  showForm
+  showForm,
+  donatableSectionRecentlyCompleted
 }: {
-  recentlyClaimedBlock: RecentlyClaimedBlock;
+  donatableSectionRecentlyCompleted: DonatableSectionRecentlyCompleted;
   showHeaderAndFooter: boolean;
   donationAttempted: boolean;
   showForm: boolean;
 }) {
   const { t } = useTranslation();
+  const { section, superBlock, title } =
+    donatableSectionRecentlyCompleted || {};
 
   if (!showHeaderAndFooter || donationAttempted) {
     return null;
   } else if (!showForm) {
     return (
       <Row className='text-center'>
         <Col sm={10} smOffset={1} xs={12}>
-          {recentlyClaimedBlock !== null && (
+          {donatableSectionRecentlyCompleted && (
             <>
               <b>
                 {t('donate.nicely-done', {
-                  block: t(
-                    `intro:${recentlyClaimedBlock.superBlock}.blocks.${recentlyClaimedBlock.block}.title`
-                  )
+                  block:
+                    section === 'module'
+                      ? t(`intro:${superBlock}.${section}s.${title}`)
+                      : t(`intro:${superBlock}.${section}s.${title}.title`)
                 })}
               </b>
               <Spacer size='xs' />
             </>
           )}
-
           <Modal.Header showCloseButton={false} borderless>
             {t('donate.modal-benefits-title')}
           </Modal.Header>
@@ -188,16 +189,16 @@ const AnimationContainer = ({
 };
 
 const BecomeASupporterConfirmation = ({
-  recentlyClaimedBlock,
   showHeaderAndFooter,
   closeDonationModal,
   donationAttempted,
   showForm,
   setShowHeaderAndFooter,
   handleProcessing,
-  setShowForm
+  setShowForm,
+  donatableSectionRecentlyCompleted
 }: {
-  recentlyClaimedBlock: RecentlyClaimedBlock;
+  donatableSectionRecentlyCompleted: DonatableSectionRecentlyCompleted;
   showHeaderAndFooter: boolean;
   closeDonationModal: () => void;
   donationAttempted: boolean;
@@ -212,7 +213,7 @@ const BecomeASupporterConfirmation = ({
         <Illustration />
       </div>
       <ModalHeader
-        recentlyClaimedBlock={recentlyClaimedBlock}
+        donatableSectionRecentlyCompleted={donatableSectionRecentlyCompleted}
         showHeaderAndFooter={showHeaderAndFooter}
         donationAttempted={donationAttempted}
         showForm={showForm}
@@ -240,7 +241,7 @@ const BecomeASupporterConfirmation = ({
 
 function DonationModalBody({
   closeDonationModal,
-  recentlyClaimedBlock,
+  donatableSectionRecentlyCompleted,
   setCanClose
 }: DonationModalBodyProps): JSX.Element {
   const [donationAttempted, setDonationAttempted] = useState(false);
@@ -273,7 +274,9 @@ function DonationModalBody({
           <AnimationContainer secondsRemaining={secondsRemaining} />
         ) : (
           <BecomeASupporterConfirmation
-            recentlyClaimedBlock={recentlyClaimedBlock}
+            donatableSectionRecentlyCompleted={
+              donatableSectionRecentlyCompleted
+            }
             showHeaderAndFooter={showHeaderAndFooter}
             closeDonationModal={closeDonationModal}
             donationAttempted={donationAttempted}

client/src/components/Donation/donation-modal.tsx

@@ -10,21 +10,24 @@ import { useFeature } from '@growthbook/growthbook-react';
 import { closeDonationModal } from '../../redux/actions';
 import {
   isDonationModalOpenSelector,
-  recentlyClaimedBlockSelector
+  donatableSectionRecentlyCompletedSelector
 } from '../../redux/selectors';
+
 import { isLocationSuperBlock } from '../../utils/path-parsers';
 import { playTone } from '../../utils/tone';
 import callGA from '../../analytics/call-ga';
+import { DonatableSectionRecentlyCompleted } from './types';
 import DonationModalBody from './donation-modal-body';
 
-type RecentlyClaimedBlock = null | { block: string; superBlock: string };
-
 const mapStateToProps = createSelector(
   isDonationModalOpenSelector,
-  recentlyClaimedBlockSelector,
-  (show: boolean, recentlyClaimedBlock: RecentlyClaimedBlock) => ({
+  donatableSectionRecentlyCompletedSelector,
+  (
+    show: boolean,
+    donatableSectionRecentlyCompleted: DonatableSectionRecentlyCompleted
+  ) => ({
     show,
-    recentlyClaimedBlock
+    donatableSectionRecentlyCompleted
   })
 );
 
@@ -35,15 +38,15 @@ type DonateModalProps = {
   activeDonors?: number;
   closeDonationModal: typeof closeDonationModal;
   location?: WindowLocation;
-  recentlyClaimedBlock: RecentlyClaimedBlock;
+  donatableSectionRecentlyCompleted: DonatableSectionRecentlyCompleted;
   show: boolean;
 };
 
 function DonateModal({
   show,
   closeDonationModal,
   location,
-  recentlyClaimedBlock
+  donatableSectionRecentlyCompleted
 }: DonateModalProps): JSX.Element {
   const [canClose, setCanClose] = useState(false);
   const isA11yFeatureEnabled = useFeature('a11y-donation-modal').on;
@@ -55,11 +58,11 @@ function DonateModal({
       callGA({
         event: 'donation_view',
         action: `Displayed ${
-          recentlyClaimedBlock !== null ? 'Block' : 'Progress'
+          donatableSectionRecentlyCompleted !== null ? 'Block' : 'Progress'
         } Donation Modal`
       });
     }
-  }, [show, recentlyClaimedBlock]);
+  }, [show, donatableSectionRecentlyCompleted]);
 
   const handleModalHide = () => {
     // If modal is open on a SuperBlock page
@@ -76,7 +79,7 @@ function DonateModal({
     <Modal size='large' onClose={handleModalHide} open={show}>
       <DonationModalBody
         closeDonationModal={closeDonationModal}
-        recentlyClaimedBlock={recentlyClaimedBlock}
+        donatableSectionRecentlyCompleted={donatableSectionRecentlyCompleted}
         setCanClose={setCanClose}
       />
     </Modal>

client/src/components/Donation/types.ts

@@ -1,4 +1,5 @@
 import type { PaymentIntentResult } from '@stripe/stripe-js';
+import { SuperBlocks } from '../../../../shared/config/curriculum';
 
 export type PaymentContext = 'modal' | 'donate page' | 'certificate';
 export type PaymentProvider = 'patreon' | 'paypal' | 'stripe' | 'stripe card';
@@ -28,3 +29,9 @@ export interface DonationApprovalData {
     paypal: boolean;
   };
 }
+
+export type DonatableSectionRecentlyCompleted = null | {
+  section: string;
+  title: string;
+  superBlock: SuperBlocks;
+};

client/src/components/Map/index.tsx

@@ -21,7 +21,8 @@ import './map.css';
 
 import {
   isSignedInSelector,
-  currentCertsSelector
+  currentCertsSelector,
+  completedChallengesIdsSelector
 } from '../../redux/selectors';
 
 import { RibbonIcon } from '../../assets/icons/completion-ribbon';
@@ -31,7 +32,6 @@ import {
   certSlugTypeMap,
   superBlockCertTypeMap
 } from '../../../../shared/config/certification-settings';
-import { completedChallengesIdsSelector } from '../../templates/Challenges/redux/selectors';
 
 interface MapProps {
   forLanding?: boolean;

client/src/redux/action-types.js

@@ -9,9 +9,9 @@ export const actionTypes = createTypes(
     'toggleTheme',
     'appMount',
     'hardGoTo',
-    'allowBlockDonationRequests',
+    'allowSectionDonationRequests',
     'setRenderStartTime',
-    'preventBlockDonationRequests',
+    'preventSectionDonationRequests',
     'setIsRandomCompletionThreshold',
     'openDonationModal',
     'closeDonationModal',

client/src/redux/actions.ts

@@ -8,14 +8,14 @@ export const tryToShowDonationModal = createAction(
   actionTypes.tryToShowDonationModal
 );
 
-export const allowBlockDonationRequests = createAction(
-  actionTypes.allowBlockDonationRequests
+export const allowSectionDonationRequests = createAction(
+  actionTypes.allowSectionDonationRequests
 );
 export const setRenderStartTime = createAction(actionTypes.setRenderStartTime);
 export const closeDonationModal = createAction(actionTypes.closeDonationModal);
 export const openDonationModal = createAction(actionTypes.openDonationModal);
-export const preventBlockDonationRequests = createAction(
-  actionTypes.preventBlockDonationRequests
+export const preventSectionDonationRequests = createAction(
+  actionTypes.preventSectionDonationRequests
 );
 export const setIsRandomCompletionThreshold = createAction(
   actionTypes.setIsRandomCompletionThreshold

client/src/redux/donation-saga.js

@@ -23,19 +23,20 @@ import {
   getSessionChallengeData,
   saveCurrentCount
 } from '../utils/session-storage';
+
 import { actionTypes as appTypes } from './action-types';
 import {
   openDonationModal,
   postChargeComplete,
   postChargeProcessing,
   postChargeError,
-  preventBlockDonationRequests,
+  preventSectionDonationRequests,
   updateCardError,
   updateCardRedirecting
 } from './actions';
 import {
   isDonatingSelector,
-  recentlyClaimedBlockSelector,
+  donatableSectionRecentlyCompletedSelector,
   shouldRequestDonationSelector,
   isSignedInSelector,
   completedChallengesSelector
@@ -46,27 +47,31 @@ const updateCardErrorMessage = i18next.t('donate.error-3');
 
 function* showDonateModalSaga() {
   let shouldRequestDonation = yield select(shouldRequestDonationSelector);
-  const recentlyClaimedBlock = yield select(recentlyClaimedBlockSelector);
   const MODAL_SHOWN_KEY = 'modalShownTimestamp';
   const modalShownTimestamp = sessionStorage.getItem(MODAL_SHOWN_KEY);
-  const isModalRecentlyShown = Date.now() - modalShownTimestamp < 20000;
-  if (
-    shouldRequestDonation &&
-    recentlyClaimedBlock &&
-    chapterBasedSuperBlocks.includes(recentlyClaimedBlock.superBlock)
-  ) {
-    yield put(preventBlockDonationRequests());
-  } else if (shouldRequestDonation || isModalRecentlyShown) {
+  // If the modal has been shown in the last 20 seconds, the animation should
+  // still be running:
+  const isAnimationRunning = Date.now() - modalShownTimestamp < 20000;
+  const shouldShowModal = shouldRequestDonation || isAnimationRunning;
+  const donatableSectionRecentlyCompleted = yield select(
+    donatableSectionRecentlyCompletedSelector
+  );
+
+  if (shouldShowModal) {
     yield delay(200);
     yield put(openDonationModal());
     sessionStorage.setItem(MODAL_SHOWN_KEY, Date.now());
     yield take(appTypes.closeDonationModal);
-    if (recentlyClaimedBlock) {
-      yield put(preventBlockDonationRequests());
-    } else {
+    if (!donatableSectionRecentlyCompleted) {
       yield call(saveCurrentCount);
     }
   }
+
+  /* users can complete donatable section but have less than 10 completed challenge
+     to show the donation modal.*/
+  if (donatableSectionRecentlyCompleted) {
+    yield put(preventSectionDonationRequests());
+  }
 }
 
 export function* postChargeSaga({

client/src/redux/index.js

@@ -52,7 +52,7 @@ export const defaultDonationFormState = {
 const initialState = {
   appUsername: '',
   isRandomCompletionThreshold: false,
-  recentlyClaimedBlock: null,
+  donatableSectionRecentlyCompleted: null,
   currentChallengeId: store.get(CURRENT_CHALLENGE_KEY),
   examInProgress: false,
   isProcessing: false,
@@ -138,10 +138,14 @@ export const reducer = handleActions(
         }
       };
     },
-    [actionTypes.allowBlockDonationRequests]: (state, { payload }) => {
+    [actionTypes.allowSectionDonationRequests]: (state, { payload }) => {
       return {
         ...state,
-        recentlyClaimedBlock: payload
+        donatableSectionRecentlyCompleted: {
+          block: payload.block,
+          module: payload.module,
+          superBlock: payload.superBlock
+        }
       };
     },
     [actionTypes.setRenderStartTime]: (state, { payload }) => {
@@ -277,9 +281,9 @@ export const reducer = handleActions(
       ...state,
       showDonationModal: true
     }),
-    [actionTypes.preventBlockDonationRequests]: state => ({
+    [actionTypes.preventSectionDonationRequests]: state => ({
       ...state,
-      recentlyClaimedBlock: null
+      donatableSectionRecentlyCompleted: null
     }),
     [actionTypes.setIsRandomCompletionThreshold]: (state, { payload }) => ({
       ...state,

client/src/redux/prop-types.ts

@@ -391,6 +391,7 @@ export type ChallengeMeta = {
   superBlock: SuperBlocks;
   title?: string;
   challengeType?: number;
+  blockType?: BlockTypes;
   helpCategory: string;
   disableLoopProtectTests: boolean;
   disableLoopProtectPreview: boolean;