Replace react-mailchimp-subscribe with Mailchimp Marketing API integration

[mariana-caldas]

What do we need to build or fix?
Right now, our newsletter forms and the “Subscribe to DevNews” checkbox in the Contact form use the old react-mailchimp-subscribe package and a public Mailchimp URL. This approach is unreliable (users are not being added to our list, and we get 404 errors).

We need to stop using that package and instead connect to Mailchimp directly with the Mailchimp Marketing API. This way, both the newsletter forms and the contact form will subscribe people reliably, and we can keep using reCAPTCHA for security.

---

Technical details

1. Server-side helper

   • Create a new helper in lib/mailchimp.ts that uses our MAILCHIMP_API_KEY and MAILCHIMP_AUDIENCE_ID (these will be provided by @mariana-caldas ).
   • Function should be called subscribeToMailchimp(email, firstName) and add the user to Mailchimp.
   • Treat “Member Exists” as success (don’t show it as an error).

2. API update

   • In /pages/api/validateReCaptcha.js, after verifying reCAPTCHA:
     • If the request has subscribe: true, call the subscribeToMailchimp helper.
     • If the request is from the Contact form, keep sending the SendGrid email as it does today.

3. NewsletterForm update

   • Right now it calls subscribe({ EMAIL, MERGE1 }) from react-mailchimp-subscribe.
   • Change it so instead it calls our /api/validateReCaptcha endpoint, passing { name, email, subscribe: true, gReCaptchaToken }.
   • Keep the form behavior the same: show success message if OK, show error if not.

4. Mailchimp wrapper replacement

   • Remove the old Mailchimp wrapper with react-mailchimp-subscribe.
   • Replace it with a very small wrapper (or move the code into the form) that only provides getReCaptchaToken from Google reCAPTCHA.
   • Update NewsletterSubscribe to use the new wrapper.

5. Cleanup

   • Remove react-mailchimp-subscribe from package.json.
   • Remove NEXT_PUBLIC_MAILCHIMP_URL from our environment files.
   • Add new environment variables:

     MAILCHIMP_API_KEY=xxxx-usXX
     MAILCHIMP_AUDIENCE_ID=XXXXXXXXXX

---

Approach suggestions

• Focus on small, clear changes:
  1. Build the helper (lib/mailchimp.ts).
  2. Update the API (/api/validateReCaptcha.js).
  3. Update the NewsletterForm.
  4. Replace the wrapper.
• Test after each step (for example, submit the newsletter form and check in Mailchimp that the email is added).
• Don’t over-optimize — keep the code simple and clear so we can build on it later.

---

Deadline
Please keep in mind that once you assign this task to yourself, you'll need to complete it in 10 days.

---

Acceptance criteria

• Subscribing with the Newsletter form works, adds user to Mailchimp, and shows correct success/error messages.
• Subscribing with the Contact form checkbox works, sends the email via SendGrid, and also adds user to Mailchimp.
• Old react-mailchimp-subscribe dependency is removed.
• Test the section and components in many screen sizes, you can use the Inspect tool for that.
• Please test if the new changes added to the components do not affect the other instances.
• Test the feature in many browsers, such as Chrome, Firefox, Edge, and Safari (MAC).
• If there are any build problems when submitting your PR, run yarn build locally to solve the issues and commit the changes.
• Update the CHANGELOG.md file.

[Satoshi-Sh]

I can take on this task. Let me know the credentials on Slack, @mariana-caldas.

[Satoshi-Sh]

The issue has been resolved in #289