From b59b6b75dc61bc4d7e61f7cca774f3731a2929b9 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Mon, 2 Oct 2023 15:09:17 +0300
Subject: [PATCH] feat(clerk-js): Allow customization of  OrganizationProfile
 through OrganizationSwitcher (#1801)

Expose organizationProfileProps from switcher and deprecate UserButton appearance
---
 .changeset/chilled-parrots-pump.md                |  8 ++++++++
 .../OrganizationSwitcherPopover.tsx               |  2 ++
 .../UserButton/useMultisessionActions.tsx         | 14 +++++++++++++-
 packages/types/src/clerk.ts                       | 15 +++++++++++++--
 4 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/chilled-parrots-pump.md

diff --git a/.changeset/chilled-parrots-pump.md b/.changeset/chilled-parrots-pump.md
new file mode 100644
index 0000000000..0698844a90
--- /dev/null
+++ b/.changeset/chilled-parrots-pump.md
@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+- Introduce organizationProfileProps as prop in `<OrganizationSwitcher/>`.
+- Introduce appearance in userProfileProps in `<UserButton/>`.
+- Deprecate the usage of `appearance.userProfile` in <UserButton/>`.
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index 1da6ebc57a..bbf9d9e9df 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -52,6 +52,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
       navigateOrganizationProfile,
       navigateAfterSelectPersonal,
       navigateAfterSelectOrganization,
+      organizationProfileProps,
     } = useOrganizationSwitcherContext();
 
     const user = useCoreUser();
@@ -93,6 +94,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
         return navigateOrganizationProfile();
       }
       return openOrganizationProfile({
+        ...organizationProfileProps,
         afterLeaveOrganizationUrl,
         //@ts-expect-error
         __unstable_manageBillingUrl,
diff --git a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx
index 448827dabf..696982a244 100644
--- a/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx
@@ -1,3 +1,4 @@
+import { deprecatedObjectProperty } from '@clerk/shared';
 import type { ActiveSessionResource, UserButtonProps, UserResource } from '@clerk/types';
 
 import { windowNavigate } from '../../../utils/windowNavigate';
@@ -44,7 +45,18 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
     }
 
     // The UserButton can also accept an appearance object for the nested UserProfile modal
-    openUserProfile({ ...opts.userProfileProps, appearance: opts.appearance?.userProfile });
+    if (opts.appearance?.userProfile) {
+      deprecatedObjectProperty(
+        opts.appearance,
+        'userProfile',
+        'Use `<UserButton userProfileProps={{appearance: {...}}} />` instead.',
+      );
+    }
+    openUserProfile({
+      appearance: opts.appearance?.userProfile,
+      // Prioritize the appearance of `userProfileProps`
+      ...opts.userProfileProps,
+    });
     return opts.actionCompleteCallback?.();
   };
 
diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
index bdfbc65304..2000815da3 100644
--- a/packages/types/src/clerk.ts
+++ b/packages/types/src/clerk.ts
@@ -795,13 +795,18 @@ export type UserButtonProps = {
    * These options serve as overrides and will be merged with the global `appearance`
    * prop of ClerkProvided (if one is provided)
    */
-  appearance?: UserButtonTheme & { userProfile?: UserProfileTheme };
+  appearance?: UserButtonTheme & {
+    /**
+     * @deprecated Use `userProfileProps.appearance` instead.
+     */
+    userProfile?: UserProfileTheme;
+  };
 
   /*
    * Specify options for the underlying <UserProfile /> component.
    * e.g. <UserButton userProfileProps={{additionalOAuthScopes: {google: ['foo', 'bar'], github: ['qux']}}} />
    */
-  userProfileProps?: Pick<UserProfileProps, 'additionalOAuthScopes'>;
+  userProfileProps?: Pick<UserProfileProps, 'additionalOAuthScopes' | 'appearance'>;
 };
 
 type PrimitiveKeys<T> = {
@@ -886,6 +891,12 @@ export type OrganizationSwitcherProps = {
    * prop of ClerkProvided (if one is provided)
    */
   appearance?: OrganizationSwitcherTheme;
+
+  /*
+   * Specify options for the underlying <OrganizationProfile /> component.
+   * e.g. <UserButton userProfileProps={{appearance: {...}}} />
+   */
+  organizationProfileProps?: Pick<OrganizationProfileProps, 'appearance'>;
 };
 
 export type OrganizationListProps = {