Subscription feature #8

Loulou5702 · 2024-12-13T16:15:40Z

This pull request allow a user tu subscribe with an email.
The user will be inscribed into the database on a local supabase.
A welcoming email will be send via the Postmark service with all the inscruction for futher communication.

Welocming Email with HTML + CSS format :

Welcoming Email in Raw Txt Markdown format :

Visual changes on the webpage with an input field :

The supabase Subscribers table with some example raws :

Feature/i18n fr en

…r-ai into feature/page/subscription

benoitchazoule · 2024-12-16T15:42:13Z

My comment regarding translation applies to all messages returned by the services, whether they are error messages or success messages from processing

adguernier

Partial review. In addition, please be careful to your English in the description:

- This pull request allow a user tu subscribe with an email.
+ This pull request allows a user tu subscribe with an email.
- The user will be inscribed into the database on a local supabase.
+ The user will be saved in the database on a local supabase.
- A welcoming email will be send via the Postmark service with all the inscruction for futher communication.
+ A welcome email will be sent via the Postmark service with all instructions for further communication.

- Welocming Email with HTML + CSS format :
+ Welcoming Email with HTML + CSS format:

adguernier · 2024-12-17T09:00:47Z

supabase/seed.sql

polish: Seeds are usually used to populate the database as described in the documentation.
To perform actions such as create, update, or delete your database schema, you should use migration instead.
This will simplify the deployment process

adguernier · 2024-12-17T09:05:10Z

website/src/utils/validateEmail.ts

@@ -0,0 +1,11 @@
+// src/utils/validateEmail.ts


polish (niptick): this comment is useless, you could remove it

adguernier · 2024-12-17T09:46:24Z

website/src/components/Features.tsx


 export function Features() {
  const { t } = useTranslation();
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);


question: What is this state for? isSbumitting appears to be unused

It was used to preserve the text field when reloading the page, but there are no other uses.

adguernier · 2024-12-17T10:07:16Z

website/src/pages/api/sendEmail.ts

+
+    // Necessery field to validate
+    if (!recipientEmail || !subject || !textBody || !htmlBody) {
+      return res.status(400).json({ error: 'Missing required fields' });
+    }
+
+    try {
+      const postmarkApiToken =
+        process.env.NEXT_PUBLIC_POSTMARK_API_SERVER_TOKEN;
+      const defaultSenderEmail = process.env.NEXT_PUBLIC_DEFAULT_SENDING_EMAIL;
+
+      if (!postmarkApiToken || !defaultSenderEmail) {
+        return res.status(500).json({
+          error: 'Missing Postmark API token or default sender email',
+        });
+      }
+
+      const client = new Client(postmarkApiToken);
+      const emailData = {
+        From: defaultSenderEmail,
+        To: recipientEmail,
+        Subject: subject,
+        TextBody: textBody,
+        HtmlBody: htmlBody,
+      };
+
+      // Sending Email via Postmark API
+      const response = await client.sendEmail(emailData);
+      if (response && response.ErrorCode) {
+        return res
+          .status(500)
+          .json({ error: `Postmark Error: ${response.Message}` });
+      }
+
+      return res.status(200).json({ message: 'Email sent successfully!' });
+    } catch (error) {
+      console.error('Error in sending email:', error);
+      return res.status(500).json({ error: 'Error sending email' });
+    }
+  } else {
+    return res.status(405).json({ error: 'Method Not Allowed' });
+  }


suggestion (niptick): to avoid many nestedif:

Suggested change

// Necessery field to validate

if (!recipientEmail || !subject || !textBody || !htmlBody) {

return res.status(400).json({ error: 'Missing required fields' });

}

try {

const postmarkApiToken =

process.env.NEXT_PUBLIC_POSTMARK_API_SERVER_TOKEN;

const defaultSenderEmail = process.env.NEXT_PUBLIC_DEFAULT_SENDING_EMAIL;

if (!postmarkApiToken || !defaultSenderEmail) {

return res.status(500).json({

error: 'Missing Postmark API token or default sender email',

});

}

const client = new Client(postmarkApiToken);

const emailData = {

From: defaultSenderEmail,

To: recipientEmail,

Subject: subject,

TextBody: textBody,

HtmlBody: htmlBody,

};

// Sending Email via Postmark API

const response = await client.sendEmail(emailData);

if (response && response.ErrorCode) {

return res

.status(500)

.json({ error: `Postmark Error: ${response.Message}` });

}

return res.status(200).json({ message: 'Email sent successfully!' });

} catch (error) {

console.error('Error in sending email:', error);

return res.status(500).json({ error: 'Error sending email' });

}

} else {

return res.status(405).json({ error: 'Method Not Allowed' });

}

if (req.method !== 'POST') {

return res.status(405).json({ error: 'Method Not Allowed' });

}

const { recipientEmail, subject, textBody, htmlBody }: EmailRequestBody =

req.body;

// Necessery field to validate

if (!recipientEmail || !subject || !textBody || !htmlBody) {

return res.status(400).json({ error: 'Missing required fields' });

}

try {

const postmarkApiToken = process.env.NEXT_PUBLIC_POSTMARK_API_SERVER_TOKEN;

const defaultSenderEmail = process.env.NEXT_PUBLIC_DEFAULT_SENDING_EMAIL;

if (!postmarkApiToken || !defaultSenderEmail) {

return res.status(500).json({

error: 'Missing Postmark API token or default sender email',

});

}

const client = new Client(postmarkApiToken);

const emailData = {

From: defaultSenderEmail,

To: recipientEmail,

Subject: subject,

TextBody: textBody,

HtmlBody: htmlBody,

};

// Sending Email via Postmark API

const response = await client.sendEmail(emailData);

if (response && response.ErrorCode) {

return res

.status(500)

.json({ error: `Postmark Error: ${response.Message}` });

}

return res.status(200).json({ message: 'Email sent successfully!' });

} catch (error) {

console.error('Error in sending email:', error);

return res.status(500).json({ error: 'Error sending email' });

}

arnault-dev · 2024-12-18T10:02:10Z

website/package.json

    "next": "^14.0.4",
+    "postmark": "^4.0.5",
+    "postmark": "^4.0.5",


issue: postmark is duplicated here

arnault-dev · 2024-12-18T10:02:16Z

website/package.json

@@ -11,6 +11,8 @@
  "browserslist": "defaults, not ie <= 11",
  "dependencies": {
    "@headlessui/react": "^2.1.0",
+    "@supabase/supabase-js": "^2.46.2",
+    "@supabase/supabase-js": "^2.46.2",


issue: @supabase/supabase-js is duplicated here

arnault-dev · 2024-12-18T10:05:14Z

website/src/components/Features.tsx

@@ -31,6 +57,38 @@ export function Features() {
                </li>
              ))}
            </ul>
+            {/* email form */}
+            <form className="mt-10 px-20" onSubmit={handleEmailSubmission}>
+              <h3 className="text-lg font-medium tracking-tight text-black">


question: Is there an h2 prior to this h3 in the page once rendered ? If not, can you make this an h2 for semantics ?

arnault-dev · 2024-12-18T10:06:38Z

website/src/components/Features.tsx

+                {t('feature.try')}
+              </h3>
+              <div className="mt-4 sm:relative sm:flex sm:items-center sm:py-0.5 sm:pr-2.5">
+                <div className="relative sm:static sm:flex-auto">


nit-pick: A label tag would be probably better for accessibility here with corresponding aria attributes here

arnault-dev · 2024-12-18T10:11:54Z

website/src/components/Features.tsx

+              <h3 className="text-lg font-medium tracking-tight text-black">
+                {t('feature.try')}
+              </h3>
+              <div className="mt-4 sm:relative sm:flex sm:items-center sm:py-0.5 sm:pr-2.5">


suggestion: using relative positioning with a relative background is probably not the best way to design this button.

You should look at flex positioning with the parent element having the border

arnault-dev · 2024-12-18T10:22:18Z

website/src/pages/api/subscribe.ts

+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method === 'POST') {


issue: Avoid nested if here, it makes code less readable. Use early return instead.

arnault-dev · 2024-12-18T10:24:34Z

website/src/services/emailService.ts

+ * Handles the logic for sending a welcome email.
+ * @param email - The recipient's email address.
+ */
+export async function handleSendWelcomeEmail(email: string): Promise<void> {


question: Why not using a server action here ? This would be make the code way easier to maintain over time instead of splitting service / api

arnault-dev · 2024-12-18T10:24:40Z

website/src/services/subscribeService.ts

+ * Handles the logic for subscribing an email, including validation.
+ * @param email - The email address to subscribe.
+ */
+export async function handleSubscription(email: string): Promise<void> {


question: Why not using a server action here ? This would be make the code way easier to maintain over time instead of splitting service / api

arnault-dev · 2024-12-18T10:25:55Z

website/src/services/welcomeEmailContent.ts

@@ -0,0 +1,120 @@
+export const welcomeEmailText = `


nit-pick: Maybe add i18n also for welcome email ? If the website is in french, I expect the welcome mail to be in french as well.

arnault-dev · 2025-01-09T16:49:33Z

website/src/app/layout.tsx

@@ -19,7 +19,7 @@ export default function RootLayout({
 }) {
  useEffect(() => {
    document.documentElement.lang = i18next.language;
-  }, [i18next.language]);
+  });


Why remove the dependency array here ?

If you do not want the effect to run more that once, add an empty array as dependencies:

Suggested change

});

}, []);

arnault-dev · 2025-01-09T16:49:49Z

website/src/components/Features.tsx


-  const handleEmailSubmission = async (e: React.FormEvent) => {
+  const HandleEmailSubmission = async (e: React.FormEvent) => {


Please use lower camel case for function naming

Suggested change

const HandleEmailSubmission = async (e: React.FormEvent) => {

const handleEmailSubmission = async (e: React.FormEvent) => {

arnault-dev · 2025-01-09T16:52:53Z

website/src/locales/en.json

+  },
+  "mail": {
+    "txt": "Welcome to Curator AI! Curator AI is here to simplify your information tracking. With our AI, you'll receive a newsletter containing summarized and curated articles based on your preferred topics and sources. Send back an email with one of these instructions to interact with Curator AI:\n### 📚 Add topics: *I want to follow the topics AI and health.*\n### 🌐 Add sites: *Add https://www.lemonde.fr/ to my sources.*\n### ⏰ Set delivery schedule: *Send me the newsletter every Monday at 8 AM.*\nBy default, you will receive your first newsletter within 5 minutes, and then once a week on the same day and time as your registration.",
+    "html": "<!DOCTYPE html><html><head>STYLE TOKEN</head><body><div class=\"email-container\"><h1 class=\"header\">Welcome to Curator AI!</h1><p class=\"intro\">We're thrilled to have you on board 🎉.</p><p class=\"content\">With our AI, you'll receive a personalized newsletter containing the most relevant articles, summarized and tailored to your preferences.</p><h2 class=\"subheader\">How to interact with Curator AI? Answer by email with one of the followings:</h2><ul class=\"instructions\"><li> 📚 Add topics: <strong>\"I want to follow the topics AI and health.\"</strong></li><li> 🌐 Add a site: <strong>\"Add https://www.lemonde.fr/ to my sources.\"</strong></li><li> ⏰ Set delivery schedule: <strong>\"Send me the newsletter every Monday at 8 AM.\"</strong></li></ul><p class=\"reminder\">📩 Your first newsletter will be sent within 5 minutes of signing up. By default, future newsletters will arrive weekly at the same time as your registration.</p><p class=\"closing\">For any questions or changes, just reply to this email. Happy exploring!</p><p class=\"signature\">The Curator AI Team 🚀</p></div></body></html>"


nit-pick: not a big fan of having the whole HTML email in translations. This makes maintenance harder over time. Can you use a template with mutiple tanslation keys ?

arnault-dev · 2025-01-09T16:53:27Z

website/src/components/Features.tsx

    setMessage('');

    try {
      await handleSubscription(email);

-      await handleSendWelcomeEmail(email);
+      const response = await fetch('/api/sendWelcomeEmail', {


Why not using a server side action for this instead of an API call ?

arnault-dev · 2025-01-09T16:55:34Z

website/src/services/emailService.ts

+  const recipientEmail = email;
+  const subject = 'Welcome to CURATOR AI! 🚀';
+  htmlBody = htmlBody.replace(
+    'STYLE TOKEN',


This implementation might lead to bugs over time, please add the styles to the HTML templates directly

arnault-dev · 2025-01-09T16:55:54Z

website/src/pages/api/sendWelcomeEmail.ts

+import { NextApiRequest, NextApiResponse } from 'next';
+import { handleSendWelcomeEmail } from '@/services/emailService';
+
+export default function sendWelcomeEmail(


Please use a server side action instead

arnault-dev · 2025-01-09T16:56:09Z

website/src/components/Features.tsx

@@ -74,13 +81,13 @@ export function Features() {
                    onChange={(e) => setEmail(e.target.value)} // Mettez à jour l'email dans l'état
                    className="peer relative z-10 w-full appearance-none bg-transparent px-4 py-2 text-base text-black placeholder:text-slate-400/70 focus:outline-none sm:py-3"
                  />
-                  <div className="absolute inset-0 rounded-md border border-black/40 peer-focus:border-black peer-focus:ring-1 peer-focus:ring-blue-300 sm:rounded-xl" />
+                  {/* <div className="absolute " /> */}


issue: commented code

Aurelien-Gindre and others added 29 commits December 5, 2024 10:53

[feat] Added form to subscribe on main page

b07d71b

setup supabase

f2a1b3d

feature : config supabase subscribers table

3dde13d

fix : english commentary in seed.sql

6668097

fix package.json delete

9767434

feature : subscription mechanism working

835004c

feature : sending a basic welcome mail

ab4c834

Manage inscription with an API insead of in webpage component

07f2b74

Refactor and translation of comments

8185ef0

Code refactoring for lisibility

0631947

fix : lack modification in Introduction file

07cafc2

Modification of the welcoming mail content

894f012

New version of the welom email

ad790ce

Welcoming Email content rework

e0e72ac

Merge pull request #2 from theosli/feature/i18n-fr-en

a8339f7

Feature/i18n fr en

[feat] Added form to subscribe on main page

1cea612

setup supabase

19e2759

feature : config supabase subscribers table

51cf779

fix : english commentary in seed.sql

44da402

feature : subscription mechanism working

9fe8f75

feature : sending a basic welcome mail

2018b38

Manage inscription with an API insead of in webpage component

6561ce6

Refactor and translation of comments

1fd9ee1

Code refactoring for lisibility

6b06e5c

Modification of the welcoming mail content

f94b910

New version of the welom email

a4b6cc9

Welcoming Email content rework

7599e5f

Merge branch 'feature/page/subscription' of github.com:theosli/curato…

9389aa9

…r-ai into feature/page/subscription

fixing error and implementing dynamic error with I18N

2219ecb

benoitchazoule added the RFR Ready For Review label Dec 16, 2024

adguernier requested changes Dec 17, 2024

View reviewed changes

arnault-dev suggested changes Dec 18, 2024

View reviewed changes

Aurelien-Gindre added 2 commits January 9, 2025 12:05

[feat] updated subscription methods

f1b701e

[fix] Fixed the email implentation

5c4dccb

arnault-dev suggested changes Jan 9, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Subscription feature #8

Subscription feature #8

Loulou5702 commented Dec 13, 2024 •

edited

Loading

benoitchazoule commented Dec 16, 2024

adguernier left a comment

adguernier Dec 17, 2024 •

edited

Loading

adguernier Dec 17, 2024

adguernier Dec 17, 2024

Aurelien-Gindre Jan 9, 2025

adguernier Dec 17, 2024

arnault-dev Dec 18, 2024

arnault-dev Dec 18, 2024

arnault-dev Dec 18, 2024

arnault-dev Dec 18, 2024

arnault-dev Dec 18, 2024

arnault-dev Dec 18, 2024

arnault-dev Dec 18, 2024 •

edited

Loading

arnault-dev Dec 18, 2024 •

edited

Loading

arnault-dev Dec 18, 2024

arnault-dev Jan 9, 2025

arnault-dev Jan 9, 2025

arnault-dev Jan 9, 2025

arnault-dev Jan 9, 2025

arnault-dev Jan 9, 2025

arnault-dev Jan 9, 2025

arnault-dev Jan 9, 2025


		const handleEmailSubmission = async (e: React.FormEvent) => {
		const HandleEmailSubmission = async (e: React.FormEvent) => {

Subscription feature #8

Are you sure you want to change the base?

Subscription feature #8

Conversation

Loulou5702 commented Dec 13, 2024 • edited Loading

benoitchazoule commented Dec 16, 2024

adguernier left a comment

Choose a reason for hiding this comment

adguernier Dec 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arnault-dev Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

arnault-dev Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Loulou5702 commented Dec 13, 2024 •

edited

Loading

adguernier Dec 17, 2024 •

edited

Loading

arnault-dev Dec 18, 2024 •

edited

Loading

arnault-dev Dec 18, 2024 •

edited

Loading