scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-28 23:34:27 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge branch 'master' into develop

Browse source
This commit is contained in:
Christopher Willis-Ford 2024-11-27 07:15:58 -08:00
commit eb0518602b
3 changed files with 27 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/views/splash/donate/donate-banner.jsx
View file

@ -8,14 +8,27 @@ const Button = require('../../../components/forms/button.jsx');
require('./donate-banner.scss');
const donateURL = 'https://www.scratchfoundation.org/donate';
const SCRATCH_CAMPAIGN_BANNER_END_TIME = new Date(2025, 0, 9).getTime(); // January 9, 2025 (months are zero indexed)
// This must be dynamic for our tests to work correctly
const isCampaignActive = () => Date.now() < SCRATCH_CAMPAIGN_BANNER_END_TIME;
const getDonateInfo = () => (isCampaignActive() ? {
bannerText: <FormattedMessage
id="donatebanner.eoyCampaign"
// values={{
// }}
/>,
buttonLink: 'https://www.scratchfoundation.org/donate?utm_source=SCRATCH&utm_medium=BANNER&utm_campaign=EOY_GIVING'
} : {
bannerText: <FormattedMessage id="donatebanner.askSupport" />,
buttonLink: 'https://www.scratchfoundation.org/donate'
});
const navigateToDonatePage = () => {
window.location = donateURL;
window.location = getDonateInfo().buttonLink;
};
const SCRATCH_CELBRATION_BANNER_END_TIME = new Date(2022, 4, 21).getTime(); // May 21 2022 (months are zero indexed)
// track clicks going out to the donate page from this banner
const captureOutboundLinkToDonate = () => {
window.dataLayer = window.dataLayer || [];
@ -36,28 +49,11 @@ const DonateTopBanner = ({
src="/images/ideas/try-it-icon.svg"
/>
<div className="donate-central-items">
{(Date.now() < SCRATCH_CELBRATION_BANNER_END_TIME) ?
(
<p className="donate-text">
<FormattedMessage
id="donatebanner.scratchWeek"
values={{
celebrationLink: (
<a href="https://sip.scratch.mit.edu/scratch-celebration/">
<FormattedMessage id="donatebanner.learnMore" />
</a>
)
}}
/>
</p>
) : (
<p className="donate-text">
<FormattedMessage id="donatebanner.askSupport" />
</p>
)}
<p className="donate-text">
{getDonateInfo().bannerText}
</p>
<Button
className="donate-button"
key="add-to-studio-button"
onClick={captureOutboundLinkToDonate}
>
<FormattedMessage id="general.donate" />
@ -67,7 +63,6 @@ const DonateTopBanner = ({
<Button
isCloseType
className="donate-close-button"
key="closeButton"
name="closeButton"
type="button"
onClick={onRequestClose}

1
src/views/splash/l10n.json
View file

@ -30,6 +30,7 @@
"news.scratchNews": "Scratch News",
"donatebanner.askSupport": "Scratch is the world's largest free coding community for kids. Your support makes a difference.",
"donatebanner.eoyCampaign": "Scratch is a nonprofit that relies on donations to keep our platform free for all kids. Your gift of $5 will make a difference.",
"donatebanner.scratchWeek": "May 19-20 is Scratch’s 15th Anniversary! {celebrationLink}. Donate to support creative coding worldwide.",
"donatebanner.learnMore": "Learn more",

12
test/unit/components/donate-banner.test.jsx
View file

@ -11,27 +11,27 @@ describe('DonateBannerTest', () => {
afterEach(() => {
global.Date.now = realDateNow;
});
test('Testing Scratch week banner message', () => {
global.Date.now = () => new Date(2022, 3, 16).getTime();
test('Testing 2024 EOY campaign message', () => {
global.Date.now = () => new Date(2024, 11, 16).getTime();
const component = mountWithIntl(
<DonateTopBanner />
);
expect(component.find('div.donate-banner').exists()).toEqual(true);
expect(component.find('p.donate-text').exists()).toEqual(true);
expect(component.find('FormattedMessage[id="donatebanner.scratchWeek"]').exists()).toEqual(true);
expect(component.find('FormattedMessage[id="donatebanner.eoyCampaign"]').exists()).toEqual(true);
expect(component.find('FormattedMessage[id="donatebanner.askSupport"]').exists()).toEqual(false);
});
test('testing default message comes back after May 21', () => {
test('testing default message comes back after January 9, 2025', () => {
// Date after Scratch week
global.Date.now = () => new Date(2022, 4, 22).getTime();
global.Date.now = () => new Date(2025, 0, 10).getTime();
const component = mountWithIntl(
<DonateTopBanner />
);
expect(component.find('div.donate-banner').exists()).toEqual(true);
expect(component.find('p.donate-text').exists()).toEqual(true);
expect(component.find('FormattedMessage[id="donatebanner.askSupport"]').exists()).toEqual(true);
expect(component.find('FormattedMessage[id="donatebanner.scratchWeek"]').exists()).toEqual(false);
expect(component.find('FormattedMessage[id="donatebanner.eoyCampaign"]').exists()).toEqual(false);
});
});