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

Author: alexcarpenter

.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>
+  );
+};