From 73249ae40619d070bbbdcc421b705e0c26a4e435 Mon Sep 17 00:00:00 2001
From: FromTheLOLAshes <153381408+FromTheLOLAshes@users.noreply.github.com>
Date: Sun, 19 May 2024 19:51:12 -0400
Subject: [PATCH] Redirect to storyteller.ai if user not allowed to use studio
 (#396)

Co-authored-by: Christopher Oliphant <RALifeCoach@users.noreply.github.com>
---
 app/hoc/withProtectedRoute/index.tsx | 35 ++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/app/hoc/withProtectedRoute/index.tsx b/app/hoc/withProtectedRoute/index.tsx
index 9c2420c30..1f493342a 100644
--- a/app/hoc/withProtectedRoute/index.tsx
+++ b/app/hoc/withProtectedRoute/index.tsx
@@ -1,7 +1,7 @@
-import { useEffect, ComponentType } from "react";
+import { useEffect, ComponentType, useState } from "react";
 import { useNavigate, useLocation } from "@remix-run/react";
 import { useSignals } from "@preact/signals-react/runtime";
-import { LoadingDots } from "~/components";
+import { ConfirmationModal, LoadingDots } from "~/components";
 import { authentication } from "~/signals";
 import { AUTH_STATUS } from "~/enums";
 
@@ -9,14 +9,39 @@ export const withProtectionRoute =
   <P extends {}>(Component: ComponentType<P>) =>
   (rest: P) => {
     useSignals();
-    const { status } = authentication;
+    const { status, userInfo } = authentication;
+    const [auth, setAuth] = useState("init");
+
+    useEffect(() => {
+      if (auth === "redirect") {
+        window.open("https://storyteller.ai", "_self");
+      }
+    }, [auth]);
 
     //render according to auth status
     if (status.value === AUTH_STATUS.LOGGED_OUT) {
       return <RedirectToLogin />;
     }
-    if (status.value === AUTH_STATUS.LOGGED_IN) {
-      return <Component {...rest} />;
+    if (auth === "init") {
+      if (status.value === AUTH_STATUS.LOGGED_IN) {
+        if (userInfo.value?.can_access_studio) {
+          return <Component {...rest} />;
+        }
+        setAuth("confirm");
+      }
+    }
+
+    if (auth === "confirm") {
+      return (
+        <ConfirmationModal
+          text="We're in a closed beta and you'll need a beta key to use this app."
+          title="Unauthorized"
+          open={true}
+          onClose={() => setAuth("redirect")}
+          okText="Okay"
+          onOk={() => setAuth("redirect")}
+        />
+      );
     }
     return (
       <div className="fixed flex h-full w-full flex-col  items-center justify-center">