From 30fa26ee7902ad7662b60ab76f59e29fd3b3fa07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez?=
 <andres.gonzalez@vizzuality.com>
Date: Fri, 12 Jan 2024 12:06:46 +0100
Subject: [PATCH] adds upcoming changes banner to homepage

---
 app/layout/upcoming-changes/component.tsx | 44 +++++++++++++++++++++++
 app/layout/upcoming-changes/index.ts      |  1 +
 app/pages/index.tsx                       |  3 ++
 3 files changed, 48 insertions(+)
 create mode 100644 app/layout/upcoming-changes/component.tsx
 create mode 100644 app/layout/upcoming-changes/index.ts

diff --git a/app/layout/upcoming-changes/component.tsx b/app/layout/upcoming-changes/component.tsx
new file mode 100644
index 0000000000..2dddc432ed
--- /dev/null
+++ b/app/layout/upcoming-changes/component.tsx
@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+
+import { useCookies } from 'react-cookie';
+
+import { useFeatureFlags } from 'hooks/feature-flags';
+
+import Button from 'components/button';
+import Wrapper from 'layout/wrapper';
+
+export const UpcomingChangesBanner = (): JSX.Element => {
+  const [cookies, setCookie] = useCookies(['upcoming-changes']);
+  const { upcomingChanges } = useFeatureFlags();
+
+  const onAccept = useCallback(() => {
+    setCookie('upcoming-changes', 'true', { path: '/' });
+  }, [setCookie]);
+
+  if (cookies['upcoming-changes'] === 'true' || !upcomingChanges) return null;
+
+  return (
+    <div className="relative z-10 w-full bg-yellow-600">
+      <Wrapper>
+        <div className="flex items-center space-x-5 py-2 text-sm text-gray-800">
+          <p>
+            MaPP is undergoing a transformation with an enhanced interface and new features released
+            by the <span className="font-bold">end of January 2024</span>! Your existing projects
+            will seamlessly transition to the new version. For any concerns, feel free to reach out
+            to us. Stay tuned for a better planning experience!
+          </p>
+          <Button
+            theme="secondary"
+            size="s"
+            className="flex-shrink-0 whitespace-nowrap"
+            onClick={onAccept}
+          >
+            Accept
+          </Button>
+        </div>
+      </Wrapper>
+    </div>
+  );
+};
+
+export default UpcomingChangesBanner;
diff --git a/app/layout/upcoming-changes/index.ts b/app/layout/upcoming-changes/index.ts
new file mode 100644
index 0000000000..b404d7fd44
--- /dev/null
+++ b/app/layout/upcoming-changes/index.ts
@@ -0,0 +1 @@
+export { default } from './component';
diff --git a/app/pages/index.tsx b/app/pages/index.tsx
index 2a26ead1af..a6c86249e6 100644
--- a/app/pages/index.tsx
+++ b/app/pages/index.tsx
@@ -14,6 +14,7 @@ import PartnersList from 'layout/home/partners';
 import Support from 'layout/home/support';
 import MetaIcons from 'layout/meta-icons';
 import MetaTags from 'layout/meta-tags';
+import UpcomingChanges from 'layout/upcoming-changes';
 
 export const getServerSideProps = withUser();
 
@@ -26,6 +27,8 @@ const Home = (): JSX.Element => {
 
       <MetaIcons />
 
+      <UpcomingChanges />
+
       <MetaTags
         name="Marxan conservation Solutions"
         title="Spatial conservation planning in the cloud"