Merge pull request #3744 from processing/eoy-donation-banner

EOY 2025 Donation Banner

Author: raclim

client/modules/IDE/components/Banner.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Trans } from 'react-i18next';
 import { CrossIcon } from '../../../common/icons';
 
 /**
@@ -23,12 +24,11 @@ import { CrossIcon } from '../../../common/icons';
 
 const Banner = ({ onClose }) => {
   // URL can be updated depending on the opportunity or announcement.
-  const bannerURL = 'https://openprocessing.org/curation/89576';
+  const bannerURL = 'https://processingfoundation.org/donate';
+
   const bannerCopy = (
     <>
-      We’re accepting p5.js sketches for a special curation exploring mental
-      health and the newest features in p5.js 2.0!{' '}
-      <span style={{ fontWeight: 600 }}>Submit by July 20!</span>
+      <Trans i18nKey="Banner.Copy" components={{ bold: <strong /> }} />
     </>
   );
 

client/modules/IDE/components/Preferences/index.jsx

@@ -22,7 +22,7 @@ import {
   setPreferencesTab
 } from '../../actions/preferences';
 import { majorVersion, p5URL, useP5Version } from '../../hooks/useP5Version';
-import p5SoundURL from '../../../../../common/p5URLs';
+import { p5SoundURL } from '../../../../../common/p5URLs';
 import VersionPicker from '../VersionPicker';
 import { updateFileContent } from '../../actions/files';
 import { CmControllerContext } from '../../pages/IDEView';

client/modules/IDE/pages/IDEView.jsx

@@ -29,6 +29,13 @@ import useIsMobile from '../hooks/useIsMobile';
 import Banner from '../components/Banner';
 import { P5VersionProvider } from '../hooks/useP5Version';
 
+const BANNER_DISMISS_KEY = 'bannerLastDismissedAt';
+const BANNER_COOLDOWN_MINUTES = 30;
+
+function minutesSince(timestamp) {
+  return (Date.now() - timestamp) / (1000 * 60);
+}
+
 function getTitle(project) {
   const { id } = project;
   return id ? `p5.js Web Editor | ${project.name}` : 'p5.js Web Editor';
@@ -106,7 +113,7 @@ const IDEView = () => {
   const [sidebarSize, setSidebarSize] = useState(160);
   const [isOverlayVisible, setIsOverlayVisible] = useState(false);
   const [MaxSize, setMaxSize] = useState(window.innerWidth);
-  const [displayBanner, setDisplayBanner] = useState(false);
+  const [displayBanner, setDisplayBanner] = useState(true);
 
   const cmRef = useRef({});
 
@@ -151,6 +158,7 @@ const IDEView = () => {
       }
     };
   }, [shouldAutosave, dispatch]);
+
   useEffect(() => {
     const updateInnerWidth = (e) => {
       setMaxSize(e.target.innerWidth);
@@ -163,6 +171,29 @@ const IDEView = () => {
     };
   }, [setMaxSize]);
 
+  // checks how long banner has been closed for to hide banner
+  useEffect(() => {
+    const stored = window.localStorage.getItem(BANNER_DISMISS_KEY);
+    const lastClosedAt = stored ? Number(stored) : null;
+
+    if (!lastClosedAt) {
+      setDisplayBanner(true);
+      return;
+    }
+
+    if (minutesSince(lastClosedAt) >= BANNER_COOLDOWN_MINUTES) {
+      setDisplayBanner(true);
+    } else {
+      setDisplayBanner(false);
+    }
+  }, []);
+
+  const handleBannerClose = () => {
+    setDisplayBanner(false);
+
+    window.localStorage.setItem(BANNER_DISMISS_KEY, String(Date.now()));
+  };
+
   const consoleCollapsedSize = 29;
   const currentConsoleSize = ide.consoleIsExpanded
     ? consoleSize
@@ -173,7 +204,7 @@ const IDEView = () => {
       <Helmet>
         <title>{getTitle(project)}</title>
       </Helmet>
-      {displayBanner && <Banner onClose={() => setDisplayBanner(false)} />}
+      {displayBanner && <Banner onClose={handleBannerClose} />}
       <IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
       <WarnIfUnsavedChanges />
       <Toast />

translations/locales/en-US/translations.json

@@ -49,6 +49,9 @@
       "LogOut": "Log Out"
     }
   },
+  "Banner": {
+    "Copy": "<bold>Donate Today!</bold> Support p5.js and the Processing Foundation."
+  },
   "CodemirrorFindAndReplace": {
     "ToggleReplace": "Toggle Replace",
     "Find": "Find",

translations/locales/es-419/translations.json

@@ -47,6 +47,9 @@
       "LogOut": "Cerrar sesión"
     }
   },
+  "Banner": {
+    "Copy": "<bold>Donate Today!</bold> Support p5.js and the Processing Foundation."
+  },
   "CodemirrorFindAndReplace": {
     "ToggleReplace": "Alternar reemplazar",
     "Find": "Buscar",

translations/locales/fr-CA/translations.json

@@ -48,6 +48,9 @@
         "LogOut": "Se déconnecter"
       }
     },
+    "Banner": {
+      "Copy": "<bold>Donate Today!</bold> Support p5.js and the Processing Foundation."
+    },
     "CodemirrorFindAndReplace": {
       "ToggleReplace": "Activer/désactiver le remplacement",
       "Find": "Rechercher",

translations/locales/hi/translations.json

@@ -47,6 +47,9 @@
         "LogOut": "लॉग आउट"
       }
     },
+    "Banner": {
+      "Copy": "<bold>Donate Today!</bold> Support p5.js and the Processing Foundation."
+    },
     "CodemirrorFindAndReplace": {
       "ToggleReplace": "टॉगल बदली करें",
       "Find": "खोज",

translations/locales/it/translations.json

@@ -47,6 +47,9 @@
       "LogOut": "Esci"
     }
   },
+  "Banner": {
+    "Copy": "<bold>Donate Today!</bold> Support p5.js and the Processing Foundation."
+  },
   "CodemirrorFindAndReplace": {
     "ToggleReplace": "Attiva/disattiva Sostituzione",
     "Find": "Cerca",

translations/locales/ja/translations.json

@@ -47,6 +47,9 @@
         "LogOut": "ログアウト"
       }
     },
+    "Banner": {
+      "Copy": "<bold>Donate Today!</bold> Support p5.js and the Processing Foundation."
+    },
     "CodemirrorFindAndReplace": {
       "ToggleReplace": "置換の切り替え",
       "Find": "検索",

translations/locales/ko/translations.json

@@ -48,6 +48,9 @@
       "LogOut": "로그아웃"
     }
   },
+  "Banner": {
+    "Copy": "<bold>Donate Today!</bold> Support p5.js and the Processing Foundation."
+  },
   "LoginForm": {
     "UsernameOrEmail": "이메일 또는 아이디",
     "UsernameOrEmailARIA": "이메일 또는 아이디",