feat: add "edit rsvp" to response email; fix: typography

mplewis · Nov 11, 2024 · 9bb8b2a · 9bb8b2a
1 parent ec2fbae
commit 9bb8b2a
Show file tree

Hide file tree

Showing 11 changed files with 27 additions and 29 deletions.
diff --git a/NOTES.md b/NOTES.md
@@ -32,7 +32,6 @@
 	- [ ] Why are hamburger items missing on Confirm RSVP page?
 - [ ] URL builder helpers
 - [ ] Write README
-- [ ] Unify `typ` styles for `pageTitle` and `head`
 - [ ] Form to request resend link(s) for email address
 - [ ] Hold RSVP locally with cookie
 - [ ] Resend confirmation if an RSVP enters an existing email
@@ -51,6 +50,7 @@
 - [ ] Allow event owner to customize their level of email participation
 - [ ] Automate flow tests
 - [ ] Spinners on loading pages with fun text
+- [x] Unify `typ` styles for `pageTitle` and `head`
 - [x] Edit RSVP from confirmation link
 - [x] More prominent RSVP button
 - [x] Delete RSVP

diff --git a/api/src/lib/email/template/reminder.test.ts b/api/src/lib/email/template/reminder.test.ts
@@ -37,7 +37,7 @@ describe('with test handler', () => {
   "handler": "nodemailer",
   "handlerOptions": undefined,
   "headers": {},
-  "htmlContent": "Hello from Freevite! You asked for a reminder about this event when you RSVPed:<br><br>Emma&#39;s Holiday Party<br>Starts at: Sun Dec 25, 2022, 7:00 AM EST (in a day))<br>Ends at: Sun Dec 25, 2022, 10:00 AM EST (3 hours long)<br><br>View the event here:<br>https://example.com/events/emmas-holiday-party<br><br>If you need to modify or delete your RSVP, just reply to this email.<br>Thanks for using Freevite!",
+  "htmlContent": "Hello from Freevite! You asked for a reminder about this event when you RSVPed:<br><br>Emma&#39;s Holiday Party<br>Starts at: Sun Dec 25, 2022, 7:00 AM EST (in a day))<br>Ends at: Sun Dec 25, 2022, 10:00 AM EST (3 hours long)<br><br>View the event here:<br>https://example.com/events/emmas-holiday-party<br><br>Thanks for using Freevite!",
   "renderer": "plain",
   "rendererOptions": {},
   "replyTo": undefined,
@@ -51,7 +51,6 @@ Ends at: Sun Dec 25, 2022, 10:00 AM EST (3 hours long)
 View the event here:
 https://example.com/events/emmas-holiday-party
 
-If you need to modify or delete your RSVP, just reply to this email.
 Thanks for using Freevite!",
   "to": [
     "[email protected]",

diff --git a/api/src/lib/email/template/reminder.ts b/api/src/lib/email/template/reminder.ts
@@ -39,7 +39,6 @@ export async function sendReminder({
       View the event here:
       https://${SITE_HOST}/events/${event.slug}
 
-      If you need to modify or delete your RSVP, just reply to this email.
       Thanks for using Freevite!
     `,
   })

diff --git a/api/src/lib/email/template/response.test.ts b/api/src/lib/email/template/response.test.ts
@@ -37,21 +37,20 @@ describe('with test handler', () => {
   "handler": "nodemailer",
   "handlerOptions": undefined,
   "headers": {},
-  "htmlContent": "Hello from Freevite! Click this link to confirm your attendance of Emma&#39;s Holiday Party:<br><br>https://example.com/rsvp?token=SOME-EDIT-TOKEN<br><br>You must click the above link to confirm your RSVP.<br>Once you do, we&#39;ll let the organizer know you are attending.<br><br>If you did not RSVP to this event, you can ignore this email.<br><br>To modify or delete your RSVP, just reply to this email. Thanks for using Freevite!",
+  "htmlContent": "Hello from Freevite!<br><br>Click here to confirm you&#39;re attending Emma&#39;s Holiday Party:<br>https://example.com/rsvp?token=SOME-EDIT-TOKEN<br>Once you do, we&#39;ll confirm your RSVP and notify the event organizer.<br><br>To change your response or delete your RSVP, click the link above.<br><br>If you did not RSVP to this event, you can ignore this email.",
   "renderer": "plain",
   "rendererOptions": {},
   "replyTo": undefined,
   "subject": "Confirm your RSVP to Emma's Holiday Party",
-  "textContent": "Hello from Freevite! Click this link to confirm your attendance of Emma's Holiday Party:
+  "textContent": "Hello from Freevite!
 
+Click here to confirm you're attending Emma's Holiday Party:
 https://example.com/rsvp?token=SOME-EDIT-TOKEN
+Once you do, we'll confirm your RSVP and notify the event organizer.
 
-You must click the above link to confirm your RSVP.
-Once you do, we'll let the organizer know you are attending.
+To change your response or delete your RSVP, click the link above.
 
-If you did not RSVP to this event, you can ignore this email.
-
-To modify or delete your RSVP, just reply to this email. Thanks for using Freevite!",
+If you did not RSVP to this event, you can ignore this email.",
   "to": [
     "[email protected]",
   ],
@@ -84,7 +83,7 @@ To modify or delete your RSVP, just reply to this email. Thanks for using Freevi
   "handler": "nodemailer",
   "handlerOptions": undefined,
   "headers": {},
-  "htmlContent": "Hello from Freevite! Sherlock Holmes has confirmed they are attending Emma&#39;s Holiday Party:<br><br>Name: Sherlock Holmes<br>Guests: 2<br>Comment: Looking forward to it!<br><br>To view all responses and manage your event, click here:<br>https://example.com/edit?token=SOME-EDIT-TOKEN<br><br>If you need any help, just reply to this email. Thanks for using Freevite!",
+  "htmlContent": "Hello from Freevite! Sherlock Holmes has confirmed they are attending Emma&#39;s Holiday Party:<br><br>Name: Sherlock Holmes<br>Guests: 2<br>Comment: Looking forward to it!<br><br>To view all responses and manage your event, click here:<br>https://example.com/edit?token=SOME-EDIT-TOKEN<br><br>Thanks for using Freevite!",
   "renderer": "plain",
   "rendererOptions": {},
   "replyTo": undefined,
@@ -98,7 +97,7 @@ Comment: Looking forward to it!
 To view all responses and manage your event, click here:
 https://example.com/edit?token=SOME-EDIT-TOKEN
 
-If you need any help, just reply to this email. Thanks for using Freevite!",
+Thanks for using Freevite!",
   "to": [
     "[email protected]",
   ],
@@ -131,7 +130,7 @@ If you need any help, just reply to this email. Thanks for using Freevite!",
   "handler": "nodemailer",
   "handlerOptions": undefined,
   "headers": {},
-  "htmlContent": "Hello from Freevite! Sherlock Holmes has canceled their RSVP to Emma&#39;s Holiday Party.<br><br>Here are the details of the RSVP before it was canceled:<br>Name: Sherlock Holmes<br>Guests: 2<br>Comment: Looking forward to it!<br><br>To view all RSVPs and manage your event, click here:<br>https://example.com/edit?token=SOME-EDIT-TOKEN<br><br>If you need any help, just reply to this email. Thanks for using Freevite!",
+  "htmlContent": "Hello from Freevite! Sherlock Holmes has canceled their RSVP to Emma&#39;s Holiday Party.<br><br>Here are the details of the RSVP before it was canceled:<br>Name: Sherlock Holmes<br>Guests: 2<br>Comment: Looking forward to it!<br><br>To view all RSVPs and manage your event, click here:<br>https://example.com/edit?token=SOME-EDIT-TOKEN<br><br>Thanks for using Freevite!",
   "renderer": "plain",
   "rendererOptions": {},
   "replyTo": undefined,
@@ -146,7 +145,7 @@ Comment: Looking forward to it!
 To view all RSVPs and manage your event, click here:
 https://example.com/edit?token=SOME-EDIT-TOKEN
 
-If you need any help, just reply to this email. Thanks for using Freevite!",
+Thanks for using Freevite!",
   "to": [
     "[email protected]",
   ],

diff --git a/api/src/lib/email/template/response.ts b/api/src/lib/email/template/response.ts
@@ -22,16 +22,15 @@ export async function sendResponseConfirmation({
     to: response.email,
     subject: `Confirm your RSVP to ${event.title}`,
     text: stripIndent`
-      Hello from Freevite! Click this link to confirm your attendance of ${event.title}:
+      Hello from Freevite!
 
+      Click here to confirm you're attending ${event.title}:
       ${SITE_URL}/rsvp?token=${response.editToken}
+      Once you do, we'll confirm your RSVP and notify the event organizer.
 
-      You must click the above link to confirm your RSVP.
-      Once you do, we'll let the organizer know you are attending.
+      To change your response or delete your RSVP, click the link above.
 
       If you did not RSVP to this event, you can ignore this email.
-
-      To modify or delete your RSVP, just reply to this email. Thanks for using Freevite!
     `,
   })
 }
@@ -64,7 +63,7 @@ export async function sendNewResponseReceived({
       To view all responses and manage your event, click here:
       ${SITE_URL}/edit?token=${event.editToken}
 
-      If you need any help, just reply to this email. Thanks for using Freevite!
+      Thanks for using Freevite!
     `,
   })
 }
@@ -96,7 +95,7 @@ export async function sendResponseDeleted({
       To view all RSVPs and manage your event, click here:
       ${SITE_URL}/edit?token=${event.editToken}
 
-      If you need any help, just reply to this email. Thanks for using Freevite!
+      Thanks for using Freevite!
     `,
   })
 }
diff --git a/web/src/components/EditResponseCell/EditResponseCell.tsx b/web/src/components/EditResponseCell/EditResponseCell.tsx
@@ -120,7 +120,7 @@ export const Success = ({
 
   return (
     <>
-      <Typ x="pageTitle">RSVP confirmed!</Typ>
+      <Typ x="head">RSVP confirmed!</Typ>
       <Typ x="p">
         We have notified the event organizer that you will be attending{' '}
         <strong>{event.title}</strong>. Thanks for using Freevite!

diff --git a/web/src/components/NewResponseForm/NewResponseForm.tsx b/web/src/components/NewResponseForm/NewResponseForm.tsx
@@ -49,7 +49,7 @@ const NewResponseForm = (props: Props) => {
 
   if (event.responseConfig === 'DISABLED') return null
 
-  const Title = <Typ x="head">RSVP to {event.title}</Typ>
+  const Title = <Typ x="subhead">RSVP to {event.title}</Typ>
 
   if (createdForEmail) {
     return (

diff --git a/web/src/components/PageHead/PageHead.tsx b/web/src/components/PageHead/PageHead.tsx
@@ -18,7 +18,7 @@ const PageHead = ({ title, desc }: Props) => {
         description={desc}
         ogContentUrl={`${SITE_URL}/og-logo.png`}
       />
-      <Typ x="pageTitle">{title}</Typ>
+      <Typ x="head">{title}</Typ>
     </>
   )
 }

diff --git a/web/src/components/ResponseForm/ResponseForm.tsx b/web/src/components/ResponseForm/ResponseForm.tsx
@@ -60,6 +60,10 @@ const ResponseForm = (props: Props) => {
   return (
     <>
       <Typ x="p">{privacyNote}</Typ>
+      <Typ x="p">
+        <em>Making changes to your RSVP?</em> Use the link we sent to your email
+        to edit your details or cancel your RSVP.
+      </Typ>
 
       <Form
         className="mt-3"

diff --git a/web/src/components/ShowEvent/ShowEvent.tsx b/web/src/components/ShowEvent/ShowEvent.tsx
@@ -72,7 +72,7 @@ const ResponseSummary = (event: PublicEvent) => {
 
   return (
     <>
-      <Typ x="head">Who&apos;s coming?</Typ>
+      <Typ x="subhead">Who&apos;s coming?</Typ>
       <Typ x="p">
         <strong>{attd}</strong> {poss} confirmed that they are attending.
         {event.responseSummary.headCountTotal === 0 &&

diff --git a/web/src/components/Typ/Typ.tsx b/web/src/components/Typ/Typ.tsx
@@ -12,8 +12,7 @@ const headClasses = ['mt-3', 'mb-1', 'has-text-weight-semibold']
 
 const classes = {
   head: classNames('is-size-2', ...headClasses),
-  subhead: classNames('is-size-4', ...headClasses),
-  pageTitle: classNames('is-size-3', ...headClasses),
+  subhead: classNames('is-size-3', ...headClasses),
   p: 'mb-2',
   labelDetails: 'is-italic has-text-weight-normal', // Helper text for a form label
 }
@@ -25,7 +24,6 @@ const Typ = ({ x, className, children, ...rest }: Props) => {
   return match(x)
     .with('head', () => <h1 {...attrs}>{children}</h1>)
     .with('subhead', () => <h2 {...attrs}>{children}</h2>)
-    .with('pageTitle', () => <h1 {...attrs}>{children}</h1>)
     .with('p', () => <p {...attrs}>{children}</p>)
     .with('labelDetails', () => <span {...attrs}>{children}</span>)
     .exhaustive()