From 4ee3db38cf40f223e37f002e75d327b99e311f31 Mon Sep 17 00:00:00 2001
From: ridel1e <ridellee@gmail.com>
Date: Wed, 8 Jun 2022 19:05:27 +0300
Subject: [PATCH] add cookie policy notification

---
 src/App.tsx                                   |  5 ++
 .../CookiePolicy/CookiePolicy.less            | 37 ++++++++++++
 .../CookiePolicy/CookiePolicy.tsx             | 56 +++++++++++++++++++
 3 files changed, 98 insertions(+)
 create mode 100644 src/services/notifications/CookiePolicy/CookiePolicy.less
 create mode 100644 src/services/notifications/CookiePolicy/CookiePolicy.tsx

diff --git a/src/App.tsx b/src/App.tsx
index f00b30daf..cca5ca500 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,6 +25,7 @@ import { RemoveLiquidity } from './pages/Pool/RemoveLiquidity/RemoveLiquidity';
 import { WithdrawalLiquidity } from './pages/Pool/WithdrawalLiquidity/WithdrawalLiquidity';
 import { PoolOverview } from './pages/PoolOverview/PoolOverview';
 import { Swap } from './pages/Swap/Swap';
+import { openCookiePolicy } from './services/notifications/CookiePolicy/CookiePolicy';
 import {
   NOTIFICATION_KEY,
   openCardanoFaucetNotification,
@@ -119,6 +120,10 @@ export const ApplicationInitializer: React.FC = () => {
     }
   }, [selectedNetwork]);
 
+  useEffect(() => {
+    openCookiePolicy();
+  }, []);
+
   useEffect(() => {
     if (networksInitialized) {
       initializeApp();
diff --git a/src/services/notifications/CookiePolicy/CookiePolicy.less b/src/services/notifications/CookiePolicy/CookiePolicy.less
new file mode 100644
index 000000000..1d023d979
--- /dev/null
+++ b/src/services/notifications/CookiePolicy/CookiePolicy.less
@@ -0,0 +1,37 @@
+@keyframes cookie-policy-out-bottom {
+  80% {
+    transform: translate(-50%, -5%);
+  }
+
+  to {
+    transform: translate(-50%, 110%);
+  }
+}
+
+.ant-notification-notice.cookie-policy {
+  position:   fixed;
+  bottom:     8px;
+  left:       50%;
+  width:      calc(100% - 48px);
+  max-width:  996px;
+  min-height:     80px;
+  padding:    1rem;
+  border:     1px solid var(--ergo-box-border-color);
+  background: var(--ergo-box-bg);
+  box-shadow: none;
+  transform:  translateX(-50%);
+
+  &.ant-notification-fade-leave {
+    animation-duration: .3s !important;
+    animation-name:     cookie-policy-out-bottom !important;
+  }
+
+  .ant-notification-notice-message {
+    padding-right: 0;
+    margin:        0;
+  }
+
+  .ant-notification-notice-btn {
+    display: none;
+  }
+}
diff --git a/src/services/notifications/CookiePolicy/CookiePolicy.tsx b/src/services/notifications/CookiePolicy/CookiePolicy.tsx
new file mode 100644
index 000000000..c8b126397
--- /dev/null
+++ b/src/services/notifications/CookiePolicy/CookiePolicy.tsx
@@ -0,0 +1,56 @@
+import './CookiePolicy.less';
+
+import { t } from '@lingui/macro';
+import React from 'react';
+
+import { localStorageManager } from '../../../common/utils/localStorageManager';
+import { Button, Flex, notification, Typography } from '../../../ergodex-cdk';
+
+const COOKIE_POLICY_NOTIFICATION_KEY = 'cookie-policy';
+
+export const openCookiePolicy = (): void => {
+  if (localStorageManager.get(COOKIE_POLICY_NOTIFICATION_KEY)) {
+    return;
+  }
+
+  const reject = () => {
+    localStorageManager.set(COOKIE_POLICY_NOTIFICATION_KEY, 'reject');
+    notification.close(COOKIE_POLICY_NOTIFICATION_KEY);
+  };
+
+  const accept = () => {
+    localStorageManager.set(COOKIE_POLICY_NOTIFICATION_KEY, 'accept');
+    notification.close(COOKIE_POLICY_NOTIFICATION_KEY);
+  };
+
+  const message = (
+    <Flex align="center">
+      <Flex.Item flex={1} marginRight={4}>
+        <Typography.Title level={5}>
+          {t`By clicking “Accept All Cookies”, you  agree to the storing of cookies
+          on your device to enhance site navigation, analyse site usage, and
+          assist in our marketing efforts.`}
+        </Typography.Title>
+      </Flex.Item>
+      <Flex.Item marginRight={4}>
+        <Button size="large" onClick={reject}>{t`Reject`}</Button>
+      </Flex.Item>
+      <Flex.Item>
+        <Button
+          size="large"
+          type="primary"
+          onClick={accept}
+        >{t`Accept all cookies`}</Button>
+      </Flex.Item>
+    </Flex>
+  );
+
+  notification.open({
+    key: COOKIE_POLICY_NOTIFICATION_KEY,
+    message,
+    className: 'cookie-policy',
+    duration: 0,
+    btn: <></>,
+    closeIcon: <></>,
+  });
+};