diff --git a/.changeset/quick-trams-sink.md b/.changeset/quick-trams-sink.md new file mode 100644 index 00000000000..1ee8a927fe2 --- /dev/null +++ b/.changeset/quick-trams-sink.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Hide slug field on `OrganizationProfile` based on environment settings diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx index 225c6f9af40..03f94ae7bf1 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx @@ -1,6 +1,8 @@ import { useOrganization } from '@clerk/shared/react'; +import type { UpdateOrganizationParams } from '@clerk/types'; import React from 'react'; +import { useEnvironment } from '@/ui/contexts'; import { useCardState, withCardStateProvider } from '@/ui/elements/contexts'; import { Form } from '@/ui/elements/Form'; import { FormButtons } from '@/ui/elements/FormButtons'; @@ -20,6 +22,7 @@ export const ProfileForm = withCardStateProvider((props: ProfileFormProps) => { const title = localizationKeys('organizationProfile.profilePage.title'); const card = useCardState(); const { organization } = useOrganization(); + const { organizationSettings } = useEnvironment(); const nameField = useFormControl('name', organization?.name || '', { type: 'text', @@ -39,14 +42,20 @@ export const ProfileForm = withCardStateProvider((props: ProfileFormProps) => { const dataChanged = organization.name !== nameField.value || organization.slug !== slugField.value; const canSubmit = dataChanged && slugField.feedbackType !== 'error'; + const organizationSlugEnabled = !organizationSettings.slug.disabled; const onSubmit = async (e: React.FormEvent) => { e.preventDefault(); - return (canSubmit ? organization.update({ name: nameField.value, slug: slugField.value }) : Promise.resolve()) - .then(onSuccess) - .catch(err => { - handleError(err, [nameField, slugField], card.setError); - }); + + const updateOrgParams: UpdateOrganizationParams = { name: nameField.value }; + + if (organizationSlugEnabled) { + updateOrgParams.slug = slugField.value; + } + + return (canSubmit ? organization.update(updateOrgParams) : Promise.resolve()).then(onSuccess).catch(err => { + handleError(err, [nameField, slugField], card.setError); + }); }; const uploadAvatar = (file: File) => { @@ -92,13 +101,15 @@ export const ProfileForm = withCardStateProvider((props: ProfileFormProps) => { ignorePasswordManager /> -