Signup: move MLB flow to Calypso

[oskosk]

The current MLB signup flow is outside of Calypso. A new flow mlb is created by this PR.

Live preview here:

https://calypso.live/start/mlb.com/?branch=add/move-mlb-flow-to-calypso

Testing instructions

• Go to http://calypso.localhost:3000/start/mlb.com
• Select a Team and theme variation (fan, modern, classic).
• Choose a blog name.
• Sign up if not already authenticated.

Task Roadmap

• Create new signup flow mlb with steps: mlb-themes, domains and user.
• Create step mlb-themes.
  • The step should have a select-like component/element with MLB teams choices. When changing the selection, the theme thumbnails should change to reflect team alternatives.
  • The theme selection Should show 3 themes thumbnails per team selection with Fan, Modern and Retro alternatives
  • Create an MlbThemeThumbnail component (maybe compositing over ThemeThumbnail or using the ThemeList component as proposed here ) Use the Theme component.
  • Make this step set Theme Option for user selected Team via wpcom API. (Currently not supported).
  • There should be a default theme for when the user clicks StepWrapper's Skip button without selecting a particular theme.
  • Add mlb property to analytics call.
• Create step mlb-domains. Needs to be like the step domains but also proposing the special .mlblogs.com domain for free.
• Style copytext after asking for advice on this topic.

Previous MLB signup flow

Current status

[nb]

See #431.

[scruffian]

There's an extra back tick here :)

[scruffian]

Why do we need this?

[oskosk]

Do you mean delayApiRequestUntilComplete ? Or the whole definition? (as opposed to using just the Site step?)

If you meant the latter I can say that at first, I replicated the domains step definition, then changed it to be similar to site definition.

The thing is that the way the API will handle the creation of .mlblogs.com sites is still to be defined.
If it's implemented as a free product, then this step may be needing to provide the domainItem dependency also instead of just the siteSlug and use an API request function like stepAction.addDomainsItemToCart instead of stepAction.createSite.

And the mlb-domain step component would need to have some extra logic for handling submit. (Currently the Site step is handling the submit, sending the step data to the API using stepActions.createSite which demands less properties than stepActions.addDomainsItemToCart when submitting signup step.

[scruffian]

delayApiRequestUntilComplete is only needed if the user is going to go back and edit the content before the end of the flow. I don't think you need it here.

You're right though there is still a big question mark about how we implement the API. For now your solution of using createSite is fine.

[oskosk]

So, in this case the anonymous user should not be able to get back to domain screen?

I mean, If the user is logged, there's no extra step after selecting domain. But if the user is anonymous there's still one more screen (the user step) where there's a back button that would allow to alter the domain.

[scruffian]

I thought about it some more and I think you're right. Lets leave this how it is; that's the way its done in other flows.

[oskosk]

New flow working

Now using the Theme component instead of a MlbThemeThumbnail which previously was a cannibalized ThemeThumbnail (from the theme-selection signup step).
@nb @scruffian please check last PR status.

[folletto]

Design wise, the flow seems good, and it works ok. 👍

If possible, but as a "nice to have", I'd suggest some smaller style changes to make it tighter:

This also requires a small "trick" in the dropdown, having both "Select your team..." (new) and "MLB" pointing to the default MLB themes. I think it's a good compromise that causes no confusion. :)

[oskosk]

After applying @folletto recommendations

[folletto]

Tested on Chrome, looks good design wise. :)

Two minor details (definitely not blockers):

1. I'd try to make the dropdown the same width as the theme thumbnails.
2. I'd make the ToS line (.mlb-theme-selection__terms p) with a font-size of 11px.

[oskosk]

Updates from #1628 are now taken in account here.

[fabianapsimoes]

@oskosk what's the status of this PR?

[oskosk]

@fabianapsimoes I've been keeping this up to date with master. Also fixed for complying with lodash 4.x new interface.

Yesterday, I found a recent an issue. The URL for this signup flow /start/mlb is being interpreted by Calypso as if mlb was a language. This started happening when the updates introduced by #3177 where merged. So, now, when you load /start/mlb the page gets reloaded ad infinitum. I'm working towards a solution.

Besides that, there are still two things are for the complete functionality of the MLB signup flow.

Two updates on the API are needed.

• One that allows the registration of free WordPress.com sites under the domain .mlblogs.com.
• And another one that allows to configure a theme option on the newly created site. (this is how Team specific MLB themes are implemented).

[lancewillett]

@oskosk Did this launch fully yet (including API changes)? Or is it abandoned?

[oskosk]

This did not launch. Not int my plans to abandon it, but I haven't found the time to articulate the missing pieces.

[oskosk]

@lancewillett I've just updated this branch to have no conflicts with master and no conflicts with the language-recognition-from-URL mechanism mentioned in previous comment.

[lancewillett]

Cool — next step, maybe code review and launch? :) I'm not pressuring it but wouldn't want to lose all your hard work if it gets stale or old.

[rickybanister]

@lancewillett you sound like a racketeer :P

[lancewillett]

Abandoning and closing since we have bigger priorities at the moment.