Add contextual information about store setup on My Home

[pmcpinto]

User story:
As a new eCommerce user
I want to have more context about my store setup when I enter My Home
So I can have a reminder that I should finish setting up my store

Description: when an eCommerce plan user finishes the purchase, they don't have any reference about the store setup in My Home. This can also happen in situations where a user returns to WordPress.com mid-way through store setup. We aim to encourage users to complete the tasks therein via contextual information in My Home.

Acceptance Criteria:

• introduce a banner focused on the store setup with the gauge component to display the current progress
• introduce a "Finish store setup" link on Quick Links that redirects them to Store
• add the setup widget to the Store menu item
• remove all the indicators mentioned above, once the user completes or removes the task list

Event tracking:
TBD

Additional links:
pbIJXs-cU-p2

[becdetat]

This would require building a horizontal guage for the Store menu item.

Estimate: 3

[joshuatf]

I haven't dabbled in this repo in a while- is this task list referring to the new onboarding task list or the wc calypso bridge specific task list?

If the former (or if we ever transition towards it), grabbing the number of visible tasks may prove tricky, especially without a React build setup which this repo lacks.

[pmcpinto]

I haven't dabbled in this repo in a while- is this task list referring to the new onboarding task list or the wc calypso bridge specific task list?

It is referring to the new one, as the new home screen will be deployed in the eCommerce plan once it's available on WC Core.

Btw, the Calypso Customer Home was converted into an API driven page. There's this handy guide on the fieldguide with more info about that: https://fieldguide.automattic.com/my-home/

[jeffstieler]

This would require building a horizontal gauge for the Store menu item.

I think this might exist already (screenshot from the FG):

Here: https://github.com/Automattic/wp-calypso/blob/a03853a3d926f6967fd863cef74213fcddd8ef3b/client/my-sites/sidebar/index.jsx#L253-L270

I'm sure this will take longer than expected due to a lack of familiarity of the eComm plan - so I say 5.

[mattsherman]

This would require building a horizontal guage for the Store menu item.

We should be able to use ProgressBar

Do we currently have available the data necessary to calculate the completion percentages and the number of tasks left in Calypso?

I'm also unfamiliar with how My Home can be customized. I think, from what I remember from my previous team's work on migration, that there is basic support available to create different My Home configurations.

I'd estimate a 5 given the different pieces (Calypso, bridge, potential API change to provide progress data) and lack of familiarity with piecing all of those together.

[pmcpinto]

Do we currently have available the data necessary to calculate the completion percentages and the number of tasks left in Calypso?

We track the completion of each task: wcadmin_tasklist_task_completed

[timmyc]

Okay giving this one a deeper look, and I think we made some assumptions around task list completion data being easy to retrieve. In wc-admin, we take the task list status, and add it to the woocommerce_shared_settings which is ultimately put into the DOM and we then reference that from wc-admin scripts. We do not have a REST API endpoint ( at least I can't find one and I looked a few times ) that exposes the status of tasks in the setup checklist 😢

We track the completion of each task: wcadmin_tasklist_task_complete

Indeed we do record tracks when events are completed, but we don't persist a similar list of what has been finished in a site option or anything. The one option we do have around this is if the task list has been hidden/completed fully is woocommerce_task_list_hidden

So here are some approaches we could take here:

Option 1:

• Build a bespoke REST endpoint in calypso-bridge that emulates the logic used in the wc-admin setup checklist. Perhaps this endpoint could then be added to wc-admin if we see it being of use.
• In wp-calypso we could then use the Jetpack REST API proxy to call out to the "remote" endpoint on the Atomic site to then properly show the % completed per the designs above.

Option 2:

• Add a filter to jetpack_sync_options_whitelist ( example usage here ), to include the value of woocommerce_task_list_hidden to be sync'ed back to the WordPress.com replica site. ( I don't think there is a WordPress core REST API endpoint for options data - or I'm just really bad at reading docs )
• With that option available on WPCOM, we could then use the WPCOM site settings endpoint to retrieve this value in Calypso, and conditionally show the links and banner to the Setup Checklist in the designs above. I think this would also require a code change on WordPress.com's REST API to include the value of this option ( this is based upon my foggy memories of doing similar stuff for Store on WPCOM ).
• This route would not have the ability to show percentage complete, just if the setup checklist is done yet or not.

Both routes kind of feel equally as complex to me - they both require some code to happen here in calypso-bridge. But Option 1 seems better since we could actually show a percentage complete.

I think it might be possible to still do this as a 5 - but yes the Calypso Home Screen is uncharted territory for us, so this could grow. Not to mention we don't have anyone on the team who has worked in Calypso much lately ( outside of myself afaik ).

[pmcpinto]

@timmyc thanks for taking your time evaluating different options. Considering all the unknowns, what if we take a simpler approach for the first release and display the triggers just based on some specific things, such as adding/having a product and adding/having an active payment provider? The level of effort can be reduced and it allows us to validate if this contextual information generates more interaction.

[octaedro]

I started to work on the Finish store setup banner.

[octaedro]

Hi @pmcpinto,
I have a question about the Remind me dropdown text, since there is a pretty similar dropdown in the same cards we will use named Hide this with a pretty similar functionality too. Is it ok if we leave the text as Hide this?
With this option probably we would be able to inherit more things form that original dropdown button.

[gwwar]

Calypso Home Screen is uncharted territory for us

Feel free to chat with @Automattic/serenity on technical options and @danhauk + @sixhours for design alignment. We also have some documentation available in PCYsg-qpk-p2. The API for My Home is a little special in that all visibility checks of what to display are handled in the server to give us more flexibility without needing to build an excessive number of API endpoints or add lots of boilerplate on the client.

This is the Layout returned for Site Setup View for Simple:

For example for this new view, we'd create a new view file, something like VIEW_SITE_SETUP_ECOMMERCE which might have a response of:

{"body":{"primary":["home-task-site-setup-checklist-ecommerce"],"secondary":["home-feature-stats","home-section-learn-grow"],"tertiary":["home-section-manage-site"],"secondary.learn-grow":["home-education-gutenberg","home-education-free-photo-library"],"tertiary.manage-site":["home-action-quick-links","home-feature-support","home-feature-go-mobile"],"view_name":"VIEW_SITE_SETUP_ECOMMERCE"},"status":200,"headers":{"Allow":"GET"}}

I'm sure the eCommercePlan has its own checklist/site setup, but wanted to note the related https://github.com/Automattic/dotcom-manage/issues/75 issue. (Site setup is currently disabled for Atomic sites). If we end up touching the related checklist lib on the server, note that there are checklists for Simple, Atomic, and Jetpack (for testing).

Typically cached site data isn't super reliable (things can get out of sync), so I'd probably recommend adding an endpoint in Jetpack that exposes the information you want. This is relatively a common need for WordPress.com features so don't hesitate to ask if y'all wanted more input here.

[pmcpinto]

Is it ok if we leave the text as Hide this?

@octaedro LGTM. @jameskoster what do you think?

[sixhours]

I have a question about the Remind me dropdown text, since there is a pretty similar dropdown in the same cards we will use named Hide this with a pretty similar functionality too. Is it ok if we leave the text as Hide this?
With this option probably we would be able to inherit more things form that original dropdown button.

FWIW, this button used to be "Remind me" but there was some pushback because it was confusing and it wasn't clear you could dismiss it.

[jameskoster]

Thanks for the context @sixhours. @octaedro this action should match all the other banners in this section, so yes, please leave it as 'Hide this' :)

[octaedro]

Hi @pmcpinto,
When taking a look at the code with @timmyc, we realized that sending the data we need to My Home would require a bigger refactor (since we do all the calculations in the client-side).
According to how we store the data, we can provide whether the task list is visible or hidden, to show the message and the button to encourage the client to finish the store setup (without the progress bar and estimated time).
Is it ok if we initially don't show the progress bar and the estimated time?
And, if we consider that it's worth the effort, we can add the missing elements (and the necessary refactor) in a follow-up PR.

[pmcpinto]

Is it ok if we initially don't show the progress bar and the estimated time?

Sure. It will be good to evaluate first if users are interacting with the nudges before dedicating more time to improving the experience. Thanks for the heads up

[octaedro]

Thanks @pmcpinto
Also, I would like to ask @jameskoster, what do you think about removing the progress bar in design terms? Is it ok if we keep the same design but without the progress bar or do you think we should add something else in that spot?

[octaedro]

Hi @pmcpinto,
I have another question: when a user presses Finish store setup, it should take the user to the homescreen and make the card with the button and message in My Home disappear forever, does this sound correct?
And, just to confirm, the Finish store setup shouldn't hide the setup checklist on the homescreen, is that right?

[jameskoster]

Also, I would like to ask @jameskoster, what do you think about removing the progress bar in design terms? Is it ok if we keep the same design but without the progress bar or do you think we should add something else in that spot?

Am I correct in assuming this applies to all 3 instances where we wanted to display progress? If so I think we can leave the menu item in the sidebar "empty". In the quick links panel we can just use the store icon.

For the banner at the top of the screen we should include an eCommerce or setup focussed illustration to maintain some visual interest. cc @danhauk @sixhours for help there, as I'm not sure where the illustrations used throughout Calypso come from nowadays.

And, just to confirm, the Finish store setup shouldn't hide the setup checklist on the homescreen, is that right?

I think there's an argument to be made that the task list should be forced visible in this flow.

[pmcpinto]

@octaedro do you think that we can take advantage of the event tracking that already exists on My Home or we should add specific tracking on our call to actions?

[octaedro]

Hi @pmcpinto,
The current development here will record the click on Finish store setup under calypso_customer_home_task_start, with taskId: home-task-site-setup-checklist-ecommerce.
And also, the click on the Quick link Finish store setup will be recorded under calypso_customer_home_my_site_finish_store_setup_click .

I think that these two events will be enough for now, but if you think we should add an extra one just let me know and I'll add it.

[pmcpinto]

The current development here will record the click on Finish store setup under calypso_customer_home_task_start, with taskId: home-task-site-setup-checklist-ecommerce.
And also, the click on the Quick link Finish store setup will be recorded under calypso_customer_home_my_site_finish_store_setup_click .
I think that these two events will be enough for now, but if you think we should add an extra one just let me know and I'll add it.

Yep that's enough. Thanks for the heads up.

[pmcpinto]

@octaedro I'm testing the flow and I'm not seeing the new card: https://d.pr/i/kRlo34 I only completed the store profiler

The quick link is also missing. Let me know if you need access to this test store.

[octaedro]

Hi @pmcpinto,
The PR that saves the task list status (hidden or not) is not released in Jetpack side. It will be shipped with the version 9.0. For now, we only can test this functionality by adding ?dev=true&view=VIEW_SITE_SETUP_ECOMMERCE at the end of the URL (E.g.: https://wordpress.com/home/meetomattic.wordpress.com?dev=true&view=VIEW_SITE_SETUP_ECOMMERCE)

[pmcpinto]

👍 thanks for the clarification