My Home: Add "Connect social media accounts" Task

[Aurorum]

Changes proposed in this Pull Request

This creates a section for Recommended Tasks, and establishes the first one: "Connect social media accounts". I should note that I've tried to ensure that other tasks can easily be added within the same file though.

Testing instructions

Firstly, verify that this only displays if the site has no Publicize connections and when the checklist is hidden. The skip button should also dismiss the task, but not the card - other tasks should still appear. It'd probably be easier to demonstrate this with another task, but there's only one for now.

When clicking the primary button, you should be redirected to Marketing. A Guided Tour should appear if you're on a desktop device.

Issues:

• This is a temporary illustration as I'm not sure how to access the one in the original issue (cc @danhauk)
• The Guided Tour moves to the left of the screen before appearing. I'm not sure if this is an existing issue with other tours or how to fix this though

Part of #40734

[gwwar]

Thanks for jumping into this one @Aurorum! 💖I'm going to ask folks some open questions to help think though next steps

• @danhauk can we use the new illustration styles with colors? If not would it be possible to provide an image that we can use?
• +1 for @Aurorum's suggestion of the Guided Tour, it makes a lot of sense ✨ How much guidance do folks think we should provide here @lcollette, for example should we walk through a full twitter connection? Maybe we should also provide a back to My Home link?
  
• Fine to leave for the task container PR, but what should the secondary link "skip for now" do when there's only one task, when there's many tasks?
• I spotted a couple of unrelated glitches from tours in general, but I'll file and link to them in a bit.

[gwwar]

I'll try and see if we can use the new ✨ illustrations for this one.

[mmtr]

Updated the PR title to reflect that this is focusing on the social connect task (so this is now part of #40734 rather than fixing it).

[mmtr]

This works quite well for me, @Aurorum. Can we maybe avoid rendering the task card until we add it to the API?

Also noted the padding on the card is not homogenous (lower padding bottom than top).

I also agree with @gwwar above and think it'd be good if we link back to My Home when the guided tour is over. For reference, this how it looks on the site title update guided tour:

I'll try and see if we can use the new ✨ illustrations for this one.

I think we can handle that on a follow-up PR and land the card with a temporary illustration if we make sure the task card doesn't show up until the API returns it.

[Aurorum]

I added the Guided Tour but it looks like there's an issue with the z-index of the elements. Will explore it soon and resolve the font & other guided tour issue. :)

[Aurorum]

Looks like the tests are failing on setup here too...not sure why 😕

[gwwar]

I think Circle needs to roll back an update. We're seeing similar issues on other PRs

[gwwar]

It may be worth rebasing @Aurorum with master, we've just switched over to yarn from npm. Let me know if you had any questions getting setup.

https://github.com/Automattic/wp-calypso#getting-started

[Aurorum]

Thanks @gwwar! I've managed to get it working with yarn.

I've fixed the issue with the support article dialog displaying beneath the guided tour, but I'm still struggling to add an extra step to the tour for when after a connection has been made. I've tried using <Continue when> and adding a selector in client/state/ui/guided-tours/contexts.js:

/**
 * Returns true if the selected site has any publicize connections.
 *
 * @param {object} state Global state tree
 * @returns {boolean} True if site has any publicize connections, false otherwise.
 */
export const doesSelectedSiteHavePublicizeConnections = state => {
	const siteId = getSelectedSiteId( state );
	if ( ! siteId ) {
		return false;
	}
	return getConnectionsBySiteId( state, siteId ).length > 0;
};

But no success with that, even after querying Publicize connections. Any ideas, or should I commit what I've got so far (albeit in a broken state)?

[gwwar]

Thanks @Aurorum 💖

[gwwar]

I'm not that familiar with guided tours but I think this is a good chunk to get in as is. We can also set this up so we can test this with the experimental layout flag that we added in #41145 to make this a little easier to iterate on.

[akirk]

Could we please not hardcode values into translatable strings? This should be

translate( '%d minute', '%d minutes', { count: 3, arguments: [ 3 ] } )

like it's done in all the other places where we already do this, for example here: https://github.com/Automattic/wp-calypso/blob/master/client/my-sites/customer-home/cards/tasks/checklist-site-setup/wpcom-checklist/component.jsx#L263

[Aurorum]

Oops, thank you! I opened #41271 to address that. :)