Prefill with org defaults

Author: LauraBeatris

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

@@ -16,6 +16,8 @@ import { APIKeySettings } from './APIKeySettings';
 import { AuthConfig, BaseResource, CommerceSettings, DisplayConfig, ProtectConfig, UserSettings } from './internal';
 import { OrganizationSettings } from './OrganizationSettings';
 
+// TODO -> Update with new flag for default orgs
+// Use it to conditionally trigger query
 export class Environment extends BaseResource implements EnvironmentResource {
   private static instance: Environment;
 

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

@@ -53,6 +53,7 @@ import {
   UserOrganizationInvitation,
   Web3Wallet,
 } from './internal';
+import { OrganizationCreationDefaults } from './OrganizationCreationDefaults';
 
 export class User extends BaseResource implements UserResource {
   pathRoot = '/me';
@@ -275,6 +276,8 @@ export class User extends BaseResource implements UserResource {
   getOrganizationMemberships: GetOrganizationMemberships = retrieveMembership =>
     OrganizationMembership.retrieve(retrieveMembership);
 
+  getOrganizationCreationDefaults = () => OrganizationCreationDefaults.retrieve();
+
   leaveOrganization = async (organizationId: string): Promise<DeletedObjectResource> => {
     const json = (
       await BaseResource._fetch<DeletedObjectJSON>({

packages/shared/src/types/user.ts

@@ -7,6 +7,7 @@ import type { ExternalAccountResource } from './externalAccount';
 import type { ImageResource } from './image';
 import type { UserJSON } from './json';
 import type { OAuthScope } from './oauth';
+import type { OrganizationCreationDefaultsResource } from './organizationCreationDefaults';
 import type { OrganizationInvitationStatus } from './organizationInvitation';
 import type { OrganizationMembershipResource } from './organizationMembership';
 import type { OrganizationSuggestionResource, OrganizationSuggestionStatus } from './organizationSuggestion';
@@ -115,6 +116,7 @@ export interface UserResource extends ClerkResource, BillingPayerMethods {
   getOrganizationSuggestions: (
     params?: GetUserOrganizationSuggestionsParams,
   ) => Promise<ClerkPaginatedResponse<OrganizationSuggestionResource>>;
+  getOrganizationCreationDefaults: () => Promise<OrganizationCreationDefaultsResource>;
   leaveOrganization: (organizationId: string) => Promise<DeletedObjectResource>;
   createTOTP: () => Promise<TOTPResource>;
   verifyTOTP: (params: VerifyTOTPParams) => Promise<TOTPResource>;

packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx

@@ -1,5 +1,5 @@
 import { useOrganizationList } from '@clerk/shared/react';
-import type { CreateOrganizationParams } from '@clerk/shared/types';
+import type { CreateOrganizationParams, OrganizationCreationDefaultsResource } from '@clerk/shared/types';
 import { useState } from 'react';
 
 import { useEnvironment } from '@/ui/contexts';
@@ -20,24 +20,9 @@ import { OrganizationProfileAvatarUploader } from '../../../OrganizationProfile/
 import { organizationListParams } from '../../../OrganizationSwitcher/utils';
 import { OrganizationCreationDefaultsAlert } from './OrganizationCreationDefaultsAlert';
 
-// TODO: Replace with actual API call to OrganizationCreationDefaults.retrieve()
-// TODO - Only replace if .organization_settings.organization_creation_defaults.enabled
-const organizationCreationDefaults = {
-  advisory: {
-    type: 'existing_org_with_domain' as const,
-    severity: 'warning' as const,
-  },
-  form: {
-    name: '',
-    slug: '',
-    logo: null,
-  },
-  pathRoot: '',
-  reload: () => Promise.resolve({} as any),
-};
-
 type CreateOrganizationScreenProps = {
   onCancel?: () => void;
+  organizationCreationDefaults?: OrganizationCreationDefaultsResource;
 };
 
 export const CreateOrganizationScreen = (props: CreateOrganizationScreenProps) => {
@@ -50,12 +35,12 @@ export const CreateOrganizationScreen = (props: CreateOrganizationScreenProps) =
   const { organizationSettings } = useEnvironment();
   const [file, setFile] = useState<File | null>();
 
-  const nameField = useFormControl('name', '', {
+  const nameField = useFormControl('name', props.organizationCreationDefaults?.form.name ?? '', {
     type: 'text',
     label: localizationKeys('taskChooseOrganization.createOrganization.formFieldLabel__name'),
     placeholder: localizationKeys('taskChooseOrganization.createOrganization.formFieldInputPlaceholder__name'),
   });
-  const slugField = useFormControl('slug', '', {
+  const slugField = useFormControl('slug', props.organizationCreationDefaults?.form.slug ?? '', {
     type: 'text',
     label: localizationKeys('taskChooseOrganization.createOrganization.formFieldLabel__slug'),
     placeholder: localizationKeys('taskChooseOrganization.createOrganization.formFieldInputPlaceholder__slug'),
@@ -81,6 +66,11 @@ export const CreateOrganizationScreen = (props: CreateOrganizationScreenProps) =
 
       if (file) {
         await organization.setLogo({ file });
+      } else if (defaultLogoUrl) {
+        const response = await fetch(defaultLogoUrl);
+        const blob = await response.blob();
+        const logoFile = new File([blob], 'logo', { type: blob.type });
+        await organization.setLogo({ file: logoFile });
       }
 
       await setActive({
@@ -109,6 +99,7 @@ export const CreateOrganizationScreen = (props: CreateOrganizationScreenProps) =
   };
 
   const isSubmitButtonDisabled = !nameField.value || !isLoaded;
+  const defaultLogoUrl = file === undefined ? props.organizationCreationDefaults?.form.logo : undefined;
 
   return (
     <>
@@ -122,11 +113,11 @@ export const CreateOrganizationScreen = (props: CreateOrganizationScreenProps) =
 
       <FormContainer sx={t => ({ padding: `${t.space.$none} ${t.space.$10} ${t.space.$8}` })}>
         <Form.Root onSubmit={onSubmit}>
-          <OrganizationCreationDefaultsAlert organizationCreationDefaults={organizationCreationDefaults} />
+          <OrganizationCreationDefaultsAlert organizationCreationDefaults={props.organizationCreationDefaults} />
           <OrganizationProfileAvatarUploader
-            organization={{ name: nameField.value }}
+            organization={{ name: nameField.value, imageUrl: defaultLogoUrl ?? undefined }}
             onAvatarChange={async file => await setFile(file)}
-            onAvatarRemove={file ? onAvatarRemove : null}
+            onAvatarRemove={file || defaultLogoUrl ? onAvatarRemove : null}
             avatarPreviewPlaceholder={
               <IconButton
                 variant='ghost'

packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/OrganizationCreationDefaultsAlert.tsx

@@ -1,25 +1,30 @@
 import type { OrganizationCreationAdvisoryType, OrganizationCreationDefaultsResource } from '@clerk/shared/types';
 
+import { Alert, Text } from '@/customizables';
 import { type LocalizationKey, localizationKeys } from '@/localization';
-import { Alert } from '@/ui/elements/Alert';
 
 export function OrganizationCreationDefaultsAlert({
   organizationCreationDefaults,
 }: {
-  organizationCreationDefaults: OrganizationCreationDefaultsResource;
+  organizationCreationDefaults?: OrganizationCreationDefaultsResource;
 }) {
-  if (!organizationCreationDefaults.advisory) {
+  if (!organizationCreationDefaults?.advisory) {
     return null;
   }
 
   return (
-    <Alert
-      variant='warning'
-      title={advisoryTypeToLocalizationKey[organizationCreationDefaults.advisory.type]}
-    />
+    <Alert colorScheme='warning'>
+      <Text
+        colorScheme='warning'
+        localizationKey={advisoryTypeToLocalizationKey[organizationCreationDefaults.advisory.type]}
+        variant='caption'
+      />
+    </Alert>
   );
 }
 
+// TODO -> Update with latest advisory where meta is returned
+// TODO -> Include email domain in message, eg: {{ meta }}
 const advisoryTypeToLocalizationKey: Record<OrganizationCreationAdvisoryType, LocalizationKey> = {
   existing_org_with_domain: localizationKeys('taskChooseOrganization.alerts.existingOrgWithDomain'),
 };

packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx

@@ -299,8 +299,14 @@ describe('TaskChooseOrganization', () => {
   });
 
   describe('with organization creation defaults', () => {
-    it.todo('displays warning when organization already exists for user email domain');
+    describe('when enabled on environment', () => {
+      it.todo('displays warning when organization already exists for user email domain');
 
-    it.todo('prefills create organization form with defaults');
+      it.todo('prefills create organization form with defaults');
+    });
+
+    describe('when disabled on environment', () => {
+      it.todo('does not fetch for creation defaults');
+    });
   });
 });

packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx

@@ -1,7 +1,9 @@
 import { useClerk, useSession, useUser } from '@clerk/shared/react';
-import { useState, type ComponentType } from 'react';
+import type { OrganizationCreationDefaultsResource } from '@clerk/shared/types';
+import { type ComponentType, useState } from 'react';
 
-import { useSignOutContext, withCoreSessionSwitchGuard } from '@/ui/contexts';
+import { useFetch } from '@/hooks';
+import { useEnvironment, useSignOutContext, withCoreSessionSwitchGuard } from '@/ui/contexts';
 import { descriptors, Flex, Flow, localizationKeys, Spinner } from '@/ui/customizables';
 import { Card } from '@/ui/elements/Card';
 import { withCardStateProvider } from '@/ui/elements/contexts';
@@ -14,24 +16,23 @@ import { ChooseOrganizationScreen } from './ChooseOrganizationScreen';
 import { CreateOrganizationScreen } from './CreateOrganizationScreen';
 
 const TaskChooseOrganizationInternal = () => {
-  const { signOut } = useClerk();
   const { user } = useUser();
-  const { session } = useSession();
+  const { environment } = useEnvironment();
   const { userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
-  const { otherSessions } = useMultipleSessions({ user });
-  const { navigateAfterSignOut, navigateAfterMultiSessionSingleSignOutUrl } = useSignOutContext();
-
-  const handleSignOut = () => {
-    if (otherSessions.length === 0) {
-      return signOut(navigateAfterSignOut);
-    }
-
-    return signOut(navigateAfterMultiSessionSingleSignOutUrl, { sessionId: session?.id });
-  };
+  const organizationCreationDefaults = useFetch(
+    environment.organizationSettings.organizationCreationDefaults.enabled
+      ? user?.getOrganizationCreationDefaults
+      : undefined,
+    'organization-creation-defaults',
+    { staleTime: Infinity },
+  );
 
-  const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading;
+  const isLoading =
+    userMemberships?.isLoading ||
+    userInvitations?.isLoading ||
+    userSuggestions?.isLoading ||
+    organizationCreationDefaults.isLoading;
   const hasExistingResources = !!(userMemberships?.count || userInvitations?.count || userSuggestions?.count);
-  const identifier = user?.primaryEmailAddress?.emailAddress ?? user?.username;
 
   return (
     <Flow.Root flow='taskChooseOrganization'>
@@ -55,7 +56,10 @@ const TaskChooseOrganizationInternal = () => {
                 />
               </Flex>
             ) : (
-              <TaskChooseOrganizationFlows initialFlow={hasExistingResources ? 'choose' : 'create'} />
+              <TaskChooseOrganizationFlows
+                initialFlow={hasExistingResources ? 'choose' : 'create'}
+                organizationCreationDefaults={organizationCreationDefaults.data}
+              />
             )}
           </Card.Content>
 
@@ -111,6 +115,7 @@ const TaskChooseOrganizationCardFooter = () => {
 
 type TaskChooseOrganizationFlowsProps = {
   initialFlow: 'create' | 'choose';
+  organizationCreationDefaults?: OrganizationCreationDefaultsResource;
 };
 
 const TaskChooseOrganizationFlows = withCardStateProvider((props: TaskChooseOrganizationFlowsProps) => {
@@ -120,6 +125,7 @@ const TaskChooseOrganizationFlows = withCardStateProvider((props: TaskChooseOrga
     return (
       <CreateOrganizationScreen
         onCancel={props.initialFlow === 'choose' ? () => setCurrentFlow('choose') : undefined}
+        organizationCreationDefaults={props.organizationCreationDefaults}
       />
     );
   }

packages/ui/src/elements/AvatarUploader.tsx

@@ -90,9 +90,10 @@ export const AvatarUploader = (props: AvatarUploaderProps) => {
     await handleFileDrop(f);
   };
 
+  const hasExistingImage = !!(avatarPreview.props as { imageUrl?: string })?.imageUrl;
   const previewElement = objectUrl
     ? React.cloneElement(avatarPreview, { imageUrl: objectUrl })
-    : avatarPreviewPlaceholder
+    : avatarPreviewPlaceholder && !hasExistingImage
       ? React.cloneElement(avatarPreviewPlaceholder, { onClick: openDialog })
       : avatarPreview;