jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-01 17:03:30 -05:00
Code Issues Projects Releases Wiki Activity

feat: add donation animation ab test (#57345)

Browse Source 
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Ahmad Abdolsaheb
2024-12-02 12:33:13 +03:00
committed by GitHub
parent 3571a44a6e
commit f1d5f2ea41
4 changed files with 143 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/i18n/locales/english/translations.json
View File

@@ -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."
},

5
client/src/assets/images/new-bear-animation.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 131 KiB

49
client/src/components/Donation/donation-modal-body.tsx
View File

@@ -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 })}
</span>
</div>
<div className='donation-animation-container' aria-hidden='true'>
<div className='donation-animation-bullet-points'>
<p className='donation-animation-bullet-1'>
{t('donate.become-supporter')}
</p>
<p className='donation-animation-bullet-2'>
{t('donate.remove-distractions')}
</p>
<p className='donation-animation-bullet-3'>
{t('donate.reach-goals-faster')}
</p>
<p className='donation-animation-bullet-4'>
{t('donate.help-millions-learn')}
</p>
{newBearAnimation ? (
<>
<p className='donation-animation-bullet-1-b'>
{t('donate.become-supporter')}
</p>
<p className='donation-animation-bullet-2-b'>
{t('donate.remove-interruptions')}
</p>
<p className='donation-animation-bullet-3-b'>
{t('donate.acquire-skills-faster')}
</p>
<p className='donation-animation-bullet-4-b'>
{t('donate.help-millions-learn')}
</p>
</>
) : (
<>
<p className='donation-animation-bullet-1'>
{t('donate.become-supporter')}
</p>
<p className='donation-animation-bullet-2'>
{t('donate.remove-distractions')}
</p>
<p className='donation-animation-bullet-3'>
{t('donate.reach-goals-faster')}
</p>
<p className='donation-animation-bullet-4'>
{t('donate.help-millions-learn')}
</p>
</>
)}
</div>
<img
key={Date.now()}
alt=''
src={donationAnimation}
src={newBearAnimation ? donationAnimationB : donationAnimation}
id={'donation-animation'}
data-playwright-test-label='donation-animation'
/>

101
client/src/components/Donation/donation.css
View File

@@ -883,6 +883,107 @@ a.patreon-button:hover {
}
}
/* AB testing */
p.donation-animation-bullet-1-b {
animation-name: animation-bullet-1-b;
margin-top: 450px;
font-size: 2.5rem;
}
.donation-animation-bullet-2-b {
animation-name: animation-bullet-2-b;
}
.donation-animation-bullet-3-b {
animation-name: animation-bullet-3-b;
}
.donation-animation-bullet-4-b {
animation-name: animation-bullet-4-b;
}
.donation-animation-bullet-1-b,
.donation-animation-bullet-2-b,
.donation-animation-bullet-3-b,
.donation-animation-bullet-4-b {
opacity: 0;
animation-fill-mode: forwards;
animation-duration: 20s;
animation-timing-function: normal;
}
@keyframes animation-bullet-1-b {
1% {
opacity: 0;
}
2.5% {
opacity: 1;
}
15% {
opacity: 1;
}
15.5% {
opacity: 0;
}
}
@keyframes animation-bullet-2-b {
15.5% {
opacity: 0;
margin-top: 40px;
}
16% {
opacity: 1;
margin-top: 80px;
}
33.5% {
opacity: 1;
margin-top: 80px;
}
34% {
opacity: 0;
margin-top: 120px;
}
}
@keyframes animation-bullet-3-b {
34.5% {
opacity: 0;
margin-top: 40px;
}
35% {
opacity: 1;
margin-top: 80px;
}
60% {
opacity: 1;
margin-top: 80px;
}
60.5% {
opacity: 0;
margin-top: 120px;
}
}
@keyframes animation-bullet-4-b {
60.5% {
opacity: 0;
margin-top: 40px;
}
61% {
opacity: 1;
margin-top: 80px;
}
85% {
opacity: 1;
margin-top: 80px;
}
85.5% {
opacity: 0;
}
}
/* END AB testing */
.tester-text {
margin-top: 80px;
}