From 42df38617ac423f343708285be79197e8738ecfa Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Wed, 6 Mar 2024 03:48:48 -0500
Subject: [PATCH] new feature flag checks

---
 .../src/api/session/GetSessionInfo.ts         |  1 +
 .../components/src/session/SessionWrapper.ts  |  9 ++++++++-
 .../VideoStyleTransferNotAvailable.tsx        | 19 +++++++++++++++++++
 .../VideoStyleTransfer.tsx                    |  6 +++---
 .../pages/video_workflow/VideoWorkflow.tsx    |  1 +
 5 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 packages/fakeyou.com/src/v2/view/_common/VideoStyleTransferNotAvailable.tsx

diff --git a/packages/components/src/api/session/GetSessionInfo.ts b/packages/components/src/api/session/GetSessionInfo.ts
index f9bade4f3c..ecabec16ee 100644
--- a/packages/components/src/api/session/GetSessionInfo.ts
+++ b/packages/components/src/api/session/GetSessionInfo.ts
@@ -20,6 +20,7 @@ export interface UserInfo {
 
   // Rollout feature flags
   can_access_studio: boolean,
+  maybe_feature_flags: string[],
 
   // Usage
   can_use_tts: boolean,
diff --git a/packages/components/src/session/SessionWrapper.ts b/packages/components/src/session/SessionWrapper.ts
index 4df52de6d4..f8726475e0 100644
--- a/packages/components/src/session/SessionWrapper.ts
+++ b/packages/components/src/session/SessionWrapper.ts
@@ -56,10 +56,17 @@ export class SessionWrapper {
   public canAccessStudio(): boolean {
     const hostnameAllowed = StudioRolloutHostnameAllowed();
     const userAllowed =
-      this.sessionStateResponse?.user?.can_access_studio || false;
+      this.sessionStateResponse?.user?.can_access_studio || 
+      this.sessionStateResponse?.user?.maybe_feature_flags.includes("studio") ||
+      false;
     return hostnameAllowed && userAllowed;
   }
 
+  // Feature flag rollout for Video Style Transfer
+  public canAccessVideoStyleTransfer(): boolean {
+    return this.sessionStateResponse?.user?.maybe_feature_flags.includes("video_style_transfer") || false;
+  }
+
   // Username is all lowercase
   public getUsername(): string | undefined {
     return this.sessionStateResponse?.user?.username;
diff --git a/packages/fakeyou.com/src/v2/view/_common/VideoStyleTransferNotAvailable.tsx b/packages/fakeyou.com/src/v2/view/_common/VideoStyleTransferNotAvailable.tsx
new file mode 100644
index 0000000000..1f37135d2f
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/_common/VideoStyleTransferNotAvailable.tsx
@@ -0,0 +1,19 @@
+import { DiscordLink2 } from "@storyteller/components/src/elements/DiscordLink2";
+import { Container } from "components/common";
+import PageHeader from "components/layout/PageHeader";
+import React from "react";
+
+export function VideoStyleTransferNotAvailable() {
+  const subText = (
+    <> Please visit our <DiscordLink2 /> to join the wait list. </>
+  );
+
+  return (
+    <Container type="panel" className="mb-5">
+      <PageHeader
+        title={"Video Style Transfer Features Not Available"}
+        subText={subText}
+      />
+    </Container>
+  );
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/VideoStyleTransfer.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/VideoStyleTransfer.tsx
index 5425463984..2358fadeaf 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/VideoStyleTransfer.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/VideoStyleTransfer.tsx
@@ -1,7 +1,6 @@
 import React, { useReducer, useEffect } from "react";
 
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
-import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable";
 import { useInferenceJobs, useLocalize } from "hooks";
 import {
   FrontendInferenceJobType,
@@ -13,6 +12,7 @@ import { states, reducer } from "./reducer";
 import SubRoutes from "./routes";
 import PageHeaderWithImage from "components/layout/PageHeaderWithImage";
 import { faFilms } from "@fortawesome/pro-solid-svg-icons";
+import { VideoStyleTransferNotAvailable } from "v2/view/_common/VideoStyleTransferNotAvailable";
 
 export default function VideoStyleTransfer(props: {
   enqueueInferenceJob: (
@@ -48,8 +48,8 @@ export default function VideoStyleTransfer(props: {
     }
   }, [pageState, enqueueInferenceJob]);
 
-  if (!props.sessionWrapper.canAccessStudio()) {
-    return <StudioNotAvailable />;
+  if (!props.sessionWrapper.canAccessVideoStyleTransfer()) {
+    return <VideoStyleTransferNotAvailable />;
   }
 
   return (
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_workflow/VideoWorkflow.tsx b/packages/fakeyou.com/src/v2/view/pages/video_workflow/VideoWorkflow.tsx
index ee42efe013..d9b042b7c3 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_workflow/VideoWorkflow.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_workflow/VideoWorkflow.tsx
@@ -48,6 +48,7 @@ export default function VideoWorkflow(props:{
   }, [pageState, enqueueInferenceJob]);
 
   if (!props.sessionWrapper.canAccessStudio()) {
+    //return <VideoStyleTransferNotAvailable />
     return <StudioNotAvailable />
   }