From 29c2ff3bb4ebc8411174dc6405cb0d3e1eefa27e Mon Sep 17 00:00:00 2001 From: Dima Grossman Date: Wed, 11 Dec 2024 18:04:35 +0200 Subject: [PATCH 1/2] fix(dashboard): clerk selector for new orgs created --- .../side-navigation/organization-dropdown.tsx | 18 ++++++++++++++---- apps/dashboard/src/context/opt-in-provider.tsx | 15 +++++++++++---- .../src/hooks/use-new-dashboard-opt-in.ts | 5 +++++ 3 files changed, 30 insertions(+), 8 deletions(-) diff --git a/apps/dashboard/src/components/side-navigation/organization-dropdown.tsx b/apps/dashboard/src/components/side-navigation/organization-dropdown.tsx index 84aea5b16bd..99c5ecb7c67 100644 --- a/apps/dashboard/src/components/side-navigation/organization-dropdown.tsx +++ b/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 ; + return ( + + ); }; diff --git a/apps/dashboard/src/context/opt-in-provider.tsx b/apps/dashboard/src/context/opt-in-provider.tsx index 0e8eb6f3b3c..a3823a75e12 100644 --- a/apps/dashboard/src/context/opt-in-provider.tsx +++ b/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}; }; diff --git a/apps/dashboard/src/hooks/use-new-dashboard-opt-in.ts b/apps/dashboard/src/hooks/use-new-dashboard-opt-in.ts index 78b1c39d0ae..3d602aadd84 100644 --- a/apps/dashboard/src/hooks/use-new-dashboard-opt-in.ts +++ b/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, From a91439cd5f1b1f42ad277ab0d70a6968dce3daa0 Mon Sep 17 00:00:00 2001 From: Dima Grossman Date: Wed, 11 Dec 2024 18:08:30 +0200 Subject: [PATCH 2/2] fix: pointer --- apps/dashboard/src/context/opt-in-provider.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/apps/dashboard/src/context/opt-in-provider.tsx b/apps/dashboard/src/context/opt-in-provider.tsx index a3823a75e12..769df76a87a 100644 --- a/apps/dashboard/src/context/opt-in-provider.tsx +++ b/apps/dashboard/src/context/opt-in-provider.tsx @@ -10,11 +10,14 @@ export const OptInProvider = (props: PropsWithChildren) => { const hasV2OptIn = searchParams.has('v2_opt_in'); useLayoutEffect(() => { - if (isLoaded && status !== NewDashboardOptInStatusEnum.OPTED_IN && !hasV2OptIn) { - (async () => { - await optIn(); + if (isLoaded && status !== NewDashboardOptInStatusEnum.OPTED_IN) { + if (hasV2OptIn) { + (async () => { + await optIn(); + })(); + } else { redirectToLegacyDashboard(); - })(); + } } // set light theme on the new domain for both legacy and new dashboard