Themes, Actions: Install WP.com theme on Jetpack action. (#9924)

Automattic · Dec 19, 2016 · c9474af · c9474af
1 parent ed914fa
commit c9474af
Show file tree

Hide file tree

Showing 5 changed files with 303 additions and 27 deletions.
diff --git a/client/state/action-types.js b/client/state/action-types.js
@@ -535,6 +535,9 @@ export const THEME_ACTIVATE_REQUEST_FAILURE = 'THEME_ACTIVATE_REQUEST_FAILURE';
 export const THEME_REQUEST = 'THEME_REQUEST';
 export const THEME_REQUEST_FAILURE = 'THEME_REQUEST_FAILURE';
 export const THEME_REQUEST_SUCCESS = 'THEME_REQUEST_SUCCESS';
+export const THEME_INSTALL = 'THEME_INSTALL';
+export const THEME_INSTALL_SUCCESS = 'THEME_INSTALL_SUCCESS';
+export const THEME_INSTALL_FAILURE = 'THEME_INSTALL_FAILURE';
 export const THEME_BACK_PATH_SET = 'THEME_BACK_PATH_SET';
 export const THEME_CLEAR_ACTIVATED = 'THEME_CLEAR_ACTIVATED';
 export const THEME_UPLOAD_CLEAR = 'THEME_UPLOAD_CLEAR';

diff --git a/client/state/themes/actions.js b/client/state/themes/actions.js
@@ -13,29 +13,32 @@ import {
 	ACTIVE_THEME_REQUEST,
 	ACTIVE_THEME_REQUEST_SUCCESS,
 	ACTIVE_THEME_REQUEST_FAILURE,
-	THEME_REQUEST,
-	THEME_REQUEST_SUCCESS,
-	THEME_REQUEST_FAILURE,
-	THEMES_RECEIVE,
-	THEMES_REQUEST,
-	THEMES_REQUEST_SUCCESS,
-	THEMES_REQUEST_FAILURE,
 	THEME_ACTIVATE_REQUEST,
 	THEME_ACTIVATE_REQUEST_SUCCESS,
 	THEME_ACTIVATE_REQUEST_FAILURE,
 	THEME_BACK_PATH_SET,
 	THEME_CLEAR_ACTIVATED,
-	THEME_UPLOAD_START,
-	THEME_UPLOAD_SUCCESS,
-	THEME_UPLOAD_FAILURE,
-	THEME_UPLOAD_CLEAR,
-	THEME_UPLOAD_PROGRESS,
+	THEME_INSTALL,
+	THEME_INSTALL_SUCCESS,
+	THEME_INSTALL_FAILURE,
+	THEME_REQUEST,
+	THEME_REQUEST_SUCCESS,
+	THEME_REQUEST_FAILURE,
 	THEME_TRANSFER_INITIATE_FAILURE,
 	THEME_TRANSFER_INITIATE_PROGRESS,
 	THEME_TRANSFER_INITIATE_REQUEST,
 	THEME_TRANSFER_INITIATE_SUCCESS,
 	THEME_TRANSFER_STATUS_FAILURE,
 	THEME_TRANSFER_STATUS_RECEIVE,
+	THEME_UPLOAD_START,
+	THEME_UPLOAD_SUCCESS,
+	THEME_UPLOAD_FAILURE,
+	THEME_UPLOAD_CLEAR,
+	THEME_UPLOAD_PROGRESS,
+	THEMES_RECEIVE,
+	THEMES_REQUEST,
+	THEMES_REQUEST_SUCCESS,
+	THEMES_REQUEST_FAILURE,
 } from 'state/action-types';
 import {
 	recordTracksEvent,
@@ -349,6 +352,43 @@ export function themeActivated( themeStylesheet, siteId, source = 'unknown', pur
 	return themeActivatedThunk; // it is named function just for testing purposes
 }
 
+/**
+ * Triggers a network request to install a WordPress.org or WordPress.com theme on a Jetpack site.
+ * To install a theme from WordPress.com, suffix the theme name with '-wpcom'. Note that this options
+ * requires Jetpack 4.4
+ *
+ * @param  {String}   themeId Theme ID. If suffixed with '-wpcom', install from WordPress.com
+ * @param  {String}   siteId  Jetpack Site ID
+ * @return {Function}         Action thunk
+ */
+export function installTheme( themeId, siteId ) {
+	return ( dispatch ) => {
+		dispatch( {
+			type: THEME_INSTALL,
+			siteId,
+			themeId
+		} );
+
+		return wpcom.undocumented().installThemeOnJetpack( siteId, themeId )
+			.then( ( theme ) => {
+				dispatch( receiveTheme( theme ) );
+				dispatch( {
+					type: THEME_INSTALL_SUCCESS,
+					siteId,
+					themeId
+				} );
+			} )
+			.catch( ( error ) => {
+				dispatch( {
+					type: THEME_INSTALL_FAILURE,
+					siteId,
+					themeId,
+					error
+				} );
+			} );
+	};
+}
+
 /**
  * Returns an action object to be used in signalling that theme activated status
  * for site should be cleared

diff --git a/client/state/themes/reducer.js b/client/state/themes/reducer.js
@@ -9,23 +9,26 @@ import { mapValues, omit } from 'lodash';
  */
 import ThemeQueryManager from 'lib/query-manager/theme';
 import {
+	ACTIVE_THEME_REQUEST,
+	ACTIVE_THEME_REQUEST_SUCCESS,
+	ACTIVE_THEME_REQUEST_FAILURE,
+	DESERIALIZE,
+	SERIALIZE,
+	SERVER_DESERIALIZE,
+	THEME_ACTIVATE_REQUEST,
+	THEME_ACTIVATE_REQUEST_SUCCESS,
+	THEME_ACTIVATE_REQUEST_FAILURE,
+	THEME_CLEAR_ACTIVATED,
+	THEME_INSTALL,
+	THEME_INSTALL_SUCCESS,
+	THEME_INSTALL_FAILURE,
 	THEME_REQUEST,
 	THEME_REQUEST_SUCCESS,
 	THEME_REQUEST_FAILURE,
 	THEMES_RECEIVE,
 	THEMES_REQUEST,
 	THEMES_REQUEST_SUCCESS,
 	THEMES_REQUEST_FAILURE,
-	THEME_ACTIVATE_REQUEST,
-	THEME_ACTIVATE_REQUEST_SUCCESS,
-	THEME_ACTIVATE_REQUEST_FAILURE,
-	THEME_CLEAR_ACTIVATED,
-	ACTIVE_THEME_REQUEST,
-	ACTIVE_THEME_REQUEST_SUCCESS,
-	ACTIVE_THEME_REQUEST_FAILURE,
-	SERIALIZE,
-	DESERIALIZE,
-	SERVER_DESERIALIZE,
 } from 'state/action-types';
 import {
 	getSerializedThemesQuery,
@@ -159,6 +162,34 @@ export function themeRequests( state = {}, action ) {
 	return state;
 }
 
+/**
+ * Returns the updated Jetpack site wpcom theme install requests state after an action has been
+ * dispatched. The state reflects a mapping of site ID, theme ID pairing to a
+ * boolean reflecting whether a request for the theme install is in progress.
+ *
+ * @param  {Object} state  Current state
+ * @param  {Object} action Action payload
+ * @return {Object}        Updated state
+ */
+export function themeInstalls( state = {}, action ) {
+	switch ( action.type ) {
+		case THEME_INSTALL:
+		case THEME_INSTALL_SUCCESS:
+		case THEME_INSTALL_FAILURE:
+			return Object.assign( {}, state, {
+				[ action.siteId ]: Object.assign( {}, state[ action.siteId ], {
+					[ action.themeId ]: THEME_INSTALL === action.type
+				} )
+			} );
+
+		case SERIALIZE:
+		case DESERIALIZE:
+			return {};
+	}
+
+	return state;
+}
+
 /**
  * Returns the updated site theme requests error state after an action has been
  * dispatched. The state reflects a mapping of site ID, theme ID pairing to a
@@ -314,6 +345,7 @@ export default combineReducers( {
 	queryRequests,
 	queryRequestErrors,
 	lastQuery,
+	themeInstalls,
 	themeRequests,
 	themeRequestErrors,
 	activeThemes,

diff --git a/client/state/themes/test/actions.js b/client/state/themes/test/actions.js
@@ -15,18 +15,21 @@ import {
 	THEME_ACTIVATE_REQUEST_SUCCESS,
 	THEME_ACTIVATE_REQUEST_FAILURE,
 	THEME_CLEAR_ACTIVATED,
+	THEME_INSTALL,
+	THEME_INSTALL_SUCCESS,
+	THEME_INSTALL_FAILURE,
 	THEME_REQUEST,
 	THEME_REQUEST_SUCCESS,
 	THEME_REQUEST_FAILURE,
+	THEME_TRANSFER_INITIATE_FAILURE,
+	THEME_TRANSFER_INITIATE_REQUEST,
+	THEME_TRANSFER_INITIATE_SUCCESS,
+	THEME_TRANSFER_STATUS_FAILURE,
+	THEME_TRANSFER_STATUS_RECEIVE,
 	THEMES_RECEIVE,
 	THEMES_REQUEST,
 	THEMES_REQUEST_SUCCESS,
 	THEMES_REQUEST_FAILURE,
-	THEME_TRANSFER_STATUS_RECEIVE,
-	THEME_TRANSFER_STATUS_FAILURE,
-	THEME_TRANSFER_INITIATE_REQUEST,
-	THEME_TRANSFER_INITIATE_SUCCESS,
-	THEME_TRANSFER_INITIATE_FAILURE,
 } from 'state/action-types';
 import {
 	themeActivated,
@@ -40,6 +43,7 @@ import {
 	requestTheme,
 	pollThemeTransferStatus,
 	initiateThemeTransfer,
+	installTheme
 } from '../actions';
 import useNock from 'test/helpers/use-nock';
 
@@ -809,4 +813,92 @@ describe( 'actions', () => {
 			} );
 		} );
 	} );
+
+	describe( '#installTheme', () => {
+		const successResponse = {
+			id: 'karuna-wpcom',
+			screenshot: '//i0.wp.com/budzanowski.wpsandbox.me/wp-content/themes/karuna-wpcom/screenshot.png',
+			active: false,
+			name: 'Karuna',
+			theme_uri: 'https://wordpress.com/themes/karuna/',
+			description: 'Karuna is a clean business theme designed with health and wellness-focused sites in mind.' +
+				' With bright, bold colors, prominent featured images, and support for customer testimonials',
+			author: 'Automattic',
+			author_uri: 'http://wordpress.com/themes/',
+			version: '1.1.0',
+			autoupdate: false,
+			log: [
+				[
+					'Unpacking the package&#8230;',
+					'Installing the theme&#8230;',
+					'Theme installed successfully.'
+				]
+			]
+		};
+
+		const downloadFailureResponse = {
+			status: 400,
+			code: 'problem_fetching_theme',
+			message: 'Problem downloading theme'
+		};
+
+		const alreadyInstalledFailureResponse = {
+			status: 400,
+			code: 'theme_already_installed',
+			message: 'The theme is already installed'
+		};
+
+		useNock( ( nock ) => {
+			nock( 'https://public-api.wordpress.com:443' )
+				.persist()
+				.post( '/rest/v1.1/sites/2211667/themes/karuna-wpcom/install' )
+				.reply( 200, successResponse )
+				.post( '/rest/v1.1/sites/2211667/themes/typist-wpcom/install' )
+				.reply( 400, downloadFailureResponse )
+				.post( '/rest/v1.1/sites/2211667/themes/pinboard-wpcom/install' )
+				.reply( 400, alreadyInstalledFailureResponse );
+		} );
+
+		it( 'should dispatch install theme request action when triggered', () => {
+			installTheme( 'karuna-wpcom', 2211667 )( spy );
+
+			expect( spy ).to.have.been.calledWith( {
+				type: THEME_INSTALL,
+				siteId: 2211667,
+				themeId: 'karuna-wpcom'
+			} );
+		} );
+
+		it( 'should dispatch wpcom theme install request success action when request completes', () => {
+			return installTheme( 'karuna-wpcom', 2211667 )( spy ).then( () => {
+				expect( spy ).to.have.been.calledWith( {
+					type: THEME_INSTALL_SUCCESS,
+					siteId: 2211667,
+					themeId: 'karuna-wpcom',
+				} );
+			} );
+		} );
+
+		it( 'should dispatch wpcom theme install request failure action when theme was not found', () => {
+			return installTheme( 'typist-wpcom', 2211667 )( spy ).then( () => {
+				expect( spy ).to.have.been.calledWith( {
+					type: THEME_INSTALL_FAILURE,
+					siteId: 2211667,
+					themeId: 'typist-wpcom',
+					error: sinon.match( { message: 'Problem downloading theme' } ),
+				} );
+			} );
+		} );
+
+		it( 'should dispatch wpcom theme install request failure action when theme is already installed', () => {
+			return installTheme( 'pinboard-wpcom', 2211667 )( spy ).then( () => {
+				expect( spy ).to.have.been.calledWith( {
+					type: THEME_INSTALL_FAILURE,
+					siteId: 2211667,
+					themeId: 'pinboard-wpcom',
+					error: sinon.match( { message: 'The theme is already installed' } ),
+				} );
+			} );
+		} );
+	} );
 } );