Add notification banner for project archival

hotosm · Dec 9, 2021 · fbe5586 · fbe5586
1 parent fbf6bf5
commit fbe5586
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 2 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -57,7 +57,7 @@ import {
   NotificationPageIndex,
   NotificationDetail,
 } from './views/notifications';
-import { Banner, DonationBanner } from './components/banner/index';
+import { Banner, ArchivalNotificationBanner } from './components/banner/index';
 
 const ProjectEdit = React.lazy(() =>
   import('./views/projectEdit' /* webpackChunkName: "projectEdit" */),
@@ -147,7 +147,7 @@ let App = (props) => {
               </QueryParamProvider>
             </Suspense>
           </main>
-          <DonationBanner />
+          <ArchivalNotificationBanner />
           {MATOMO_ID && <Banner />}
           <Router primary={false}>
             <Footer path="/*" />

diff --git a/frontend/src/components/banner/index.js b/frontend/src/components/banner/index.js
@@ -122,3 +122,63 @@ export function DonationBanner() {
     </div>
   );
 }
+
+export function ArchivalNotificationBanner() {
+  const form = document.getElementById('archival-notification-form');
+
+  if (typeof form !== 'undefined' && form != null) {
+    if (!localStorage.getItem('archival-notification-closed')) {
+      form.style.display = 'grid';
+    }
+    document.getElementById('archival-notification-learnmore').onclick = function() {
+      openWikiLink('/Humanitarian_OSM_Team/Working_groups/Data_Quality_Control_and_Assurance/Tasking_Manager_Project_Gardening');
+    };
+    document.getElementById('archival-notification-close').onclick = function() {
+      closeForm();
+    };
+  }
+
+  function closeForm() {
+    form.style.display = 'none';
+    localStorage.setItem('archival-notification-closed', 'true');
+  }
+  function openWikiLink(path) {
+    window.open(
+      'https://wiki.openstreetmap.org/wiki' + path,
+      '_blank',
+    );
+    closeForm();
+  }
+
+  return (
+    <div
+      id="archival-notification-form"
+      className="fixed bottom-0 left-0 cf f5 w-100 tc ph6-l ph4-m ph2 pb2 bg-blue-dark white z-5 dn"
+    >
+      <div id="archival-notification-contents">
+        <p>
+          <a
+            id="privlink"
+            className="red link f4 fw6"
+            href={'https://wiki.openstreetmap.org/wiki/Humanitarian_OSM_Team/Working_groups/Data_Quality_Control_and_Assurance/Tasking_Manager_Project_Gardening'}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <FormattedMessage {...messages.importantNotification} />
+          </a>
+        </p>
+        <p>
+          <FormattedMessage {...messages.archivalNotificationText} />
+        </p>
+        <div id="archival-notification-buttons">
+          <div className="white bg-red pv2 ph3 mh1 br1 dib fw6 pointer" id="archival-notification-learnmore">
+            <FormattedMessage {...messages.learnMore} />
+          </div>
+          <div className="white bg-red pv2 ph3 mh1 br1 dib fw6 pointer" id="archival-notification-close">
+            <FormattedMessage {...messages.close} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/banner/messages.js b/frontend/src/components/banner/messages.js
@@ -25,4 +25,20 @@ export default defineMessages({
     defaultMessage:
       'We use cookies and similar technologies to recognize and analyze your visits, and measure traffic usage and activity. You can learn about how we use the data about your visit or information you provide reading our {link}. By clicking "I Agree", you consent to the use of cookies.',
   },
+  close: {
+    id: 'banner.button.close',
+    defaultMessage: 'Close',
+  },
+  learnMore: {
+    id: 'banner.button.learnmore',
+    defaultMessage: 'Learn More',
+  },
+  importantNotification: {
+      id: 'banner.title.notification',
+      defaultMessage: 'Important notification for users',
+  },
+  archivalNotificationText: {
+    id: 'banner.text.archivalNotification',
+    defaultMessage: 'Attention: as part of the ongoing maintenance of the Tasking Manager, projects created before 2020 will be archived.',
+  }
 });