Add feedback widget button

src/helpers/send-newsletter.ts

@@ -103,6 +103,33 @@ function generateHTMLForPost(post: NewsLetter) {
   return htmlContent;
 }
 
+function generateSurveyButton(emojis: string[]): string {
+  let emojiHtml = emojis.map(emoji => `
+    <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;">${emoji}</span>
+      </a>
+    </td>
+  `).join('');
+
+  return `
+    <!-- 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>
+          ${emojiHtml}
+        </tr>
+      </table>
+    </div>
+  `;
+}
+
+let emojis = ['😒', '😐', '🙁', '🙂', '😀'];
+let surveyButtonHtml = generateSurveyButton(emojis);
+
 // Function to generate the HTML content for the newsletter
 function generateHTMLTemplate(data: NewsLetterDataType) {
   let words = data.summary_of_threads_started_this_week.split(" ");
@@ -212,6 +239,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 {
@@ -232,21 +301,38 @@ 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 -->
+        ${surveyButtonHtml}
+
 
-
         <!-- 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 -->
+          ${surveyButtonHtml}
+
     </div>
   </body>
   </html>`;
@@ -258,42 +344,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();