feat(vercel): Add onboarding completion state to Vercel integration and update related components

Author: 0ski

apps/webapp/app/components/integrations/VercelOnboardingModal.tsx

@@ -219,9 +219,11 @@ export function VercelOnboardingModal({
   const [expandedEnvVars, setExpandedEnvVars] = useState(false);
   const [expandedSecretEnvVars, setExpandedSecretEnvVars] = useState(false);
   const [projectSelectionError, setProjectSelectionError] = useState<string | null>(null);
+  const [isRedirecting, setIsRedirecting] = useState(false);
 
   const gitHubAppInstallations = onboardingData?.gitHubAppInstallations ?? [];
   const isGitHubConnectedForOnboarding = onboardingData?.isGitHubConnected ?? false;
+  const isOnboardingComplete = onboardingData?.isOnboardingComplete ?? false;
 
   const hasTriggeredMarketplaceRedirectRef = useRef(false);
 
@@ -235,19 +237,20 @@ export function VercelOnboardingModal({
       isOpen &&
       fromMarketplaceContext &&
       nextUrl &&
-      hasProjectSelected &&
+      isOnboardingComplete &&
       isGitHubConnectedForOnboarding
     ) {
       hasTriggeredMarketplaceRedirectRef.current = true;
       setTimeout(() => {
         window.location.href = nextUrl;
       }, 100);
     }
-  }, [isOpen, fromMarketplaceContext, nextUrl, hasProjectSelected, isGitHubConnectedForOnboarding]);
+  }, [isOpen, fromMarketplaceContext, nextUrl, isOnboardingComplete, isGitHubConnectedForOnboarding]);
 
   useEffect(() => {
     if (!isOpen) {
       hasTriggeredMarketplaceRedirectRef.current = false;
+      setIsRedirecting(false);
     }
   }, [isOpen]);
 
@@ -454,6 +457,10 @@ export function VercelOnboardingModal({
   }, [vercelStagingEnvironment, envMappingFetcher, actionUrl]);
 
   const handleBuildSettingsNext = useCallback(() => {
+    if (nextUrl && fromMarketplaceContext && isGitHubConnectedForOnboarding) {
+      setIsRedirecting(true);
+    }
+
     const formData = new FormData();
     formData.append("action", "complete-onboarding");
     formData.append("vercelStagingEnvironment", vercelStagingEnvironment ? JSON.stringify(vercelStagingEnvironment) : "");
@@ -873,8 +880,8 @@ export function VercelOnboardingModal({
                         setState("build-settings");
                       }
                     }}
-                    disabled={fromMarketplaceContext && completeOnboardingFetcher.state !== "idle"}
-                    LeadingIcon={fromMarketplaceContext && completeOnboardingFetcher.state !== "idle" ? SpinnerWhite : undefined}
+                    disabled={fromMarketplaceContext && (completeOnboardingFetcher.state !== "idle" || isRedirecting)}
+                    LeadingIcon={fromMarketplaceContext && (completeOnboardingFetcher.state !== "idle" || isRedirecting) ? SpinnerWhite : undefined}
                   >
                     {fromMarketplaceContext ? (isGitHubConnectedForOnboarding ? "Finish" : "Next") : "Next"}
                   </Button>
@@ -923,8 +930,8 @@ export function VercelOnboardingModal({
                   <Button
                     variant="primary/medium"
                     onClick={handleBuildSettingsNext}
-                    disabled={completeOnboardingFetcher.state !== "idle"}
-                    LeadingIcon={completeOnboardingFetcher.state !== "idle" ? SpinnerWhite : undefined}
+                    disabled={completeOnboardingFetcher.state !== "idle" || isRedirecting}
+                    LeadingIcon={completeOnboardingFetcher.state !== "idle" || isRedirecting ? SpinnerWhite : undefined}
                   >
                     {isGitHubConnectedForOnboarding ? "Finish" : "Next"}
                   </Button>

apps/webapp/app/presenters/v3/VercelSettingsPresenter.server.ts

@@ -55,6 +55,7 @@ export type VercelOnboardingData = {
   existingVariables: Record<string, { environments: string[] }>; // Environment slugs (non-archived only)
   gitHubAppInstallations: GitHubAppInstallation[];
   isGitHubConnected: boolean;
+  isOnboardingComplete: boolean;
 };
 
 export class VercelSettingsPresenter extends BasePresenter {
@@ -384,6 +385,7 @@ export class VercelSettingsPresenter extends BasePresenter {
             existingVariables: {},
             gitHubAppInstallations,
             isGitHubConnected,
+            isOnboardingComplete: false,
           };
         }
 
@@ -398,6 +400,7 @@ export class VercelSettingsPresenter extends BasePresenter {
             existingVariables: {},
             gitHubAppInstallations,
             isGitHubConnected,
+            isOnboardingComplete: false,
           };
         }
         const client = clientResult.value;
@@ -426,6 +429,7 @@ export class VercelSettingsPresenter extends BasePresenter {
             existingVariables: {},
             gitHubAppInstallations,
             isGitHubConnected,
+            isOnboardingComplete: false,
           };
         }
 
@@ -438,6 +442,7 @@ export class VercelSettingsPresenter extends BasePresenter {
             existingVariables: {},
             gitHubAppInstallations,
             isGitHubConnected,
+            isOnboardingComplete: false,
           };
         }
 
@@ -476,6 +481,7 @@ export class VercelSettingsPresenter extends BasePresenter {
             existingVariables: {},
             gitHubAppInstallations,
             isGitHubConnected,
+            isOnboardingComplete: false,
           };
         }
 
@@ -547,6 +553,10 @@ export class VercelSettingsPresenter extends BasePresenter {
           }
         }
 
+        const parsedIntegrationData = VercelProjectIntegrationDataSchema.safeParse(
+          projectIntegration.integrationData
+        );
+
         return {
           customEnvironments,
           environmentVariables: sortedEnvVars,
@@ -555,6 +565,9 @@ export class VercelSettingsPresenter extends BasePresenter {
           existingVariables: existingVariablesRecord,
           gitHubAppInstallations,
           isGitHubConnected,
+          isOnboardingComplete: parsedIntegrationData.success
+            ? (parsedIntegrationData.data.onboardingCompleted ?? false)
+            : false,
         };
       })(),
       (error) => error

apps/webapp/app/services/vercelIntegration.server.ts

@@ -416,6 +416,7 @@ export class VercelIntegrationService {
         vercelStagingEnvironment: params.vercelStagingEnvironment ?? null,
       },
       syncEnvVarsMapping: params.syncEnvVarsMapping ?? existing.parsedIntegrationData.syncEnvVarsMapping,
+      onboardingCompleted: true,
     };
 
     const updated = await this.#prismaClient.organizationProjectIntegration.update({

apps/webapp/app/v3/vercel/vercelProjectIntegrationSchema.ts

@@ -54,6 +54,7 @@ export const VercelProjectIntegrationDataSchema = z.object({
   vercelProjectName: z.string(),
   vercelTeamId: z.string().nullable(),
   vercelProjectId: z.string(),
+  onboardingCompleted: z.boolean().optional(),
 });
 
 export type VercelProjectIntegrationData = z.infer<typeof VercelProjectIntegrationDataSchema>;