feat: finish onboarding at step 3

Author: comatory

studio/src/components/onboarding/step-3.tsx

@@ -1,10 +1,44 @@
 import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { useMutation } from '@connectrpc/connect-query';
+import { useOnboarding } from '@/hooks/use-onboarding';
+import { finishOnboarding } from '@wundergraph/cosmo-connect/dist/platform/v1/platform-PlatformService_connectquery';
+import { EnumStatusCode } from '@wundergraph/cosmo-connect/dist/common/common_pb';
+import { useToast } from '../ui/use-toast';
 import { Link } from '../ui/link';
 import { Button } from '../ui/button';
-import { useOnboarding } from '@/hooks/use-onboarding';
 
 export const Step3 = () => {
-  const { setStep, setSkipped } = useOnboarding();
+  const router = useRouter();
+  const { toast } = useToast();
+  const { setStep, setSkipped, setOnboarding } = useOnboarding();
+
+  const { mutate, isPending } = useMutation(finishOnboarding, {
+    onSuccess: (d) => {
+      if (d.response?.code !== EnumStatusCode.OK) {
+        toast({
+          description: d.response?.details ?? 'We had issues with finishing the onboarding. Please try again.',
+          duration: 3000,
+        });
+        return;
+      }
+
+      setOnboarding((prev) => ({
+        ...prev,
+        finishedAt: new Date(d.finishedAt),
+        federatedGraphsCount: d.federatedGraphsCount,
+      }));
+
+      setStep(undefined);
+      router.push('/');
+    },
+    onError: (error) => {
+      toast({
+        description: error.details.toString() ?? 'We had issues with finishing the onboarding. Please try again.',
+        duration: 3000,
+      });
+    },
+  });
 
   useEffect(() => {
     setStep(3);
@@ -21,8 +55,14 @@ export const Step3 = () => {
           <Button className="mr-2" asChild>
             <Link href="/onboarding/2">Back</Link>
           </Button>
-          <Button asChild>
-            <Link href="/">Finish</Link>
+          <Button
+            onClick={() => {
+              mutate({});
+            }}
+            isLoading={isPending}
+            disabled={isPending}
+          >
+            Finish
           </Button>
         </div>
       </div>