Add changeset

Author: LauraBeatris

.changeset/large-cameras-talk.md

@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/ui': minor
+---
+
+Allow to link external accounts to enterprise accounts via `UserProfile`

packages/clerk-js/src/core/resources/User.ts

@@ -35,8 +35,6 @@ import type {
   Web3WalletResource,
 } from '@clerk/shared/types';
 
-import { convertPageToOffsetSearchParams } from '@/utils/convertPageToOffsetSearchParams';
-
 import { unixEpochToDate } from '../../utils/date';
 import { normalizeUnsafeMetadata } from '../../utils/resourceParams';
 import { eventBus, events } from '../events';
@@ -299,11 +297,19 @@ export class User extends BaseResource implements UserResource {
   getEnterpriseConnections = async (
     params?: GetEnterpriseConnectionsParams,
   ): Promise<EnterpriseAccountConnectionResource[]> => {
+    const { withOrganizationAccountLinking } = params || {};
+
     const json = (
       await BaseResource._fetch({
         path: '/me/enterprise_connections',
         method: 'GET',
-        search: convertPageToOffsetSearchParams(params),
+        ...(withOrganizationAccountLinking !== undefined
+          ? {
+              search: {
+                with_organization_account_linking: String(withOrganizationAccountLinking),
+              },
+            }
+          : {}),
       })
     )?.response as unknown as EnterpriseAccountConnectionJSON[];
 

packages/localizations/src/en-US.ts

@@ -1188,15 +1188,6 @@ export const enUS: LocalizationResource = {
       successMessage: 'The provider has been added to your account',
       title: 'Add connected account',
     },
-    enterpriseAccountPage: {
-      removeResource: {
-        messageLine1: '{{identifier}} will be removed from this account.',
-        messageLine2:
-          'You will no longer be able to use this enterprise account and any dependent features will no longer work.',
-        successMessage: '{{enterpriseAccount}} has been removed from your account.',
-        title: 'Remove enterprise account',
-      },
-    },
     deletePage: {
       actionDescription: 'Type "Delete account" below to continue.',
       confirm: 'Delete account',
@@ -1369,7 +1360,6 @@ export const enUS: LocalizationResource = {
         title: 'Email addresses',
       },
       enterpriseAccountsSection: {
-        destructiveActionTitle: 'Remove',
         primaryButton: 'Connect account',
         title: 'Enterprise accounts',
       },

packages/shared/src/types/localization.ts

@@ -684,7 +684,6 @@ export type __internal_LocalizationResource = {
       enterpriseAccountsSection: {
         title: LocalizationValue;
         primaryButton: LocalizationValue;
-        destructiveActionTitle: LocalizationValue;
       };
       passwordSection: {
         title: LocalizationValue;
@@ -821,14 +820,6 @@ export type __internal_LocalizationResource = {
         successMessage: LocalizationValue<'connectedAccount'>;
       };
     };
-    enterpriseAccountPage: {
-      removeResource: {
-        title: LocalizationValue;
-        messageLine1: LocalizationValue<'identifier'>;
-        messageLine2: LocalizationValue;
-        successMessage: LocalizationValue<'enterpriseAccount'>;
-      };
-    };
     web3WalletPage: {
       title: LocalizationValue;
       subtitle__availableWallets: LocalizationValue;

packages/ui/src/components/UserProfile/EnterpriseAccountsSection.tsx

@@ -11,17 +11,13 @@ import { Fragment, useState } from 'react';
 import { Card } from '@/ui/elements/Card';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { ProfileSection } from '@/ui/elements/Section';
-import { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';
 import { handleError } from '@/ui/utils/errorHandler';
 import { sleep } from '@/utils/sleep';
 
 import { ProviderIcon } from '../../common';
 import { useUserProfileContext } from '../../contexts';
 import { Badge, Box, descriptors, Flex, localizationKeys, Text } from '../../customizables';
 import { Action } from '../../elements/Action';
-import { useActionContext } from '../../elements/Action/ActionRoot';
-import type { PropsOfComponent } from '../../styledSystem';
-import { RemoveEnterpriseAccountForm } from './RemoveResourceForm';
 
 const EnterpriseConnectMenuButton = (props: { connection: EnterpriseAccountConnectionResource }) => {
   const { connection } = props;
@@ -122,18 +118,6 @@ const AddEnterpriseAccount = ({
   );
 };
 
-type RemoveEnterpriseAccountScreenProps = { accountId: string };
-const RemoveEnterpriseAccountScreen = (props: RemoveEnterpriseAccountScreenProps) => {
-  const { close } = useActionContext();
-  return (
-    <RemoveEnterpriseAccountForm
-      onSuccess={close}
-      onReset={close}
-      {...props}
-    />
-  );
-};
-
 export const EnterpriseAccountsSection = withCardStateProvider(() => {
   const { user } = useUser();
   const card = useCardState();
@@ -173,6 +157,7 @@ export const EnterpriseAccountsSection = withCardStateProvider(() => {
             />
           ))}
         </ProfileSection.ItemList>
+
         {linkableEnterpriseConnections.length > 0 && (
           <AddEnterpriseAccount
             enterpriseConnections={linkableEnterpriseConnections}
@@ -192,13 +177,7 @@ const EnterpriseAccount = ({ account }: { account: EnterpriseAccountResource })
 
   return (
     <Fragment key={accountId}>
-      <ProfileSection.Item
-        id='enterpriseAccounts'
-        sx={t => ({
-          gap: t.space.$2,
-          justifyContent: 'start',
-        })}
-      >
+      <ProfileSection.Item id='enterpriseAccounts'>
         <Flex sx={t => ({ overflow: 'hidden', gap: t.space.$2 })}>
           <EnterpriseAccountProviderIcon account={account} />
           <Box sx={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
@@ -228,36 +207,11 @@ const EnterpriseAccount = ({ account }: { account: EnterpriseAccountResource })
             </Flex>
           </Box>
         </Flex>
-
-        <EnterpriseAccountMenu account={account} />
       </ProfileSection.Item>
-
-      <Action.Open value={`remove-${accountId}`}>
-        <Action.Card variant='destructive'>
-          <RemoveEnterpriseAccountScreen accountId={accountId} />
-        </Action.Card>
-      </Action.Open>
     </Fragment>
   );
 };
 
-const EnterpriseAccountMenu = ({ account }: { account: EnterpriseAccountResource }) => {
-  const { open } = useActionContext();
-  const accountId = account.id;
-
-  const actions = (
-    [
-      {
-        label: localizationKeys('userProfile.start.enterpriseAccountsSection.destructiveActionTitle'),
-        isDestructive: true,
-        onClick: () => open(`remove-${accountId}`),
-      },
-    ] satisfies (PropsOfComponent<typeof ThreeDotsMenu>['actions'][0] | null)[]
-  ).filter(a => a !== null) as PropsOfComponent<typeof ThreeDotsMenu>['actions'];
-
-  return <ThreeDotsMenu actions={actions} />;
-};
-
 const EnterpriseAccountProviderIcon = ({ account }: { account: EnterpriseAccountResource }) => {
   const { provider, enterpriseConnection } = account;
 

packages/ui/src/components/UserProfile/RemoveResourceForm.tsx

@@ -220,34 +220,3 @@ export const RemovePasskeyForm = (props: RemovePasskeyFormProps) => {
     />
   );
 };
-
-type RemoveEnterpriseAccountFormProps = FormProps & {
-  accountId: string;
-};
-
-export const RemoveEnterpriseAccountForm = (props: RemoveEnterpriseAccountFormProps) => {
-  const { accountId: id, onSuccess, onReset } = props;
-  const { user } = useUser();
-  const resource = user?.enterpriseAccounts.find(e => e.id === id);
-  const ref = React.useRef(resource?.enterpriseConnection?.name || resource?.emailAddress);
-
-  if (!ref.current) {
-    return null;
-  }
-
-  return (
-    <RemoveResourceForm
-      title={localizationKeys('userProfile.enterpriseAccountPage.removeResource.title')}
-      messageLine1={localizationKeys('userProfile.enterpriseAccountPage.removeResource.messageLine1', {
-        identifier: ref.current,
-      })}
-      messageLine2={localizationKeys('userProfile.enterpriseAccountPage.removeResource.messageLine2')}
-      successMessage={localizationKeys('userProfile.enterpriseAccountPage.removeResource.successMessage', {
-        enterpriseAccount: ref.current,
-      })}
-      deleteResource={() => Promise.resolve(resource?.destroy())}
-      onSuccess={onSuccess}
-      onReset={onReset}
-    />
-  );
-};