add api functionality to add fields to customer with submission update, update waitlist to create customer once he submits email field

apps/demo/pages/feedback-widget.tsx

@@ -1,4 +1,5 @@
 import Script from "next/script";
+import { useEffect } from "react";
 import AppPage from "../components/AppPage";
 
 declare global {
@@ -7,26 +8,29 @@ declare global {
   }
 }
 
-const formbricksConfig = {
-  hqUrl: "http://localhost:3000",
-  formId: "cldbr2x45000i19t69ncbohnn",
-  contact: {
-    name: "Johannes",
-    position: "Founder",
-    imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
-  },
-  customer: {
-    name: "Matti",
-    email: "matti@formbricks.com",
-  },
-};
-
 export default function FeedbackWidget() {
+  useEffect(() => {
+    window.formbricks = {
+      config: {
+        hqUrl: "http://localhost:3000",
+        formId: "cldohpx4t000019vijzlf8mgn",
+        contact: {
+          name: "Matti Nannt",
+          position: "Founder",
+          imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
+        },
+        customer: {
+          name: "Formbricks",
+          email: "johannes@formbricks.com",
+        },
+      },
+    };
+  }, []);
   return (
     <>
       <Script src="https://cdn.jsdelivr.net/npm/@formbricks/feedback@0.2.1/dist/index.umd.js" defer />
       <>
-        <AppPage onClickFeedback={(event) => window.formbricks.open(event, formbricksConfig)} />
+        <AppPage onClickFeedback={(event) => window.formbricks.open(event)} />
       </>
     </>
   );

apps/formbricks-com/components/engine/SurveyPage.tsx

@@ -56,12 +56,23 @@ export function SurveyPage({
   }, [page, formId, formbricksUrl, submissionId, plausible]);
 
   const sendToFormbricks = async (partialSubmission: any) => {
+    const submissionBody: any = { data: partialSubmission };
+    if (page.config?.addFieldsToCustomer && Array.isArray(page.config?.addFieldsToCustomer)) {
+      for (const field of page.config?.addFieldsToCustomer) {
+        if (field in partialSubmission) {
+          if (!("customer" in submissionBody)) {
+            submissionBody.customer = {};
+          }
+          submissionBody.customer[field] = partialSubmission[field];
+        }
+      }
+    }
     if (!submissionId) {
       const res = await Promise.all([
         fetch(`${formbricksUrl}/api/capture/forms/${formId}/submissions`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ data: partialSubmission }),
+          body: JSON.stringify(submissionBody),
         }),
         fetch(`${formbricksUrl}/api/capture/forms/${formId}/schema`, {
           method: "POST",
@@ -79,7 +90,7 @@ export function SurveyPage({
       const res = await fetch(`${formbricksUrl}/api/capture/forms/${formId}/submissions/${submissionId}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ data: partialSubmission }),
+        body: JSON.stringify(submissionBody),
       });
       if (!res.ok) {
         alert("There was an error sending this form. Please contact us at hola@formbricks.com");
@@ -99,6 +110,7 @@ export function SurveyPage({
       plausible(`waitlistSubmitPage-${page.id}`);
       window.scrollTo(0, 0);
     } catch (e) {
+      console.error(e);
       alert("There was an error sending this form. Please contact us at hola@formbricks.com");
     }
   };

apps/formbricks-com/components/engine/engineTypes.tsx

@@ -9,6 +9,7 @@ export interface SurveyPage {
   endScreen?: boolean;
   elements: SurveyElement[];
   config?: {
+    addFieldsToCustomer?: string[];
     autoSubmit?: boolean;
     allowSkip?: boolean;
   };

apps/formbricks-com/pages/waitlist.tsx

@@ -52,7 +52,7 @@ const WaitlistPage = () => (
             process.env.NODE_ENV === "production" ? "https://app.formbricks.com" : "http://localhost:3000"
           }
           formId={
-            process.env.NODE_ENV === "production" ? "cld37mt2i0000ld08p9q572bc" : "cldd3mrbs0007u0w0g2m6verd"
+            process.env.NODE_ENV === "production" ? "cld37mt2i0000ld08p9q572bc" : "cldonm4ra000019axa4oc440z"
           }
           survey={{
             config: {
@@ -104,6 +104,9 @@ const WaitlistPage = () => (
               },
               {
                 id: "emailPage",
+                config: {
+                  addFieldsToCustomer: ["email"],
+                },
                 elements: [
                   {
                     id: "email",
@@ -224,6 +227,7 @@ const WaitlistPage = () => (
                 id: "wauPage",
                 config: {
                   autoSubmit: true,
+                  addFieldsToCustomer: ["wau"],
                 },
                 elements: [
                   {

apps/web/src/pages/api/capture/forms/[formId]/submissions/[submissionId]/index.ts

@@ -27,6 +27,7 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
 
     const prevSubmission = await prisma.submission.findUnique({
       where: { id: submissionId },
+      include: { customer: true },
     });
 
     if (prevSubmission === null) {
@@ -52,26 +53,46 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
       event.data.data = { ...prevSubmission.data, ...submission.data };
     }
 
-    if (submission.customer && "email" in submission.customer) {
-      const customerEmail = submission.customer.email;
-      const customerData = { ...submission.customer };
-      delete customerData.email;
-      // create or link customer
-      event.data.customer = {
-        connectOrCreate: {
+    if (submission.customer) {
+      // add fields to customer or create new one if it doesn't exist
+      if (prevSubmission.customerEmail) {
+        const customerData = { ...prevSubmission.customer.data, ...submission.customer };
+        delete customerData.email;
+        await prisma.customer.update({
           where: {
             email_organisationId: {
-              email: submission.customer.email,
+              email: prevSubmission.customerEmail,
               organisationId: form.organisationId,
             },
           },
-          create: {
-            email: customerEmail,
-            organisation: { connect: { id: form.organisationId } },
-            data: customerData,
-          },
-        },
-      };
+          data: { data: customerData },
+        });
+        return res.status(200).json({ message: "Submission updated" });
+      } else {
+        if ("email" in submission.customer) {
+          const customerEmail = submission.customer.email;
+          const customerData = { ...submission.customer };
+          delete customerData.email;
+          // create or link customer
+          event.data.customer = {
+            connectOrCreate: {
+              where: {
+                email_organisationId: {
+                  email: submission.customer.email,
+                  organisationId: form.organisationId,
+                },
+              },
+              create: {
+                email: customerEmail,
+                organisation: { connect: { id: form.organisationId } },
+                data: customerData,
+              },
+            },
+          };
+        } else {
+          console.error("Customer email is required to create a new customer");
+        }
+      }
     }
 
     // create form in db

packages/ee/billing/components/PricingTable.tsx

@@ -13,8 +13,6 @@ export default function BillingPage({ organisationId }: { organisationId: string
     return <div>Stripe environment variables not set</div>;
   }
 
-  console.log(organisationId);
-
   return (
     <>
       <Script async src="https://js.stripe.com/v3/pricing-table.js" />