feat(web,dashboard): opt-out, redirects (#6922)

apps/dashboard/package.json

@@ -20,7 +20,7 @@
     "test:e2e:merge-report": "playwright merge-reports --reporter html"
   },
   "dependencies": {
-    "@clerk/clerk-react": "^5.2.5",
+    "@clerk/clerk-react": "^5.15.1",
     "@codemirror/lang-liquid": "^6.2.1",
     "@hookform/resolvers": "^3.9.0",
     "@lezer/highlight": "^1.2.1",
@@ -78,7 +78,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@clerk/types": "^4.6.1",
+     "@clerk/types": "^4.30.0",
     "@eslint/js": "^9.9.0",
     "@hookform/devtools": "^4.3.0",
     "@playwright/test": "^1.44.0",

apps/dashboard/proxy-server.js

@@ -27,6 +27,8 @@ app.use(
   })
 );
 
+app.use('/images', express.static('images'));
+
 app.get('/legacy/*', (req, res, next) => {
   legacyHandler(__dirname, req, res, next);
 });

apps/dashboard/src/components/opt-in-modal.tsx

@@ -54,7 +54,7 @@ export const OptInModal = () => {
 
 const Image = () => (
   <div className="relative">
-    <img src="/public/images/opt-in.png" alt="New Dashboard Preview" />
+    <img src="/images/opt-in.png" alt="New Dashboard Preview" />
     <div
       className="absolute inset-0 rounded-lg"
       style={{ background: 'linear-gradient(163deg, rgba(255, 255, 255, 0.00) 7.65%, #FFF 92.93%)' }}

apps/dashboard/src/components/user-profile.tsx

@@ -1,6 +1,20 @@
 import { UserButton } from '@clerk/clerk-react';
 import { ROUTES } from '@/utils/routes';
+import { useNewDashboardOptIn } from '@/hooks/use-new-dashboard-opt-in';
+import { RiSignpostFill } from 'react-icons/ri';
 
 export function UserProfile() {
-  return <UserButton afterSignOutUrl={ROUTES.SIGN_IN} />;
+  const { redirectToLegacyDashboard } = useNewDashboardOptIn();
+
+  return (
+    <UserButton afterSignOutUrl={ROUTES.SIGN_IN}>
+      <UserButton.MenuItems>
+        <UserButton.Action
+          label="Go back to the legacy dashboard"
+          labelIcon={<RiSignpostFill size="16" color="var(--nv-colors-typography-text-main)" />}
+          onClick={redirectToLegacyDashboard}
+        />
+      </UserButton.MenuItems>
+    </UserButton>
+  );
 }

apps/dashboard/src/config/index.ts

@@ -23,3 +23,5 @@ export const INTERCOM_APP_ID = import.meta.env.VITE_INTERCOM_APP_ID;
 export const SEGMENT_KEY = import.meta.env.VITE_SEGMENT_KEY;
 
 export const MIXPANEL_KEY = import.meta.env.VITE_MIXPANEL_KEY;
+
+export const LEGACY_DASHBOARD_URL = import.meta.env.VITE_LEGACY_DASHBOARD_URL;

apps/dashboard/src/hooks/use-new-dashboard-opt-in.ts

@@ -1,3 +1,4 @@
+import { LEGACY_DASHBOARD_URL } from '@/config';
 import { useUser } from '@clerk/clerk-react';
 import { NewDashboardOptInStatusEnum } from '@novu/shared';
 
@@ -21,11 +22,9 @@ export function useNewDashboardOptIn() {
     return user.unsafeMetadata?.newDashboardOptInStatus || null;
   };
 
-  const redirectToNewDashboard = () => {
-    const newDashboardUrl = process.env.NEW_DASHBOARD_URL;
-    if (!newDashboardUrl) return;
-
-    window.location.href = newDashboardUrl;
+  const redirectToLegacyDashboard = () => {
+    optOut();
+    window.location.href = LEGACY_DASHBOARD_URL || window.location.origin + '/legacy';
   };
 
   const optIn = () => {
@@ -45,6 +44,6 @@ export function useNewDashboardOptIn() {
     optOut,
     dismiss,
     status: getCurrentOptInStatus(),
-    redirectToNewDashboard,
+    redirectToLegacyDashboard,
   };
 }

apps/web/src/components/layout/components/v2/NewDashboardOptInWidget.tsx

@@ -12,7 +12,8 @@ export function NewDashboardOptInWidget() {
 
   const isNewDashboardEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_NEW_DASHBOARD_ENABLED);
 
-  const isDismissed = status === NewDashboardOptInStatusEnum.DISMISSED;
+  const isDismissed =
+    status === NewDashboardOptInStatusEnum.DISMISSED || status === NewDashboardOptInStatusEnum.OPTED_OUT;
 
   if (IS_SELF_HOSTED || isDismissed || !isNewDashboardEnabled) {
     return null;

apps/web/src/config/index.ts

@@ -94,6 +94,8 @@ export const CLERK_PUBLISHABLE_KEY =
 export const IS_UNDER_DASHBOARD =
   window._env_.REACT_IS_UNDER_DASHBOARD || process.env.REACT_IS_UNDER_DASHBOARD || 'false';
 
+export const NEW_DASHBOARD_URL = window._env_.REACT_APP_NEW_DASHBOARD_URL || process.env.REACT_APP_NEW_DASHBOARD_URL;
+
 if (IS_EE_AUTH_ENABLED && !CLERK_PUBLISHABLE_KEY) {
   throw new Error('Missing Clerk Publishable Key');
 }

apps/web/src/hooks/useNewDashboardOptIn.ts

@@ -1,5 +1,6 @@
 import { useUser } from '@clerk/clerk-react';
 import { NewDashboardOptInStatusEnum } from '@novu/shared';
+import { NEW_DASHBOARD_URL } from '../config';
 
 export function useNewDashboardOptIn() {
   const { user } = useUser();
@@ -22,10 +23,7 @@ export function useNewDashboardOptIn() {
   };
 
   const redirectToNewDashboard = () => {
-    const newDashboardUrl = process.env.NEW_DASHBOARD_URL;
-    if (!newDashboardUrl) return;
-
-    window.location.href = newDashboardUrl;
+    window.location.href = NEW_DASHBOARD_URL || window.location.origin;
   };
 
   const optIn = () => {