Woocommerce-services: Add stateful self-help dashboard

[allendav]

Needs design. Design below

Adding self-help will be essential to avoiding an avalanche of support requests. Our client has only the logs right now.

I think we need to add something, before launching the Beta, for WCC to give merchants a single page to assess the health of their WCC setup before they reach out to support (and to give them guidance or even automation around opening a productive ticket if need be.)

I am thinking a new tab in wp-admin > WooCommerce > System Status called “WooCommerce Connect” with:

• an overall red, yellow or green indicator for the health of the connection
• red because jetpack is not installed, active, or connected or if the merchant’s site has never successfully hit the /services endpoint (and a prompt to take care of that)
• yellow if the merchant’s site has successfully hit the /services endpoint but the last time it tried it failed (along with a try again button)
• green otherwise
• a shortcuts to each of the enabled service’s settings pages (e.g. each shipping zone method instance for wcc powered usps) – with a red indicator if the service instance setting is missing a required field or green otherwise
• a prompt if they haven’t set up any WCC services to do so:)
• NEW - warn the user if they are using a CUSTOM PERMALINK STRUCTURE ( @nabsul and people on the Internet have gotten 404s when attempting to access WC API endpoints when CUSTOM is selected for permalinks. Plain may also be a problem.)
• a display with how long ago the merchant’s site last was able to successfully hit the /services endpoint to get available services from the WCC server (we can call this the “last check for updates” or something)
• a display with how long ago the last /shipping-rates request was and whether it was successful or not (including the complete response hidden under an expander)
• a control to enable/disable detailed debug logging for WCC
• a button to force a re-fetch of /services
• move the WCC connection test button @jkudish added to the tools page to this page instead
• display a reverse chronological snippet of the most recent dozen or so entries in the WCC debug log, if any (with a link to the full log)
• display the WordPress.com shadow blog ID for aid in helping support
• and lastly, a button to open a ticket ( / send an email?), ideally being able to pre-fill some info like the shadow blog id, url, WCC debug log and other site details / system status

The other neat thing about this page is it could serve as a destination for “something is wrong with WCC, click here to fix it” notices wherever we display them

cc @kellychoffman @mikeyarce

[allendav]

We should also detect and warn if WordPress is < 4.4, since we rely on the WP_REST_Controller introduced in 4.4

[jkudish]

Shouldn't we just prevent activation if WP < 4.4?

[jkudish]

Or if WP_REST_Controller is not defined rather (they could enable support via the plugin)

[kellychoffman]

Design:

Updated to include jkudish's suggestions below

It doesn't include the shadow blog id, but we were thinking that it could show up after you click on Submit a ticket. Thoughts @mikeyarce?

[jkudish]

Loving this!

A few thoughts/questions:

• What exactly does Last request map to for both WCC and Jetpack?
• A button to test the WCC connection would be great
• A link to the existing WooCommerce system log would be good

[kellychoffman]

Good ideas.

What exactly does Last request map to for both WCC and Jetpack?

I was playing off this idea mentioned above:

yellow if the merchant’s site has successfully hit the /services endpoint but the last time it tried it failed

Maybe its a poor choice of words on my part (saying "Last request"), but I was thinking it would let the user know the last time "something" happened. Does that make sense for the green connections, or should that only be paired with the connections having issues?

[mikeyarce]

Looks really good! :)

[allendav]

Also add a check for whether or not a base_country has been set.

[allendav]

Setting myself as assignee to start coding this

[allendav]

• [x] Get submenu and page added, formLayout with the four field sets, with coming soon text in each, with main.js displaying that
• [x] Add the store, populated by formData, create the RefreshableStatus component, add the WCC Optin, WCC Connection Status, Jetpack Connection Status to the Health fieldset, leave actions not connected
• [x] Populate Services fieldset and connect actions
• [x] Populate Debug fieldset and connect action to turn debug logging on/off (maybe add a clear too?)
• [x] Populate Support fieldset and do something neat with opening a ticket

[kellychoffman]

Also add a check for whether or not a base_country has been set.

Which area should this live in? Is it referring to a core setting?

[allendav]

@kellychoffman :

(base_country) Which area should this live in? Is it referring to a core setting?

I think under the Health section of WooCommerce Connect, with a link to that part of WC settings to fix it.

Also - I think if they have more than one instance of USPS set up, especially in different zones, we're going to have to include that zone name in the Services display. I'll hack something in for now until you can design something appropriate.

[kellychoffman]

Multiple instances of a shipping method

'Instance' is not the most user friendly term. Lets denote the instance by the Shipping Zone it is attached to.

What if there are more than one instance on a shipping zone?
The method name will differentiate between them.

What if there are more than one instance of the same named shipping method on a single shipping zone?
We can use numbers!

Design using the edge edge edge case of: multiple instances + named the same + all in one shipping zone:

[kellychoffman]

Design for if base country is not defined:

Is 'Update now to get the most accurate rates' the best copy to use?

[allendav]

@kellychoffman - thank you!

Is 'Update now to get the most accurate rates' the best copy to use?

Unforunately no. Without base location, there will be no rates available. I guess something more like "Add it now to get shipping and other services working correctly."