update feedback widget to overwrite config with open(), fix customer view in feedback timeline in app

2026-01-25 10:30:30 -06:00 · 2023-01-23 13:12:11 +01:00
parent 7b72ffb82e
commit 5bfb3a1864
13 changed files with 46 additions and 46 deletions
--- 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)} />
      </>
    </>
  );
--- 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">
--- 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) && (
--- 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>
--- 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." : ""}`,
  });
 };
--- 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,
--- 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",
--- 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",
--- 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 })],
--- 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>
--- 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>
--- 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>
--- 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>