From f1d5f2ea418de7bda301dec7182d6e77d130a96f Mon Sep 17 00:00:00 2001 From: Ahmad Abdolsaheb Date: Mon, 2 Dec 2024 12:33:13 +0300 Subject: [PATCH] feat: add donation animation ab test (#57345) Co-authored-by: Oliver Eyton-Williams --- client/i18n/locales/english/translations.json | 2 + .../src/assets/images/new-bear-animation.svg | 5 + .../Donation/donation-modal-body.tsx | 49 ++++++--- client/src/components/Donation/donation.css | 101 ++++++++++++++++++ 4 files changed, 143 insertions(+), 14 deletions(-) create mode 100644 client/src/assets/images/new-bear-animation.svg diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json index 759b61562dd..158f98f9bab 100644 --- a/client/i18n/locales/english/translations.json +++ b/client/i18n/locales/english/translations.json @@ -712,6 +712,8 @@ "help-millions-learn": "Help millions of people learn", "reach-goals-faster": "Reach your goals faster", "remove-distractions": "Remove distractions", + "remove-interruptions": "Remove interruptions", + "acquire-skills-faster": "Acquire skills faster", "animation-description": "This is a 20 second animated advertisement to encourage campers to become supporters of freeCodeCamp. The animation starts with a teddy bear who becomes a supporter. As a result, distracting pop-ups disappear and the bear gets to complete all of its goals. Then, it graduates and becomes an education super hero helping people around the world.", "animation-countdown": "This animation will stop after {{secondsRemaining}} seconds." }, diff --git a/client/src/assets/images/new-bear-animation.svg b/client/src/assets/images/new-bear-animation.svg new file mode 100644 index 00000000000..765f224b674 --- /dev/null +++ b/client/src/assets/images/new-bear-animation.svg @@ -0,0 +1,5 @@ + + + \ 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 3416be24fb7..63d7d430f79 100644 --- a/client/src/components/Donation/donation-modal-body.tsx +++ b/client/src/components/Donation/donation-modal-body.tsx @@ -1,9 +1,11 @@ import React, { useEffect, useState } from 'react'; 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 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'; @@ -127,6 +129,7 @@ const AnimationContainer = ({ }: { secondsRemaining: number; }) => { + const newBearAnimation = useFeature('new-bear-animation').on; const { t } = useTranslation(); return ( <> @@ -136,26 +139,44 @@ const AnimationContainer = ({ {t('donate.animation-countdown', { secondsRemaining })} -