search

woocommerce / woocommerce-admin

(Deprecated) This plugin has been merged to woocommerce/woocommerce
https://woocommerce.github.io/woocommerce-admin/#/
Other
361 stars 145 forks source link

Replacing toggles with buttons on the payments task screen #6699

Closed elizaan36 closed 3 years ago

elizaan36 commented 3 years ago

I was going to add a comment on #6683, then realized this was probably better suited to it's own issue.

For some context, secondary actions should be used consistently on the payments task rather than toggles for a more coherent UX. For example, WooCommerce Payments, Stripe, and Cash on delivery currently both use toggles.

image

The new design uses Enable as an action for a simple switch that doesn't require setup, and Set up for actions that require additional set up steps.

Before enabling Cash on delivery:

Screen Shot 2021-04-01 at 8 51 20 PM

After enabling Cash on delivery: Completed setup task list - Cash on delivery enabled

A snackbar appears to confirm once the payment method is enabled. The enabled payment method moves into an "Enabled payment methods" card, separate from "Additional payment methods". (If not enabled, WCPay remains a separate card pinned to the top even when other payment methods are enabled.)

Manage takes you to the payment methods settings screen. For WooCommerce Payments it's WooCommerce Settings>Payments>WooCommerce Payments, and for Cash on delivery it's WooCommerce Settings>Payments>Cash on delivery. Users will have to go to these settings screens to enable and disable the payment method at checkout, rather than being able to toggle on and off from this screen.

@pmcpinto @psealock let me know if you have any thoughts or questions on this.

joshuatf commented 3 years ago

Looks good to me.

Estimate: 2

Easy enough to handle, but some maintenance needed with existing payment methods to match this new UI.

elizaan36 commented 3 years ago

👋 Thanks @joshuatf

After chatting in paJDYF-1eV#comment-5258 with @louwie17 there's another possible indication to include. After installing an extension and then dismissing the setup, there's an in-between state that should be accounted for.

I tried a new indication in the list for "Setup required" - in this example, it would be after installing the Stripe extension but before completing setup. The "Set up" action changes to "Finish setup".

Screen Shot 2021-04-01 at 8 56 43 PM

Currently, there are different behaviors for different extensions. For example, if you install Stripe, Paypal, Klarna, and Mollie but don't complete setup for any of them - The Stripe and Paypal tasks don't currently change (WCPay doesn't change either once installed) but the others show the toggle in the off position. Would be good to have a more consistent indication here, what do you think?