[Bug] Name is not saving on mailchimp when the subscription checkbox is checked on the contact form

[cherylli]

What do we need to build or fix? Name is not saving on mailchimp when the subscription checkbox is checked on the contact form

Technical details This is probably because Name and other details except the email are not passed into FormData in components/ContactUsForm/index.js

This is what we have in the subscribe function now

if (data.Subscribe) {
    subscribe({ EMAIL: data.Email });
}

which is why only the email is added

Approach suggestions I suggest adding a name field to the subscribe function, which would look like

if (data.Subscribe) {
    subscribe({ 
       EMAIL: data.Email 
       NAME: data.Name
    });
}

Here is the link to the package we are using for reference, https://www.npmjs.com/package/react-mailchimp-subscribe

It might be best to create your own MailChimp account to test that the function is working before submitting the pull request

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

Acceptance criteria

• 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.

[mariana-caldas]

Hey, team! Just a note that we see the same problem on the MailChimp list when subscribing from the Newsletter sections, so we need to test the fix both on the contact form and on the newsletter sections, please. Thanks!

[tonykieling]

Working on branch bug/MailChimp-not-saving-name:

• setting SendGrid and MailChimp locally for dev purposes done
• fixing name issue for both \ and \ done

* details in a temp file /temp-notes.txt

Next step: assess and refactor \ and \ regarding the way they use \.

[tonykieling]

Three tasks: 1. refactor /api/contact.js and /api/register.js  I- Both APIs are checking reCaptcha (code repetition) and one of them is sending email.  G- Having a function to check reCaptcha and one to send email - avoids repetition.  N- Changing these 2 API files and also changing the components that call them in order to call the new API and have a naming normalization (they need to use the same variable names to call the API).

2. refactor \, \ and \ in order to have the same component structure.  I- Right now there is code repetition and the components are implementing MailchimpSubscribe in different ways.  G- Having one \ that receives a child, making the component utilize the same variable names and data structure - the child will be a component that implements its own form and abstracts and uses \.  N- Changing file structure to have a dir for each component + form code to be adherent to the change.

3. create \ (need to investigate a bit more)  I- There are two implementation of react-google-recaptcha lib causing duplicate code.  G- Having one component with logic centralized.  N- Create the component and call it when needed.

* I- Issue, G- Goal, N- Need * working to keep the same logic and messages btw FE and BE * working also based on the discussion with Mariana and Cheryl via Slack

[tonykieling]

Task #1

• created validateRecaptcha.js and sendEmail.js both are working fine (tested with postman)
• integrate the new API with the FE components both FE components NewsletterForm and ContactUsForm are working fine with the new API structure

[tonykieling]

Task #2

• created a component that implements react-mailchimp-subscribe lib, handles mailchimp url&secret and renders a child (either \ or \), which will receive the props (subscribe, status, and message) from that lib. It also centralizes the role of \. \ and \ changes are in place and working fine.

* The way both components above handle messages is a bit different - see /components/ContacUs/index.js. * \ is attaching its props to the child when rendering both \ and . This way the child components can access and use resources.

[mariana-caldas]

That's great you're describing what you are doing on the issue, @tonykieling ! I like your ideas to solve the problem while refactoring the codebase. That's fantastic! Thanks! 🥷 Another way of doing that is to just submit a DRAFT PR as mentioned here: https://github.com/Web-Dev-Path/web-dev-path/wiki/Creating-a-Pull-Request#about-draft-pull-requests

[tonykieling]

Task #3

• Refactored \ to have GoogleReCAPTCHA wrapping its child component*, which will be a form - either \ or \. These children don't need to implement reCAPTCHA, only call a function passed as a prop to get a new token to be passed to the BE and proceed with the desired operation (validate reCAPTCHA, sign newsletter and/or send a message). \ is done, \ is missing.

* This way has fewer props to be exchanged among components and it is easier to manage reCAPTCHA because it is centralized. Though, it mixes Mailchimp and reCAPTCHA implementations.