Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add feedback widget button #252

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
+126 −36
Open

Add feedback widget button #252

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
66ce02a
chore: address reviews
nully0x Mar 19, 2024
97a4f90
chore: add feedback widget
nully0x Apr 3, 2024
24b7aa6
chore: change button color
nully0x Apr 3, 2024
8b4f250
chore: place feedback button to base
nully0x Apr 3, 2024
777c15d
chore: update submodule
nully0x Apr 3, 2024
972cdb1
chore: refactor survey to emoji link
nully0x Apr 4, 2024
8273fc6
chore: update submodule
nully0x Apr 4, 2024
1a6932f
chore: refactor emoji survey
nully0x Apr 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/static
Open in desktop
Submodule static updated from a9cbb7 to ac27a0
162 changes: 127 additions & 35 deletions src/helpers/send-newsletter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,48 @@ function generateHTMLTemplate(data: NewsLetterDataType) {
.thread .read-more-btn:hover {
background-color: #0056b3;
}

/* Button */
.centered-button {
display: block;
margin: 20px auto;
background-color: #087099;
color: #ffffff;
text-align: center;
padding: 10px 15px;
border-radius: 5px;
line-height: 50px;
font-weight: bold;
text-decoration: none;
}

.centered-button:hover {
background-color: #0056b3;
}

/* Fun Button */
.fun-button {
display: inline-block;
background-color: #087099;
color: #ffffff;
text-decoration: none;
padding: 10px 20px;
border-radius: 30px; /* Rounded button */
font-weight: bold;
transition: all 0.3s ease; /* Smooth transition */
}

.fun-button:hover {
background-color: #0056b3;
transform: scale(1.05); /* Slightly scale up on hover */
}

.emoji {
font-size: 1.2em; /* Increase emoji size */
vertical-align: middle; /* Align emojis vertically */
margin: 0 5px; /* Add some spacing around emojis */
}

/* Media query for smaller screens */
@media (max-width: 600px) {
.thread {
Expand All @@ -232,21 +274,67 @@ function generateHTMLTemplate(data: NewsLetterDataType) {
</div>

<!-- New Threads This Week -->
${data.new_threads_this_week.length > 0
? `<h2>New Threads This Week</h2>` +
data.new_threads_this_week
.map((thread) => `<div class="card">${generateHTMLForPost(thread)}</div>`)
.join("")
: '<p>No new threads this week.</p>'}
${
data.new_threads_this_week.length > 0
? `<h2>New Threads This Week</h2>` +
data.new_threads_this_week
.map(
(thread) =>
`<div class="card">${generateHTMLForPost(thread)}</div>`
)
.join("")
: "<p>No new threads this week.</p>"
}

<!-- Survey Button -->
<div style="text-align: center; padding: 24px;">
<div class="iterateQuestionPrompt" style="font-size: 16px; line-height: 24px; text-align: center; margin-bottom: 10px;">
<p style="text-align: center;">Did you find the information in this email helpful?</p>
</div>
<table style="margin: 0 auto; text-align: center;">
<tr>
<td><a href="https://us17.list-manage.com/survey?u=718f9c0ab4af9b4acf93a8e6f&id=c2c0b80d59&attribution=false" style="text-decoration: none; color: inherit;"><span style="font-size: 36px; padding: 8px;">😒</span></a></td>
<td><a href="https://us17.list-manage.com/survey?u=718f9c0ab4af9b4acf93a8e6f&id=c2c0b80d59&attribution=false" style="text-decoration: none; color: inherit;"><span style="font-size: 36px; padding: 8px;">😐</span></a></td>
<td><a href="https://us17.list-manage.com/survey?u=718f9c0ab4af9b4acf93a8e6f&id=c2c0b80d59&attribution=false" style="text-decoration: none; color: inherit;"><span style="font-size: 36px; padding: 8px;">🙁</span></a></td>
<td><a href="https://us17.list-manage.com/survey?u=718f9c0ab4af9b4acf93a8e6f&id=c2c0b80d59&attribution=false" style="text-decoration: none; color: inherit;"><span style="font-size: 36px; padding: 8px;">🙂</span></a></td>
<td><a href="https://us17.list-manage.com/survey?u=718f9c0ab4af9b4acf93a8e6f&id=c2c0b80d59&attribution=false" style="text-decoration: none; color: inherit;"><span style="font-size: 36px; padding: 8px;">😀</span></a></td>
</tr>
</table>
</div>




<!-- Active Posts This Week -->
${data.active_posts_this_week.length > 0
? `<h2>Active Posts This Week</h2>` +
data.active_posts_this_week
.map((post) => `<div class="card">${generateHTMLForPost(post)}</div>`)
.join("")
: '<p>No active posts this week.</p>'}
${
data.active_posts_this_week.length > 0
? `<h2>Active Posts This Week</h2>` +
data.active_posts_this_week
.map(
(post) =>
`<div class="card">${generateHTMLForPost(post)}</div>`
)
.join("")
: "<p>No active posts this week.</p>"
}

<!-- Survey Button -->
<div style="text-align: center; padding: 24px;">
<div class="iterateQuestionPrompt" style="font-size: 16px; line-height: 24px; text-align: center; margin-bottom: 10px;">
<p style="text-align: center;">Did you find the information in this email helpful?</p>
</div>
<table style="margin: 0 auto; text-align: center;">
<tr>
<td><a href="https://us17.list-manage.com/survey?u=718f9c0ab4af9b4acf93a8e6f&id=c2c0b80d59&attribution=false" style="text-decoration: none; color: inherit;"><span style="font-size: 36px; padding: 8px;">😒</span></a></td>
<td><a href="https://us17.list-manage.com/survey?u=718f9c0ab4af9b4acf93a8e6f&id=c2c0b80d59&attribution=false" style="text-decoration: none; color: inherit;"><span style="font-size: 36px; padding: 8px;">😐</span></a></td>
<td><a href="https://us17.list-manage.com/survey?u=718f9c0ab4af9b4acf93a8e6f&id=c2c0b80d59&attribution=false" style="text-decoration: none; color: inherit;"><span style="font-size: 36px; padding: 8px;">🙁</span></a></td>
<td><a href="https://us17.list-manage.com/survey?u=718f9c0ab4af9b4acf93a8e6f&id=c2c0b80d59&attribution=false" style="text-decoration: none; color: inherit;"><span style="font-size: 36px; padding: 8px;">🙂</span></a></td>
<td><a href="https://us17.list-manage.com/survey?u=718f9c0ab4af9b4acf93a8e6f&id=c2c0b80d59&attribution=false" style="text-decoration: none; color: inherit;"><span style="font-size: 36px; padding: 8px;">😀</span></a></td>
</tr>
</table>
</div>



</div>
</body>
</html>`;
Expand All @@ -258,42 +346,46 @@ function generateHTMLTemplate(data: NewsLetterDataType) {
const sendNewsletter = async (): Promise<void> => {
try {
const currentNewsletter = getCurrentNewsletter();

if (!currentNewsletter) {
console.error("Failed to get current newsletter");
return;
}

const htmlContent = generateHTMLTemplate(currentNewsletter);
const campaignConfig = {
type: "regular",
recipients: {
list_id: process.env.MAILCHIMP_LIST_ID,
},
settings: {
subject_line: "TLDR Newsletter",
title: "Your weekly newsletter is here",
from_name: "Bitcoin Dev Project",
reply_to: process.env.MAILCHIMP_REPLY_TO,
auto_footer: false,
},
};

// Only send the newsletter if the environment is production
if (process.env.NODE_ENV === "production") {
const campaignResponse = await mailchimp.campaigns.create({
type: "regular",
recipients: {
list_id: process.env.MAILCHIMP_LIST_ID,
},
settings: {
subject_line: "TLDR Newsletter",
title: "Your weekly newsletter is here",
from_name: "Bitcoin Dev Project",
reply_to: process.env.MAILCHIMP_REPLY_TO,
auto_footer: false,
},
});

await mailchimp.campaigns.setContent(campaignResponse.id, {
html: htmlContent,
});
const campaignResponse = await mailchimp.campaigns.create(campaignConfig);
await mailchimp.campaigns.setContent(campaignResponse.id, {
html: htmlContent,
});

if (process.env.NODE_ENV === "production") {
await mailchimp.campaigns.send(campaignResponse.id);

console.log("Newsletter sent successfully");
} else if (process.env.NODE_ENV === "development") {
await mailchimp.campaigns.sendTestEmail(campaignResponse.id, {
test_emails: [process.env.MAILCHIMP_TEST_EMAIL],
send_type: "html",
});
console.log("Test email sent successfully");
} else {
console.log("Not in production environment, skipping email send");
console.log("unknown environment, not sending newsletter");
}
} catch (err: any) {
throw new Error(err);
}
};

sendNewsletter();