Add Mailchimp Signup Flow

[iamdharmesh]

Description of the Change

PR adds functionality for creating the Mailchimp account from the WordPress admin dashboard. Here are the details of the tasks covered in this PR.

• Modify the initial connect settings page to add the option to create a new account along with the existing connect account option
• Add a new settings page with all of the needed user input fields. Ensure we have proper validation on these fields
• Add functionality to handle the submission of these fields to the mailchimpapp.com service. Ensure we properly get the access token and store that in an encrypted format
• Show a message that they need to confirm their account in their email
• Once their account is confirmed, show our main settings screen

Apart from the changes listed above PR also makes design updates in the header and connect screen to match designs provided in Figma.

Settings for non-connected user:

Create account screen:

Note

• Since we don't have API specifications for the mailchimpapp.com service, we have limited information on the responses for different scenarios. Therefore, I followed the implementation we have in the Mailchimp for WooCommerce plugin.
• The Create Account page in the Mailchimp for WooCommerce plugin matches the style of Mailchimp. I applied the same style here and also used the "Means Web" font. Please let me know if we need permission to use this font in this plugin.

Closes #46

How to test the Change

1. Go to the Mailchimp settings page, where you should see the "Create an account" button (with a new design).
2. Click the "Create Account" button, which will take you to the signup form.
3. Make sure the signup form looks as per the given design (across browsers)
4. Verify that the form's validation is working correctly.
5. Fill out the form and click the "Activate Account" button. The UI will prompt you to check your email to activate your account.
6. Verify that you receive an email from Mailchimp to activate your account.
7. Click the "Activate Account" link in the email, follow the steps, and log in to your newly created account.
8. Verify that the settings page now redirects to the main plugin settings page, and that the user is configured correctly.
9. Configure the settings and ensure everything works correctly. (Regression testing)
10. Log out, then click "Create Account" again.
11. Try creating an account with an email that already has an account and confirm that you’re prompted to log in instead.
12. Test connect account flow once (As we have made some design changes around it)

Changelog Entry

Added - Mailchimp signup flow to create a Mailchimp account directly from the plugin settings screen.

Credits

Props @dkotter, @jeffpaul, @iamdharmesh

Checklist:

• I agree to follow this project's Code of Conduct.
• I have updated the documentation accordingly.
• I have added tests to cover my change.
• All new and existing tests pass.

[iamdharmesh]

Not sure if we can use this font in this plugin. Got these font files from the "Mailchimp for WooCommerce" plugin.

[dkotter]

Looking at their design guidelines, they say:

Drawn custom for Mailchimp, the Means family comes in 4 weights with italics and a set of stylistic alternates

This seems to imply we are safe to use this font but is a question we should ask them cc / @jeffpaul

The notice in this file mentions Commercial Type. Looking at their website, they do list Mailchimp as a client so I'm assuming they are the ones that built this font for Mailchimp

[iamdharmesh]

Update: We have now included "Graphik" fonts as well to match Figma designs.

[dkotter]

Code looks good to me! Going to hold off on in depth testing until we talk with Mailchimp early next week, just in case they have additional direction / changes for us

[jeffpaul]

Unless @jeffpaul feels differently, I think they want Mailchimp List Subscribe Form across all pages (also feels ideal to keep it the same across all)

Correct, we should use Mailchimp List Subscribe Form on all pages, meaning settings page and any OAuth and Signup flow pages.

I think I'd recommend option 2 for now as I'm not sure when changes may be made on the middleware side but open to other's thoughts

I concur that's best for now and perhaps Mailchimp and Vextras will update the middleware so the timezone field is not required.

[iamdharmesh]

@dkotter

1. The header title has been updated to Mailchimp List Subscribe Form on all pages.
2. The timezone field has been hidden, and it now works as we discussed (uses the name if set; if not, defaults to UTC).
3. The design of the settings page has been updated according to the screenshot I provided.

Thank you.
cc: @jeffpaul

[jeffpaul]

Currently shows:

Should be:

Update body text to:

Log in to your Mailchimp account or create a new account to authorize and connect to WordPress. Setup should take just a few minutes.

Update "Connect account" button text to:

Log in

Remove WP footer and instead show Mailchimp footer (probably worth doing across all Settings, OAuth, and Signup Flow screens we can impact):

©2024 Intuit Inc. All rights reserved. Mailchimp® is a registered trademark of The Rocket Science Group, Cookie Preferences, Privacy, and Terms.

I'm going to pass on the "EN" language toggle in the top right as once the plugin strings are translated then different versions will appear for those locales.

[qasumitbagthariya]

Suggestion - 1

I've noticed that on the "Create a New Account" form, both the "Login" and "Back" buttons are missing. To avoid the need for navigating through the left menu bar, it would be more user-friendly to include these buttons on the form itself, allowing users to easily go back or log in without extra steps.

Screen.Recording.2024-09-06.at.4.08.12.PM.mov

Also same I've observed that on the "Account Already Exists" screen, there is no "Create a New Account" or "Back" buttons are missing.

[qasumitbagthariya]

@iamdharmesh

Question:
According to the Figma design reference, I did not find the expected screen after completing the registration process. Could you please verify whether this design has been implemented correctly or if there have been any updates?

[iamdharmesh]

Hi @qasumitbagthariya,

Thanks for checking on this and sharing feedback.

I've noticed that on the "Create a New Account" form, both the "Login" and "Back" buttons are missing. To avoid the need for navigating through the left menu bar, it would be more user-friendly to include these buttons on the form itself, allowing users to easily go back or log in without extra steps.

Since we are not navigating to the 'Create Account' page through a multi-step process, I think it's fine to navigate back using the left menu. However, I'm open to suggestions for improving the UX, such as adding a 'Cancel' button next to the 'Create account' button, linking the header logo to the main settings page, etc. @jeffpaul @dkotter, any suggestions here?

Also same I've observed that on the "Account Already Exists" screen, there is no "Create a New Account" or "Back" buttons are missing.

It is expected to not have a 'Create a New Account' button, as the user account already exists. We should show them options to log in. However, we may show a link below that says something like 'Create an account with a different account.' I am open to suggestions here.

According to the Figma design reference, I did not find the expected screen after completing the registration process. Could you please verify whether this design has been implemented correctly or if there have been any updates?

As this screenshot shows the Mailchimp website flow and not a plugin-side implementation, I think we're fine here. Additionally, @jeffpaul has already added a note to gather more information on the redirect/back link. Once we have that information, and if any changes are needed on our side, we will update the implementation accordingly.

Thank you.

[qasumitbagthariya]

QA Update ✅

---

I have verified this PR in the enhancement/46 branch which has been fixed and is functioning as intended.

I tested the following on this branch:

• Login Existing account
• Create a new account
• Mailchimp form using shortcode
• Mailchimp form using widget
• Cross check with TT4 and Storefront theme
• Cross check with different browsers - Chrome,firefox,safari
• Cross check with different screen sizes 1440900, 19201080

Mailchimp-login.existing.account.mov

Mailchimp-Create.a.new.account.mov

Testing Environment

• WordPress: 6.6.1
• Theme: Storefront 4.6.0
• Theme: Twenty Twenty-Four 1.2
• PHP: 8.0.30
• Web Server: Nginx 1.20.2
• Browser: Chrome
• OS: macOS Ventura 13.3
• Branch: enhancement/46

Steps to Test- As mentioned in the PR description.
Test Results - It is working as expected.
Functional Demo / Screencast -
Special Notes - Ready for code review (Woo)
Testing Document status:
Cases related to this Issue/PR are added to the Critical Flow Wiki pages:

• Yes - Will work on it
• Not Required/Applicable for this PR

---

[jeffpaul]

Since we are not navigating to the 'Create Account' page through a multi-step process, I think it's fine to navigate back using the left menu. However, I'm open to suggestions for improving the UX, such as adding a 'Cancel' button next to the 'Create account' button, linking the header logo to the main settings page, etc. @jeffpaul @dkotter, any suggestions here?

Let's leave the UI here as close to the Figma / Mailchimp's input as feasible. Additional back/close options are items we can assess in a future iteration.

It is expected to not have a 'Create a New Account' button, as the user account already exists. We should show them options to log in. However, we may show a link below that says something like 'Create an account with a different account.' I am open to suggestions here.

I'm fine with the (un)available buttons / links in the current flows, no need to worry about any additional changes on this topic.

[dkotter]

@iamdharmesh One thing that we discussed in UAT today was the following scenario:

1. Someone creates a new account using this new flow
2. They never activate their account by clicking the link in their email
3. Even though the account isn't activated, the account is created and is usable. If they go back to the Mailchimp settings page in WordPress, they will see their settings and can select a list (seems a default Mailchimp list is created)

Technically we could look to block someone from using the plugin (basically don't ever show the settings screen) until we verify their account is activated though I don't think we need to do that yet.

What I wanted to test is what happens if they don't activate their account but do come back to their settings and try and use the plugin? If things don't work, it would be ideal at that point to show them a message to prompt them to activate their account and probably remove functionality.

But in my testing, things work as expected even without them fully activating their account. So for now, I don't think we need to change anything, though I could see a request in the future to at the very least add in an admin notice to try and get users to activate, or even disable all functionality until they activate.

I did notice an issue though if no list is selected and they try and add a signup form. I'll open a new Issue around this.

[iamdharmesh]

Hi @dkotter,

3. Even though the account isn't activated, the account is created and is usable. If they go back to the Mailchimp settings page in WordPress, they will see their settings and can select a list (seems a default Mailchimp list is created)

Yes, as we are getting auth credentials in the response from the middleware API server, this is expected. Initially, I thought about blocking the settings page options until the account gets activated, but it seemed like bad UX, so I avoided that and matched what we have in the WooCommerce integration.

What I wanted to test is what happens if they don't activate their account but do come back to their settings and try and use the plugin? If things don't work, it would be ideal at that point to show them a message to prompt them to activate their account and probably remove functionality.

But in my testing, things work as expected even without them fully activating their account. So for now, I don't think we need to change anything, though I could see a request in the future to at the very least add in an admin notice to try and get users to activate, or even disable all functionality until they activate.

Yes, I tested the non-activated account during implementation, and it was working as expected. Also, I believe Mailchimp will have a mechanism to disable or remove non-activated accounts after a few days or hours. After that period, the integration will stop working and prompt the user to log in again. However, that message won't contain detailed instructions about account activation.

The user response we receive from Mailchimp contains the last_login field, which confirms that the user has activated their account and logged in. We can utilize that field to display a notice prompting them to activate their account if they haven't done so and have directly accessed the plugin settings. However, this scenario will be very rare. Let me know if you think we should display a notice on the settings page until the user logs in to Mailchimp.

I did notice an issue though if no list is selected and they try and add a signup form. I'll open a new Issue around this.

Thanks for opening the issue. I will share my findings there and will raise the PR for the same.

Thank you.
cc: @jeffpaul

[dkotter]

Let me know if you think we should display a notice on the settings page until the user logs in to Mailchimp

We discussed this on a call and I think an easy solution for now is to show an admin notice if an account exists but hasn't been activated yet, prompting the user to go activate their account and warning them that their account may be removed if they don't (and thus they'll lose any subscribers that may have signed up in the mean time)

[iamdharmesh]

@dkotter @jeffpaul Please let me know if any wording updates are needed here.