Woocommerce-admin: Display modal with more info about the new home screen

[pmcpinto]

User story:
As a merchant
I want to have more context when I arrive at the home screen
So I have a sense of what it's possible to do in this page

Description: now that we have the home screen implemented, it makes sense to display a modal providing more context about what to expect from this new screen and at the same time replace the current modal that we have for new users. We can replace the current modal with the Guide component from WP Core.

Acceptance Criteria:

• [x] Display the intro guide when a new user visits the home screen for the first time, after completing or skipping the store profiler
• [x] Remove the existing modal that we display for new users
• [x] Display the intro guide when existing users visit the home screen for the first time
• [x] The intro guide is going to have three different tabs (welcoming the user, content about the inbox panel and about the stats area)

Event tracking:
TBD

Additional links:
Design mockup

[becdetat]

Estimate: 1

[joshuatf]

Do we have a component we can use for the carousel used inside the modal? If yes, then probably a 1 for this, otherwise I might estimate closer to 3.

[timmyc]

Yes there is the guide component linked above. Also looks like there is only a prop for a callback when the guide is complete, and no way to hook in to per-page views. So from a tracks standpoint we could track the opening of the guide ( but in this case we open it by default ) and the closing of the guide only, but not individual page views... unless we have actions on those pages users might click on ( i.e. external links ). So I agree with the estimate of 1 on this too.

[pmcpinto]

So from a tracks standpoint we could track the opening of the guide ( but in this case we open it by default ) and the closing of the guide only, but not individual page views... unless we have actions on those pages users might click on ( i.e. external links ).

👍 tracking that will be enough

[psealock]

I say closer to 3 depending on how the Guide component works out and how closely we want to match the design v. using whats available.

[mattsherman]

Gutenberg's Guide component seems to meet our needs, as Timmy pointed out. So, assuming that, I'd estimate a 1.

[jameskoster]

👋

Two things that will likely affect the estimates here, one more than the other 🙈

Firstly we might add another slide, and tweak the copy. More details in JRYi-4Ng-p2

Secondly, I wonder if we might need to build some kind of wrapper component for the illustrations. Our intention is to treat illustrations as UI, which means their colors should adapt to user preferences just like other components (buttons etc). We're using SVG for these graphics, so my thinking was that a new illustration component could accept a color value (most likely $theme-color) and pass it on to all the relevant elements within the svg. If this is something we need to handle separately, I totally understand. It's been on my todo list to p2 this, but didn't get around to it yet :(

[timmyc]

One other comment here, we need to remember to not ship large image assets whenever possible. Guessing the SVGs will help, but just wanted to remind folks of our need to stay aware of our build size.

[jameskoster]

Thanks for the reminder @timmyc. Yeah the svgs should help a lot, I'm confident we can keep them in a 5 - 20kb size range. We're also assembling an illustration library so that we can re-use as much as possible, rather than adding new assets.

[jameskoster]

Updated illustrations available to download here.

Updated content for the slides in Figma here.

[pmcpinto]

Updated issue description & title to cover both cases: new and existing users.