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/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,15 @@ export const CreateOrganizationScreen = (props: CreateOrganizationScreenProps) =
   const { organizationSettings } = useEnvironment();
   const [file, setFile] = useState<File | null>();
 
-  const nameField = useFormControl('name', '', {
+  // Show default logo only when no file action has been taken (file is undefined)
+  const defaultLogoUrl = file === undefined ? props.organizationCreationDefaults?.form.logo : undefined;
+
+  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 +69,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({
@@ -122,11 +115,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

@@ -6,9 +6,9 @@ import { Alert } from '@/ui/elements/Alert';
 export function OrganizationCreationDefaultsAlert({
   organizationCreationDefaults,
 }: {
-  organizationCreationDefaults: OrganizationCreationDefaultsResource;
+  organizationCreationDefaults?: OrganizationCreationDefaultsResource;
 }) {
-  if (!organizationCreationDefaults.advisory) {
+  if (!organizationCreationDefaults?.advisory) {
     return null;
   }
 
@@ -20,6 +20,8 @@ export function OrganizationCreationDefaultsAlert({
   );
 }
 
+// TODO -> Update with latest advisory where meta is returned
+// TODO -> Include email domain in message
 const advisoryTypeToLocalizationKey: Record<OrganizationCreationAdvisoryType, LocalizationKey> = {
   existing_org_with_domain: localizationKeys('taskChooseOrganization.alerts.existingOrgWithDomain'),
 };

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

@@ -1,6 +1,8 @@
 import { useClerk, useSession, useUser } from '@clerk/shared/react';
+import type { OrganizationCreationDefaultsResource } from '@clerk/shared/types';
 import { useState } from 'react';
 
+import { useFetch } from '@/hooks';
 import { useSignOutContext, withCoreSessionSwitchGuard } from '@/ui/contexts';
 import { descriptors, Flex, Flow, localizationKeys, Spinner } from '@/ui/customizables';
 import { Card } from '@/ui/elements/Card';
@@ -19,6 +21,11 @@ const TaskChooseOrganizationInternal = () => {
   const { userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
   const { otherSessions } = useMultipleSessions({ user });
   const { navigateAfterSignOut, navigateAfterMultiSessionSingleSignOutUrl } = useSignOutContext();
+  const organizationCreationDefaults = useFetch(
+    user?.getOrganizationCreationDefaults,
+    'organization-creation-defaults',
+    { staleTime: Infinity },
+  );
 
   const handleSignOut = () => {
     if (otherSessions.length === 0) {
@@ -28,7 +35,11 @@ const TaskChooseOrganizationInternal = () => {
     return signOut(navigateAfterMultiSessionSingleSignOutUrl, { sessionId: session?.id });
   };
 
-  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;
 
@@ -54,7 +65,10 @@ const TaskChooseOrganizationInternal = () => {
                 />
               </Flex>
             ) : (
-              <TaskChooseOrganizationFlows initialFlow={hasExistingResources ? 'choose' : 'create'} />
+              <TaskChooseOrganizationFlows
+                initialFlow={hasExistingResources ? 'choose' : 'create'}
+                organizationCreationDefaults={organizationCreationDefaults.data}
+              />
             )}
           </Card.Content>
 
@@ -88,6 +102,7 @@ const TaskChooseOrganizationInternal = () => {
 
 type TaskChooseOrganizationFlowsProps = {
   initialFlow: 'create' | 'choose';
+  organizationCreationDefaults?: OrganizationCreationDefaultsResource;
 };
 
 const TaskChooseOrganizationFlows = withCardStateProvider((props: TaskChooseOrganizationFlowsProps) => {
@@ -97,6 +112,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;