donation banner and widget

Author: raclim

client/modules/IDE/pages/IDEView.jsx

@@ -10,6 +10,7 @@ import PreviewFrame from '../components/PreviewFrame';
 import Console from '../components/Console';
 import Toast from '../components/Toast';
 import { updateFileContent } from '../actions/files';
+import { CrossIcon } from '../../../common/icons';
 
 import {
   autosaveProject,
@@ -114,6 +115,79 @@ const IDEView = () => {
     dispatch(updateFileContent(file.id, file.content));
   };
 
+  const Banner = () => {
+    // temporary banner to display funding opportunities
+    const textObj = {
+      copy:
+        'Help us raise $20K to continue our mission of building equitable and accessible creative coding tools!',
+      url: 'https://p5js.org/donate/'
+    };
+
+    const [isBannerVisible, setIsBannerVisible] = useState(true);
+
+    // eslint-disable-next-line consistent-return
+    useEffect(() => {
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.defer = true;
+      script.src = 'https://donorbox.org/install-popup-button.js';
+      script.id = 'donorbox-popup-button-installer';
+      script.setAttribute(
+        'data-href',
+        'https://donorbox.org/building-together?default_interval=o'
+      );
+      script.setAttribute(
+        'data-style',
+        // eslint-disable-next-line max-len
+        'background: rgb(85, 1, 164); color: rgb(255, 255, 255); text-decoration: none; font-family: Verdana, sans-serif; display: flex; font-size: 16px; padding: 8px 22px 8px 18px; border-radius: 0px 0px 5px 5px; gap: 8px; width: fit-content; line-height: 24px; position: fixed; top: 70%; transform-origin: center center; z-index: 9999; overflow: hidden; left: 20px; transform: translate(-50%, -50%) rotate(-90deg);'
+      );
+      script.setAttribute(
+        'data-img-src',
+        'https://donorbox.org/images/white_logo.svg'
+      );
+
+      document.body.appendChild(script);
+
+      return () => {
+        const existingScript = document.getElementById(
+          'donorbox-popup-button-installer'
+        );
+        if (existingScript) {
+          existingScript.remove();
+        }
+      };
+    }, []);
+
+    const handleCloseBanner = () => {
+      setIsBannerVisible(false);
+
+      const existingScript = document.getElementById(
+        'donorbox-popup-button-installer'
+      );
+      if (existingScript) {
+        existingScript.remove();
+      }
+
+      const popupButton = document.querySelector('.dbox-donation-button');
+      if (popupButton) {
+        popupButton.remove();
+      }
+    };
+
+    return (
+      isBannerVisible && (
+        <div className="banner">
+          <a href={textObj.url} target="_blank" rel="noopener noreferrer">
+            {textObj.copy}
+          </a>
+          <button className="banner-close-button" onClick={handleCloseBanner}>
+            <CrossIcon />
+          </button>
+        </div>
+      )
+    );
+  };
+
   useEffect(() => {
     dispatch(clearPersistedState());
   }, [dispatch]);
@@ -170,6 +244,7 @@ const IDEView = () => {
       <Helmet>
         <title>{getTitle(project)}</title>
       </Helmet>
+      <Banner />
       <IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
       <WarnIfUnsavedChanges />
       <Toast />

client/styles/layout/_ide.scss

@@ -21,6 +21,29 @@
   height: 100%;
 }
 
+.banner {
+  width: 100%;
+  min-height: 2.2rem;
+  text-align: center;
+  padding: 0.5rem;
+  font-weight: bold;
+  border-bottom: 1px dashed #A6A6A6;
+
+  @media (max-width: 770px) {
+    min-height: 3.3rem;
+  }
+}
+
+.banner-close-button{
+  display: flex;
+  flex-direction: column;
+  align-items: center; 
+  justify-content: center;
+  height: 20px;
+  width:20px;
+  float: right;
+}
+
 @media print {
   .sidebar {
     display: none;