Try and Customize WP.com theme on Jetpack.

client/my-sites/themes/single-site-jetpack.jsx

@@ -91,7 +91,8 @@ export default connectOptions(
 							/>
 							<ConnectedThemesSelection
 								options={ [
-									'activateOnJetpack'
+									'activateOnJetpack',
+									'tryAndCustomizeOnJetpack'
 								] }
 								search={ search }
 								tier={ tier }

client/my-sites/themes/theme-options.js

@@ -10,7 +10,11 @@ import { has, identity, mapValues, pick, pickBy } from 'lodash';
  * Internal dependencies
  */
 import config from 'config';
-import { activateTheme, activateWpcomThemeOnJetpack } from 'state/themes/actions';
+import {
+	activateTheme,
+	activateWpcomThemeOnJetpack,
+	tryAndCustomizeWpcomThemeOnJetpack
+} from 'state/themes/actions';
 import {
 	getThemeSignupUrl as getSignupUrl,
 	getThemePurchaseUrl as getPurchaseUrl,
@@ -88,6 +92,16 @@ const tryandcustomize = {
 	hideForTheme: ( state, theme, siteId ) => isActive( state, theme.id, siteId )
 };
 
+const tryAndCustomizeOnJetpack = {
+	label: i18n.translate( 'Try & Customize' ),
+	header: i18n.translate( 'Try & Customize on:', {
+		comment: 'label in the dialog for opening the Customizer with the theme in preview'
+	} ),
+	action: tryAndCustomizeWpcomThemeOnJetpack,
+	hideForSite: ( state, siteId ) => ! canCurrentUser( state, siteId, 'edit_theme_options' ),
+	hideForTheme: ( state, theme, siteId ) => isActive( state, theme.id, siteId )
+};
+
 // This is a special option that gets its `action` added by `ThemeShowcase` or `ThemeSheet`,
 // respectively. TODO: Replace with a real action once we're able to use `SitePreview`.
 const preview = {
@@ -140,6 +154,7 @@ const ALL_THEME_OPTIONS = {
 	activate,
 	activateOnJetpack,
 	tryandcustomize,
+	tryAndCustomizeOnJetpack,
 	signup,
 	separator,
 	info,

client/state/action-types.js

@@ -548,6 +548,9 @@ export const THEME_TRANSFER_INITIATE_REQUEST = 'THEME_TRANSFER_INITIATE_REQUEST'
 export const THEME_TRANSFER_INITIATE_SUCCESS = 'THEME_TRANSFER_INITIATE_SUCCESS';
 export const THEME_TRANSFER_STATUS_FAILURE = 'THEME_TRANSFER_STATUS_FAILURE';
 export const THEME_TRANSFER_STATUS_RECEIVE = 'THEME_TRANSFER_STATUS_RECEIVE';
+export const THEME_TRY_AND_CUSTOMIZE_ON_JETPACK_REQUEST = 'THEME_TRY_AND_CUSTOMIZE_ON_JETPACK_REQUEST';
+export const THEME_TRY_AND_CUSTOMIZE_ON_JETPACK_REQUEST_SUCCESS = 'THEME_TRY_AND_CUSTOMIZE_ON_JETPACK_REQUEST_SUCCESS';
+export const THEME_TRY_AND_CUSTOMIZE_ON_JETPACK_REQUEST_FAILURE = 'THEME_TRY_AND_CUSTOMIZE_ON_JETPACK_REQUEST_FAILURE';
 export const USER_RECEIVE = 'USER_RECEIVE';
 export const WORDADS_STATUS_REQUEST = 'WORDADS_STATUS_REQUEST';
 export const WORDADS_STATUS_REQUEST_FAILURE = 'WORDADS_STATUS_REQUEST_FAILURE';

client/state/themes/actions.js

@@ -3,6 +3,7 @@
  */
 import { map, property, delay } from 'lodash';
 import debugFactory from 'debug';
+import page from 'page';
 
 /**
  * Internal dependencies
@@ -23,6 +24,9 @@ import {
 	THEME_ACTIVATE_REQUEST,
 	THEME_ACTIVATE_REQUEST_SUCCESS,
 	THEME_ACTIVATE_REQUEST_FAILURE,
+	THEME_TRY_AND_CUSTOMIZE_ON_JETPACK_REQUEST,
+	THEME_TRY_AND_CUSTOMIZE_ON_JETPACK_REQUEST_SUCCESS,
+	THEME_TRY_AND_CUSTOMIZE_ON_JETPACK_REQUEST_FAILURE,
 	THEME_BACK_PATH_SET,
 	THEME_CLEAR_ACTIVATED,
 	THEME_UPLOAD_START,
@@ -41,7 +45,7 @@ import {
 	recordTracksEvent,
 	withAnalytics
 } from 'state/analytics/actions';
-import { getActiveTheme, getLastThemeQuery } from './selectors';
+import { getActiveTheme, getLastThemeQuery, getThemeCustomizeUrl } from './selectors';
 import {
 	getThemeIdFromStylesheet,
 	filterThemesForJetpack,
@@ -363,6 +367,49 @@ export function clearActivated( siteId ) {
 	};
 }
 
+/**
+ * Triggers a network request to install WordPress.com theme on Jetpack site.
+ * After installataion it switches page to the customizer
+ * Requires Jetpack 4.4
+ *
+ * @param  {String}   siteId       Jetpack Site ID
+ * @param  {String}   wpcomThemeId WP.com Theme ID
+ * @return {Function}              Action thunk
+ */
+export function tryAndCustomizeWpcomThemeOnJetpack( themeId, siteId ) {
+	//Add -wpcom suffix. This suffix tells the endpoint that we want to
+	//install WordPress.com theme. Without the suffix endpoint would look
+	//for theme in .org
+	const suffixedThemeId = themeId + '-wpcom';
+
+	return ( dispatch, getState ) => {
+		dispatch( {
+			type: THEME_TRY_AND_CUSTOMIZE_ON_JETPACK_REQUEST,
+			siteId,
+			suffixedThemeId
+		} );
+
+		return wpcom.undocumented().installThemeOnJetpack( siteId, suffixedThemeId )
+			.then( ( theme ) => {
+				dispatch( {
+					type: THEME_TRY_AND_CUSTOMIZE_ON_JETPACK_REQUEST_SUCCESS,
+					siteId,
+					suffixedThemeId
+				} );
+				const url = getThemeCustomizeUrl( getState(), theme, siteId );
+				page( url );
+			} )
+			.catch( ( error ) => {
+				dispatch( {
+					type: THEME_TRY_AND_CUSTOMIZE_ON_JETPACK_REQUEST_FAILURE,
+					themeId: suffixedThemeId,
+					siteId,
+					error
+				} );
+			} );
+	};
+}
+
 /**
  * Triggers a network request to activate a specific wpcom theme on a given Jetpack site.
  * First step of the process is the installation of the theme on Jetpack site.