fix(dashboard): Opt-in new orgs created from org switcher in v2

apps/dashboard/src/components/side-navigation/organization-dropdown.tsx

@@ -1,5 +1,6 @@
 import { OrganizationSwitcher as ClerkOrganizationSwitcher } from '@clerk/clerk-react';
 import type { OrganizationSwitcherTheme } from '@clerk/types';
+import { ROUTES } from '../../utils/routes';
 
 const OrganizationSwitcherAppearance: OrganizationSwitcherTheme = {
   elements: {
@@ -11,19 +12,28 @@ const OrganizationSwitcherAppearance: OrganizationSwitcherTheme = {
     organizationSwitcherPopoverActionButton__manageOrganization: {
       display: 'none',
     },
+    organizationSwitcherPopoverInvitationActionsBox: 'p-0 pr-2',
+    organizationSwitcherInvitationAcceptButton: '!text-[10px] !min-w-[90px] !w-[90px] px-0',
     organizationPreviewMainIdentifier: 'text-foreground-950 text-base',
     organizationPreviewAvatarContainer: 'size-6 rounded-full',
     organizationPreviewAvatarBox: 'rounded-full size-6',
-    organizationPreview: 'py-1.5 px-4 gap-2',
-    organizationSwitcherPopoverActionButton: 'py-1.5 px-4 -ml-1.5 text-sm gap-0',
+    organizationPreview: 'py-1.5 px-2 gap-2',
+    organizationSwitcherPopoverActionButton: 'py-1 px-2 -ml-1.5 text-sm gap-0',
     organizationSwitcherPopoverCard: 'w-64',
     organizationSwitcherPreviewButton: 'p-0 [&>svg]:mr-2 !border-0',
     organizationPreviewSecondaryIdentifier: 'hidden',
     organizationSwitcherPopoverActions:
-      'py-2 [&_.cl-organizationPreviewMainIdentifier]:text-sm [&>div:nth-child(2)]:!border-0',
+      'py-0.5 [&_.cl-organizationPreviewMainIdentifier]:text-sm [&>div:nth-child(2)]:!border-0',
   },
 };
 
 export const OrganizationDropdown = () => {
-  return <ClerkOrganizationSwitcher hidePersonal appearance={OrganizationSwitcherAppearance} />;
+  return (
+    <ClerkOrganizationSwitcher
+      hidePersonal
+      skipInvitationScreen
+      afterCreateOrganizationUrl={ROUTES.USECASE_SELECT + '?v2_opt_in=true'}
+      appearance={OrganizationSwitcherAppearance}
+    />
+  );
 };

apps/dashboard/src/context/opt-in-provider.tsx

@@ -1,19 +1,26 @@
 import { PropsWithChildren, useLayoutEffect } from 'react';
 import { NewDashboardOptInStatusEnum } from '@novu/shared';
 import { useNewDashboardOptIn } from '@/hooks/use-new-dashboard-opt-in';
+import { useSearchParams } from 'react-router-dom';
 
 export const OptInProvider = (props: PropsWithChildren) => {
   const { children } = props;
-  const { status, isLoaded, redirectToLegacyDashboard } = useNewDashboardOptIn();
+  const { status, isLoaded, redirectToLegacyDashboard, optIn } = useNewDashboardOptIn();
+  const [searchParams] = useSearchParams();
+  const hasV2OptIn = searchParams.has('v2_opt_in');
 
   useLayoutEffect(() => {
-    if (isLoaded && status !== NewDashboardOptInStatusEnum.OPTED_IN) {
-      redirectToLegacyDashboard();
+    if (isLoaded && status !== NewDashboardOptInStatusEnum.OPTED_IN && !hasV2OptIn) {
+      (async () => {
+        await optIn();
+        redirectToLegacyDashboard();
+      })();
     }
 
     // set light theme on the new domain for both legacy and new dashboard
     localStorage.setItem('mantine-theme', 'light');
-  }, [status, redirectToLegacyDashboard, isLoaded]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status, redirectToLegacyDashboard, isLoaded, hasV2OptIn]);
 
   return <>{children}</>;
 };

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

@@ -57,9 +57,14 @@ export function useNewDashboardOptIn() {
     redirectToLegacyDashboard();
   };
 
+  const optIn = async () => {
+    await updateUserOptInStatus(NewDashboardOptInStatusEnum.OPTED_IN);
+  };
+
   return {
     isLoaded,
     optOut,
+    optIn,
     status: getCurrentOptInStatus(),
     isFirstVisit: getNewDashboardFirstVisit(),
     updateNewDashboardFirstVisit,