feat(dashboard-v2): redirect to /upgrade when unsubscribed user tries to access subscription-only features

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>
+);

packages/dashboard-v2/src/components/LoadingIndicator/index.js

@@ -1 +1,2 @@
 export * from "./ContainerLoadingIndicator";
+export * from "./FullScreenLoadingIndicator";

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,
+  };
+}

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 && (
+      {!user && <FullScreenLoadingIndicator />}
-        <div className="fixed inset-0 flex justify-center items-center bg-palette-100/50">
-          <ContainerLoadingIndicator className="!text-palette-200/50" />
-        </div>
-      )}
       {user && <>{children}</>}
     </Wrapper>
   );

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>