Marketplace Themes: Fixes the bug activating themes after resetting t…

…he site (#73113)

* Create reducers, actions and selectors for handling the products reinstall

* Add error to the state

* Adding the request to reinstall the products in the activateTheme action

* Fix activateTheme test

client/state/action-types.ts

@@ -532,6 +532,11 @@ export const MARKETING_JETPACK_SALE_COUPON_FETCH_FAILURE =
 export const MARKETING_JETPACK_SALE_COUPON_FETCH = 'MARKETING_JETPACK_SALE_COUPON_FETCH';
 export const MARKETING_JETPACK_SALE_COUPON_RECEIVE = 'MARKETING_JETPACK_SALE_COUPON_RECEIVE';
 export const MARKETPLACE_BILLING_INTERVAL_SELECT = 'MARKETPLACE_BILLING_INTERVAL_SELECT';
+export const MARKETPLACE_PRODUCTS_REINSTALL_COMPLETED = 'MARKETPLACE_PRODUCTS_REINSTALL_COMPLETED';
+export const MARKETPLACE_PRODUCTS_REINSTALL_FAILED = 'MARKETPLACE_PRODUCTS_REINSTALL_FAILED';
+export const MARKETPLACE_PRODUCTS_REINSTALL_NOT_STARTED =
+	'MARKETPLACE_PRODUCTS_REINSTALL_NOT_STARTED';
+export const MARKETPLACE_PRODUCTS_REINSTALL_STARTED = 'MARKETPLACE_PRODUCTS_REINSTALL_STARTED';
 export const MARKETPLACE_PLUGIN_INSTALLATION_STATE_CHANGE =
 	'MARKETPLACE_PLUGIN_INSTALLATION_STATE_CHANGE';
 export const MARKETPLACE_PRIMARY_DOMAIN_SELECT = 'MARKETPLACE_PRIMARY_DOMAIN_SELECT';

client/state/marketplace/products-reinstall/actions.ts

@@ -0,0 +1,63 @@
+import wpcom from 'calypso/lib/wp';
+import {
+	MARKETPLACE_PRODUCTS_REINSTALL_COMPLETED,
+	MARKETPLACE_PRODUCTS_REINSTALL_FAILED,
+	MARKETPLACE_PRODUCTS_REINSTALL_STARTED,
+	MARKETPLACE_PRODUCTS_REINSTALL_NOT_STARTED,
+} from 'calypso/state/action-types';
+import { activateTheme } from 'calypso/state/themes/actions';
+import type { AnyAction } from 'redux';
+import 'calypso/state/marketplace/init';
+
+/**
+ * Reinstall products on a site.
+ *
+ * @param siteId the site id
+ * @returns Promise
+ */
+export function productsReinstall( siteId: number, themeId: string ) {
+	return async ( dispatch: CallableFunction ) => {
+		dispatch( productsReinstallStarted( siteId ) );
+
+		try {
+			await wpcom.req.get( {
+				path: `/sites/${ siteId }/marketplace/products/reinstall`,
+				apiNamespace: 'wpcom/v2',
+			} );
+
+			dispatch( productsReinstallCompleted( siteId ) );
+		} catch ( error ) {
+			dispatch( productsReinstallFailed( siteId, ( error as Error ).message ) );
+		}
+		dispatch( activateTheme( themeId, siteId ) );
+	};
+}
+
+export function productsReinstallStarted( siteId: number ): AnyAction {
+	return {
+		type: MARKETPLACE_PRODUCTS_REINSTALL_STARTED,
+		siteId,
+	};
+}
+
+export function productsReinstallFailed( siteId: number, error: string ): AnyAction {
+	return {
+		type: MARKETPLACE_PRODUCTS_REINSTALL_FAILED,
+		siteId,
+		error,
+	};
+}
+
+export function productsReinstallCompleted( siteId: number ): AnyAction {
+	return {
+		type: MARKETPLACE_PRODUCTS_REINSTALL_COMPLETED,
+		siteId,
+	};
+}
+
+export function productsReinstallNotStarted( siteId: number ): AnyAction {
+	return {
+		type: MARKETPLACE_PRODUCTS_REINSTALL_NOT_STARTED,
+		siteId,
+	};
+}

client/state/marketplace/products-reinstall/reducer.ts

@@ -0,0 +1,54 @@
+import {
+	MARKETPLACE_PRODUCTS_REINSTALL_COMPLETED,
+	MARKETPLACE_PRODUCTS_REINSTALL_FAILED,
+	MARKETPLACE_PRODUCTS_REINSTALL_STARTED,
+	MARKETPLACE_PRODUCTS_REINSTALL_NOT_STARTED,
+} from 'calypso/state/action-types';
+import { withSchemaValidation } from 'calypso/state/utils';
+import { IReinstallProductsState, IReinstallProductsStatus } from '../types';
+import { productsReinstallSchema } from './schema';
+import type { AnyAction } from 'redux';
+
+export const defaultState: IReinstallProductsState = {};
+
+const productsReinstall = withSchemaValidation(
+	productsReinstallSchema,
+	( state = defaultState, action: AnyAction ): IReinstallProductsState => {
+		const { type, siteId, error } = action;
+		switch ( type ) {
+			case MARKETPLACE_PRODUCTS_REINSTALL_STARTED:
+				return {
+					...state,
+					[ siteId ]: {
+						status: IReinstallProductsStatus.IN_PROGRESS,
+					},
+				};
+			case MARKETPLACE_PRODUCTS_REINSTALL_COMPLETED:
+				return {
+					...state,
+					[ siteId ]: {
+						status: IReinstallProductsStatus.COMPLETED,
+					},
+				};
+			case MARKETPLACE_PRODUCTS_REINSTALL_FAILED:
+				return {
+					...state,
+					[ siteId ]: {
+						status: IReinstallProductsStatus.FAILED,
+						error,
+					},
+				};
+			case MARKETPLACE_PRODUCTS_REINSTALL_NOT_STARTED:
+				return {
+					...state,
+					[ siteId ]: {
+						status: IReinstallProductsStatus.NOT_STARTED,
+					},
+				};
+		}
+
+		return state;
+	}
+);
+
+export default productsReinstall;

client/state/marketplace/products-reinstall/schema.js

@@ -0,0 +1,14 @@
+export const productsReinstallSchema = {
+	type: 'object',
+	additionalProperties: false,
+	properties: {
+		'^\\d+$': {
+			type: 'object',
+			properties: {
+				started: { type: 'boolean' },
+				failed: { type: 'boolean' },
+				completed: { type: 'boolean' },
+			},
+		},
+	},
+};

client/state/marketplace/products-reinstall/selectors.ts

@@ -0,0 +1,29 @@
+import 'calypso/state/marketplace/init';
+import { IAppState } from 'calypso/state/types';
+import { IReinstallProductsStatus } from '../types';
+
+export function isReinstallingProducts( state: IAppState, siteId: number ) {
+	return (
+		state.marketplace.reinstallProducts?.[ siteId ]?.status === IReinstallProductsStatus.IN_PROGRESS
+	);
+}
+
+export function failedReinstallingProducts( state: IAppState, siteId: number ) {
+	return (
+		state.marketplace.reinstallProducts?.[ siteId ]?.status === IReinstallProductsStatus.FAILED
+	);
+}
+
+export function completedReinstallingProducts( state: IAppState, siteId: number ) {
+	return (
+		state.marketplace.reinstallProducts?.[ siteId ]?.status === IReinstallProductsStatus.COMPLETED
+	);
+}
+
+export function requestedReinstallProducts( state: IAppState, siteId: number ) {
+	return (
+		state.marketplace.reinstallProducts?.[ siteId ]?.status ===
+			IReinstallProductsStatus.COMPLETED ||
+		state.marketplace.reinstallProducts?.[ siteId ]?.status === IReinstallProductsStatus.FAILED
+	);
+}

client/state/marketplace/reducer.ts

@@ -1,11 +1,13 @@
 import { withStorageKey } from '@automattic/state-utils';
 import { combineReducers } from 'calypso/state/utils';
 import billingInterval from './billing-interval/reducer';
+import reinstallProducts from './products-reinstall/reducer';
 import purchaseFlow from './purchase-flow/reducer';
 
 const combinedReducers = combineReducers( {
 	purchaseFlow,
 	billingInterval,
+	reinstallProducts,
 } );
 
 export default withStorageKey( 'marketplace', combinedReducers );

client/state/marketplace/types.ts

@@ -21,7 +21,22 @@ export interface IBillingIntervalState {
 	interval: IntervalLength.MONTHLY | IntervalLength.ANNUALLY;
 }
 
+export enum IReinstallProductsStatus {
+	COMPLETED = 'completed',
+	FAILED = 'failed',
+	IN_PROGRESS = 'in-progress',
+	NOT_STARTED = 'not-started',
+}
+
+export interface IReinstallProductsState {
+	[ siteId: number ]: {
+		status: IReinstallProductsStatus;
+		error?: string;
+	};
+}
+
 export interface IMarketplaceState {
 	purchaseFlow: IPurchaseFlowState;
 	billingInterval: IBillingIntervalState;
+	reinstallProducts: IReinstallProductsState;
 }

client/state/themes/actions/activate-theme.js

@@ -7,10 +7,18 @@ import {
 	getGlobalStylesVariations,
 	updateGlobalStyles,
 } from 'calypso/state/global-styles/actions';
+import {
+	productsReinstall,
+	productsReinstallNotStarted,
+} from 'calypso/state/marketplace/products-reinstall/actions';
+import { requestedReinstallProducts } from 'calypso/state/marketplace/products-reinstall/selectors';
 import { errorNotice } from 'calypso/state/notices/actions';
 import { THEME_ACTIVATE, THEME_ACTIVATE_FAILURE } from 'calypso/state/themes/action-types';
 import { themeActivated } from 'calypso/state/themes/actions/theme-activated';
-import { getThemePreviewThemeOptions } from 'calypso/state/themes/selectors';
+import {
+	getThemePreviewThemeOptions,
+	isMarketplaceThemeSubscribed,
+} from 'calypso/state/themes/selectors';
 
 import 'calypso/state/themes/init';
 
@@ -78,6 +86,12 @@ export function activateTheme(
 				);
 			} )
 			.catch( ( error ) => {
+				if ( isMarketplaceThemeSubscribed( getState(), themeId, siteId ) ) {
+					if ( ! requestedReinstallProducts( getState(), siteId ) ) {
+						return dispatch( productsReinstall( siteId, themeId ) );
+					}
+					dispatch( productsReinstallNotStarted( siteId ) );
+				}
 				dispatch( {
 					type: THEME_ACTIVATE_FAILURE,
 					themeId,

client/state/themes/test/actions.js

@@ -579,6 +579,12 @@ describe( 'actions', () => {
 			sites: {
 				items: {},
 			},
+			productsList: {
+				items: {},
+			},
+			purchases: {
+				data: {},
+			},
 		} );
 
 		const trackingData = {