Skip to content

Commit bc6d319

Browse files
hijohnnylinhijohnnylin
committed
Emails: Update Dashboard UI
1 parent 1da257f commit bc6d319

3 files changed

Lines changed: 108 additions & 40 deletions

File tree

‎code/controllers/email-controller.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,19 @@ const router = require("express").Router();
5252
router.get("/email",
5353
authenticate,
5454
(request, response, next) => {
55+
56+
if (process.env.ENVIRONMENT === "LOCAL") {
57+
return Campaign.getAll()
58+
.then(result => {
59+
return response.render("email", {
60+
campaigns: result
61+
});
62+
})
63+
.catch(error => {
64+
next(error);
65+
});
66+
}
67+
5568
var bouncesAttributes;
5669
var complaintAttributes;
5770
return sts.getCallerIdentity().promise()
@@ -496,4 +509,4 @@ router.post("/delete-queue-messages",
496509
});
497510

498511

499-
module.exports = router;
512+
module.exports = router;

‎code/package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎code/views/email.hbs‎

Lines changed: 93 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -16,53 +16,114 @@
1616
</div>
1717

1818
<div class="row mt-3">
19-
<div class="col-12">
20-
<h3 class="text-center"><strong>Email</strong></h3>
19+
20+
<div class="col-12 text-center">
21+
<h3><strong>Email Dashboard</strong></h3>
22+
<h5 class="mt-3">How This Works</h5>
23+
<p>
24+
WARNING: NEVER send an email to all users at once! This will also almost guarantee that you will overload the AWS email sending limits, AND your emails will likely all go to Spam. You should only ever send a max of 10,000 emails in each batch, and you should start slow and give time between batches. This is called "email warm-up" - please read about this. Also, please read about "Email Bounces" and "Email Complaints" - these are important concepts to know in general.
25+
</p>
26+
<ol class="text-left ml-2">
27+
<li>
28+
First, create a new Campaign, for the subset of users you want to send emails to. This will create the email you want to send, and lock in a list of users to send the email to, but it will not send the email yet. Give your campaign a useful, descriptive name, like "YearInReview-2022-SubscribedUsers".
29+
</li>
30+
<li>
31+
Next, using the new Campaign's ID, send a "Single Test Email" to yourself. Check on mobile and desktop that the email looks the way you want it to.
32+
</li>
33+
<li>
34+
Go to AWS CloudWatch, and open up the [Environment]-Admin-Node Log Group. Choose the newest instance. This allows you to monitor the email sends in real time. Keep this tab open.
35+
</li>
36+
<li>
37+
Go to AWS Simple Email Service dashboard in the correct region. This allows you to monitor bounces, quotas, etc in real time. Keep this tab open.
38+
</li>
39+
<li>
40+
Use "Send Emails To Campign (Real Users)" to queue up emails to send to AWS. DO NOT SEND MORE THAN 10,000 emails per batch, and always wait until the batch is complete before sending the next batch. Note that these emails are not all sent instantly, you must monitor the sends in CloudWatch.
41+
</li>
42+
<li>
43+
The "Get Stats" button gives you the number of emails that have been queued up in the campaign, so you know how many emails are remaining to send. It does not tell you the live number that has been sent in the current batch - you will need to check CloudWatch for that.
44+
</li>
45+
<li>
46+
Please read about "email warm-up" as per the warning above. You'll need to space out the email sends to avoid overloading AWS and to avoid being flagged as Spam and getting your domain banned.
47+
</li>
48+
<li>
49+
Keep an eye on "Bounces" and "Complaints", both here and in the AWS SES dashboard.
50+
</li>
51+
</p>
52+
</div>
53+
54+
<div class="col-12 text-center mt-5">
55+
<hr>
56+
<h3><strong>Manage Bounces and Complaints</strong></h3>
2157
</div>
2258
<div class="col-12">
2359
<div class="container-fluid mt-1 p-3 rounded confirmed-bg">
24-
<h3>{{bounces}} Bounces</h3>
60+
<h5 class="text-center">{{bounces}} Bounces</h5>
2561
<div id="bouncesTable"></div>
62+
<div class="text-center">
2663
<button id="fetchBouncesButton" onclick="fetchBounces();" class="btn confirmed-blue-btn btn-sm mt-2">Fetch
2764
10</button>
2865
<button id="deleteBouncesButton" onclick="deleteBounces();"
2966
class="btn confirmed-blue-btn btn-sm mt-2">Delete Shown</button>
67+
</div>
3068
</div>
3169
</div>
3270
<div class="col-12 mt-3">
3371
<div class="container-fluid mt-1 p-3 rounded confirmed-bg">
34-
<h3>{{complaints}} Complaints</h3>
72+
<h5 class="text-center">{{complaints}} Complaints</h5>
3573
<div id="complaintsTable"></div>
36-
<button id="fetchComplaintsButton" onclick="fetchComplaints();"
37-
class="btn confirmed-blue-btn btn-sm mt-2">Fetch 10</button>
38-
<button id="deleteComplaintsButton" onclick="deleteComplaints();"
39-
class="btn confirmed-blue-btn btn-sm mt-2">Delete Shown</button>
74+
<div class="text-center">
75+
<button id="fetchComplaintsButton" onclick="fetchComplaints();"
76+
class="btn confirmed-blue-btn btn-sm mt-2">Fetch 10</button>
77+
<button id="deleteComplaintsButton" onclick="deleteComplaints();"
78+
class="btn confirmed-blue-btn btn-sm mt-2">Delete Shown</button>
79+
</div>
4080
</div>
4181
</div>
4282

43-
<div class="col-12 mt-3">
44-
<div class="container-fluid mt-1 p-3 rounded confirmed-bg">
45-
<h3>Send Single Email</h3>
83+
<div class="col-12 text-center mt-5">
84+
<hr>
85+
<h3><strong>Send Emails</strong></h3>
86+
</div>
87+
<div class="col-6">
88+
<div class="container-fluid mt-1 p-3 rounded confirmed-bg text-center">
89+
<h5>Send Single Test Email</h5>
4690
Campaign ID<br />
47-
<input type="text" id="sendSingleEmailCampaignId" /><br />
91+
<input type="text" id="sendSingleEmailCampaignId" /><br /><br />
4892
To Address<br />
4993
<input type="text" id="sendSingleEmailToAddress" /><br />
5094
<button id="sendSingleEmailButton" onclick="sendSingleEmail();"
51-
class="btn confirmed-blue-btn btn-sm mt-3 ">Send Single Email</button>
95+
class="btn confirmed-blue-btn btn-sm mt-4 ">Send Single Email</button>
96+
</div>
97+
</div>
98+
<div class="col-6">
99+
<div class="container-fluid mt-1 p-3 rounded confirmed-bg text-center">
100+
<h5 style="color: red">Send Emails To Campaign (Real Users)</h5>
101+
<p>Remember to monitor progress on CloudWatch during this!</p>
102+
Campaign ID<br />
103+
<input type="text" id="sendEmailsCampaignId" /><br /><br />
104+
Number of Emails To Send In This Batch<br />
105+
<input type="text" id="sendEmailsMaxNum" /><br />
106+
<button onclick="sendEmailsToCampaign();" class="btn confirmed-blue-btn btn-sm mt-4">Queue Emails to Send</button>
52107
</div>
53108
</div>
54109

55-
<div class="col-12 mt-3">
110+
<div class="col-12 mt-5">
111+
112+
<div class="col-12 text-center mt-3">
113+
<hr>
114+
<h3><strong>Campaigns</strong></h3>
115+
</div>
116+
56117
<div class="container-fluid mt-1 p-3 rounded confirmed-bg">
57-
<h3>Campaigns</h3>
58118
{{#each campaigns}}
59-
<h5>{{this.id}} - {{this.name}}</h5>
119+
<h5>Campaign ID: {{this.id}}</h5>
120+
<h5>Campaign Name: {{this.name}}</h5>
60121
<div class="ml-4">
61122
Created: {{this.createDate}}
62123
<br>
63124
Last Sent: {{this.lastSentDate}}
64125
<br>
65-
Total: <span id="campaignTotal-{{this.id}}">__</span> | Sent: <span
126+
Total: <span id="campaignTotal-{{this.id}}">__</span> | Queued Up: <span
66127
id="campaignSent-{{this.id}}">__</span> | Failed: <span id="campaignFailed-{{this.id}}">__</span>
67128
<button onclick="getStats({{this.id}});" class="btn confirmed-blue-btn btn-sm">Get Stats</button>
68129
<br>
@@ -77,26 +138,15 @@
77138
</div>
78139
<hr>
79140
{{/each}}
141+
</div>
142+
143+
<div class="col-12 text-center mt-5">
144+
<hr>
145+
<h3><strong>Create New Campaign</strong></h3>
146+
</div>
147+
<div class="container-fluid mt-1 p-3 rounded confirmed-bg">
80148
<div class="mt-3">
81-
<h3>Send Emails To Campaign</h3>
82-
Campaign ID<br />
83-
<input type="text" id="sendEmailsCampaignId" /><br />
84-
Max Number of Emails<br />
85-
<input type="text" id="sendEmailsMaxNum" /><br />
86-
<button onclick="sendEmailsToCampaign();" class="btn confirmed-blue-btn btn-sm mt-2">Send</button>
87-
<hr>
88-
</div>
89-
<div class="mt-3">
90-
<h3>Send Emails To Campaign Reverse</h3>
91-
Campaign ID<br />
92-
<input type="text" id="sendEmailsCampaignIdReverse" /><br />
93-
Max Number of Emails<br />
94-
<input type="text" id="sendEmailsMaxNumReverse" /><br />
95-
<button onclick="sendEmailsToCampaignReverse();" class="btn confirmed-blue-btn btn-sm mt-2">Send</button>
96-
<hr>
97-
</div>
98-
<div class="mt-3">
99-
<h3>New Campaign</h3>
149+
<h5>New Campaign (All Users)</h5>
100150
Name<br />
101151
<input type="text" id="newCampaignName" /><br>
102152
HTML<br />
@@ -110,7 +160,8 @@
110160
<button onclick="newCampaign();" class="btn confirmed-blue-btn btn-sm mt-2">Create</button>
111161
</div>
112162
<div class="mt-3">
113-
<h3>New Campaign (Non-Subscribed Emails Only)</h3>
163+
<hr>
164+
<h5>New Campaign (Users Who Don't Have An Active Subscription)</h5>
114165
Name<br />
115166
<input type="text" id="newCampaignNonSubscribedName" /><br>
116167
HTML<br />
@@ -124,8 +175,11 @@
124175
<button onclick="newCampaignNonSubscribed();" class="btn confirmed-blue-btn btn-sm mt-2">Create</button>
125176
</div>
126177
</div>
178+
127179
</div>
128180

181+
182+
129183
</div>
130184

131185
</div> <!-- column -->
@@ -232,6 +286,7 @@
232286
+ "&maxNum=" + encodeURIComponent(document.getElementById("sendEmailsMaxNum").value);
233287
http.responseType = 'json';
234288
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
289+
document.getElementById("sendEmailsMaxNum").value = "";
235290
http.onreadystatechange = function () {
236291
if (http.readyState == 4) {
237292
if (http.status == 200) {
@@ -393,4 +448,4 @@
393448
</script>
394449

395450
</body>
396-
<script src="/js/tabulator.min.js"></script>
451+
<script src="/js/tabulator.min.js"></script>

0 commit comments

Comments
 (0)