Merge pull request #8963 from scratchfoundation/hotfix/2024-q4-campaign

2024 End-of-Year Campaign

package.json

@@ -147,7 +147,7 @@
     "sass": "1.80.6",
     "sass-loader": "10.5.2",
     "scratch-gui": "4.1.2",
-    "scratch-l10n": "4.0.24",
+    "scratch-l10n": "5.0.3",
     "selenium-webdriver": "4.26.0",
     "slick-carousel": "1.8.1",
     "stream-browserify": "3.0.0",

src/views/splash/donate/donate-banner.jsx

@@ -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}

src/views/splash/l10n.json

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

test/unit/components/donate-banner.test.jsx

@@ -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);
     });
 });