feat(clerk-js): Update handleManageOrganizationClicked to open org mo…

…dal on specific page
clerk · Jul 17, 2024 · 5953bb2 · 5953bb2
1 parent b6b1395
commit 5953bb2
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx
@@ -302,7 +302,10 @@ const Components = (props: ComponentsProps) => {
       flowName={'organizationProfile'}
       onClose={() => componentsControls.closeModal('organizationProfile')}
       onExternalNavigate={() => componentsControls.closeModal('organizationProfile')}
-      startPath={buildVirtualRouterUrl({ base: '/organizationProfile', path: urlStateParam?.path })}
+      startPath={buildVirtualRouterUrl({
+        base: '/organizationProfile',
+        path: organizationProfileModal?.path || urlStateParam?.path,
+      })}
       componentName={'OrganizationProfileModal'}
       modalContainerSx={{ alignItems: 'center' }}
       modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })}

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -88,13 +88,15 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
       return openCreateOrganization({ afterCreateOrganizationUrl, skipInvitationScreen });
     };
 
-    const handleManageOrganizationClicked = () => {
+    const handleManageOrganizationClicked = (path?: string) => {
       close();
       if (organizationProfileMode === 'navigation') {
         return navigateOrganizationProfile();
       }
+
       return openOrganizationProfile({
         ...organizationProfileProps,
+        ...(path && { path }),
         afterLeaveOrganizationUrl,
         //@ts-expect-error
         __unstable_manageBillingUrl,
@@ -112,7 +114,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
         iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}
         iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('manageOrganization')}
         icon={CogFilled}
-        onClick={handleManageOrganizationClicked}
+        onClick={() => handleManageOrganizationClicked()}
         trailing={<NotificationCountBadgeManageButton />}
       />
     );
@@ -127,7 +129,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
         iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('manageOrganization')}
         icon={CogFilled}
         label={localizationKeys('organizationSwitcher.action__manageOrganization')}
-        onClick={handleManageOrganizationClicked}
+        onClick={() => handleManageOrganizationClicked()}
         trailing={<NotificationCountBadgeManageButton />}
       />
     );

diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx
@@ -45,8 +45,8 @@ export const NavBar = (props: NavBarProps) => {
   const { contentRef, title, description, routes, header } = props;
   const { close } = useNavbarContext();
   const { navigate } = useRouter();
-  const { t } = useLocalizations();
   const { navigateToFlowStart } = useNavigateToFlowStart();
+  const { t } = useLocalizations();
   const router = useRouter();
 
   const handleNavigate = (route: NavbarRoute) => {

diff --git a/packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts b/packages/clerk-js/src/ui/hooks/useNavigateToFlowStart.ts
@@ -2,13 +2,8 @@ import { useRouter } from '../router';
 
 export const useNavigateToFlowStart = () => {
   const router = useRouter();
-  const userProfileModalFullPath = '/CLERK-ROUTER/VIRTUAL/user';
   const navigateToFlowStart = async () => {
-    const to = '/' + router.basePath + router.flowStartPath;
-
-    if (router.fullPath === userProfileModalFullPath) {
-      return router.navigate(router.indexPath);
-    }
+    const to = router.indexPath;
 
     if (to !== router.currentPath) {
       return router.navigate(to);