Add Onboarding Survey after User-Signup (#193)

* add onboarding survey after user signup

* add user flag finishedOnboarding to database and session

* fix submission capture endpoint to allow customer property update

---------

Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
Co-authored-by: knugget <johannes@knugget.de>

packages/database/prisma/migrations/20230207100310_add_finished_onboarding_flag_to_user_model/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "finishedOnboarding" BOOLEAN NOT NULL DEFAULT false;

packages/database/prisma/schema.prisma

@@ -164,4 +164,5 @@ model User {
   organisations             Membership[]
   accounts                  Account[]
   apiKeys                   ApiKey[]
+  finishedOnboarding        Boolean          @default(false)
 }

packages/engine-react/src/components/EnginePage.tsx

@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { FormPage } from "../types";
@@ -7,13 +6,15 @@ interface FormProps {
   page: FormPage;
   onSkip: () => void;
   onPageSubmit: (submission: any) => void;
-  onFinished: ({ submission }: any) => void;
+  onFinished: ({ submission, schema }: any) => void;
   submission: any;
   setSubmission: (v: any) => void;
   finished: boolean;
-  formbricksUrl: string;
-  formId: string;
+  formbricksUrl?: string;
+  formId?: string;
   schema: any;
+  customer: any;
+  offline?: boolean;
 }
 
 export function EnginePage({
@@ -26,6 +27,8 @@ export function EnginePage({
   formbricksUrl,
   formId,
   schema,
+  customer,
+  offline,
 }: FormProps) {
   const [submissionId, setSubmissionId] = useState<string>();
   const {
@@ -44,17 +47,34 @@ export function EnginePage({
 
   useEffect(() => {
     if (page.endScreen) {
-      fetch(`${formbricksUrl}/api/capture/forms/${formId}/submissions/${submissionId}`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ finished: true }),
-      });
-      onFinished({ submission });
+      if (!offline) {
+        if (!formbricksUrl) {
+          throw new Error("Formbricks URL not provided");
+        }
+        if (!formId) {
+          throw new Error("Form ID not provided");
+        }
+        fetch(`${formbricksUrl}/api/capture/forms/${formId}/submissions/${submissionId}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ finished: true }),
+        });
+      }
+      onFinished({ submission, schema });
     }
   }, [page, formId, formbricksUrl, submissionId]);
 
   const sendToFormbricks = async (partialSubmission: any) => {
-    const submissionBody: any = { data: partialSubmission };
+    if (offline) {
+      return;
+    }
+    if (!formbricksUrl) {
+      throw new Error("Formbricks URL not provided");
+    }
+    if (!formId) {
+      throw new Error("Form ID not provided");
+    }
+    const submissionBody: any = { data: partialSubmission, customer };
     if (page.config?.addFieldsToCustomer && Array.isArray(page.config?.addFieldsToCustomer)) {
       for (const field of page.config?.addFieldsToCustomer) {
         if (field in partialSubmission) {

packages/engine-react/src/components/FormbricksEngine.tsx

@@ -4,18 +4,22 @@ import { EnginePage } from "./EnginePage";
 
 interface FormProps {
   schema: Form;
-  formbricksUrl: string;
-  formId: string;
+  formbricksUrl?: string;
+  formId?: string;
+  customer?: any;
   onFinished?: ({ submission }: any) => void;
   onPageSubmit?: ({ page }: any) => void;
+  offline?: boolean;
 }
 
 export function FormbricksEngine({
   schema,
   formbricksUrl,
   formId,
+  customer = {},
   onFinished = () => {},
   onPageSubmit = () => {},
+  offline = false,
 }: FormProps) {
   if (!schema) {
     console.error("Formbricks Engine: No form provided");
@@ -77,6 +81,8 @@ export function FormbricksEngine({
         formbricksUrl={formbricksUrl}
         formId={formId}
         schema={cleanedSchema}
+        customer={customer}
+        offline={offline}
       />
     </div>
   );