Onboarding: Hide plugin install step when already installed (https://github.com/woocommerce/woocommerce-admin/pull/3575)

* Remove already active plugins from install list

* Update global with newly activated and installed plugins

* Cache activated plugins to prevent step removal
This commit is contained in:
Joshua T Flowers 2020-01-17 09:46:11 +08:00 committed by GitHub
parent 5e8f3bc378
commit e1bb3255c9
2 changed files with 40 additions and 13 deletions

View File

@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch'; import apiFetch from '@wordpress/api-fetch';
import { Component } from '@wordpress/element'; import { Component } from '@wordpress/element';
import { compose } from '@wordpress/compose'; import { compose } from '@wordpress/compose';
import { filter } from 'lodash'; import { difference, filter } from 'lodash';
import interpolateComponents from 'interpolate-components'; import interpolateComponents from 'interpolate-components';
import { withDispatch } from '@wordpress/data'; import { withDispatch } from '@wordpress/data';
@ -38,8 +38,10 @@ class Shipping extends Component {
shippingZones: [], shippingZones: [],
}; };
// Cache active plugins to prevent removal mid-step.
const { activePlugins = [] } = getSetting( 'onboarding', {} );
this.activePlugins = activePlugins;
this.state = this.initialState; this.state = this.initialState;
this.completeStep = this.completeStep.bind( this ); this.completeStep = this.completeStep.bind( this );
} }
@ -150,18 +152,24 @@ class Shipping extends Component {
} }
} }
getSteps() { getPluginsToActivate() {
const { countryCode, isJetpackConnected } = this.props; const { countryCode, isJetpackConnected } = this.props;
let plugins = [];
const plugins = [];
if ( [ 'GB', 'CA', 'AU' ].includes( countryCode ) ) { if ( [ 'GB', 'CA', 'AU' ].includes( countryCode ) ) {
plugins = [ 'woocommerce-shipstation-integration' ]; plugins.push( 'woocommerce-shipstation-integration' );
} else if ( 'US' === countryCode ) { } else if ( 'US' === countryCode ) {
plugins = [ 'woocommerce-services' ]; plugins.push( 'woocommerce-services' );
if ( ! isJetpackConnected ) { if ( ! isJetpackConnected ) {
plugins.push( 'jetpack' ); plugins.push( 'jetpack' );
} }
} }
return difference( plugins, this.activePlugins );
}
getSteps() {
const pluginsToActivate = this.getPluginsToActivate();
const steps = [ const steps = [
{ {
@ -190,7 +198,7 @@ class Shipping extends Component {
content: ( content: (
<ShippingRates <ShippingRates
buttonText={ buttonText={
plugins.length pluginsToActivate.length
? __( 'Proceed', 'woocommerce-admin' ) ? __( 'Proceed', 'woocommerce-admin' )
: __( 'Complete task', 'woocommerce-admin' ) : __( 'Complete task', 'woocommerce-admin' )
} }
@ -204,7 +212,7 @@ class Shipping extends Component {
{ {
key: 'label_printing', key: 'label_printing',
label: __( 'Enable shipping label printing', 'woocommerce-admin' ), label: __( 'Enable shipping label printing', 'woocommerce-admin' ),
description: plugins.includes( 'woocommerce-shipstation-integration' ) description: pluginsToActivate.includes( 'woocommerce-shipstation-integration' )
? interpolateComponents( { ? interpolateComponents( {
mixedString: __( mixedString: __(
'We recommend using ShipStation to save time at the post office by printing your shipping ' + 'We recommend using ShipStation to save time at the post office by printing your shipping ' +
@ -229,18 +237,24 @@ class Shipping extends Component {
content: ( content: (
<Plugins <Plugins
onComplete={ () => { onComplete={ () => {
recordEvent( 'tasklist_shipping_label_printing', { install: true, plugins } ); recordEvent( 'tasklist_shipping_label_printing', {
install: true,
pluginsToActivate,
} );
this.completeStep(); this.completeStep();
} } } }
onSkip={ () => { onSkip={ () => {
recordEvent( 'tasklist_shipping_label_printing', { install: false, plugins } ); recordEvent( 'tasklist_shipping_label_printing', {
install: false,
pluginsToActivate,
} );
getHistory().push( getNewPath( {}, '/', {} ) ); getHistory().push( getNewPath( {}, '/', {} ) );
} } } }
pluginSlugs={ plugins } pluginSlugs={ pluginsToActivate }
{ ...this.props } { ...this.props }
/> />
), ),
visible: plugins.length, visible: pluginsToActivate.length,
}, },
{ {
key: 'connect', key: 'connect',
@ -259,7 +273,7 @@ class Shipping extends Component {
} } } }
/> />
), ),
visible: plugins.includes( 'jetpack' ), visible: pluginsToActivate.includes( 'jetpack' ),
}, },
]; ];

View File

@ -6,11 +6,13 @@
import { __, sprintf } from '@wordpress/i18n'; import { __, sprintf } from '@wordpress/i18n';
import { addQueryArgs } from '@wordpress/url'; import { addQueryArgs } from '@wordpress/url';
import apiFetch from '@wordpress/api-fetch'; import apiFetch from '@wordpress/api-fetch';
import { uniq } from 'lodash';
/** /**
* Internal dependencies * Internal dependencies
*/ */
import { getResourceIdentifier, getResourceName } from '../utils'; import { getResourceIdentifier, getResourceName } from '../utils';
import { getSetting, setSetting } from '@woocommerce/wc-admin-settings';
import { JETPACK_NAMESPACE, WC_ADMIN_NAMESPACE } from '../constants'; import { JETPACK_NAMESPACE, WC_ADMIN_NAMESPACE } from '../constants';
import { pluginNames } from './constants'; import { pluginNames } from './constants';
@ -166,6 +168,11 @@ function activatePlugins( resourceNames, data, fetch ) {
function activatePluginToResource( response, items ) { function activatePluginToResource( response, items ) {
const resourceName = 'plugin-activate'; const resourceName = 'plugin-activate';
const { activePlugins = [] } = getSetting( 'onboarding', {} );
setSetting( 'onboarding', {
...getSetting( 'onboarding', {} ),
activePlugins: uniq( [ ...activePlugins, ...items ] ),
} );
const resources = { const resources = {
[ resourceName ]: { data: items }, [ resourceName ]: { data: items },
@ -258,6 +265,12 @@ function installPlugins( resourceNames, data, fetch ) {
}, },
} ) } )
.then( response => { .then( response => {
const { installedPlugins = [] } = getSetting( 'onboarding', {} );
setSetting( 'onboarding', {
...getSetting( 'onboarding', {} ),
installedPlugins: uniq( [ ...installedPlugins, ...plugins ] ),
} );
return { return {
[ resourceName ]: { data: plugins }, [ resourceName ]: { data: plugins },
[ getResourceName( resourceName, plugin ) ]: { data: response }, [ getResourceName( resourceName, plugin ) ]: { data: response },