fix(donate): modal opens at most once per session (#36632)

* Track if donation modal has opened in a session

* Fix prettier problem

* Create separate action that switches donationRequested

client/src/redux/index.js

@@ -28,6 +28,7 @@ export const defaultFetchState = {
 const initialState = {
   appUsername: '',
   completionCount: 0,
+  donationRequested: false,
   showCert: {},
   showCertFetchState: {
     ...defaultFetchState
@@ -48,6 +49,7 @@ export const types = createTypes(
   [
     'appMount',
     'closeDonationModal',
+    'donationRequested',
     'hardGoTo',
     'openDonationModal',
     'onlineStatusChange',
@@ -79,6 +81,7 @@ export const appMount = createAction(types.appMount);
 
 export const closeDonationModal = createAction(types.closeDonationModal);
 export const openDonationModal = createAction(types.openDonationModal);
+export const donationRequested = createAction(types.donationRequested);
 
 export const onlineStatusChange = createAction(types.onlineStatusChange);
 
@@ -122,6 +125,7 @@ export const completedChallengesSelector = state =>
 export const completionCountSelector = state => state[ns].completionCount;
 export const currentChallengeIdSelector = state =>
   userSelector(state).currentChallengeId || '';
+export const donationRequestedSelector = state => state[ns].donationRequested;
 
 export const isOnlineSelector = state => state[ns].isOnline;
 export const isSignedInSelector = state => !!state[ns].appUsername;
@@ -136,16 +140,17 @@ export const showDonationSelector = state => {
   const completedChallenges = completedChallengesSelector(state);
   const completionCount = completionCountSelector(state);
   const currentCompletedLength = completedChallenges.length;
+  const donationRequested = donationRequestedSelector(state);
   // the user has not completed 9 challenges in total yet
   if (currentCompletedLength < 9) {
     return false;
   }
   // this will mean we are on the 10th submission in total for the user
-  if (completedChallenges.length === 9) {
+  if (completedChallenges.length === 9 && donationRequested === false) {
     return true;
   }
   // this will mean we are on the 3rd submission for this browser session
-  if (completionCount === 2) {
+  if (completionCount === 2 && donationRequested === false) {
     return true;
   }
   return false;
@@ -262,6 +267,10 @@ export const reducer = handleActions(
       ...state,
       showDonationModal: true
     }),
+    [types.donationRequested]: state => ({
+      ...state,
+      donationRequested: true
+    }),
     [types.resetUserData]: state => ({
       ...state,
       appUsername: '',

client/src/templates/Challenges/redux/current-challenge-saga.js

@@ -5,6 +5,7 @@ import {
   currentChallengeIdSelector,
   openDonationModal,
   showDonationSelector,
+  donationRequested,
   updateComplete,
   updateFailed,
   userSelector
@@ -43,6 +44,7 @@ function* showDonateModalSaga() {
   let shouldShowDonate = yield select(showDonationSelector);
   if (!isDonating && shouldShowDonate) {
     yield put(openDonationModal());
+    yield put(donationRequested());
   }
 }