From 063b0e28dd71929aee806e8780e755fcc84c2b90 Mon Sep 17 00:00:00 2001
From: Anton Kozachuk <54616703+AntonKozachuk@users.noreply.github.com>
Date: Fri, 9 Oct 2020 19:58:48 +0300
Subject: [PATCH 1/2] Add custom modal

---
 components/Modal.tsx | 31 +++++++++++++++++++++++++++++++
 index.mdx            |  2 ++
 package.json         |  4 +++-
 yarn.lock            | 10 ++++++++++
 4 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 components/Modal.tsx

diff --git a/components/Modal.tsx b/components/Modal.tsx
new file mode 100644
index 00000000..49a63eef
--- /dev/null
+++ b/components/Modal.tsx
@@ -0,0 +1,31 @@
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+export function Modal() {
+  const MySwal = withReactContent(Swal);
+  const termsIsConfirmed = localStorage.getItem("termsIsConfirmed");
+
+  if (termsIsConfirmed === "false" || termsIsConfirmed === null) {
+    MySwal.fire({
+      title:
+		`<strong>By proceeding to use the portal, you agree to our
+		<a target="_blank" href="https://www.google.com/"><u>Terms and Conditions</u></strong></a>`,
+      showDenyButton: true,
+      focusConfirm: true,
+      confirmButtonText: "Great!",
+      confirmButtonAriaLabel: "Thumbs up, great!",
+      denyButtonText: "Leave",
+      denyButtonAriaLabel: "Thumbs down",
+      allowOutsideClick: false,
+    }).then((result) => {
+      if (result.isConfirmed) {
+        localStorage.setItem("termsIsConfirmed", "true");
+      } else if (result.isDenied) {
+        localStorage.setItem("termsIsConfirmed", "false");
+        window.close();
+      }
+    });
+  };
+
+  return null;
+}
\ No newline at end of file
diff --git a/index.mdx b/index.mdx
index ff809d32..5fba4768 100644
--- a/index.mdx
+++ b/index.mdx
@@ -25,10 +25,12 @@ import launchFastIcon from './images/launch-fast.svg';
 import icon3 from './images/icon3.png';
 import bookManagementIcon from './images/book-management.svg';
 import foundOrPrivate from './images/found-or-private.svg';
+import { Modal } from './components/Modal.tsx';
 
 export default LandingLayout;
 
 <Jumbotron>
+  <Modal />
   <NavBar location={props.location} standalone={false} />
   <H1>Redocly training</H1>
   <H2>A starter developer portal with training exercises</H2>
diff --git a/package.json b/package.json
index 1259d570..1fe880d3 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "clean": "redocly-portal clean"
   },
   "dependencies": {
-    "@redocly/developer-portal": "1.0.0-beta.82"
+    "@redocly/developer-portal": "1.0.0-beta.82",
+    "sweetalert2": "^10.3.7",
+    "sweetalert2-react-content": "^3.2.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 2546286f..ad0fdfe1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14920,6 +14920,16 @@ swap-case@^1.1.0:
     lower-case "^1.1.1"
     upper-case "^1.1.1"
 
+sweetalert2-react-content@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/sweetalert2-react-content/-/sweetalert2-react-content-3.2.0.tgz#fbbd219177901ef639b8b685c467e35ff8f28770"
+  integrity sha512-Zd75ZZZh7byFHIppsBl04NrIpqQUyjIazBrCb6NwZIDi7Uv7gbvTGO5+yJqgAzjrY29lXOUOyLmY2riKoc69Pg==
+
+sweetalert2@^10.3.7:
+  version "10.3.7"
+  resolved "https://registry.yarnpkg.com/sweetalert2/-/sweetalert2-10.3.7.tgz#bd68352b980016f52ff0c1a8e96f406c44df731b"
+  integrity sha512-Zp9rolSdH8SnUPhTF31QgK0Vb7HtSjEJ1b4Mw+fbQtCU25I+/P61ahbGNxSAEwLWKVZFvPbOeCr3Yj7NyClh9g==
+
 symbol-observable@^1.0.4, symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"

From eff38feaa858b732a25e5dc80cb34d006ba4a629 Mon Sep 17 00:00:00 2001
From: Anton Kozachuk <54616703+AntonKozachuk@users.noreply.github.com>
Date: Mon, 12 Oct 2020 00:37:07 +0300
Subject: [PATCH 2/2] Resolve Webpack localStorage issue

---
 components/Modal.tsx | 45 +++++++++++++++++++++++---------------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/components/Modal.tsx b/components/Modal.tsx
index 49a63eef..99551e50 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -3,28 +3,31 @@ import withReactContent from "sweetalert2-react-content";
 
 export function Modal() {
   const MySwal = withReactContent(Swal);
-  const termsIsConfirmed = localStorage.getItem("termsIsConfirmed");
 
-  if (termsIsConfirmed === "false" || termsIsConfirmed === null) {
-    MySwal.fire({
-      title:
-		`<strong>By proceeding to use the portal, you agree to our
-		<a target="_blank" href="https://www.google.com/"><u>Terms and Conditions</u></strong></a>`,
-      showDenyButton: true,
-      focusConfirm: true,
-      confirmButtonText: "Great!",
-      confirmButtonAriaLabel: "Thumbs up, great!",
-      denyButtonText: "Leave",
-      denyButtonAriaLabel: "Thumbs down",
-      allowOutsideClick: false,
-    }).then((result) => {
-      if (result.isConfirmed) {
-        localStorage.setItem("termsIsConfirmed", "true");
-      } else if (result.isDenied) {
-        localStorage.setItem("termsIsConfirmed", "false");
-        window.close();
-      }
-    });
+  if (typeof window !== 'undefined') {
+    const termsIsConfirmed = localStorage.getItem("termsIsConfirmed");
+
+    if (termsIsConfirmed === "false" || termsIsConfirmed === null) {
+      MySwal.fire({
+        title:
+      `<strong>By proceeding to use the portal, you agree to our
+      <a target="_blank" href="https://www.google.com/"><u>Terms and Conditions</u></strong></a>`,
+        showDenyButton: true,
+        focusConfirm: true,
+        confirmButtonText: "Great!",
+        confirmButtonAriaLabel: "Thumbs up, great!",
+        denyButtonText: "Leave",
+        denyButtonAriaLabel: "Thumbs down",
+        allowOutsideClick: false,
+      }).then((result) => {
+        if (result.isConfirmed) {
+          localStorage.setItem("termsIsConfirmed", "true");
+        } else if (result.isDenied) {
+          localStorage.setItem("termsIsConfirmed", "false");
+          window.close();
+        }
+      });
+    };
   };
 
   return null;