Add isCompleted prop to step

Author: LauraBeatris

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

@@ -1459,7 +1459,7 @@ export class Clerk implements ClerkInterface {
 
     if (noUserExists(this)) {
       if (this.#instanceType === 'development') {
-        throw new ClerkRuntimeError(warnings.cannotOpenCheckout, {
+        throw new ClerkRuntimeError(warnings.cannotRenderConfigureSSOComponentWhenUserDoesNotExist, {
           code: CANNOT_RENDER_USER_MISSING_ERROR_CODE,
         });
       }

packages/shared/src/internal/clerk-js/warnings.ts

@@ -64,6 +64,8 @@ const warnings = {
     'The <APIKeys/> component cannot be rendered when organization API keys are disabled. Since organization API keys are disabled, this is no-op.',
   cannotRenderOAuthConsentComponentWhenUserDoesNotExist:
     '<OAuthConsent/> cannot render unless a user is signed in. Since no user is signed in, this is no-op.',
+  cannotRenderConfigureSSOComponentWhenUserDoesNotExist:
+    '<ConfigureSSO/> cannot render unless a user is signed in. Since no user is signed in, this is no-op.',
   cannotRenderConfigureSSOComponentWhenDisabled:
     'The <ConfigureSSO/> component cannot be rendered when self-serve SSO is disabled. Visit `https://dashboard.clerk.com` to enable the feature. Since self-serve SSO is disabled, this is no-op.',
   cannotRenderConfigureSSOComponentWhenEmailAddressDisabled:

packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx

@@ -12,7 +12,7 @@ import { BoxIcon } from '@/icons';
 import { Route, Switch } from '@/router';
 
 import { ConfigureSSOFlowProvider } from './ConfigureSSOContext';
-import { ConfigureCreateApp, ConfirmationStep, ProvideEmail, TestConfigurationStep, VerifyDomain } from './steps';
+import { ConfigureCreateApp, ConfirmationStep, ProvideEmail, TestConfigurationStep, VerifyDomainStep } from './steps';
 import { ConfigureSSOWizard } from './wizard';
 
 const ConfigureSSOInternal = () => {
@@ -127,6 +127,7 @@ const AuthenticatedContent = withCoreUserGuard(() => {
 
 const ConfigureSSOSteps = () => {
   const { user } = useUser();
+
   const primaryEmailAddress = user?.primaryEmailAddress;
 
   return (
@@ -149,7 +150,7 @@ const ConfigureSSOSteps = () => {
             id='verify-domain'
             path='verify-domain'
           >
-            <VerifyDomain />
+            <VerifyDomainStep />
           </ConfigureSSOWizard.Step>
         </ConfigureSSOWizard>
       </ConfigureSSOWizard.Step>

packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx

@@ -3,11 +3,13 @@ import { Flow, Text } from '@/customizables';
 import { useConfigureSSOWizard, useRegisterContinueAction } from '../wizard';
 import { StepLayout } from './StepLayout';
 
-export const VerifyDomain = (): JSX.Element => {
+export const VerifyDomainStep = (): JSX.Element => {
   const { goNext } = useConfigureSSOWizard();
 
   useRegisterContinueAction({
     handler: () => goNext(),
+    // TODO: Implement verification
+    isDisabled: true,
   });
 
   return (

packages/ui/src/components/ConfigureSSO/steps/index.ts

@@ -3,4 +3,4 @@ export { ConfirmationStep } from './ConfirmationStep';
 export { ProvideEmail } from './ProvideEmailStep';
 export { StepLayout } from './StepLayout';
 export { TestConfigurationStep } from './TestConfigurationStep';
-export { VerifyDomain } from './VerifyDomainStep';
+export { VerifyDomainStep } from './VerifyDomainStep';

packages/ui/src/components/ConfigureSSO/wizard/ConfigureSSOWizard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Badge, Box, Button, Col, descriptors, Flex, Icon, Spinner, Text, useLocalizations } from '@/customizables';
-import { CaretLeft, CaretRight } from '@/icons';
+import { CaretLeft, CaretRight, Check } from '@/icons';
 import { Route, Switch, useRouter } from '@/router';
 
 import { useConfigureSSOFlow } from '../ConfigureSSOContext';
@@ -54,6 +54,7 @@ function extractSteps(children: React.ReactNode): ConfigureSSOWizardActiveStep[]
       id: props.id,
       path: props.path,
       label: props.label,
+      isCompleted: props.isCompleted,
       children: props.children,
     });
   });
@@ -177,8 +178,8 @@ const RootInner = ({ parentWizard, isNested, children }: RootInnerProps): JSX.El
       goPrev,
       goToStep,
       isNested,
-      isFirstStep: index <= 0 && !parentWizard,
-      isLastStep: index === activeSteps.length - 1 && !parentWizard,
+      isFirstStep: index <= 0 && (!parentWizard || parentWizard.isFirstStep),
+      isLastStep: index === activeSteps.length - 1 && (!parentWizard || parentWizard.isLastStep),
     };
   }, [activeSteps, currentStep, isLoading, goNext, goPrev, goToStep, isNested, parentWizard]);
 
@@ -285,8 +286,8 @@ const Header = (): JSX.Element => {
     >
       {activeSteps.map((step, index) => {
         const isCurrent = index === currentIndex;
-        const isCompleted = index < currentIndex;
-        const isReachable = index <= currentIndex;
+        const isCompleted = step.isCompleted ?? index < currentIndex;
+        const isReachable = isCompleted || index <= currentIndex;
         const labelText = step.label ? (typeof step.label === 'string' ? step.label : t(step.label)) : '';
 
         return (
@@ -326,12 +327,23 @@ const Header = (): JSX.Element => {
                     backgroundColor: isCurrent
                       ? theme.colors.$colorForeground
                       : isCompleted
-                        ? theme.colors.$neutralAlpha200
+                        ? theme.colors.$success500
                         : theme.colors.$neutralAlpha100,
-                    color: isCurrent ? theme.colors.$colorBackground : theme.colors.$colorMutedForeground,
+                    color: isCurrent
+                      ? theme.colors.$colorBackground
+                      : isCompleted
+                        ? theme.colors.$white
+                        : theme.colors.$colorMutedForeground,
                   })}
                 >
-                  {index + 1}
+                  {isCompleted && !isCurrent ? (
+                    <Icon
+                      icon={Check}
+                      size='xs'
+                    />
+                  ) : (
+                    index + 1
+                  )}
                 </Flex>
                 <Text
                   elementDescriptor={descriptors.configureSSOWizardHeaderItemLabel}

packages/ui/src/components/ConfigureSSO/wizard/types.ts

@@ -26,6 +26,15 @@ export interface ConfigureSSOWizardStepProps {
    * breadcrumb entry
    */
   label?: LocalizationKey | string;
+  /**
+   * Marks this step as completed regardless of its position relative
+   * to the current step. Completed steps are styled as such in the
+   * breadcrumb and remain reachable via `goToStep`. Useful when a
+   * downstream step's data already exists (e.g. the resource was
+   * created in a previous session) and the user can revisit earlier
+   * steps without "uncompleting" later ones
+   */
+  isCompleted?: boolean;
   /**
    * The step body. Anything React, including a nested
    * `<ConfigureSSOWizard>` for inner sub-steps
@@ -68,6 +77,7 @@ export interface ConfigureSSOWizardActiveStep {
   id: string;
   path: string;
   label?: LocalizationKey | string;
+  isCompleted?: boolean;
   children: React.ReactNode;
 }