Added "Finish store setup" card to My Home #44547

octaedro · 2020-07-29T22:19:25Z

Changes proposed in this Pull Request

This PR is part of a bigger change related to the WC-Admin issue 554.
It focuses on only the visual changes.
This PR adds the "Finish store setup" card to My Home.

9fdeede5d7.png)

Testing instructions

In order to test this PR, these changes should be approved in Phabricator first.

Choose one page and go to My Home, adding the params?dev=true&view=VIEW_SITE_SETUP_ECOMMERCE to the URL (it will look like http://calypso.localhost:3000/home/[my_site]?dev=true&view=VIEW_SITE_SETUP_ECOMMERCE).
Verify that the Finish store setup card is visible.
Verify that the Quick link named Finish store setup is visible too.
The button Finish store setup should be pointing to the site's store.
Verify that the description text and the image in the card are correct.

Fixes partially 554

matticbot · 2020-07-29T22:19:27Z

Test live: https://calypso.live/?branch=add/store-setup-on-my-home

matticbot · 2020-07-29T22:20:05Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~303 bytes added 📈 [gzipped])

name  parsed_size           gzip_size
home      +1162 B  (+0.3%)     +303 B  (+0.3%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

gwwar · 2020-07-29T22:23:46Z

client/state/sites/selectors/get-store-setup.js

+ * @param  {number}  siteId Site ID
+ * @returns {object} Object with store setup information
+ */
+export default function getStoreSetup( state, siteId ) {


Please handle any view checks on the server, see PCYsg-qqr-p2 or PCYsg-qpk-p2 for more info. If you have any questions @Automattic/serenity can help walk you through this.

Totally fine though to let the task component query if we need to display remaining tasks left.

Thank you for your comments @gwwar, the documentation you shared is very helpful.
In this case, as you mentioned here, I should add an endpoint in Jetpack to expose the information I need, am I right?
Also, just to confirm, (please correct me if I'm missing something) in this repo I should create a structure similar to what we use with the checklist, to handle the data we get from Jetpack, yes?

I should add an endpoint in Jetpack to expose the information I need, am I right?

Correct!

in this repo I should create a structure similar to what we use with the checklist, to handle the data we get from Jetpack, yes?

I'm not sure I follow what's going on there, but I believe it's a checklist for use outside of of My Home, so likely more complicated than you need. I'd say a better model in your case might be the ConnectAccountsTask component. Your task component would have a query component that fetches the data from your new endpoint, and updates appropriately. So the overall idea is:

My Home page load calls the home/layout endpoint.

Server determines which view to send back; let's say your view in this case.

The API returns the list of cards to show (which has your TASK_SITE_SETUP_CHECKLIST_ECOMMERCE in the main spot).

The page renders your card/task, which triggers the query component to fetch the checklist data you require.

When that comes back, the task is visually updated as required.

As a user completes tasks, your checklist data should remain your "single source of truth", so that any fresh page reload of My Home would go through the above again and render the correct completion data.

Thank you @kwight, now I get it 🙂

client/my-sites/customer-home/cards/tasks/task.jsx

kwight · 2020-08-04T22:31:07Z

To test this PR is necessary to add a HomeLayout and StoreSetup data. I added to the branch add/store-setup-on-my-home_test.

We also have dev mode for My Home views, explained in PCYsg-qqj-p2 – this makes it easier to force a certain view while you're working (but remember you do need to add the view to your sandbox). At least with this approach, you can be testing the actual branch you'll be merging, rather than a modified substitute.

sixhours · 2020-08-05T13:37:01Z

👋 Just catching up here.

I'm wondering if the "scary" button is too much for this scenario. We typically associate red with "This is very, very broken and needs immediate attention." It could create a sense of panic or alarm in the user. If the primary task card in My Home is "What should I do next?" I would think the regular primary CTA would be enough emphasis without being alarming. What do y'all think?

Cc'ing @Automattic/dotcom-manage-design in case they have thoughts.

olesyabrk · 2020-08-05T17:19:17Z

@sixhours, I 100% agree with you. Is there a reason we're not using our regular primary button here?

octaedro · 2020-08-06T16:21:34Z

I'm wondering if the "scary" button is too much for this scenario. We typically associate red with "This is very, very broken and needs immediate attention." It could create a sense of panic or alarm in the user. If the primary task card in My Home is "What should I do next?" I would think the regular primary CTA would be enough emphasis without being alarming. What do y'all think?

Thank you @sixhours and @olesyabrk for the advice. Good idea, I will follow the pattern that is already used here and leave that button as primary.

/cc: @jameskoster

kwight · 2020-08-27T21:34:39Z

Is this still active @octaedro ?

octaedro · 2020-08-28T12:15:15Z

Is this still active @octaedro ?

Hi @kwight,
I just finished another issue and now I'm focused on wrapping up this PR 🙂

This commit adds the "Finish store setup" card to My home

This commit changes the component "FinishStoreSetup" name and decouples it from "task.jsx"

This commit adds a query component and the code necessary to handle site-setup-ecommerce store

Given some difficulties we currently have on the wc-admin side to get the params we need, the card was modified to not to use them for now.

timmyc

Tested this out with D49062-code and it is working really well Fernando!

@kwight or @gwwar - since this is our first foray into the server-side homepage views logic, would one of you be able to give the phabricator diff a look too? 🙇

kwight · 2020-09-08T15:02:53Z

since this is our first foray into the server-side homepage views logic, would one of you be able to give the phabricator diff a look too?

Sure, it's on Serenity's board, we should get to it today 👍

kwight · 2020-09-08T18:36:55Z

Can we not add the link to the Quick Links section? We wanted to keep that tight and generic, with nothing specific to individual tasks (they would pile up and loose effectiveness pretty quickly). cc/ @sixhours if I'm off the mark here.

kwight · 2020-09-08T18:43:18Z

client/my-sites/customer-home/cards/tasks/site-setup-checklist-ecommerce/index.jsx

+	const translate = useTranslate();
+
+	return (
+		<Task


Do you want to add the timing prop, to give users an idea of how long the task would take?

Thank you for the suggestion @kwight, I like the idea but I'm not sure about how much time to show there, since the task list has a few tasks and we're not able to know how many the user needs to finish. If it's only one, they could finish it in a minute or two but if they have all of them undone for sure it will take more time.

We don't aim for accuracy – it's more like "hey, it'll probably take you about 10 minutes if you do it all right now". But certainly up to you if you thinking dropping it is the way to go.

Hi @pmcpinto,
What do you think about the estimated time for the Finish store setup card?
Is it ok if we add a fixed 7 minutes to this task?

@octaedro 7 min sounds good, as it's the sum of the estimated time of the main tasks (products, shipping, taxes, payments, customize store)

Added the timer prop with 7 minutes in the commit b8235d4

sixhours · 2020-09-08T18:56:02Z

Can we not add the link to the Quick Links section? We wanted to keep that tight and generic, with nothing specific to individual tasks (they would pile up and loose effectiveness pretty quickly). cc/ @sixhours if I'm off the mark here.

Good catch! Since this step is featured in the banner/header area, it's very prominent, so adding it to Quick Links creates extra noise.

Once someone has finished the store setup, I could see adding a Quick Link to "Add new product" or similar, perhaps. The store setup is a transient step, whereas Quick Links should be stuff that's going to be used again and again.

Let me know if that makes sense!

octaedro · 2020-09-09T20:00:10Z

Can we not add the link to the Quick Links section? We wanted to keep that tight and generic, with nothing specific to individual tasks (they would pile up and loose effectiveness pretty quickly). cc/ @sixhours if I'm off the mark here.

Good catch! Since this step is featured in the banner/header area, it's very prominent, so adding it to Quick Links creates extra noise.

Once someone has finished the store setup, I could see adding a Quick Link to "Add new product" or similar, perhaps. The store setup is a transient step, whereas Quick Links should be stuff that's going to be used again and again.

Let me know if that makes sense!

Thank you for the feedback, it sounds good to me. Just to confirm I will CC @jameskoster

kwight · 2020-09-10T18:26:47Z

I tested this with D49062-code, it's looking good to me 🎉

This commit removes 'Finish store setup' from quick links

octaedro · 2020-09-13T14:12:20Z

I removed the Finish store setup option form the Quick Links in the commit 67ff5cf.

octaedro · 2020-09-13T14:13:02Z

Hi everybody,
In order to wrap this PR up, I need an image or illustration for this card, to maintain some visual interest.

Could somebody point me towards the right person to ask for this image?
cc @danhauk @sixhours @kwight

kwight · 2020-09-14T20:17:06Z

There's https://github.com/Automattic/wp-calypso/tree/master/client/assets/images with images, including the customer-home subfolder for specific My Home images. For creating new ones of that most recent style, I think it was @danhauk (who is no longer working on dotcom) – @sixhours are these illustrations something you can generate?

@octaedro at one time, there was a speedometer illustration, is that no longer applicable or usable?

octaedro · 2020-09-15T12:25:45Z

@octaedro at one time, there was a speedometer illustration, is that no longer applicable or usable?

Hi @kwight,
In the original design we had a progress bar, but since we aren't able to send the params we need without a pretty big refactor, we decided to not use it.
This is why we need an image to add there in order to maintain some visual interest.

This commit adds timing prop to the `Finish store setup` card

sixhours · 2020-09-15T14:12:00Z

@sixhours are these illustrations something you can generate?

I can! I'll sync up with Dan and see how he did those. I'm not sure I'd be able to get to it until next week, though. In the meantime, would one of our existing illustrations from that "family" work? Maybe the Payments coin illustration? https://wordpress.com/calypso/images/earn-section-3e8fbe66663516cbb6bdc5037be7b643.svg

This commit adds the `earnSection` image to the card

octaedro · 2020-09-15T16:26:30Z

I can! I'll sync up with Dan and see how he did those. I'm not sure I'd be able to get to it until next week, though. In the meantime, would one of our existing illustrations from that "family" work? Maybe the Payments coin illustration? https://wordpress.com/calypso/images/earn-section-3e8fbe66663516cbb6bdc5037be7b643.svg

Thank you @sixhours, I added the image you suggested in the commit 7d5b15b and it looks good 🙂
Please let me know when you have the new image ready.

kwight · 2020-09-15T17:57:13Z

Looks great to me:

As mentioned by @mmtr , be sure to land this PR first before D49062-code to avoid Calypso errors.

a8ci18n · 2020-09-16T19:16:17Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/4425576

Thank you @octaedro for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2020-09-25T13:31:00Z

Translation for this Pull Request has now been finished.

octaedro added the [Status] In Progress label Jul 29, 2020

octaedro requested a review from a team as a code owner July 29, 2020 22:19

octaedro self-assigned this Jul 29, 2020

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 29, 2020

octaedro removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 29, 2020

octaedro removed the request for review from a team July 29, 2020 22:19

gwwar requested a review from a team July 29, 2020 22:21

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 29, 2020

gwwar reviewed Jul 29, 2020

View reviewed changes

octaedro removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 29, 2020

kwight reviewed Jul 30, 2020

View reviewed changes

client/my-sites/customer-home/cards/tasks/task.jsx Outdated Show resolved Hide resolved

kwight reviewed Jul 30, 2020

View reviewed changes

client/my-sites/customer-home/cards/tasks/task.jsx Show resolved Hide resolved

sixhours requested a review from a team August 5, 2020 13:33

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 5, 2020

octaedro removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 6, 2020

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Aug 6, 2020

Fernando Marichal added 4 commits September 4, 2020 11:16

Added "Finish store setup" card to My home

ec2b8fd

This commit adds the "Finish store setup" card to My home

Component renamed and refactored

42906e5

This commit changes the component "FinishStoreSetup" name and decouples it from "task.jsx"

Added query component

8c0d68f

This commit adds a query component and the code necessary to handle site-setup-ecommerce store

Modified card's params

8ed683f

Given some difficulties we currently have on the wc-admin side to get the params we need, the card was modified to not to use them for now.

octaedro force-pushed the add/store-setup-on-my-home branch from 920d663 to 8ed683f Compare September 4, 2020 14:40

octaedro removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Sep 4, 2020

Added comma at the end of the line

5e7386e

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Sep 7, 2020

octaedro removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Sep 7, 2020

timmyc reviewed Sep 7, 2020

View reviewed changes

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Sep 7, 2020

octaedro mentioned this pull request Sep 8, 2020

Add contextual information about store setup on My Home Automattic/wc-calypso-bridge#554

Closed

4 tasks

kwight reviewed Sep 8, 2020

View reviewed changes

Removed 'Finish store setup' from quick links

67ff5cf

This commit removes 'Finish store setup' from quick links

Added timing prop

b8235d4

This commit adds timing prop to the `Finish store setup` card

Added earnSection image to the card

7d5b15b

This commit adds the `earnSection` image to the card

kwight approved these changes Sep 15, 2020

View reviewed changes

octaedro merged commit 71517e6 into master Sep 16, 2020

octaedro deleted the add/store-setup-on-my-home branch September 16, 2020 16:54

matticbot removed [Status] In Progress [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Sep 16, 2020

timmyc mentioned this pull request Dec 12, 2020

WooCommerce Status Widget: Add Store Setup State woocommerce/woocommerce#28568

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added "Finish store setup" card to My Home #44547

Added "Finish store setup" card to My Home #44547

octaedro commented Jul 29, 2020 •

edited

Loading

matticbot commented Jul 29, 2020

matticbot commented Jul 29, 2020 •

edited

Loading

gwwar Jul 29, 2020 •

edited

Loading

gwwar Jul 29, 2020 •

edited

Loading

octaedro Aug 4, 2020

kwight Aug 4, 2020 •

edited

Loading

octaedro Aug 6, 2020 •

edited

Loading

kwight commented Aug 4, 2020 •

edited

Loading

sixhours commented Aug 5, 2020

olesyabrk commented Aug 5, 2020

octaedro commented Aug 6, 2020

kwight commented Aug 27, 2020

octaedro commented Aug 28, 2020

timmyc left a comment

kwight commented Sep 8, 2020

kwight commented Sep 8, 2020

kwight Sep 8, 2020

octaedro Sep 9, 2020

kwight Sep 10, 2020

octaedro Sep 11, 2020 •

edited

Loading

pmcpinto Sep 15, 2020

octaedro Sep 15, 2020 •

edited

Loading

sixhours commented Sep 8, 2020

octaedro commented Sep 9, 2020

kwight commented Sep 10, 2020

octaedro commented Sep 13, 2020

octaedro commented Sep 13, 2020

kwight commented Sep 14, 2020

octaedro commented Sep 15, 2020

sixhours commented Sep 15, 2020

octaedro commented Sep 15, 2020

kwight commented Sep 15, 2020

a8ci18n commented Sep 16, 2020

a8ci18n commented Sep 25, 2020

Added "Finish store setup" card to My Home #44547

Added "Finish store setup" card to My Home #44547

Conversation

octaedro commented Jul 29, 2020 • edited Loading

Changes proposed in this Pull Request

Testing instructions

matticbot commented Jul 29, 2020

matticbot commented Jul 29, 2020 • edited Loading

gwwar Jul 29, 2020 • edited Loading

Choose a reason for hiding this comment

gwwar Jul 29, 2020 • edited Loading

Choose a reason for hiding this comment

octaedro Aug 4, 2020

Choose a reason for hiding this comment

kwight Aug 4, 2020 • edited Loading

Choose a reason for hiding this comment

octaedro Aug 6, 2020 • edited Loading

Choose a reason for hiding this comment

kwight commented Aug 4, 2020 • edited Loading

sixhours commented Aug 5, 2020

olesyabrk commented Aug 5, 2020

octaedro commented Aug 6, 2020

kwight commented Aug 27, 2020

octaedro commented Aug 28, 2020

timmyc left a comment

Choose a reason for hiding this comment

kwight commented Sep 8, 2020

kwight commented Sep 8, 2020

kwight Sep 8, 2020

Choose a reason for hiding this comment

octaedro Sep 9, 2020

Choose a reason for hiding this comment

kwight Sep 10, 2020

Choose a reason for hiding this comment

octaedro Sep 11, 2020 • edited Loading

Choose a reason for hiding this comment

pmcpinto Sep 15, 2020

Choose a reason for hiding this comment

octaedro Sep 15, 2020 • edited Loading

Choose a reason for hiding this comment

sixhours commented Sep 8, 2020

octaedro commented Sep 9, 2020

kwight commented Sep 10, 2020

octaedro commented Sep 13, 2020

octaedro commented Sep 13, 2020

kwight commented Sep 14, 2020

octaedro commented Sep 15, 2020

sixhours commented Sep 15, 2020

octaedro commented Sep 15, 2020

kwight commented Sep 15, 2020

a8ci18n commented Sep 16, 2020

a8ci18n commented Sep 25, 2020

octaedro commented Jul 29, 2020 •

edited

Loading

matticbot commented Jul 29, 2020 •

edited

Loading

gwwar Jul 29, 2020 •

edited

Loading

gwwar Jul 29, 2020 •

edited

Loading

kwight Aug 4, 2020 •

edited

Loading

octaedro Aug 6, 2020 •

edited

Loading

kwight commented Aug 4, 2020 •

edited

Loading

octaedro Sep 11, 2020 •

edited

Loading

octaedro Sep 15, 2020 •

edited

Loading