feat(web): v3 dashboard opt-in widget (#6873)

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

@@ -0,0 +1,112 @@
+import { Card } from '@mantine/core';
+import { css } from '@novu/novui/css';
+import { Text, Title, Button, IconButton } from '@novu/novui';
+import { IconOutlineClose } from '@novu/novui/icons';
+import { useUser } from '@clerk/clerk-react';
+import { FeatureFlagsKeysEnum, NewDashboardOptInStatusEnum } from '@novu/shared';
+import { IS_SELF_HOSTED } from '../../../../config';
+import { useFeatureFlag } from '../../../../hooks';
+
+export function NewDashboardOptInWidget() {
+  const { user } = useUser();
+  const isNewDashboardEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_NEW_DASHBOARD_ENABLED);
+
+  const isDismissed = user?.unsafeMetadata?.newDashboardOptInStatus === NewDashboardOptInStatusEnum.DISMISSED;
+
+  if (IS_SELF_HOSTED || isDismissed || !isNewDashboardEnabled) {
+    return null;
+  }
+
+  const updateUserOptInStatus = (status: NewDashboardOptInStatusEnum) => {
+    if (!user) return;
+
+    user.update({
+      unsafeMetadata: {
+        ...user.unsafeMetadata,
+        newDashboardOptInStatus: status,
+      },
+    });
+  };
+
+  function handleOptIn() {
+    const newDashboardUrl = process.env.NEW_DASHBOARD_URL;
+    if (!newDashboardUrl || !user) return;
+
+    updateUserOptInStatus(NewDashboardOptInStatusEnum.OPTED_IN);
+    window.location.href = newDashboardUrl;
+  }
+
+  function handleDismiss() {
+    updateUserOptInStatus(NewDashboardOptInStatusEnum.DISMISSED);
+  }
+
+  return (
+    <Card shadow="sm" className={styles.card}>
+      <div className={styles.content}>
+        <div className={styles.header}>
+          <Title className={styles.title}>
+            <span style={{ marginRight: '4px' }}>🎉</span> You're invited!
+          </Title>
+          <IconButton onClick={handleDismiss} Icon={IconOutlineClose} size="xs" />
+        </div>
+        <Text className={styles.text}>
+          We’d love to extend you the access for the new workflows dashboard that we’re building.
+        </Text>
+      </div>
+      <div className={styles.buttonContainer}>
+        <Button size="sm" variant="transparent" onClick={handleOptIn}>
+          Take me there
+        </Button>
+      </div>
+    </Card>
+  );
+}
+
+const styles = {
+  card: css({
+    padding: '9px 16px !important',
+    backgroundColor: 'surface.popover !important',
+    _before: {
+      content: '""',
+      position: 'absolute',
+      width: '50',
+      top: '0',
+      right: '0',
+      bottom: '0',
+      left: '0',
+      borderTopLeftRadius: '100',
+      borderBottomLeftRadius: '100',
+      bgGradient: `to-b`,
+      gradientFrom: 'colorPalette.start',
+      gradientTo: 'colorPalette.end',
+    },
+  }),
+  content: css({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+    alignSelf: 'stretch',
+  }),
+  header: css({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: '8px',
+  }),
+  title: css({
+    fontSize: '12px',
+    fontWeight: '700 ',
+    lineHeight: '20px',
+  }),
+  text: css({
+    fontSize: '12px',
+    lineHeight: '16px',
+    fontWeight: '500',
+    fontStyle: 'normal',
+  }),
+  buttonContainer: css({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  }),
+};

apps/web/src/components/nav/RootNavMenu.tsx

@@ -39,6 +39,7 @@ import { SidebarFooter } from '../layout/components/LocalStudioSidebar/SidebarFo
 import { useNavigateToLocalStudio } from '../../studio/hooks/useNavigateToLocalStudio';
 import { OpenLocalStudioModal } from '../../studio/components/OpenLocalStudioModal';
 import { OutlineButton } from '../../studio/components/OutlineButton';
+import { NewDashboardOptInWidget } from '../layout/components/v2/NewDashboardOptInWidget';
 
 const getEnvPageRoute = (route: ROUTES, env: BaseEnvironmentEnum) => parseUrl(route, { env });
 
@@ -161,6 +162,7 @@ export const RootNavMenu: React.FC = () => {
       {isV2Enabled ? (
         <>
           <SidebarFooter>
+            <NewDashboardOptInWidget />
             <FreeTrialSidebarWidget />
             <OutlineButton fullWidth onClick={navigateToLocalStudio} Icon={IconLaptop}>
               Open Local Studio

packages/shared/src/types/clerk/types.ts

@@ -19,3 +19,17 @@ export type UserPublicMetadata = {
   servicesHashes?: IServicesHashes;
   jobTitle?: JobTitleEnum;
 };
+
+/**
+ * Unsafe metadata can be updated from the frontend directly
+ */
+export type UserUnsafeMetadata = {
+  newDashboardOptInStatus?: NewDashboardOptInStatusEnum;
+};
+
+export enum NewDashboardOptInStatusEnum {
+  OPTED_IN = 'opted_in', // user switched to the new dashboard
+  DISMISSED = 'dismissed', // user dismissed the opt-in widget
+  OPTED_OUT = 'opted_out', // user switched back to the old dashboard
+  // undefined -> user has not interacted with the widget yet
+}

packages/shared/src/types/feature-flags/feature-flags.ts

@@ -16,4 +16,5 @@ export enum FeatureFlagsKeysEnum {
   IS_INTEGRATION_INVALIDATION_DISABLED = 'IS_INTEGRATION_INVALIDATION_DISABLED',
   IS_EMAIL_INLINE_CSS_DISABLED = 'IS_EMAIL_INLINE_CSS_DISABLED',
   IS_CONTROLS_AUTOCOMPLETE_ENABLED = 'IS_CONTROLS_AUTOCOMPLETE_ENABLED',
+  IS_NEW_DASHBOARD_ENABLED = 'IS_NEW_DASHBOARD_ENABLED',
 }