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

Update donate banner for Scratch celebration.

Browse source
This commit is contained in:
picklesrus 2022-04-28 17:10:54 -04:00
parent 3224d25a7e
commit 29bbd5c720
3 changed files with 64 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,6 +14,10 @@ const navigateToDonatePage = () => {
window.location = donateURL;
};
// For Scratch week
const SCRATCH_CELBRATION_BANNER_START_TIME = new Date(2022, 4, 16).getTime(); // May 16 2022 (months are zero indexed)
const SCRATCH_CELBRATION_BANNER_END_TIME = new Date(2022, 4, 21).getTime(); // May 21 2022 (months are zero indexed)
// Following the example in the Google Analytics doc here to track
// clicks going out to the donate page from this banner:
// https://support.google.com/analytics/answer/1136920?hl=en
@ -37,9 +41,26 @@ const DonateTopBanner = ({
src="/images/ideas/try-it-icon.svg"
/>
<div className="donate-central-items">
<p className="donate-text">
<FormattedMessage id="donatebanner.askSupport" />
</p>
{(Date.now() >= SCRATCH_CELBRATION_BANNER_START_TIME &&
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>
)}
<Button
className="donate-button"
key="add-to-studio-button"

4
src/views/splash/donate/donate-banner.scss
View file

@ -59,6 +59,10 @@ $tile-height: 244px;
right: 1rem;
top: auto;
}
a {
color: $ui-white;
text-decoration: underline;
}
}
@media only screen and (max-width: $mobileIntermediate) {

36
test/unit/components/donate-banner.test.jsx Normal file
View file

@ -0,0 +1,36 @@
import React from 'react';
import {mountWithIntl} from '../../helpers/intl-helpers.jsx';
import DonateTopBanner from '../../../src/views/splash/donate/donate-banner';
describe('DonateBannerTest', () => {
let realDateNow;
beforeEach(() => {
realDateNow = Date.now.bind(global.Date);
});
afterEach(() => {
global.Date.now = realDateNow;
});
test('Testing regular banner message', () => {
// Date outside of scratch week
global.Date.now = () => new Date(2021, 4, 19).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);
});
test('testing time sensitive scratch week banner message ', () => {
// Date within Scratch week 2022
global.Date.now = () => new Date(2022, 4, 19).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.askSupport"]').exists()).toEqual(false);
});
});