diff --git a/.changeset/tall-banks-invite.md b/.changeset/tall-banks-invite.md new file mode 100644 index 00000000000..12a04904246 --- /dev/null +++ b/.changeset/tall-banks-invite.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Make verify domain step complete when any domain is verified. diff --git a/packages/ui/src/components/ConfigureSSO/ConfigureSSOWizard.tsx b/packages/ui/src/components/ConfigureSSO/ConfigureSSOWizard.tsx index 5da7247775c..c1719b4f30f 100644 --- a/packages/ui/src/components/ConfigureSSO/ConfigureSSOWizard.tsx +++ b/packages/ui/src/components/ConfigureSSO/ConfigureSSOWizard.tsx @@ -4,7 +4,10 @@ import { CardStateProvider } from '@/elements/contexts'; import { ConfigureSSOProvider } from './ConfigureSSOContext'; import { ConfigureSSOHeader } from './ConfigureSSOHeader'; -import { areAllOrganizationDomainsVerified } from './domain/organizationEnterpriseConnection'; +import { + areAllOrganizationDomainsVerified, + hasAnyOrganizationDomainsVerified, +} from './domain/organizationEnterpriseConnection'; import { Wizard, type WizardStepConfig } from './elements/Wizard'; import { ActivateStep, ConfigureStep, OrganizationDomainsStep, TestConfigurationStep } from './steps'; @@ -17,30 +20,31 @@ export const ConfigureSSOWizard = ({ title, forceInitialStep, ...props }: Config const { organizationEnterpriseConnection: c, organizationDomains } = props; const allDomainsVerified = areAllOrganizationDomainsVerified(organizationDomains); + const hasAnyDomainsVerified = hasAnyOrganizationDomainsVerified(organizationDomains); const steps = React.useMemo( () => [ - { id: 'verify-domain', label: 'Domains', isComplete: () => allDomainsVerified }, + { id: 'verify-domain', label: 'Domains', isComplete: () => hasAnyDomainsVerified }, { id: 'configure', label: 'Connection', - isReachable: () => allDomainsVerified || c.hasConnection, + isReachable: () => allDomainsVerified && c.hasConnection, isComplete: () => c.hasMinimumConfiguration || c.isActive, }, { id: 'test', label: 'Test', - isReachable: () => c.hasMinimumConfiguration || c.isActive, + isReachable: () => allDomainsVerified && (c.hasMinimumConfiguration || c.isActive), isComplete: () => c.hasSuccessfulTestRun || c.isActive, }, { id: 'activate', label: 'Activate', - isReachable: () => c.hasSuccessfulTestRun || c.isActive, + isReachable: () => allDomainsVerified && (c.hasSuccessfulTestRun || c.isActive), isComplete: () => c.isActive, }, ], - [c, allDomainsVerified], + [c, allDomainsVerified, hasAnyDomainsVerified], ); const initialStepId = forceInitialStep ? steps[0].id : undefined; diff --git a/packages/ui/src/components/ConfigureSSO/domain/organizationEnterpriseConnection.ts b/packages/ui/src/components/ConfigureSSO/domain/organizationEnterpriseConnection.ts index fd9f7c7bd56..c2e70de5cfe 100644 --- a/packages/ui/src/components/ConfigureSSO/domain/organizationEnterpriseConnection.ts +++ b/packages/ui/src/components/ConfigureSSO/domain/organizationEnterpriseConnection.ts @@ -56,6 +56,9 @@ export const isEnterpriseConnectionConfigured = ( export const areAllOrganizationDomainsVerified = (domains: OrganizationDomainResource[] | null | undefined): boolean => !!domains?.length && domains.every(domain => domain.ownershipVerification?.status === 'verified'); +export const hasAnyOrganizationDomainsVerified = (domains: OrganizationDomainResource[] | null | undefined): boolean => + !!domains?.length && domains.some(domain => domain.ownershipVerification?.status === 'verified'); + const connectionStatus = ({ hasConnection, isActive,