From 5bfb3a18644d19df3edfe37dac6494cc4e69fa97 Mon Sep 17 00:00:00 2001
From: Matthias Nannt <mail@matthiasnannt.com>
Date: Mon, 23 Jan 2023 13:12:11 +0100
Subject: [PATCH] update feedback widget to overwrite config with open(), fix
 customer view in feedback timeline in app

---
 apps/demo/pages/feedback-widget.tsx           | 36 +++++++++----------
 .../components/customers/CustomersPage.tsx    |  6 ++--
 .../customers/SingleCustomerPage.tsx          | 12 +++----
 .../forms/feedback/FeedbackTimeline.tsx       | 10 +++---
 apps/web/src/lib/email.ts                     |  2 +-
 .../forms/[formId]/submissions/index.ts       |  4 +++
 .../forms/[formId]/submissions/index.ts       |  1 -
 packages/feedback-widget/package.json         |  2 +-
 packages/feedback-widget/src/index.ts         |  9 +++--
 packages/feedback-widget/test-cal.html        |  4 +--
 packages/feedback-widget/test-crowd.html      |  2 +-
 packages/feedback-widget/test-div.html        |  2 +-
 packages/feedback-widget/test-lotus.html      |  2 +-
 13 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/apps/demo/pages/feedback-widget.tsx b/apps/demo/pages/feedback-widget.tsx
index bdc26232b8..7bc66e9b14 100644
--- a/apps/demo/pages/feedback-widget.tsx
+++ b/apps/demo/pages/feedback-widget.tsx
@@ -7,30 +7,26 @@ declare global {
   }
 }
 
+const formbricksConfig = {
+  hqUrl: "http://localhost:3000",
+  formId: "cld8pxn4j0000yznuo6qggxfu",
+  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() {
   return (
     <>
-      <Script src="https://cdn.jsdelivr.net/npm/@formbricks/feedback@0.1.5/dist/index.umd.js" defer />
-      <Script id="feedback-setup">{`
-      window.formbricks = {
-      config: {
-        hqUrl: "http://localhost:3000",
-        formId: "clcovbccf000019uss1gyqufg",
-        contact: {
-          name: "Johannes",
-          position: "Founder",
-          imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
-        },
-        customer: {
-          id: "matti@formbricks.com",
-          name: "Matti",
-          email: "matti@formbricks.com",
-        },
-      },
-      ...window.formbricks,
-    };`}</Script>
+      <Script src="https://cdn.jsdelivr.net/npm/@formbricks/feedback@0.2.1/dist/index.umd.js" defer />
       <>
-        <AppPage onClickFeedback={(event) => window.formbricks.open(event)} />
+        <AppPage onClickFeedback={(event) => window.formbricks.open(event, formbricksConfig)} />
       </>
     </>
   );
diff --git a/apps/web/src/components/customers/CustomersPage.tsx b/apps/web/src/components/customers/CustomersPage.tsx
index 8acd413272..0b557a3625 100644
--- a/apps/web/src/components/customers/CustomersPage.tsx
+++ b/apps/web/src/components/customers/CustomersPage.tsx
@@ -61,7 +61,7 @@ export default function FormsPage() {
                       <th
                         scope="col"
                         className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
-                        Id
+                        Email
                       </th>
                       <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                         created At
@@ -78,8 +78,8 @@ export default function FormsPage() {
                     {customers.map((customer, customerIdx) => (
                       <tr key={customer.email} className={customerIdx % 2 === 0 ? undefined : "bg-gray-50"}>
                         <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
-                          <Link href={`/workspaces/${router.query.workspaceId}/customers/${customer.id}`}>
-                            {customer.id}
+                          <Link href={`/workspaces/${router.query.workspaceId}/customers/${customer.email}`}>
+                            {customer.email}
                           </Link>
                         </td>
                         <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
diff --git a/apps/web/src/components/customers/SingleCustomerPage.tsx b/apps/web/src/components/customers/SingleCustomerPage.tsx
index e9ca9f3584..bd57a15c1e 100644
--- a/apps/web/src/components/customers/SingleCustomerPage.tsx
+++ b/apps/web/src/components/customers/SingleCustomerPage.tsx
@@ -52,7 +52,7 @@ export default function SingleCustomerPage() {
           Back to customers overview
         </Link>
         <div className="flex items-baseline justify-between border-b border-gray-200 pt-4 pb-6">
-          <h1 className="text-4xl font-bold tracking-tight text-gray-900">{customer.id}</h1>
+          <h1 className="text-4xl font-bold tracking-tight text-gray-900">{customer.email}</h1>
         </div>
 
         <section className="pt-6 pb-24">
@@ -65,12 +65,10 @@ export default function SingleCustomerPage() {
                   <dd className="mt-1 text-sm text-gray-900">{customer.data.name}</dd>
                 </div>
               )}
-              {"email" in customer.data && (
-                <div>
-                  <dt className="text-sm font-medium text-gray-500">Email</dt>
-                  <dd className="mt-1 text-sm text-gray-900">{customer.data.email}</dd>
-                </div>
-              )}
+              <div>
+                <dt className="text-sm font-medium text-gray-500">Email</dt>
+                <dd className="mt-1 text-sm text-gray-900">{customer.email}</dd>
+              </div>
               {Object.entries(customer.data).map(
                 ([key, value]) =>
                   !["name", "email"].includes(key) && (
diff --git a/apps/web/src/components/forms/feedback/FeedbackTimeline.tsx b/apps/web/src/components/forms/feedback/FeedbackTimeline.tsx
index b8e0f3cf9c..1a9a34e7fd 100644
--- a/apps/web/src/components/forms/feedback/FeedbackTimeline.tsx
+++ b/apps/web/src/components/forms/feedback/FeedbackTimeline.tsx
@@ -104,11 +104,11 @@ export default function FeedbackTimeline({ submissions, setSubmissions }) {
                         <div className="flex w-full justify-between gap-4">
                           <div>
                             <p className="text-sm font-thin text-gray-500">User</p>
-                            {submission.customer ? (
+                            {submission.customerEmail ? (
                               <Link
                                 className="text-sm font-medium text-gray-700"
-                                href={`/workspaces/${router.query.workspaceId}/customers/${submission.customer.id}`}>
-                                {submission.customer.id}
+                                href={`/workspaces/${router.query.workspaceId}/customers/${submission.customerEmail}`}>
+                                {submission.customerEmail}
                               </Link>
                             ) : (
                               <p className="text-sm text-gray-500">Anonymous</p>
@@ -140,10 +140,10 @@ export default function FeedbackTimeline({ submissions, setSubmissions }) {
                               Restore
                             </button>
                           )}
-                          {submission.customer && "email" in submission.customer.data && (
+                          {submission.customerEmail && (
                             <Button
                               variant="primary"
-                              href={`mailto:${submission.customer.data.email}`}
+                              href={`mailto:${submission.customerEmail}`}
                               className="ml-4">
                               Send Email
                             </Button>
diff --git a/apps/web/src/lib/email.ts b/apps/web/src/lib/email.ts
index 1105c4e4f0..66b6f762a8 100644
--- a/apps/web/src/lib/email.ts
+++ b/apps/web/src/lib/email.ts
@@ -121,6 +121,6 @@ export const sendSubmissionEmail = async (
     Click <a href="${
       process.env.NEXTAUTH_URL
     }/workspaces/${workspaceId}/forms/${formId}/feedback">here</a> to see the submission.
-    ${submission.customer?.email ? "<hr/>You can reply to this email to contact the user directly." : ""}`,
+    ${submission.customerEmail ? "<hr/>You can reply to this email to contact the user directly." : ""}`,
   });
 };
diff --git a/apps/web/src/pages/api/capture/forms/[formId]/submissions/index.ts b/apps/web/src/pages/api/capture/forms/[formId]/submissions/index.ts
index a744a48b83..3f5b33dbe4 100644
--- a/apps/web/src/pages/api/capture/forms/[formId]/submissions/index.ts
+++ b/apps/web/src/pages/api/capture/forms/[formId]/submissions/index.ts
@@ -24,6 +24,10 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
       where: { id: formId },
     });
 
+    if (form === null) {
+      return res.status(404).json({ error: `Form with id "${formId}" not found` });
+    }
+
     const event: any = {
       data: {
         data: submission.data,
diff --git a/apps/web/src/pages/api/workspaces/[workspaceId]/forms/[formId]/submissions/index.ts b/apps/web/src/pages/api/workspaces/[workspaceId]/forms/[formId]/submissions/index.ts
index 362b8e5918..1f76034360 100644
--- a/apps/web/src/pages/api/workspaces/[workspaceId]/forms/[formId]/submissions/index.ts
+++ b/apps/web/src/pages/api/workspaces/[workspaceId]/forms/[formId]/submissions/index.ts
@@ -37,7 +37,6 @@ export default async function handle(req: NextApiRequest, res: NextApiResponse)
           id: formId,
         },
       },
-      include: { customer: true },
       orderBy: [
         {
           createdAt: "desc",
diff --git a/packages/feedback-widget/package.json b/packages/feedback-widget/package.json
index 591b29095f..366d331981 100644
--- a/packages/feedback-widget/package.json
+++ b/packages/feedback-widget/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@formbricks/feedback",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "source": "src/index.ts",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
diff --git a/packages/feedback-widget/src/index.ts b/packages/feedback-widget/src/index.ts
index b428671e56..49003a4862 100644
--- a/packages/feedback-widget/src/index.ts
+++ b/packages/feedback-widget/src/index.ts
@@ -18,7 +18,7 @@ export interface FormbricksConfig {
   disableErrorAlert: boolean;
 }
 
-const config: FormbricksConfig = {
+let config: FormbricksConfig = {
   customer: {},
   disableErrorAlert: false,
   // Merge with existing config
@@ -120,7 +120,10 @@ function onDisplay() {
   trap.activate();
 }
 
-function open(e: Event) {
+function open(e: Event, updatedConfig?: FormbricksConfig) {
+  if (updatedConfig) {
+    config = { ...config, ...updatedConfig };
+  }
   if (config.divId) {
     console.error('open() is not supported when using "divId" in config.');
     return;
@@ -130,7 +133,7 @@ function open(e: Event) {
     containerElement.classList.add("formbricks__modal");
   }
 
-  const target = (e?.target as HTMLElement) || document.body;
+  const target = (e.target as HTMLElement) || document.body;
   computePosition(target, containerElement, {
     placement: "bottom",
     middleware: [flip(), shift({ crossAxis: true, padding: 8 })],
diff --git a/packages/feedback-widget/test-cal.html b/packages/feedback-widget/test-cal.html
index b935330da7..5fbcdbade8 100644
--- a/packages/feedback-widget/test-cal.html
+++ b/packages/feedback-widget/test-cal.html
@@ -2,9 +2,10 @@
   <script src="./dist/index.umd.js" charset="UTF-8" defer></script>
   <script>
     window.formbricks = {
+      ...window.formbricks,
       config: {
         hqUrl: "http://localhost:3000",
-        formId: "clcovbccf000019uss1gyqufg",
+        formId: "cld8pxn4j0000yznuo6qggxfu",
         contact: {
           name: "Peer",
           position: "Co-Founder",
@@ -24,7 +25,6 @@
           buttonHoverColor: "#F3F4F6",
         },
       },
-      ...window.formbricks,
     };
   </script>
 </head>
diff --git a/packages/feedback-widget/test-crowd.html b/packages/feedback-widget/test-crowd.html
index 9f9293cc47..3128f94518 100644
--- a/packages/feedback-widget/test-crowd.html
+++ b/packages/feedback-widget/test-crowd.html
@@ -2,6 +2,7 @@
   <script src="./dist/index.umd.js" charset="UTF-8" defer></script>
   <script>
     window.formbricks = {
+      ...window.formbricks,
       config: {
         hqUrl: "http://localhost:3000",
         formId: "clcg4dewt0000yz267be5rya6",
@@ -23,7 +24,6 @@
           buttonHoverColor: "#F9FAFB",
         },
       },
-      ...window.formbricks,
     };
   </script>
 </head>
diff --git a/packages/feedback-widget/test-div.html b/packages/feedback-widget/test-div.html
index c9d341e81c..2e75a149c6 100644
--- a/packages/feedback-widget/test-div.html
+++ b/packages/feedback-widget/test-div.html
@@ -2,6 +2,7 @@
   <script src="./dist/index.umd.js" charset="UTF-8" defer></script>
   <script>
     window.formbricks = {
+      ...window.formbricks,
       config: {
         hqUrl: "http://localhost:3000",
         formId: "clcxavrfm0006yz11frfb0ms2",
@@ -25,7 +26,6 @@
           buttonHoverColor: "#F3F4F6",
         },
       },
-      ...window.formbricks,
     };
   </script>
 </head>
diff --git a/packages/feedback-widget/test-lotus.html b/packages/feedback-widget/test-lotus.html
index 893acffe5c..9ec3a18f24 100644
--- a/packages/feedback-widget/test-lotus.html
+++ b/packages/feedback-widget/test-lotus.html
@@ -2,6 +2,7 @@
   <script src="./dist/index.umd.js" charset="UTF-8" defer></script>
   <script>
     window.formbricks = {
+      ...window.formbricks,
       config: {
         hqUrl: "http://localhost:3000",
         formId: "clcovbccf000019uss1gyqufg",
@@ -25,7 +26,6 @@
           borderRadius: "4px",
         },
       },
-      ...window.formbricks,
     };
   </script>
 </head>