Conversation
d5b89df to
e2ef8e3
Compare
22bf8f4 to
eb077e4
Compare
There was a problem hiding this comment.
Timeboxed my review, focused on testing rather than code review. Was testing on a local dev site, with Jetpack installed alongside woo and woo blocks and wc-admin (all dev builds). Tested on Safari primarily. Happy to do more testing, would be good to test the install flows end-to-end using a real site (e.g ephemeral). Also a reminder to test IE and other esoteric browsers :)
Overall this is looking great. I found a bunch of minor / polish things which may or may not be important to get to for v1 – adding info here as a log of my testing :)
I tested all the flows mentioned in PR description (great PR by the way!), including purchasing AutomateWoo (but had to install manually), manually installing facebook and setting up (impressive that this plugin can configure my local dev woo!!).
Installed extensionscard:- Should links open in new tab? Personally not a fan but I believe this is common in woo core/wp-admin.
- Related - show "external" icon so user knows the links land outside of their wp site.
- Tickets - probably best to link to
create-a-ticketif it'sGet support(vs.Support).- Also would be ace to pre-populate the ticket form
I need help withfield === facebook (or whatever extension it is).
- Also would be ace to pre-populate the ticket form
- Should links open in new tab? Personally not a fan but I believe this is common in woo core/wp-admin.
Knowledge baselinks are also "external" - as above, consider external icon and/or new tab.Finish setupbutton didn't work for facebook, until page was refreshed. Flow: installed facebook manually, view marketing tab, clickActivate, activate success (snackbar),Finish setupbutton available, but didn't do anything.- Dismiss for welcome card felt a bit slow/clunky - took a moment (~2 seconds) and then snap disappeared - either show some click feedback, or better optimise this so there's no latency :)
- Welcome card image has a grey background, contrast with the white card background.
- Knowledge base slide animation is different for first/last page (cosmetic).
- Should we link to the marketing tab from
WooCommerce > Extensions > Marketing? - The cards take a moment to load – are we caching the API data (extensions and blog posts)?
|
Rebased on master to pick up changes approved in: |
|
Making a note that I updated the Jest config in 5e1011f to handle static assets as suggested in the Jest docs. |
I've tested on all the primary browsers - Firefox, Safari, Chrome, Edge. wc-admin currently doesn't work in IE11 |
There was a problem hiding this comment.
Pretty impressed with you folks getting this knocked out as quickly as you did! I have a few comments I've left through the code.
Also, not a blocker to merge, but I have a few suggestions of things to keep in mind regarding things I see in this pull around extension management. There are a number of components that could be potentially refactored to be more usable for other potential pages our team (or other Woo teams) might add to the wc-admin interface. Something to consider is eventually extracting some of the work you've done into this pull into a @woocommerce/extension-management package. The package would contain:
- Anything dealing with installation/activating/deactivating/discovery of extensions in a custom
wp.datastore. - A custom
useWpPluginsoruseWooExtensionshook that implements the logic for interacting with the store and returns an interface for components to use (i.e.activate,isActivating,install,isInstallingetc.). InstalledExtensionscomponent (and other related components like what you've implemented) similar to what you have here, that implementsuseWooExtensionsand receives dynamic properties influencing any possible filters applied on what extensions are retrieved and shown etc.
By exposing this in a woo package, multiple teams would then have access to for handling and working with the ui/ux for wp plugin management in our client interfaces.
Also, what parts of the REST endpoint added here could be on a separate extensions management endpoint? Or is there an existing endpoint that can be used for designating "categories" or "filtered" extensions to work with (which marketing or other wc-admin pages could then hook into to modify what extensions get returned on a request)?
Again, not a blocker for the work you are doing here, but I definitely see the need for something like this to avoid duplicate work across our teams. Maybe something to surface to @woocommerce/isotope to consider?
|
Howdy @woocommerce/isotope if any of y'all have some time to spare to check if we have the basics of setting things up in the context of wc-admin (e.g feature gating, adding a dashboard page correctly, breadcrumbs etc.) I'd be very grateful (and generally just feal much more comfortable about pulling the trigger on this). Cheers! 😄 |
|
Thanks @nerrad 👏
Definitely agree - we had a few brief conversations about there being some crossover of extension management side of things with onboarding etc. Made a start doing things #3999 but ultimately I think for the 1.5 week timeline we had and our experience doing too much of that stuff now would been too difficult for us. |
timmyc
left a comment
There was a problem hiding this comment.
First up, big props to the crew for all of the work that has been done here. The page looks fantastic, and really excited to see this foundation being built for us to Grow upon ( see what I did there?!? ).
Some minor notes/comments in the code. Nothing a huge show-stopper, I'd be fine with follow up issues/PRs myself, but please feel free to adjust here prior to merge also. Likewise on these visual items I saw in testing - I think we are good to land this, and then clean up the odds and ends during beta.
Visual Oddities
I'm running Firefox locally, I didn't test yet on a native mobile device, nor IE but both of those should probably happen during beta.
- Side Margin mis-match
When a Store Alert is shown, the alert takes up much more horizontal space on the page vs the content of the Marketing page... looks a bit odd at wider viewports:
- Installed extensions narrow-viewport bleed
When viewing on a smaller viewport, the action buttons for Installed extensions bleed out of the container, and the text doesn't wrap so it is not fully visible:
- Suggested Extensions Logos Pixelated
At all viewports, the logos for recommended extensions look pixelated, or resized oddly via css:
- Blog Posts: open in new window?
Love the look of the carousel for the posts, nice work @jconroy! One oddity I notice is the posts open in the current window, which might be disruptive to the flow of a store owner. The other side-affect here is if I'm on the 4th "slide" and click a blog post, then click back, I'm reset back to slide 1. Should we open these in a new window?
@danielbitzer Here's a gif. The first and last pages don't slide in - they appear and the text titles temporarily overlap while the outgoing/incoming page slides. Minor :)
|
|
Thanks for the gif I'm not really seeing anything near as pronounced as that in safari for me @haszari - being a hand built component i'm not sure we want to get too bogged down on investigating this when a proper 3rd party carousel/slider component would probably be more ideal and something we'd look at using later - we did investigate it but didn't have the timeframe to really justify finding something that would meet broader needs. Definitely something we will keep an eye on. |
|
thanks @timmyc !! hugely appreciate the 👀
Thanks for documenting - there is a max width on the marketing content container to keep things in line with the MVP designs. We can explore adjusting as part of design iterations. I've noted the style/image issues for follow up.
Thanks done - @haszari also mentioned applying visual "external" indicators but I'll pencil that for further design discussion. |
Work in progress PR for the Marketing Tab MVP.
We envisage splitting this out into separate PRs for easier review.
Background
In WooCommerce 4.1 we are hoping to make marketing a “first-class citizen” in WooCommerce.
The PR introduces a new dashboard tab that we hope will grow to become a robust marketing hub within WooCommerce. Our goal is to bring order to the current disjointed marketing experience our merchants are getting, giving them access a dashboard that manages, controls and guides their experience marketing their WooCommerce store.
An initial design for the MVP...
Our focus has been on the following three main areas to start and from which we we build on:
We will be testing the impact of this new marketing dashboard by integrating with a small selection of extensions. Based on usage and alongside merchant feedback, we will no doubt be making iterations and changes as required and then may look to open these areas up for further integration, while maintaining our goals of simplification, curation, and education.
High Level Specs
For this MVP the tab will consist of 4 key components.
Welcome Card
A simple component that displays a welcome image and some text that can be permanently dismissed.
Installed marketing extensions
The most complicated of the components. This component (for the MVP) provides a centralized place to access relevant links for:
Both extensions feature as part of the onboarding wizard.
If neither of the extensions are installed - the card will not be shown.
From the card merchants will be able to quickly access support, settings, and or dashboards.
Installed marketing extensions would have one of three states:
Given the time frame we’re up against for the MVP, we’ll likely need to hard code support for these extensions into the feature. Future iteratioons would likely allow other marketing extensions to hook in.
Recommended Extensions
The MVP will recommend the following 6 extensions (in this order)
If the extension is installed it will not be shown in the list.
If the store is connected to WooCommerce.com clicking an extension will initiate the in app purchase flow.
To allow 6 extensions to be updated/adjusted the list of extensions will be requested from WooCommerce.com.
Once all of the recommend extensions have been installed, the card would disappear (for now).
Knowledge Base
A component that displays a carousel/slider of posts from the WooCommerce.com blog.
The component will request the posts from WooCommerce.com via the WP REST API.
Initial implementation will request 8 posts from the Marketing Category.
Modification will need to be made to the posts API endpoint to allow easier access to post author informatioin.
This component should always be visible.
Master Thread - pbIy4N-B-p2
Design Thread - pbIy4N-3C-p2
Testing the tab
This branch contains all the code needed to build and display the tab.
We are using the feature flag functionality within wc-admin and have it set to "Development" only at this point in time.
This means you will need to use
npm startto build the development version.We're exploring e2e tests - its just another thing that is new to us.
Welcome Card
Simply click the dismiss button and check that the
woocommerce_marketing_overview_welcome_hiddenoption has been added.The card should no longer display unless you delete the database record.
Recommended Extensions
The current list of recommended extensions is being retrieved from a test site. Once we have a live endpoint this location will be updated.
Depending on your development environment domain clicking on an extension may take you through the in app purchase flow or direct to the WooCommerce.com product page.
As plugins are installed they will be removed from the list.
Note - hubspot is currently not listed on WooCommerce.com so it will 404 at the moment when clicking.
Knowledge Base
The posts are set to be pulled from Marketing Category on WooCommerce.com.
The carousel functionality should allow you to scroll through pages of articles from left to right.
Installed Extensions
To see this card simply install the Facebook for WooCommerce or Mailchimp for WooCommerce Plugins (or both).
Once installed (but activated) you should see an "Activate" CTA/button on the marketing page that you can use to activate the plugin.
Once activated the CTA/button will change to "Finish Setup". Clicking this link should take you to the relevant settings page for the plugin where you can complete setting up the plugin.
Only once you complete set up will be you see the links to plugin support, documentation and their dashboards etc.
Deactivating the plugin from the WordPress plugin menu should also deactive it on the Marketing page.
Notes
We have starting moving some code from this branch out into smaller more digestible PRs
#3999
#3980