WCPayments setup: introduce stepper page

[pmcpinto]

Description: we're going to test providing context about all the steps required to complete the setup on a separate page. We think we should build the stepper in the wcpayments plugin, as we'll more flexibility to tweak it compared to wcadmin/core.

Acceptance criteria:

• [ ] Auto populate the email input of the first step with the store email. The CTA should redirect to the wpcom connection flow
• [ ] The user is redirected back to the stepper after creating/connecting the wpcom account
• [ ] The user is redirected to the KYC flow when clicking on "Verify details"
• [ ] The user is redirected back to the stepper after completing the KYC flow
• [ ] If the user selects "set up later", create a new setup task if users have the setup task list enabled and don't have the WCPayments task. Copy: Get paid with WooCommerce Payments Link: redirect the user to the stepper
• [ ] Trigger an inbox notification one day after the user clicked "set up later" with the following copy: Title: Complete the WooCommerce Payments setup Description: You need to provide more information to enable deposits and start receiving payouts. CTA: Complete Setup The CTA redirects to the stepper
• [ ] As a starting point, the only flow that redirects users to this screen is going to be the new welcome screen: #1436
• [ ] Redirect the user back to the new welcome screen (#1436) when they click "set up later"

Event tracking: wcadmin_wcpay_setup_stepper_view - when the user views the stepper flow Event prop: wpcom_connection : Yes/No - identify if the user is has a wpcom account

wcadmin_wcpay_setup_stepper_setup_later - when the user clicks "set up later" Event prop: step : step name - identify the step where the user clicked "set up later"

wcadmin_wcpay_setup_stepper_create_account - when the user clicks "continue" in the 1st step

wcadmin_wcpay_setup_stepper_verify_details - when the user clicks "verify details"

wcadmin_wcpay_setup_stepper_setup_complete - when the user clicks "Go woocommerce home"

[pmcpinto]

Trigger an inbox notification one day after the user clicker "set up later" with the following copy:

@elizaan36 can you review the copy pls? Also, I think it would be good to trigger something informing the user what's going to happen after they click "set up later". A snackbar?!

[elizaan36]

Just updated the screenshots above with new copy.

For the "Set up later" action, could we redirect the user back to where they came from? For example, the Welcome screen entrypoint, Settings entrypoint, or home screen?

Landing back on the origin screen there's a snackbar with the message, "Finish setup to enable credit card payments" (copy WIP).

One flow is slightly more complicated. It's possible that the user installed WCPay via the payments task screen (via "Choose payment methods" task on home screen), which means choosing "Set up later" would create a new task to finish setup. Let's use the copy, "Get paid with WooCommerce Payments" but no legal message is needed since that's already been accepted as part of the previous flow.

[pmcpinto]

@elizaan36 in order to make sure that we don't have any issue on the legal side it's better to add the legalese below the first step: By clicking “Continue” you agree to the Terms of Service

@becdetat thanks for creating the child issues. I added a new item to the AC: If the user selects "set up later", create a new setup task if users have the setup task list enabled and don't have the WCPayments task.

[elizaan36]

in order to make sure that we don't have any issue on the legal side it's better to add the legalese below the first step: By clicking “Continue” you agree to the Terms of Service

👍 Updated

[pmcpinto]

@becdetat just a heads up that I completed the AC with the following items:

As a starting point, the only flow that redirects users to this screen is going to be the new welcome screen: #1436 Redirect the user back to the new welcome screen (#1436) when they click "set up later"

[ilyasfoo]

As a starting point, the only flow that redirects users to this screen is going to be the new welcome screen: #1436 Redirect the user back to the new welcome screen (#1436) when they click "set up later"

@becdetat I've updated the new AC to https://github.com/automattic/woocommerce-payments/issues/1458

[becdetat]

Thanks @ilyasfoo @pmcpinto

[becdetat]

One of the requirements that I assumed for this after a conversation with @timmyc was that the WC Payments setup code should be moved to WC Payments rather than be scripted in WC Admin, so that we can iterate on changes to the setup flow faster than if we had to wait for a new WC Admin version to be installed. It turns out that this is possible but technically difficult (relating to using slot/fill in different React contexts), which has been blocking the implementation of this feature. I'm thinking that it would be better to just start on changing the setup flow to use a stepper, and move the setup flow into WC Payments at a point where the technical difficulties are better understood.

[pmcpinto]

@becdetat considering that we're thinking about implementing the WCPay overview page we're going to reassess if we should test the stepper page in WCPay. There's some overlap between the stepper steps and the overview tasks.

So the priority for cycle 12 is the "preview mode" exploration. I think @timmyc already chatted with you about this and tomorrow I'm going to publish the project thread. Let me know if you have any questions or feedback. Thanks

[mattsherman]

Moved this to the Icebox, as it is not currently on the roadmap for Mothra.