Wp-calypso: WooCommerce: Add Store Dashboard UX for "Fledgling" Mode / After Setup Complete

[allendav]

See #13466 for design (note that both the "setup mode" design and the "ongoing maintenance mode / after setup" design are in that issue

Includes prompts for "before the first order arrives" store tasks, i.e.:

• publicize
• recommended reading
• example order prompt
• view and test your store prompt

TODO:

• [x] Add setupChoices endpoint
• [ ] Add fledgling view and switch between egg and fledgling based on setupChoices saved on WPCOM https://github.com/Automattic/wp-calypso/pull/14339
• [ ] Set opted_out_of_shipping_setup, opted_out_of_taxes_setup, tried_customizer_during_initial_setup on WPCOM for the site when those links are clicked on egg view
• [x] Set finished_initial_setup on WPCOM for the site when merchant completes egg view (should then kick them over to fledgling view
• [ ] Connect reading-widget subscribe button

See also #13612 for "Egg" and #14205 for "Momma" (note that some Fledgling components are also going to be used on "Momma" as well)

[allendav]

Pasting in the mock for reference

[allendav]

@jameskoster @kellychoffman I'm starting to build this out now and I have a few questions:

1. What triggers switching from Fledgling to Momma? Receiving their first order?

2. Your store is ready & the world is…
   2.1 Each of those six service icons is a link to share the store URL, right? And those links open a new tab directly to the linked service, right? (i.e. no WordPress.com involvement)
   Fine tune the appearance…
   2.2 This box content does not need to change dynamically, right? i.e. it is ok to hardcode it as a theme promotion, right?
   2.3 The view themes button should navigate to wordpress.com/themes/:site right?

3. Secure your store with VaultPress…
   3.1 What if the store already has VaultPress? Should this display something else?
   3.2 That View info and plans button should navigate to wordpress.com/plans/:site right?

4. Recommended reading…
   4.1 I’m taking it that that should show the most recent 3 articles from something like the starting-your-business tag’s feed? https://woocommerce.com/tag/starting-your-business/
   4.2 The subscribe for newsletter prompt - do we want to send them over to https://woocommerce.com/woocommerce-list-sign/ to do the sign up so we can get those market segment questions answered (and make sure we put them on the right lists?) or do we want to just sign them up without leaving that view and with “Store Owner” auto-selected in the background? cc @avivapinchas
   4.3 If they are already subscribed, should we just hide that div?

5. Looking for orders and reports? … View an example order
   5.1 You’re thinking something like sending them to wordpress.com/store/orders/:site/example and then displaying a non-editable example order perhaps? Or are you thinking of just sending them to a help document? Or something else?

6. Test all the things - Just opens a new tab to their store, right?

7. Extensions…
   7.1 We always display just two, right? Where does the list come from? Same place as :site/wp-admin/admin.php?page=wc-addons&section=featured gets its from? I think that is about 13 extensions
   7.2 We should NOT display any extensions they already have, right?
   7.3 Should the choice of which two out of the “feed” just be random?
   7.4 The more info link would open a new tab to something like https://woocommerce.com/products/smart-coupons/ right? Are there utm tags we should add to that URL for tracking? cc @avivapinchas
   7.5 The purchase and activate button - what are you interested in there - we could spend a lot of time on that, connecting it through jetpack manage and woocommerce helper to pull off a purchase and remote install, but that’s not a small effort. cc @toddwilkens
   7.6 View more extensions - does that swap out the two extensions displayed or does it open a new tab to https://woocommerce.com/products , or something else?

8 All the way at the top right there is a Manage button - what does it do in Fledgling view?

[jameskoster]

What triggers switching from Fledgling to Momma? Receiving their first order?

2.1 Each of those six service icons is a link to share the store URL, right? And those links open a new tab directly to the linked service, right? (i.e. no WordPress.com involvement)

2.2 This box content does not need to change dynamically, right? i.e. it is ok to hardcode it as a theme promotion, right?

4.1 I’m taking it that that should show the most recent 3 articles from something like the starting-your-business tag’s feed? https://woocommerce.com/tag/starting-your-business/

4.3 If they are already subscribed, should we just hide that div?

Test all the things - Just opens a new tab to their store, right?

Yes to all

2.3 The view themes button should navigate to wordpress.com/themes/:site right?

Undecided on this. Most of the themes there won't fully support wc so we probably shouldn't be highlighting those. It'd be better to send them to the Storefront Child Theme page (especially as they'll already be using Storefront) but the purchase experience isn't exactly perfect yet.

Keen to hear @kellychoffman's thoughts here. Given that we're probably not promoting VP, we could potentially drop this whole row to begin with.

Secure your store with VaultPress…

As mentioned in Slack, not sure we'll be displaying this section.

4.2 The subscribe for newsletter prompt - do we want to send them over to https://woocommerce.com/woocommerce-list-sign/ to do the sign up so we can get those market segment questions answered (and make sure we put them on the right lists?) or do we want to just sign them up without leaving that view and with “Store Owner” auto-selected in the background? cc @avivapinchas

I'd rather not send them away from Calypso. I've shared a design to do this inline in Slack. Adding here as well;

The checkboxes appear when you focus on the email input.

‘Store owner’ checkbox is pre-selected as this is the most likely type of user.

It’d be really nice if we could give a real-time ‘success’ message and then hide the whole form with a slideup animation when they click the subscribe button.

5.1 You’re thinking something like sending them to wordpress.com/store/orders/:site/example and then displaying a non-editable example order perhaps?

Bingo.

Test all the things - Just opens a new tab to their store, right?

Right.

7.1 We always display just two, right? Where does the list come from? Same place as :site/wp-admin/admin.php?page=wc-addons&section=featured gets its from? I think that is about 13 extensions

To begin with I think we should only display extensions that have been 'calypsofied'. After that the most popular. It'd be nice to do something contextual along the road, but that's out of the scope for v1. Looks like there might not be any 'calypsofied' extensions for launch, so this section might need to go as well. I'd say leave it out for now, we can revisit as and when extensions become available.

8 All the way at the top right there is a Manage button - what does it do in Fledgling view?

Given 'fledgling' is a temporary state I think we can remove this.

[allendav]

Thank you @jameskoster - this gives me plenty to work on! :)

[jameskoster]

Quick update based on our tax chat this afternoon; for extensions, let's just highlight one of our tax reporting extensions.

Also re: themes, I'm gonna cc @warrendholmes for confirmation of when/which Storefront themes will be available on .com.

[avivapinchas]

@allendav We don't use tags consistently on the blog - speaking with @nicoleckohler, sounds like the category 'Start your store' would be most relevant: https://woocommerce.com/start-your-store/

cc: @MarinaWoo

[allendav]

@jameskoster - on "fledgling" here, the "sharing" widget is wider than the rest of the content, but on "momma" ( #14205 ) it is the same width as the rest of the content - how about we make this match "momma"?

[kellychoffman]

Secure your store with VaultPress…
3.1 What if the store already has VaultPress? Should this display something else?
3.2 That View info and plans button should navigate to wordpress.com/plans/:site right?

@allendav - I chatted with Beau and we no longer refer to VaultPress; its only as backups. BUT we don't have to worry about it because the user will already have backups with Jetpack because of AT. So let's remove this section.

[jameskoster]

how about we make this match "momma"

Sure, let's make them to same size to begin with, then tweak if we feel necessary.

[kellychoffman]

Done for initial release. Can reopen or create new issue for next version iterations. @allendav: reopen if i am wrong.