diff --git a/client/src/assets/images/supporter-bear-block.svg b/client/src/assets/images/supporter-bear-block.svg
new file mode 100644
index 00000000000..9cdbacf4c71
--- /dev/null
+++ b/client/src/assets/images/supporter-bear-block.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/client/src/components/Donation/donation-modal-body.tsx b/client/src/components/Donation/donation-modal-body.tsx
index 02d4b86731e..d2d6b456107 100644
--- a/client/src/components/Donation/donation-modal-body.tsx
+++ b/client/src/components/Donation/donation-modal-body.tsx
@@ -6,6 +6,7 @@ import { closeDonationModal } from '../../redux/actions';
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 supporterBearBlock from '../../assets/images/supporter-bear-block.svg';
import supporterBear from '../../assets/images/supporter-bear.svg';
import callGA from '../../analytics/call-ga';
import MultiTierDonationForm from './multi-tier-donation-form';
@@ -19,13 +20,25 @@ type DonationModalBodyProps = {
setCanClose: (canClose: boolean) => void;
};
-const Illustration = () => {
+const Illustration = ({
+ donatableSectionRecentlyCompleted,
+ useShortDonationBlocks
+}: {
+ donatableSectionRecentlyCompleted: DonatableSectionRecentlyCompleted;
+ useShortDonationBlocks: boolean;
+}) => {
const { t } = useTranslation();
+ const showNewBearIllustration =
+ useShortDonationBlocks && donatableSectionRecentlyCompleted;
return (
);
};
@@ -44,7 +57,6 @@ function ModalHeader({
const { t } = useTranslation();
const { section, superBlock, title } =
donatableSectionRecentlyCompleted || {};
-
if (!showHeaderAndFooter || donationAttempted) {
return null;
} else if (!showForm) {
@@ -196,6 +208,7 @@ const BecomeASupporterConfirmation = ({
setShowHeaderAndFooter,
handleProcessing,
setShowForm,
+ useShortDonationBlocks,
donatableSectionRecentlyCompleted
}: {
donatableSectionRecentlyCompleted: DonatableSectionRecentlyCompleted;
@@ -206,11 +219,15 @@ const BecomeASupporterConfirmation = ({
setShowHeaderAndFooter: (arg: boolean) => void;
handleProcessing: () => void;
setShowForm: (arg: boolean) => void;
+ useShortDonationBlocks: boolean;
}) => {
return (
-
+
{
setDonationAttempted(true);
};
useEffect(() => {
- const intervalId = setInterval(() => {
- setSecondsRemaining(prevSeconds => prevSeconds - 1);
- }, 1000);
-
- if (secondsRemaining <= 0) {
+ let intervalId: NodeJS.Timeout;
+ if (useShortDonationBlocks && donatableSectionRecentlyCompleted) {
setIsAnimationVisible(false);
setCanClose(true);
- clearInterval(intervalId);
+ } else {
+ intervalId = setInterval(() => {
+ setSecondsRemaining(prevSeconds => prevSeconds - 1);
+ }, 1000);
+ if (secondsRemaining <= 0) {
+ setIsAnimationVisible(false);
+ setCanClose(true);
+ clearInterval(intervalId);
+ }
}
return () => clearInterval(intervalId);
- }, [secondsRemaining, setCanClose]);
+ }, [
+ secondsRemaining,
+ setCanClose,
+ donatableSectionRecentlyCompleted,
+ useShortDonationBlocks
+ ]);
return (
@@ -284,6 +312,7 @@ function DonationModalBody({
setShowHeaderAndFooter={setShowHeaderAndFooter}
handleProcessing={handleProcessing}
setShowForm={setShowForm}
+ useShortDonationBlocks={useShortDonationBlocks}
/>
)}
diff --git a/client/src/redux/donation-saga.js b/client/src/redux/donation-saga.js
index 4646e0b8cfd..8dafbe0d284 100644
--- a/client/src/redux/donation-saga.js
+++ b/client/src/redux/donation-saga.js
@@ -18,7 +18,6 @@ import {
import { stringifyDonationEvents } from '../utils/analytics-strings';
import { stripe } from '../utils/stripe';
import { PaymentProvider } from '../../../shared/config/donation-settings';
-import { chapterBasedSuperBlocks } from '../../../shared/config/curriculum';
import {
getSessionChallengeData,
saveCurrentCount
@@ -60,7 +59,9 @@ function* showDonateModalSaga() {
if (shouldShowModal) {
yield delay(200);
yield put(openDonationModal());
- sessionStorage.setItem(MODAL_SHOWN_KEY, Date.now());
+ if (!donatableSectionRecentlyCompleted) {
+ sessionStorage.setItem(MODAL_SHOWN_KEY, Date.now());
+ }
yield take(appTypes.closeDonationModal);
if (!donatableSectionRecentlyCompleted) {
yield call(saveCurrentCount);