feat(ui): add composed OrganizationProfile panels and section components

.changeset/profile-composed-orgprofile.md

@@ -0,0 +1,2 @@
+---
+---

packages/ui/src/composed/OrganizationProfile/APIKeys.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { APIKeysSection } from '../APIKeysSection';
+
+const OrganizationAPIKeysPage = lazy(() =>
+  import('../../components/OrganizationProfile/OrganizationAPIKeysPage').then(m => ({
+    default: m.OrganizationAPIKeysPage,
+  })),
+);
+
+export const OrganizationProfileAPIKeysPanel = (): ReactNode => <APIKeysSection page={OrganizationAPIKeysPage} />;

packages/ui/src/composed/OrganizationProfile/Billing.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { lazy, type ReactNode } from 'react';
+
+import { BillingSection } from '../BillingSection';
+
+const OrganizationBillingPage = lazy(() =>
+  import('../../components/OrganizationProfile/OrganizationBillingPage').then(m => ({
+    default: m.OrganizationBillingPage,
+  })),
+);
+
+const OrganizationPlansPage = lazy(() =>
+  import('../../components/OrganizationProfile/OrganizationPlansPage').then(m => ({
+    default: m.OrganizationPlansPage,
+  })),
+);
+
+const OrganizationStatementPage = lazy(() =>
+  import('../../components/OrganizationProfile/OrganizationStatementPage').then(m => ({
+    default: m.OrganizationStatementPage,
+  })),
+);
+
+const OrganizationPaymentAttemptPage = lazy(() =>
+  import('../../components/OrganizationProfile/OrganizationPaymentAttemptPage').then(m => ({
+    default: m.OrganizationPaymentAttemptPage,
+  })),
+);
+
+export const OrganizationProfileBillingPanel = (): ReactNode => (
+  <BillingSection
+    billing={OrganizationBillingPage}
+    plans={OrganizationPlansPage}
+    statement={OrganizationStatementPage}
+    paymentAttempt={OrganizationPaymentAttemptPage}
+  />
+);

packages/ui/src/composed/OrganizationProfile/General.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import { CardStateProvider, useCardState } from '@/ui/elements/contexts';
+import { ProfileCard } from '@/ui/elements/ProfileCard';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { localizationKeys } from '../../customizables';
+import { PageContext } from '../PageContext';
+
+function GeneralComposed({ children }: PropsWithChildren): ReactNode {
+  const card = useCardState();
+  return (
+    <ProfileCard.Page>
+      <ProfileCard.PagePanel
+        pageId='organizationGeneral'
+        titleKey={localizationKeys('organizationProfile.start.headerTitle__general')}
+        alertContent={card.error}
+      >
+        {children}
+      </ProfileCard.PagePanel>
+    </ProfileCard.Page>
+  );
+}
+
+export function OrganizationProfileGeneralPanel({ children }: PropsWithChildren): ReactNode {
+  if (!children) {
+    return <OrganizationGeneralPage />;
+  }
+
+  // The section confirmation forms (leave/delete) call useCardState(), so children must be wrapped
+  // in a CardStateProvider — mirroring the UserProfile Account/Security composed panels.
+  return (
+    <PageContext.Provider value='general'>
+      <CardStateProvider>
+        <GeneralComposed>{children}</GeneralComposed>
+      </CardStateProvider>
+    </PageContext.Provider>
+  );
+}

packages/ui/src/composed/OrganizationProfile/GeneralDeleteOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationDeleteSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileDeleteSection = createSection(
+  'OrganizationProfileDeleteSection',
+  OrganizationDeleteSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralLeaveOrganization.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationLeaveSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileLeaveSection = createSection(
+  'OrganizationProfileLeaveSection',
+  OrganizationLeaveSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralOrganizationProfile.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { OrganizationProfileSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { createSection } from '../createSection';
+
+export const OrganizationProfileProfileSection = createSection(
+  'OrganizationProfileProfileSection',
+  OrganizationProfileSection,
+);

packages/ui/src/composed/OrganizationProfile/GeneralVerifiedDomains.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { Protect } from '../../common';
+import { OrganizationDomainsSection } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+import { useRequirePage } from '../useRequirePage';
+
+export function OrganizationProfileDomainsSection(): ReactNode {
+  if (!useRequirePage('OrganizationProfileDomainsSection')) {
+    return null;
+  }
+  return (
+    <Protect permission='org:sys_domains:read'>
+      <OrganizationDomainsSection />
+    </Protect>
+  );
+}

packages/ui/src/composed/OrganizationProfile/Members.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { OrganizationMembers } from '../../components/OrganizationProfile/OrganizationMembers';
+
+export const OrganizationProfileMembersPanel = (): ReactNode => <OrganizationMembers />;

packages/ui/src/composed/OrganizationProfile/OrganizationProfileProvider.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
+import type { EnvironmentResource, OrganizationProfileProps } from '@clerk/shared/types';
+import type { PropsWithChildren, ReactNode } from 'react';
+
+import type { Appearance } from '@/ui/internal/appearance';
+
+import { OrganizationProfileContext } from '../../contexts/components/OrganizationProfile';
+import { SubscriberTypeContext } from '../../contexts/components/SubscriberType';
+import { fallbackModuleManager, ProfileProviderShell } from '../ProfileProviderShell';
+
+type OrganizationProfileProviderProps = PropsWithChildren<{
+  appearance?: Appearance;
+  afterLeaveOrganizationUrl?: OrganizationProfileProps['afterLeaveOrganizationUrl'];
+  apiKeysProps?: OrganizationProfileProps['apiKeysProps'];
+}>;
+
+export const OrganizationProfileProvider = (props: OrganizationProfileProviderProps): ReactNode => {
+  const { children, appearance, afterLeaveOrganizationUrl, apiKeysProps } = props;
+  const clerk = useClerk();
+  const { isLoaded, user } = useUser();
+  const { organization } = useOrganization();
+
+  const environment = (clerk as any).__internal_environment as EnvironmentResource | null | undefined;
+  const moduleManager = clerk.__internal_moduleManager ?? fallbackModuleManager;
+
+  if (!isLoaded || !user || !organization || !environment) {
+    return null;
+  }
+
+  const orgProfileCtxValue = {
+    componentName: 'OrganizationProfile' as const,
+    mode: 'mounted' as const,
+    routing: 'hash' as const,
+    path: undefined,
+    afterLeaveOrganizationUrl,
+    apiKeysProps,
+    customPages: [],
+  };
+
+  return (
+    <ProfileProviderShell
+      clerk={clerk}
+      environment={environment}
+      moduleManager={moduleManager}
+      appearanceKey='organizationProfile'
+      flow='organizationProfile'
+      globalAppearance={clerk.__internal_getOption('appearance')}
+      appearance={appearance}
+    >
+      <SubscriberTypeContext.Provider value='organization'>
+        <OrganizationProfileContext.Provider value={orgProfileCtxValue}>{children}</OrganizationProfileContext.Provider>
+      </SubscriberTypeContext.Provider>
+    </ProfileProviderShell>
+  );
+};

packages/ui/src/composed/OrganizationProfile/Security.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { type ReactNode, useRef } from 'react';
+
+import { CardStateProvider } from '@/ui/elements/contexts';
+
+import { OrganizationSecurityPage } from '../../components/OrganizationProfile/OrganizationSecurityPage';
+
+// The security tab has no composable sub-sections — it is an SSO overview plus a configuration
+// wizard driven by internal view state. So the composed panel renders the whole standard security
+// page (`OrganizationSecurityPage`), mirroring what `<OrganizationProfile />` shows on its security
+// route. The confirmation/wizard forms call useCardState(), so children must sit under a
+// CardStateProvider, matching how the standard component wraps the page.
+export const OrganizationProfileSecurityPanel = (): ReactNode => {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <CardStateProvider>
+      <OrganizationSecurityPage contentRef={contentRef} />
+    </CardStateProvider>
+  );
+};

packages/ui/src/composed/OrganizationProfile/index.tsx

@@ -0,0 +1,10 @@
+export { OrganizationProfileProvider } from './OrganizationProfileProvider';
+export { OrganizationProfileGeneralPanel } from './General';
+export { OrganizationProfileMembersPanel } from './Members';
+export { OrganizationProfileBillingPanel } from './Billing';
+export { OrganizationProfileAPIKeysPanel } from './APIKeys';
+export { OrganizationProfileSecurityPanel } from './Security';
+export { OrganizationProfileProfileSection } from './GeneralOrganizationProfile';
+export { OrganizationProfileDomainsSection } from './GeneralVerifiedDomains';
+export { OrganizationProfileLeaveSection } from './GeneralLeaveOrganization';
+export { OrganizationProfileDeleteSection } from './GeneralDeleteOrganization';

packages/ui/src/composed/__tests__/OrganizationProfile.test.tsx

@@ -0,0 +1,47 @@
+import type { ClerkPaginatedResponse, OrganizationMembershipResource } from '@clerk/shared/types';
+import { describe, expect, it } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { render, screen, waitFor } from '@/test/utils';
+
+import { OrganizationGeneralPage } from '../../components/OrganizationProfile/OrganizationGeneralPage';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+describe('Experimental OrganizationProfile', () => {
+  describe('General page', () => {
+    it('renders the organization general page', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+      });
+
+      fixtures.clerk.organization?.getDomains.mockReturnValue(
+        Promise.resolve({
+          data: [],
+          total_count: 0,
+        }),
+      );
+
+      render(<OrganizationGeneralPage />, { wrapper });
+      screen.getByText('General');
+    });
+
+    it('shows organization name', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+      });
+
+      fixtures.clerk.organization?.getDomains.mockReturnValue(
+        Promise.resolve({
+          data: [],
+          total_count: 0,
+        }),
+      );
+
+      render(<OrganizationGeneralPage />, { wrapper });
+      screen.getByText('TestOrg');
+    });
+  });
+});