From 8653e8eea51c251d1b690ce34b030802b312bddd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20L=C3=B3pez?= <zomars@me.com>
Date: Mon, 5 Sep 2022 14:25:21 -0600
Subject: [PATCH] Adds banner to Opt-in to V2 UI (#4187)

---
 apps/web/pages/api/v2-opt-in.ts               | 14 ++++--
 .../users/components/UserV2OptInBanner.tsx    | 44 +++++++++++++++++++
 packages/ui/v2/core/Shell.tsx                 |  2 +
 3 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 packages/features/users/components/UserV2OptInBanner.tsx

diff --git a/apps/web/pages/api/v2-opt-in.ts b/apps/web/pages/api/v2-opt-in.ts
index 683063c30c..cb2e7b8083 100644
--- a/apps/web/pages/api/v2-opt-in.ts
+++ b/apps/web/pages/api/v2-opt-in.ts
@@ -4,9 +4,17 @@ import { ensureSession } from "@calcom/lib/auth";
 import { defaultHandler, defaultResponder } from "@calcom/lib/server";
 
 async function handler(req: NextApiRequest, res: NextApiResponse<Response>): Promise<void> {
-  const session = await ensureSession({ req });
-  /* Only admins can opt-in to V2 for now */
-  if (session.user.role === "ADMIN") res.setHeader("Set-Cookie", "calcom-v2-early-access=1; Path=/");
+  // Only logged in users can opt-in/out
+  await ensureSession({ req });
+
+  // If has the cookie, Opt-out of V2
+  if ("calcom-v2-early-access" in req.cookies && req.cookies["calcom-v2-early-access"] === "1") {
+    res.setHeader("Set-Cookie", `calcom-v2-early-access=0; Max-Age=0; Path=/`);
+  } else {
+    /* Opt-int to V2 */
+    res.setHeader("Set-Cookie", "calcom-v2-early-access=1; Path=/");
+  }
+
   res.redirect("/");
 }
 
diff --git a/packages/features/users/components/UserV2OptInBanner.tsx b/packages/features/users/components/UserV2OptInBanner.tsx
new file mode 100644
index 0000000000..46daf21273
--- /dev/null
+++ b/packages/features/users/components/UserV2OptInBanner.tsx
@@ -0,0 +1,44 @@
+import { Alert } from "@calcom/ui/Alert";
+import { Alert as AlertV2 } from "@calcom/ui/v2/core/Alert";
+
+function UserV2OptInBanner() {
+  // Only show on client-side
+  if (typeof document === "undefined") return null;
+
+  const hasV2OptInCookie = document.cookie.includes("calcom-v2-early-access=1");
+
+  if (hasV2OptInCookie)
+    return (
+      <AlertV2
+        severity="info"
+        title={
+          <>
+            You&apos;re using the new version of Cal.com.{" "}
+            <a href="/api/v2-opt-in" className="underline">
+              Go back to previous version
+            </a>
+            .
+          </>
+        }
+        className="mb-2"
+      />
+    );
+
+  return (
+    <Alert
+      severity="info"
+      title={
+        <>
+          Want to try the new version of Cal.com?{" "}
+          <a href="/api/v2-opt-in" className="underline">
+            Opt-in to our V2 beta
+          </a>
+          .
+        </>
+      }
+      className="mb-2"
+    />
+  );
+}
+
+export default UserV2OptInBanner;
diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx
index 039c491e5d..d45dc0e9a9 100644
--- a/packages/ui/v2/core/Shell.tsx
+++ b/packages/ui/v2/core/Shell.tsx
@@ -11,6 +11,7 @@ import LicenseBanner from "@calcom/features/ee/common/components/LicenseBanner";
 import TrialBanner from "@calcom/features/ee/common/components/TrialBanner";
 import ImpersonatingBanner from "@calcom/features/ee/impersonation/components/ImpersonatingBanner";
 import HelpMenuItem from "@calcom/features/ee/support/components/HelpMenuItem";
+import UserV2OptInBanner from "@calcom/features/users/components/UserV2OptInBanner";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
 import { JOIN_SLACK, ROADMAP, WEBAPP_URL } from "@calcom/lib/constants";
@@ -137,6 +138,7 @@ const Layout = (props: LayoutProps) => {
       <div className="flex h-screen overflow-hidden" data-testid="dashboard-shell">
         {props.SidebarContainer || <SideBarContainer />}
         <div className="flex w-0 flex-1 flex-col overflow-hidden">
+          <UserV2OptInBanner />
           <ImpersonatingBanner />
           <MainContainer {...props} />
         </div>