From ef97adf2fb10f4aef3d0be66546008bcc39f9690 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Tue, 29 Mar 2022 16:02:02 +0200
Subject: [PATCH] feat(dashboard-v2): redirect to /upgrade when unsubscribed
 user tries to access subscription-only features

---
 .../FullScreenLoadingIndicator.js             |  7 +++++
 .../src/components/LoadingIndicator/index.js  |  1 +
 .../src/hooks/useUpgradeRedirect.js           | 31 +++++++++++++++++++
 .../src/layouts/DashboardLayout.js            |  8 ++---
 packages/dashboard-v2/src/pages/index.js      |  7 +++++
 5 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 packages/dashboard-v2/src/components/LoadingIndicator/FullScreenLoadingIndicator.js
 create mode 100644 packages/dashboard-v2/src/hooks/useUpgradeRedirect.js

diff --git a/packages/dashboard-v2/src/components/LoadingIndicator/FullScreenLoadingIndicator.js b/packages/dashboard-v2/src/components/LoadingIndicator/FullScreenLoadingIndicator.js
new file mode 100644
index 00000000..ad261e2e
--- /dev/null
+++ b/packages/dashboard-v2/src/components/LoadingIndicator/FullScreenLoadingIndicator.js
@@ -0,0 +1,7 @@
+import { ContainerLoadingIndicator } from "./ContainerLoadingIndicator";
+
+export const FullScreenLoadingIndicator = () => (
+  <div className="fixed inset-0 flex justify-center items-center bg-palette-100/50">
+    <ContainerLoadingIndicator className="!text-palette-200/50" />
+  </div>
+);
diff --git a/packages/dashboard-v2/src/components/LoadingIndicator/index.js b/packages/dashboard-v2/src/components/LoadingIndicator/index.js
index df7c2a88..5e7f91f4 100644
--- a/packages/dashboard-v2/src/components/LoadingIndicator/index.js
+++ b/packages/dashboard-v2/src/components/LoadingIndicator/index.js
@@ -1 +1,2 @@
 export * from "./ContainerLoadingIndicator";
+export * from "./FullScreenLoadingIndicator";
diff --git a/packages/dashboard-v2/src/hooks/useUpgradeRedirect.js b/packages/dashboard-v2/src/hooks/useUpgradeRedirect.js
new file mode 100644
index 00000000..5529c152
--- /dev/null
+++ b/packages/dashboard-v2/src/hooks/useUpgradeRedirect.js
@@ -0,0 +1,31 @@
+import { navigate } from "gatsby";
+import { useEffect, useState } from "react";
+
+import { usePortalSettings } from "../contexts/portal-settings";
+import { useUser } from "../contexts/user";
+import freeTier from "../lib/tiers";
+
+export default function useUpgradeRedirect() {
+  const [verifyingSubscription, setVerifyingSubscription] = useState(true);
+  const { user, loading: userDataLoading } = useUser();
+  const { settings, loading: portalSettingsLoading } = usePortalSettings();
+
+  useEffect(() => {
+    setVerifyingSubscription(true);
+    const isDataLoaded = !userDataLoading && !portalSettingsLoading && user && settings;
+    const hasPaidSubscription = user.tier > freeTier.tier;
+
+    if (isDataLoaded) {
+      if (settings.isSubscriptionRequired && !hasPaidSubscription) {
+        console.log("redirecting", user, settings);
+        navigate("/upgrade");
+      } else {
+        setVerifyingSubscription(false);
+      }
+    }
+  }, [user, userDataLoading, settings.isSubscriptionRequired, portalSettingsLoading, settings]);
+
+  return {
+    verifyingSubscription,
+  };
+}
diff --git a/packages/dashboard-v2/src/layouts/DashboardLayout.js b/packages/dashboard-v2/src/layouts/DashboardLayout.js
index b369ece3..76af9218 100644
--- a/packages/dashboard-v2/src/layouts/DashboardLayout.js
+++ b/packages/dashboard-v2/src/layouts/DashboardLayout.js
@@ -8,7 +8,7 @@ import { PageContainer } from "../components/PageContainer";
 import { NavBar } from "../components/Navbar";
 import { Footer } from "../components/Footer";
 import { UserProvider, useUser } from "../contexts/user";
-import { ContainerLoadingIndicator } from "../components/LoadingIndicator";
+import { FullScreenLoadingIndicator } from "../components/LoadingIndicator";
 
 const Wrapper = styled.div.attrs({
   className: "min-h-screen overflow-hidden",
@@ -24,11 +24,7 @@ const Layout = ({ children }) => {
   // Prevent from flashing the dashboard screen to unauthenticated users.
   return (
     <Wrapper>
-      {!user && (
-        <div className="fixed inset-0 flex justify-center items-center bg-palette-100/50">
-          <ContainerLoadingIndicator className="!text-palette-200/50" />
-        </div>
-      )}
+      {!user && <FullScreenLoadingIndicator />}
       {user && <>{children}</>}
     </Wrapper>
   );
diff --git a/packages/dashboard-v2/src/pages/index.js b/packages/dashboard-v2/src/pages/index.js
index 4db97e04..1fd88651 100644
--- a/packages/dashboard-v2/src/pages/index.js
+++ b/packages/dashboard-v2/src/pages/index.js
@@ -12,9 +12,16 @@ import Slider from "../components/Slider/Slider";
 import CurrentUsage from "../components/CurrentUsage";
 import Uploader from "../components/Uploader/Uploader";
 import CurrentPlan from "../components/CurrentPlan";
+import { FullScreenLoadingIndicator } from "../components/LoadingIndicator";
+import useUpgradeRedirect from "../hooks/useUpgradeRedirect";
 
 const IndexPage = () => {
   const showRecentActivity = useMedia(`(min-width: ${theme.screens.md})`);
+  const { verifyingSubscription } = useUpgradeRedirect();
+
+  if (verifyingSubscription) {
+    return <FullScreenLoadingIndicator />;
+  }
 
   return (
     <PlansProvider>