Merge pull request #688 from CodeForAfrica/chore/update-email-template

Update email template

apps/vpnmanager/package.json

@@ -22,7 +22,7 @@
     "@mui/utils": "^5.14.20",
     "@next/env": "^14.1.4",
     "@sendgrid/mail": "^8.1.1",
-    "@sentry/nextjs": "^7.105.0",
+    "@sentry/nextjs": "^7.106.1",
     "@svgr/webpack": "^8.1.0",
     "@types/jest": "^29.5.12",
     "googleapis": "^133.0.0",

apps/vpnmanager/scripts/processGsheet.ts

@@ -1,6 +1,8 @@
 import { processNewUsers } from "@/vpnmanager/lib/processUsers";
 import { loadEnvConfig } from "@next/env";
+import { initSentry } from "../sentry.server.config";
 
+initSentry();
 const projectDir = process.cwd();
 loadEnvConfig(projectDir);
 

apps/vpnmanager/sentry.client.config.ts

@@ -3,7 +3,7 @@ import * as Sentry from "@sentry/nextjs";
 Sentry.init({
   dsn: process.env.SENTRY_DSN,
   tracesSampleRate: 1,
-  environment: process.env.SENTRY_ENV,
+  environment: process.env.SENTRY_ENV ?? "local",
   debug: false,
   replaysOnErrorSampleRate: 1.0,
   replaysSessionSampleRate: 0.1,

apps/vpnmanager/sentry.edge.config.ts

@@ -2,7 +2,7 @@ import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
   dsn: process.env.SENTRY_DSN,
-  environment: process.env.SENTRY_ENV,
+  environment: process.env.SENTRY_ENV ?? "local",
   tracesSampleRate: 1,
   debug: false,
 });

apps/vpnmanager/sentry.server.config.ts

@@ -1,8 +1,13 @@
 import * as Sentry from "@sentry/nextjs";
 
-Sentry.init({
+const options = {
   dsn: process.env.SENTRY_DSN,
-  environment: process.env.SENTRY_ENV,
+  environment: process.env.SENTRY_ENV ?? "local",
   tracesSampleRate: 1,
-  debug: false,
-});
+};
+
+Sentry.init(options);
+
+export function initSentry() {
+  Sentry.init(options);
+}

apps/vpnmanager/src/lib/email/sender.ts

@@ -4,11 +4,12 @@ import * as Sentry from "@sentry/nextjs";
 import { emailKeyTemplate } from "./templates";
 
 interface MailSender {
-  recipient: string;
+  to: string;
   key: string;
+  name: string;
 }
 
-export async function sendVpnKeyEmail({ recipient: to, key }: MailSender) {
+export async function sendVpnKeyEmail({ to, key, name }: MailSender) {
   try {
     const sendGridApiKey = process.env.VPN_MANAGER_SENDGRID_API_KEY as string;
     if (!sendGridApiKey) {
@@ -25,9 +26,20 @@ export async function sendVpnKeyEmail({ recipient: to, key }: MailSender) {
       to,
       from,
       subject,
-      html: emailKeyTemplate(key),
+      html: emailKeyTemplate(key, name),
     };
     await sgMail.send(message);
+    Sentry.withScope((scope) => {
+      scope.setLevel("info");
+      scope.setUser({
+        email: to,
+      });
+      scope.addAttachment({
+        filename: "email.html",
+        data: emailKeyTemplate("*hidden*", name),
+      });
+      Sentry.captureMessage("Outline key sent");
+    });
   } catch (error) {
     Sentry.captureException(error);
   }

apps/vpnmanager/src/lib/email/templates.ts

@@ -1,14 +1,23 @@
-export function emailKeyTemplate(key: string) {
-  return `<div>
-    <p>
-    Follow the instructions on your <a href="https://s3.amazonaws.com/outline-vpn/invite.html#${encodeURIComponent(
-      key,
-    )}">Invitation Link</a> to download the Outline app and get connected.
-    </p>
-    <p>Having trouble accessing the invitation link?</p>
-    <ol>
-        <li>Copy your access key: ${key}</li>
-        <li>Follow our invitation instructions on GitHub: https://github.com/Jigsaw-Code/outline-client/blob/master/docs/invitation_instructions.md</li>
-    </ol>
-</div>`;
+export function emailKeyTemplate(key: string, name: string) {
+  return `
+  <div>
+
+  <p>Hi ${name},</p>
+  <p>Use the following instructions to set up Outline VPN on your devices:</p>
+  
+  <ol>
+    <li>Download and install the Outline app for your device:</li>
+    <ul>
+      <li>iOS: <a href="https://itunes.apple.com/app/outline-app/id1356177741">Download from App Store</a></li>
+      <li>MacOS: <a href="https://itunes.apple.com/app/outline-app/id1356178125">Download from App Store</a></li>
+      <li>Windows: <a href="https://s3.amazonaws.com/outline-releases/client/windows/stable/Outline-Client.exe">Download</a></li>
+      <li>Linux: <a href="https://s3.amazonaws.com/outline-releases/client/linux/stable/Outline-Client.AppImage">Download</a></li>
+      <li>Android: <a href="https://play.google.com/store/apps/details?id=org.outline.android.client">Download from Google Play</a></li>
+      <li>Android alternative link: <a href="https://s3.amazonaws.com/outline-releases/client/android/stable/Outline-Client.apk">Download APK</a></li>
+    </ul>
+    <li>Copy your Access key ${key}</li>
+    <li>Open the Outline client app. If your access key is auto-detected, tap 'Connect'. If your access key is not auto-detected, paste it in the field, then tap 'Connect'. You are good to go!</li>
+  </ol>
+  <p>NOTE: The same key can be used for multiple devices.</p>
+  </div>`;
 }

apps/vpnmanager/src/lib/processUsers.ts

@@ -30,8 +30,9 @@ export async function processUser(item: SheetRow) {
     }
   }
   await sendVpnKeyEmail({
-    recipient: user?.name ?? "",
+    to: user?.name ?? "",
     key: user?.accessUrl ?? "",
+    name: item?.member ?? user?.name,
   });
   return {
     ...item,

apps/vpnmanager/src/types.d.ts

@@ -33,7 +33,7 @@ export interface OutlineServerMetrics {
 export interface SheetRow {
   emailAddressCreated: string;
   emailAddress: string;
-  name: string;
+  member: string;
   outlineKeyCreated: string;
   startDate: string;
   endDate: string;