scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 17:45:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #6755 from picklesrus/banner-update

Browse source 
Update donate banner for Scratch celebration.
This commit is contained in:
picklesrus 2022-04-29 09:45:38 -04:00 committed by GitHub
commit c681b4dac3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,6 +14,8 @@ const navigateToDonatePage = () => {
window.location = donateURL;
};
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 +39,25 @@ 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_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 Scratch week banner message', () => {
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);
});
test('testing default message comes back after May 21 ', () => {
// Date after Scratch week
global.Date.now = () => new Date(2022, 4, 22).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);
});
});