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

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">

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) && (

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>

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." : ""}`,
   });
 };

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,

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",