Add Mailchimp Signup Flows

[jeffpaul]

Is your enhancement related to a problem? Please describe.

As it relates to the work in #9, we'll similarly want to integrate Mailchimp signup flows into the plugin setup/settings/Mc connection experience. More details to follow as we gather more context for how the https://github.com/mailchimp/mc-woocommerce handles things.

Designs

No response

Describe alternatives you've considered

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[dkotter]

This is an attempt to detail the signup flow the Mailchimp for WooCommerce plugin is using, as the goal here is to add the same functionality to this plugin. We don't need to match the UI exactly but we will want to use that as inspiration / a starting point.

Main settings page

When you first activate the plugin, you land on a settings page that allows you to either connect your account or signup for a new account:

Clicking the Connect Account button will trigger the OAuth flow that was just added in #47.

For users that don't already have an account, they will click the Create account button.

Create account page

Clicking that button will take you to a settings page where you can enter in your personal details:

Note that the breadcrumbs on the top of this page don't seem to be accurate, as I never end up on an Activate account or Choose plan page, so we can ignore that.

When you click the Activate Account button, we first validate the form and show any errors. If there are no errors, an ajax request is made to the mailchimp_woocommerce_create_account_signup action, which in turn makes a POST request to https://woocommerce.mailchimpapp.com/api/signup/

We don't know exactly what this endpoint is doing but in looking at the code, it seems to create an account and generate an OAuth token, which we then store. An option, mc-woocommerce-waiting-for-login, is set, which then updates the UI asking you to check your email.

Email

Once on the Check email page, an ajax request is made to the mailchimp_woocommerce_check_login_session action at regular intervals, which checks if your account is ready. Once it is, it sends you to the main settings page:

Main settings

The sync doesn't work for me so I never end up on the final Confirmation page, but I don't think that matters for the work we're doing as we'll have a different main settings page.

Breakdown of tasks

While we're going to be mostly matching the experience as described above, here's a more concise list of tasks:

• [ ] 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

There are certainly other things I'm missing here but similar to the OAuth task, we should look at the Mailchimp for WooCommerce plugin as a guide to match what they are doing where it makes sense

[dkotter]

Noting we've gotten Figma designs for the signup flow: https://www.figma.com/design/jGOcAWwEJjQQ992iimBbho/WordPress-%2F-FY24-Q4

At a quick glance, this seems to pretty closely match what I've detailed above but should spend some time looking through these to ensure we are matching these designs cc/ @iamdharmesh

[dkotter]

One thing not completely captured in those designs that was discussed is prompting new signups to go back to Mailchimp and upgrade their account from free to paid.

This could either be an admin notice or maybe the first time you land on the settings page after going through the signup flow, we have a section there that prompts users to go upgrade.

Note though that this may be something we tackle post-launch of this feature

[jeffpaul]

Note that the breadcrumbs on the top of this page don't seem to be accurate, as I never end up on an Activate account or Choose plan page, so we can ignore that.

While we might not end up on those steps within the plugin, those breadcrumbs do appear to match what happens offsite on mailchimp.com with the account setup so probably worthwhile keeping those in the plugin experience to give the site owner a sense of the steps to come.

One thing not completely captured in those designs that was discussed is prompting new signups to go back to Mailchimp and upgrade their account from free to paid.

This could either be an admin notice or maybe the first time you land on the settings page after going through the signup flow, we have a section there that prompts users to go upgrade.

Note though that this may be something we tackle post-launch of this feature

I agree that where the signup/upgrade flow happens can be shifted later, but that there are some layout/copy/etc tweaks needed based on the Figma design. @iamdharmesh please plan to iterate through those changes and let us know when this is ready again for code review/testing.