✨ Allow participant to enter email to receive edit link (#534)

packages/emails/src/templates.ts

@@ -1,6 +1,7 @@
 export * from "./templates/guest-verify-email";
 export * from "./templates/new-comment";
 export * from "./templates/new-participant";
+export * from "./templates/new-participant-confirmation";
 export * from "./templates/new-poll";
 export * from "./templates/new-poll-verification";
 export * from "./templates/verification-code";

packages/emails/src/templates/new-participant-confirmation.tsx

@@ -0,0 +1,35 @@
+import { EmailLayout } from "./components/email-layout";
+import { Button, Section, Text } from "./components/styled-components";
+
+interface NewParticipantConfirmationEmailProps {
+  name: string;
+  title: string;
+  editSubmissionUrl: string;
+}
+export const NewParticipantConfirmationEmail = ({
+  title = "Untitled Poll",
+  name = "Guest",
+  editSubmissionUrl = "https://rallly.co",
+}: NewParticipantConfirmationEmailProps) => {
+  return (
+    <EmailLayout preview="To edit your response use the link below">
+      <Text>Hi {name},</Text>
+      <Text>
+        Thank you for submitting your availability for <strong>{title}</strong>.
+      </Text>
+      <Text>To review your response, use the link below:</Text>
+      <Section>
+        <Button id="editSubmissionUrl" href={editSubmissionUrl}>
+          Review response &rarr;
+        </Button>
+      </Section>
+      <Text>
+        <em className="text-slate-500">
+          Keep this link safe and do not share it with others.
+        </em>
+      </Text>
+    </EmailLayout>
+  );
+};
+
+export default NewParticipantConfirmationEmail;

packages/emails/src/templates/new-participant.tsx

@@ -17,9 +17,7 @@ export const NewParticipantEmail = ({
   unsubscribeUrl = "https://rallly.co",
 }: NewParticipantEmailProps) => {
   return (
-    <EmailLayout
-      preview={`${participantName} has shared their availability for ${title}`}
-    >
+    <EmailLayout preview={`${participantName} has responded`}>
       <Text>Hi {name},</Text>
       <Text>
         <strong>{participantName}</strong> has shared their availability for{" "}

packages/emails/src/templates/verification-code.tsx

@@ -1,7 +1,7 @@
 import { Heading } from "@react-email/heading";
 
 import { EmailLayout } from "./components/email-layout";
-import { Text } from "./components/styled-components";
+import { Section, Text } from "./components/styled-components";
 
 interface VerificationCodeEmailProps {
   name: string;
@@ -13,18 +13,20 @@ export const VerificationCodeEmail = ({
   code = "123456",
 }: VerificationCodeEmailProps) => {
   return (
-    <EmailLayout preview="Here is your 6-digit code">
+    <EmailLayout preview={`Your 6-digit code is ${code}`}>
       <Text>Hi {name},</Text>
-      <Text>Your 6-digit code is:</Text>
-      <Heading className="font-sans tracking-widest" id="code">
-        {code}
-      </Heading>
-      <Text>
-        <span className="text-slate-500">
-          This code is valid for 10 minutes
-        </span>
-      </Text>
-      <Text>Use this code to complete the verification process.</Text>
+      <Text>Please use the code below to verify your email address.</Text>
+      <Section className="rounded bg-gray-50 text-center">
+        <Text>Your 6-digit code is:</Text>
+        <Heading className="font-sans tracking-widest" id="code">
+          {code}
+        </Heading>
+        <Text>
+          <span className="text-slate-500">
+            This code is valid for 15 minutes
+          </span>
+        </Text>
+      </Section>
     </EmailLayout>
   );
 };