Themes: 'Thanks' modal on activation from Theme Sheet

[seear]

Acknowledge activation of a theme from the theme sheet with the existing 'Thanks' modal dialog.

Currently only works when a site is selected. A site selector for the sheet is coming soon.

To Test

• Go to http://calypso.localhost:3000/design and choose a site
• Click on the ... button for a theme and select Details
• Click the Pick this design button
  Expected: The modal should display
  Expected: The first link in the modal should be to the customizer
• Check that the links in the modal work as expected

[ockham]

There already is an EmptyComponent in test/test/helpers/react/empty-component -- can we re-use that? (You could add your README to that directory tho.)

[seear]

There already is an EmptyComponent in test/test/helpers/react/empty-component -- can we re-use that?

Yeah, good point, and I thought about this a bit at the time. In the end I wasn't totally happy with the tests and production code sharing the same empty component, since it seems they serve different purposes. Hopefully the test version will be longer lived than this production one.

[ockham]

Please don't unless there's a way more compelling reason than elsewhere :-)

What about changing the trackClick method as follows instead:

boundTrackClick: function( eventName ) {
  return Helpers.trackClick.bind( null, 'current theme', eventName );
}

That should allow usage like

onClick={ this.boundTrackClick( 'features' )}

[ockham]

In the end I wasn't totally happy with the tests and production code sharing the same empty component, since it seems they serve different purposes.

Yeah. :-/ Alternatively, tests could also use the production variant. But I guess I'm fine with the dupe for now since it's such a small component.

[ockham]

Consider using the second argument to the connect call, mapDispatchToProps, instead:

export default connect(
    ( state ) => {
        /* ... */
    },
    { clearActivated }
)( ThemeSheet );

(and just use clearActivated={ this.props.clearActivated } then -- could do the same with the other actions you dispatch, BTW.)

[ockham]

Noting here that with premium themes, the flow works fine, but I end up at /design/<mysite> after purchase (instead of back at the theme sheet). Reason:

wp-calypso/client/my-sites/upgrades/checkout-thank-you/index.jsx

Line 127 in 3673e90

page.redirect( '/design/' + this.props.selectedSite.slug );

Not within the scope of this PR, but we should probably file an issue after this one is merged to keep track.

[ockham]

Left a couple of nitpicks. Looks good overall, and tests well!

[seear]

Regarding the jsx-no-bind:

Please don't unless there's a way more compelling reason than elsewhere :-)

I disagree here, because this component will never be on a hot path, so it's not worth obfuscating code to prevent the eslint warning.

I have moved to your suggestion because the event param was preventing the click verb being appended in helpers.js, but note that there is still a bind for each prop—it's just that eslint is not aware of it!

[ockham]