feat: show details of submission in email

eight-labs · Jul 15, 2024 · 922e1e4 · 922e1e4
1 parent 8694cbd
commit 922e1e4
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 36 deletions.
diff --git a/apps/web/src/app/api/s/[id]/route.ts b/apps/web/src/app/api/s/[id]/route.ts
@@ -59,7 +59,10 @@ async function processFileUploads(
   }
 }
 
-async function handleEmailNotifications(form: Form, formId: string) {
+async function handleEmailNotifications(
+  form: Form,
+  submissionData: Record<string, unknown>,
+) {
   if (form.enableEmailNotifications) {
     const user = await api.user.getUserById({ userId: form.userId });
     if (!user) throw new Error('User not found');
@@ -68,8 +71,8 @@ async function handleEmailNotifications(form: Form, formId: string) {
       to: user.email,
       subject: `New Submission for "${form.title}"`,
       body: renderNewSubmissionEmail({
-        link: `http://localhost:3000/form/${formId}`,
         formTitle: form.title,
+        submissionData,
       }),
     });
   }
@@ -110,8 +113,7 @@ export async function POST(
       keys: updatedKeys,
     });
 
-    void handleEmailNotifications(form, formId);
-
+    void handleEmailNotifications(form, formData as Record<string, unknown>);
     const { browser } = userAgent(request);
 
     if (!browser.name) {

diff --git a/apps/web/src/lib/email/mailer.ts b/apps/web/src/lib/email/mailer.ts
@@ -8,28 +8,28 @@ import { env } from '@formbase/env';
 const smtpConfig = {
   host: env.SMTP_HOST,
   port: env.SMTP_PORT,
-  secure: true,
+  secure: env.NODE_ENV === 'production',
   auth: {
     user: env.SMTP_USER,
     pass: env.SMTP_PASSWORD,
   },
 };
 
 const nodeMailerTransporter = createTransport(smtpConfig as TransportOptions);
-const resendTransporter = createTransport(
-  ResendTransport.makeTransport({
-    apiKey: env.RESEND_API_KEY || '',
-  }),
-);
-
 export type MessageInfo = {
   to: string;
   subject: string;
   body: string;
 };
 
 const transporter =
-  env.SMTP_TRANSPORT === 'resend' ? resendTransporter : nodeMailerTransporter;
+  env.SMTP_TRANSPORT === 'resend'
+    ? createTransport(
+        ResendTransport.makeTransport({
+          apiKey: env.RESEND_API_KEY,
+        }),
+      )
+    : nodeMailerTransporter;
 
 export const sendMail = async (message: MessageInfo) => {
   const { to, subject, body } = message;

diff --git a/apps/web/src/lib/email/templates/new-submission.tsx b/apps/web/src/lib/email/templates/new-submission.tsx
@@ -1,21 +1,34 @@
 import {
   Body,
-  Button,
+  Column,
   Container,
   Head,
   Html,
   Preview,
+  Row,
   Section,
   Text,
 } from '@react-email/components';
 import { render } from '@react-email/render';
 
 interface Props {
-  link: string;
   formTitle: string;
+  submissionData: Record<string, unknown>;
 }
 
-export const NewSubmissionEmail = ({ link, formTitle }: Props) => {
+const formatKey = (key: string): string => {
+  if (key.includes('_')) {
+    return key
+      .split('_')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join(' ');
+  }
+
+  const result = key.replace(/([A-Z])/g, ' $1');
+  return result.charAt(0).toUpperCase() + result.slice(1);
+};
+
+export const NewSubmissionEmail = ({ formTitle, submissionData }: Props) => {
   return (
     <Html>
       <Head />
@@ -26,12 +39,17 @@ export const NewSubmissionEmail = ({ link, formTitle }: Props) => {
             <Text style={title}>Formbase</Text>
             <Text style={text}>Hi,</Text>
             <Text style={text}>
-              Your form <strong>{formTitle}</strong> has a new submission. You
-              can view it by clicking the button below:
+              Your form <strong>{formTitle}</strong> has a new submission. Here
+              are the details:
             </Text>
-            <Button style={button} href={link}>
-              View Submission
-            </Button>
+            <Section style={submissionContainer}>
+              {Object.entries(submissionData).map(([key, value]) => (
+                <Row key={key} style={submissionRow}>
+                  <Column style={submissionLabel}>{formatKey(key)}:</Column>
+                  <Column style={submissionValue}>{String(value)}</Column>
+                </Row>
+              ))}
+            </Section>
             <Text style={text}>Have a nice day!</Text>
           </Section>
         </Container>
@@ -40,8 +58,16 @@ export const NewSubmissionEmail = ({ link, formTitle }: Props) => {
   );
 };
 
-export const renderNewSubmissionEmail = ({ link, formTitle }: Props) =>
-  render(<NewSubmissionEmail link={link} formTitle={formTitle} />);
+export const renderNewSubmissionEmail = ({
+  formTitle,
+  submissionData,
+}: Props) =>
+  render(
+    <NewSubmissionEmail
+      formTitle={formTitle}
+      submissionData={submissionData}
+    />,
+  );
 
 const main = {
   backgroundColor: '#f6f9fc',
@@ -70,19 +96,25 @@ const title = {
   lineHeight: '32px',
 };
 
-const button = {
-  backgroundColor: '#09090b',
-  borderRadius: '4px',
-  color: '#fafafa',
-  fontFamily: "'Open Sans', 'Helvetica Neue', Arial",
-  fontSize: '15px',
-  textDecoration: 'none',
-  textAlign: 'center' as const,
-  display: 'block',
-  width: '210px',
-  padding: '14px 7px',
+const submissionContainer = {
+  marginTop: '20px',
+  marginBottom: '20px',
+  borderTop: '1px solid #f0f0f0',
+  borderBottom: '1px solid #f0f0f0',
+  padding: '20px 0',
+};
+
+const submissionRow = {
+  marginBottom: '10px',
 };
 
-// const anchor = {
-//   textDecoration: "underline",
-// };
+const submissionLabel = {
+  ...text,
+  fontWeight: '700',
+  width: '30%',
+};
+
+const submissionValue = {
+  ...text,
+  width: '70%',
+};