feat(onboarding): add skip functionality to onboarding steps (#1925)

Co-authored-by: Mariano Fuentes <[email protected]>

Author: Itsnotaka

apps/app/src/app/(app)/onboarding/actions/complete-onboarding.ts

@@ -29,7 +29,7 @@ const onboardingCompletionSchema = z.object({
   }),
   devices: z.string().min(1),
   authentication: z.string().min(1),
-  software: z.string().min(1),
+  software: z.string().optional(),
   workLocation: z.string().min(1),
   infrastructure: z.string().min(1),
   dataTypes: z.string().min(1),
@@ -81,7 +81,13 @@ export const completeOnboarding = authActionClient
       // Save the remaining steps to context
       const postPaymentSteps = steps.slice(3); // Steps 4-12
       const contextData = postPaymentSteps
-        .filter((step) => step.key in parsedInput)
+        .filter((step) => {
+          const value = parsedInput[step.key as keyof typeof parsedInput];
+          // Filter out steps that aren't in parsedInput or have empty values (skipped steps)
+          if (!(step.key in parsedInput)) return false;
+          if (value === undefined || value === null || value === '') return false;
+          return true;
+        })
         .map((step) => ({
           question: step.question,
           answer:

apps/app/src/app/(app)/onboarding/components/PostPaymentOnboarding.tsx

@@ -34,7 +34,9 @@ export function PostPaymentOnboarding({
     isLoading,
     onSubmit,
     handleBack,
+    handleSkip,
     isLastStep,
+    isSkippable,
     currentStepNumber,
     totalSteps,
     completeNow,
@@ -193,6 +195,28 @@ export function PostPaymentOnboarding({
               </motion.div>
             )}
           </AnimatePresence>
+          <AnimatePresence>
+            {isSkippable && (
+              <motion.div
+                key="skip"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: 20 }}
+                transition={{ duration: 0.25 }}
+              >
+                <Button
+                  type="button"
+                  variant="ghost"
+                  className="flex items-center gap-2 text-muted-foreground"
+                  onClick={handleSkip}
+                  disabled={isOnboarding || isFinalizing || isLoading}
+                  data-testid="onboarding-skip-button"
+                >
+                  Skip for now
+                </Button>
+              </motion.div>
+            )}
+          </AnimatePresence>
           {isLocal && (
             <motion.div
               key="complete-now"

apps/app/src/app/(app)/onboarding/hooks/usePostPaymentOnboarding.ts

@@ -249,7 +249,32 @@ export function usePostPaymentOnboarding({
     }
   };
 
+  const handleSkip = () => {
+    // Track skip event
+    trackOnboardingEvent(`${step.key}_skipped`, stepIndex + 1, {
+      phase: 'post_payment',
+    });
+
+    // Clear form errors
+    form.clearErrors();
+
+    // Move to next step without saving current value
+    if (stepIndex < postPaymentSteps.length - 1) {
+      const newStepIndex = stepIndex + 1;
+      setStepIndex(newStepIndex);
+      setSavedStepIndex(newStepIndex);
+    } else {
+      // If this is the last step, complete onboarding without this field
+      const allAnswers: Partial<CompanyDetails> = {
+        ...savedAnswers,
+        organizationName,
+      };
+      handleCompleteOnboarding(allAnswers);
+    }
+  };
+
   const isLastStep = stepIndex === postPaymentSteps.length - 1;
+  const isSkippable = step?.skippable ?? false;
 
   return {
     stepIndex,
@@ -262,7 +287,9 @@ export function usePostPaymentOnboarding({
     isLoading,
     onSubmit,
     handleBack,
+    handleSkip,
     isLastStep,
+    isSkippable,
     currentStepNumber: stepIndex + 1, // Display as steps 1-9
     totalSteps: postPaymentSteps.length, // Total 9 steps for post-payment
     completeNow,

apps/app/src/app/(app)/setup/lib/constants.ts

@@ -26,7 +26,7 @@ export const companyDetailsSchema = z.object({
     jobTitle: z.string().min(1, 'Job title is required'),
     email: z.string().email('Please enter a valid email'),
   }),
-  software: z.string().min(1, 'Please select software you use'),
+  software: z.string().optional(),
   infrastructure: z.string().min(1, 'Please select your infrastructure'),
   dataTypes: z.string().min(1, 'Please select types of data you handle'),
   devices: z.string().min(1, 'Please select device types'),
@@ -111,6 +111,7 @@ export const steps: Step[] = [
     key: 'software',
     question: 'What software do you use?',
     placeholder: 'e.g., Rippling',
+    skippable: true,
     options: [
       'Rippling',
       'Gusto',

apps/app/src/app/(app)/setup/lib/types.ts

@@ -23,7 +23,7 @@ export type CompanyDetails = {
   workLocation: string;
   infrastructure: string;
   dataTypes: string;
-  software: string;
+  software?: string;
   geo: string;
   shipping: {
     fullName: string;
@@ -45,4 +45,5 @@ export type Step = {
   placeholder: string;
   options?: string[];
   description?: string;
+  skippable?: boolean;
 };