Merge pull request #1583 from Shelf-nu/emails-sending-adjustments

improvement: email content for deliverability reasons, slightly pimp up some email titles
Shelf-nu · Jan 17, 2025 · aa0f246 · aa0f246
2 parents 2cac285 + 02a3f8f
commit aa0f246
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 66 deletions.
diff --git a/app/config/shelf.config.ts b/app/config/shelf.config.ts
@@ -12,10 +12,10 @@ export const config: Config = {
   disableSignup: DISABLE_SIGNUP || false,
   disableSSO: DISABLE_SSO || false,
 
-  // logoPath: {
-  //   fullLogo: "/static/images/logo-full-color(x2).png",
-  //   symbol: "/static/images/shelf-symbol.png",
-  // },
+  logoPath: {
+    fullLogo: "/static/images/logo-full-color(x2).png",
+    symbol: "/static/images/shelf-symbol.png",
+  },
   faviconPath: "/static/favicon.ico",
   emailPrimaryColor: "#EF6820",
 };
diff --git a/app/emails/components/footers.tsx b/app/emails/components/footers.tsx
@@ -1,31 +1,18 @@
-import { Text, Link } from "@react-email/components";
-import { config } from "~/config/shelf.config";
+import { Text } from "@react-email/components";
 import type { BookingForEmail } from "../types";
 
 /** Footer used when sending normal user emails */
 export const UserFooter = ({ booking }: { booking: BookingForEmail }) => (
   <>
     <Text style={{ fontSize: "14px", color: "#344054" }}>
-      This email was sent to{" "}
-      <Link
-        style={{ color: config.emailPrimaryColor }}
-        href={`mailto:${booking.custodianUser!.email}`}
-      >
-        {booking.custodianUser!.email}
-      </Link>{" "}
-      because it is part of the workspace{" "}
+      This email was sent to {booking.custodianUser!.email} because it is part
+      of the workspace{" "}
       <span style={{ color: "#101828", fontWeight: "600" }}>
         "{booking.organization.name}"
       </span>
       . <br /> If you think you weren’t supposed to have received this email
-      please{" "}
-      <Link
-        style={{ color: "#344054", textDecoration: "underline" }}
-        href={`mailto:${booking.organization.owner.email}`}
-      >
-        contact the owner
-      </Link>{" "}
-      of the workspace.
+      please contact the owner ({booking.organization.owner.email}) of the
+      workspace.
     </Text>
     <Text style={{ marginBottom: "32px", fontSize: "14px", color: "#344054" }}>
       {" "}

diff --git a/app/emails/invite-template.tsx b/app/emails/invite-template.tsx
@@ -2,7 +2,6 @@ import {
   Button,
   Html,
   Text,
-  Link,
   Head,
   render,
   Container,
@@ -49,34 +48,17 @@ export function InvitationEmailTemplate({ invite, token }: Props) {
             the workspace and start exploring features like Asset Explorer,
             Location Tracking, Collaboration, Custom fields and more. If you
             have any questions or need assistance, please don't hesitate to
-            contact our support team at{" "}
-            <Link
-              style={{ color: emailPrimaryColor }}
-              href="mailto:[email protected]"
-            >
-              [email protected]
-            </Link>
-            .
+            contact our support team at [email protected].
           </Text>
           <Text style={{ marginBottom: "32px", ...styles.p }}>
             Thanks, <br />
             The Shelf team
           </Text>
           <Text style={{ fontSize: "14px", color: "#344054" }}>
-            This is an automatic email sent from{" "}
-            <Link
-              style={{ color: emailPrimaryColor }}
-              href="https://www.shelf.nu/"
-            >
-              shelf.nu
-            </Link>{" "}
-            to{" "}
-            <Link
-              style={{ color: emailPrimaryColor }}
-              href={`mailto:${invite.inviteeEmail}`}
-            >
+            This is an automatic email sent from shelf.nu to{" "}
+            <span style={{ color: emailPrimaryColor }}>
               {invite.inviteeEmail}
-            </Link>
+            </span>
             .
           </Text>
         </div>

diff --git a/app/emails/logo.tsx b/app/emails/logo.tsx
@@ -6,11 +6,11 @@ export function LogoForEmail() {
   return (
     <div style={{ margin: "0 auto", display: "flex" }}>
       <Img
-        src="cid:shelf-logo"
+        src="https://app.shelf.nu/static/images/logo-full-color(x2).png"
         alt="Shelf's logo"
-        width="32"
+        width="auto"
         height="32"
-        style={{ marginRight: "6px", width: "32px", height: "32px" }}
+        style={{ marginRight: "6px", width: "auto", height: "32px" }}
       />
       {logoPath?.fullLogo ? null : (
         <Heading

diff --git a/app/emails/mail.server.ts b/app/emails/mail.server.ts
@@ -1,5 +1,4 @@
 import type { Attachment } from "nodemailer/lib/mailer";
-import { config } from "~/config/shelf.config";
 import { transporter } from "~/emails/transporter.server";
 import { SMTP_FROM } from "../utils/env";
 import { ShelfError } from "../utils/error";
@@ -33,8 +32,6 @@ export const sendEmail = async ({
   /** Override the default reply to email address */
   replyTo?: string;
 }) => {
-  const { logoPath } = config;
-
   try {
     // send mail with defined transport object
     await transporter.sendMail({
@@ -44,16 +41,7 @@ export const sendEmail = async ({
       subject, // Subject line
       text, // plain text body
       html: html || "", // html body
-      attachments: [
-        {
-          filename: "logo.png",
-          path: logoPath
-            ? `${process.env.SERVER_URL}${config.logoPath?.fullLogo}`
-            : `${process.env.SERVER_URL}/static/images/shelf-symbol.png`,
-          cid: "shelf-logo",
-        },
-        ...(attachments || []),
-      ],
+      attachments: [...(attachments || [])],
     });
   } catch (cause) {
     throw new ShelfError({

diff --git a/app/modules/booking/service.server.ts b/app/modules/booking/service.server.ts
@@ -374,7 +374,7 @@ export async function upsertBooking(
             const custodian =
               `${res.custodianUser?.firstName} ${res.custodianUser?.lastName}` ||
               (res.custodianTeamMember?.name as string);
-            let subject = `Booking reserved (${res.name}) - shelf.nu`;
+            let subject = `✅ Booking reserved (${res.name}) - shelf.nu`;
             let text = assetReservedEmailContent({
               bookingName: res.name,
               assetsCount: res.assets.length,
@@ -823,7 +823,7 @@ export async function deleteBooking(
 
     const email = b.custodianUser?.email;
     if (email) {
-      const subject = `Booking deleted (${b.name}) - shelf.nu`;
+      const subject = `🗑️ Booking deleted (${b.name}) - shelf.nu`;
       const text = deletedBookingEmailContent({
         bookingName: b.name,
         assetsCount: b._count.assets,
@@ -1319,7 +1319,7 @@ export async function bulkDeleteBookings({
 
     const emailConfigs = bookingsToSendEmail.map((b) => ({
       to: b.custodianUser?.email ?? "",
-      subject: `Booking deleted (${b.name}) - shelf.nu`,
+      subject: `🗑️ Booking deleted (${b.name}) - shelf.nu`,
       text: deletedBookingEmailContent({
         bookingName: b.name,
         assetsCount: b.assets.length,
@@ -1540,7 +1540,7 @@ export async function bulkCancelBookings({
     /** Sending cancellation emails */
     await Promise.all(
       bookingsToSendEmail.map((b) => {
-        const subject = `Booking cancelled (${b.name}) - shelf.nu`;
+        const subject = `❌ Booking cancelled (${b.name}) - shelf.nu`;
         const text = cancelledBookingEmailContent({
           bookingName: b.name,
           assetsCount: b._count.assets,

diff --git a/app/modules/booking/worker.server.ts b/app/modules/booking/worker.server.ts
@@ -40,7 +40,7 @@ const checkoutReminder = async ({ data }: PgBoss.Job<SchedulerData>) => {
   if (email && booking.from && booking.to) {
     await sendEmail({
       to: email,
-      subject: `Checkout reminder (${booking.name}) - shelf.nu`,
+      subject: `🔔 Checkout reminder (${booking.name}) - shelf.nu`,
       text: checkoutReminderEmailContent({
         bookingName: booking.name,
         assetsCount: booking._count.assets,

diff --git a/app/modules/invite/service.server.ts b/app/modules/invite/service.server.ts
@@ -252,7 +252,7 @@ export async function createInvite(
 
     await sendEmail({
       to: inviteeEmail,
-      subject: `You have been invited to ${invite.organization.name}`,
+      subject: `✉️ You have been invited to ${invite.organization.name}`,
       text: inviteEmailText({ invite, token }),
       html: invitationTemplateString({ invite, token }),
     });