fix(web): pixel perfect UI implementation of clerk components (novuhq…

…#6376)

Co-authored-by: Sokratis Vidros <[email protected]>

.cspell.json

@@ -52,7 +52,6 @@
     "bcast",
     "behaviour",
     "bestguess",
-    "tiptap",
     "binipdisplay",
     "bitauth",
     "bitjson",
@@ -61,6 +60,7 @@
     "bitsize",
     "bmsi",
     "bodyhash",
+    "bookmarkable",
     "braindead",
     "brevo",
     "BTAG",
@@ -99,6 +99,7 @@
     "codesandbox",
     "codesee",
     "codestream",
+    "coep",
     "commitlint",
     "compatbility",
     "cond",
@@ -107,8 +108,10 @@
     "consts",
     "containerd",
     "contenteditable",
+    "Contextand",
     "cpack",
     "Craco",
+    "credentialless",
     "crossorigin",
     "CSNET",
     "customdesigned",
@@ -123,6 +126,8 @@
     "decompile",
     "dedup",
     "deduplicated",
+    "deepmerge",
+    "Deepmerge",
     "defexps",
     "deliverytime",
     "dependabot",
@@ -161,6 +166,7 @@
     "elif",
     "emailjs",
     "Embeddable",
+    "Embedder",
     "Emek",
     "EMSA",
     "EMUI",
@@ -266,6 +272,7 @@
     "jpath",
     "Kamil",
     "kannel",
+    "kebabcase",
     "keybase",
     "keyrings",
     "keysize",
@@ -285,6 +292,8 @@
     "libspf",
     "limitbar",
     "liquidjs",
+    "Listoflistofobjects",
+    "Listofobjects",
     "livemode",
     "localforage",
     "localstack",
@@ -355,6 +364,7 @@
     "nbits",
     "nbsp",
     "neom",
+    "Nestedobject",
     "nestframework",
     "nestjs",
     "netblock",
@@ -373,7 +383,10 @@
     "nodemailer",
     "nodrag",
     "NOERROR",
+    "nonenumerable",
     "noninteractive",
+    "noopener",
+    "noreferrer",
     "norender",
     "nosniff",
     "NOTAUTH",
@@ -435,6 +448,7 @@
     "plusplus",
     "pnpm",
     "portname",
+    "powerpack",
     "prebuild",
     "prebuilds",
     "prefiltering",
@@ -444,6 +458,9 @@
     "prepush",
     "presigner",
     "prettierignore",
+    "Primitiveboolean",
+    "Primitivenumber",
+    "Primitivestring",
     "printjson",
     "privkey",
     "Projectkeys",
@@ -473,6 +490,7 @@
     "ratelimit",
     "Ratelimit",
     "ravsamhq",
+    "RBPT",
     "rcode",
     "rdatatype",
     "rdtype",
@@ -601,6 +619,7 @@
     "tfstate",
     "timelimit",
     "timethen",
+    "tiptap",
     "titlecase",
     "TKEY",
     "TMPDIR",
@@ -660,61 +679,7 @@
     "xcodebuild",
     "xkeysib",
     "zulip",
-    "zwnj",
-    "Embedder",
-    "credentialless",
-    "coep",
-    "prepush",
-    "xcodebuild",
-    "vstack",
-    "nimma",
-    "jpath",
-    "Nimma",
-    "jpath",
-    "vstack",
-    "liquidjs",
-    "tailwindcss",
-    "focusable",
-    "textareas",
-    "frameworkterminal",
-    "unarchived",
-    "Unarchived",
-    "grayscale",
-    "directcss",
-    "deliverytime",
-    "testmode",
-    "attatchment",
-    "Attatchment",
-    "ical",
-    "ganalytics",
-    "myicon",
-    "rrggbb",
-    "playerids",
-    "TVVV",
-    "Udnw",
-    "ARGB",
-    "EMUI",
-    "notif",
-    "suported",
-    "subresource",
-    "htmlonly",
-    "apidevtools",
-    "contenteditable",
-    "Contextand",
-    "powerpack",
-    "deepmerge",
-    "kebabcase",
-    "nonenumerable",
-    "Deepmerge",
-    "RBPT",
-    "Primitiveboolean",
-    "Primitivenumber",
-    "Primitivestring",
-    "Listofobjects",
-    "Nestedobject",
-    "Listoflistofobjects",
-    "noopener",
-    "noreferrer"
+    "zwnj"
   ],
   "flagWords": [],
   "patterns": [

apps/web/panda.config.ts

@@ -38,6 +38,7 @@ export default defineConfig({
       tokens: {
         sizes: {
           onboarding: { value: '880px' },
+          userSettings: { buttonWidth: { value: '204px' } },
         },
       },
       semanticTokens: {

apps/web/src/AppRoutes.tsx

@@ -61,7 +61,6 @@ import { novuOnboardedCookie } from './utils/cookies';
 import { EnterprisePrivatePageLayout } from './ee/clerk/components/EnterprisePrivatePageLayout';
 import { OnboardingPage } from './pages/playground/onboarding/Onboarding';
 import { PlaygroundPage } from './pages/playground/onboarding/PlaygroundPage';
-import { BillingRoutes } from './pages/BillingPages';
 import { StudioStepEditorPage } from './studio/pages/StudioStepEditorPage';
 
 const AuthRoutes = () => {
@@ -146,9 +145,7 @@ export const AppRoutes = () => {
             <Route path={ROUTES.PROFILE} element={<UserProfilePage />} />
             <Route path={`${ROUTES.SETTINGS}/*`} element={<Navigate to={ROUTES.SETTINGS} replace />} />
           </Route>
-        ) : (
-          <Route path="/billing" element={<BillingRoutes />} />
-        )}
+        ) : null}
         <Route path={ROUTES.INTEGRATIONS} element={<IntegrationsListPage />}>
           <Route path="create" element={<SelectProviderPage />} />
           <Route path="create/:channel/:providerId" element={<CreateProviderPage />} />

apps/web/src/constants/routes.ts

@@ -72,6 +72,24 @@ export enum ROUTES {
   STUDIO_ONBOARDING_SUCCESS = '/studio/onboarding/success',
 
   LOCAL_STUDIO_AUTH = '/local-studio/auth',
+
+  /** Account settings routes, bookmarkable by tabs */
+  MANAGE_ACCOUNT_SEGMENT = '/manage-account/',
+  MANAGE_ACCOUNT_USER_PROFILE = '/manage-account/user-profile',
+  MANAGE_ACCOUNT_ACCESS_SECURITY = '/manage-account/access-security',
+  MANAGE_ACCOUNT_ORGANIZATION = '/manage-account/organization',
+  MANAGE_ACCOUNT_TEAM_MEMBERS = '/manage-account/team-members',
+  MANAGE_ACCOUNT_BILLING = '/manage-account/billing',
+  MANAGE_ACCOUNT_BRANDING = '/manage-account/branding',
+}
+
+export enum MANAGE_ACCOUNT_ROUTE_SEGMENTS {
+  USER_PROFILE = 'user-profile',
+  ACCESS_SECURITY = 'access-security',
+  ORGANIZATION = 'organization',
+  TEAM_MEMBERS = 'team-members',
+  BILLING = 'billing',
+  BRANDING = 'branding',
 }
 
 export const PUBLIC_ROUTES_PREFIXES = new Set<string>(['/auth', '/local-studio']);

apps/web/src/ee/billing/components/FreeTrialSidebarWidget.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import { useSubscription } from '../hooks/useSubscription';
 import { pluralizeDaysLeft, WARNING_LIMIT_DAYS, COLOR_WARNING } from '../utils/freeTrial.constants';
 import { IS_EE_AUTH_ENABLED } from '../../../config/index';
+import { ROUTES } from '../../../constants/routes';
 
 export const FreeTrialSidebarWidget = () => {
   const { isFreeTrialActive, daysLeft, daysTotal, hasPaymentMethod } = useSubscription();
@@ -45,7 +46,7 @@ export const FreeTrialSidebarWidget = () => {
       />
       <Button
         onClick={() => {
-          navigate(IS_EE_AUTH_ENABLED ? '/billing' : '/settings/billing');
+          navigate(IS_EE_AUTH_ENABLED ? ROUTES.MANAGE_ACCOUNT_BILLING : ROUTES.BILLING);
         }}
         data-test-id="free-trial-widget-button"
         mt={12}

apps/web/src/ee/clerk/EnterpriseAuthRoutes.tsx

@@ -4,9 +4,11 @@ import { PublicPageLayout } from '../../components/layout/components/PublicPageL
 import { ROUTES } from '../../constants/routes';
 import OrganizationListPage from './pages/OrganizationListPage';
 import QuestionnairePage from './pages/QuestionnairePage';
+import ManageAccountPage from './pages/ManageAccountPage';
 import SignInPage from './pages/SignInPage';
 import SignUpPage from './pages/SignUpPage';
 import { useEffectOnce, useVercelIntegration, useVercelParams } from '../../hooks';
+import { PrivatePageLayout } from '../../components/layout/components/PrivatePageLayout';
 
 const EnterprisePublicAuthLayout = () => {
   return (
@@ -51,6 +53,9 @@ export const EnterpriseAuthRoutes = () => {
         <Route path={ROUTES.AUTH_SIGNUP_ORGANIZATION_LIST} element={<OrganizationListPage />} />
         <Route path={ROUTES.AUTH_APPLICATION} element={<QuestionnairePage />} />
       </Route>
+      <Route element={<PrivatePageLayout />}>
+        <Route path="/manage-account/:tabValue" element={<ManageAccountPage />} />
+      </Route>
     </>
   );
 };

apps/web/src/ee/clerk/components/UserProfileButton.tsx

@@ -1,43 +1,6 @@
 import { UserButton } from '@clerk/clerk-react';
-import { useColorScheme } from '@novu/design-system';
-import { Title } from '@novu/novui';
-import { IconCreditCard, IconGroup, IconRoomPreferences, IconWorkspacePremium } from '@novu/novui/icons';
-import { FeatureFlagsKeysEnum } from '@novu/shared';
 import { ROUTES } from '../../../constants/routes';
-import { useFeatureFlag } from '../../../hooks';
-import { BrandingPage } from '../../../pages/brand/BrandingPage';
-import { BillingPage } from '../../billing/pages/BillingPage';
-import { CustomOrganizationProfile } from './CustomOrganizationProfile';
 
 export function UserProfileButton() {
-  const isV2Enabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_V2_ENABLED);
-  const { colorScheme } = useColorScheme();
-  const headerColor = colorScheme === 'dark' ? 'rgb(255, 255, 255)' : 'rgb(33, 33, 38)';
-
-  return (
-    <UserButton afterSignOutUrl={ROUTES.AUTH_LOGIN}>
-      <UserButton.UserProfilePage label="account" />
-      <UserButton.UserProfilePage label="security" />
-      <UserButton.UserProfilePage label="Organization" url={ROUTES.ORGANIZATION} labelIcon={<IconRoomPreferences />}>
-        <CustomOrganizationProfile firstItem="general" />
-      </UserButton.UserProfilePage>
-
-      <UserButton.UserProfilePage label="Team members" url={ROUTES.TEAM} labelIcon={<IconGroup />}>
-        <CustomOrganizationProfile firstItem="members" />
-      </UserButton.UserProfilePage>
-
-      {!isV2Enabled && (
-        <UserButton.UserProfilePage label="Branding" url={ROUTES.BRAND_SETTINGS} labelIcon={<IconWorkspacePremium />}>
-          <BrandingPage />
-        </UserButton.UserProfilePage>
-      )}
-
-      <UserButton.UserProfilePage label="Billing plans" url={ROUTES.BILLING} labelIcon={<IconCreditCard />}>
-        <Title marginBottom="150" variant="section" color={headerColor}>
-          Billing plans
-        </Title>
-        <BillingPage />
-      </UserButton.UserProfilePage>
-    </UserButton>
-  );
+  return <UserButton afterSignOutUrl={ROUTES.AUTH_LOGIN} userProfileUrl={ROUTES.MANAGE_ACCOUNT_USER_PROFILE} />;
 }