Stop using missing installPlugin function and fix WCS 1.24 compatibility (https://github.com/woocommerce/woocommerce-admin/pull/5025)

* Update Shipping Banner to use installPlugins since installPlugin has been removed.

* Fix shipping banner compatibility with WCS 1.24.

* Update metabox content to match WC 4.5 metaboxes.
This commit is contained in:
Chris Shultz 2020-08-31 08:13:14 -07:00 committed by GitHub
parent 394bf4db3c
commit 570de23747
4 changed files with 173 additions and 149 deletions

View File

@ -18,7 +18,4 @@ const HydratedShippingBanner = withPluginsHydration( {
...window.wcSettings.plugins,
jetpackStatus: window.wcSettings.dataEndpoints.jetpackStatus,
} )( ShippingBanner );
render(
<HydratedShippingBanner itemsCount={ args.shippable_items_count } />,
metaBox
);
render( <HydratedShippingBanner itemsCount={ args.items } />, metaBox );

View File

@ -86,12 +86,12 @@ export class ShippingBanner extends Component {
async installAndActivatePlugins( pluginSlug ) {
// Avoid double activating.
const { installPlugin, activatePlugins, isRequesting } = this.props;
const { installPlugins, activatePlugins, isRequesting } = this.props;
if ( isRequesting ) {
return false;
}
const install = await installPlugin( pluginSlug );
if ( install.status !== 'success' ) {
const install = await installPlugins( [ pluginSlug ] );
if ( install.success !== true ) {
this.setState( {
setupErrorReason: setupErrorTypes.INSTALL,
wcsSetupError: true,
@ -100,7 +100,7 @@ export class ShippingBanner extends Component {
}
const activation = await activatePlugins( [ pluginSlug ] );
if ( activation.status !== 'success' ) {
if ( activation.success !== true ) {
this.setState( {
setupErrorReason: setupErrorTypes.ACTIVATE,
wcsSetupError: true,
@ -150,11 +150,15 @@ export class ShippingBanner extends Component {
return `
<div id="${ nodeId }" class="postbox">
<button type="button" class="handlediv" aria-expanded="true">
<span class="screen-reader-text">${ togglePanelText } ${ title }</span>
<span class="toggle-indicator" aria-hidden="true"></span>
</button>
<h2 class="hndle"><span>${ title }</span></h2>
<div class="postbox-header">
<h2 class="hndle"><span>${ title }</span></h2>
<div class="handle-actions">
<button type="button" class="handlediv" aria-expanded="true">
<span class="screen-reader-text">${ togglePanelText } ${ title }</span>
<span class="toggle-indicator" aria-hidden="true"></span>
</button>
</div>
</div>
<div class="inside">
<div class="wcc-root woocommerce wc-connect-create-shipping-label" data-args="${ argsJsonString }">
</div>
@ -171,8 +175,16 @@ export class ShippingBanner extends Component {
this.setState( { wcsAssetsLoading: true } );
const js = assets.wc_connect_admin_script;
const styles = assets.wc_connect_admin_style;
const jsPath = assets.wc_connect_admin_script;
const stylePath = assets.wc_connect_admin_style;
if ( undefined === window.wcsPluginData ) {
const assetPath = jsPath.substring(
0,
jsPath.lastIndexOf( '/' ) + 1
);
window.wcsPluginData = { assetPath };
}
const { orderId } = this.state;
const { itemsCount } = this.props;
@ -181,7 +193,7 @@ export class ShippingBanner extends Component {
'woocommerce-order-label',
__( 'Shipping Label', 'woocommerce-admin' ),
{
orderId,
order: { id: orderId },
context: 'shipping_label',
items: itemsCount,
}
@ -195,7 +207,7 @@ export class ShippingBanner extends Component {
'woocommerce-order-shipment-tracking',
__( 'Shipment Tracking', 'woocommerce-admin' ),
{
orderId,
order: { id: orderId },
context: 'shipment_tracking',
items: itemsCount,
}
@ -216,22 +228,26 @@ export class ShippingBanner extends Component {
Promise.all( [
new Promise( ( resolve, reject ) => {
const script = document.createElement( 'script' );
script.src = js;
script.src = jsPath;
script.async = true;
script.onload = resolve;
script.onerror = reject;
document.body.appendChild( script );
} ),
new Promise( ( resolve, reject ) => {
const head = document.getElementsByTagName( 'head' )[ 0 ];
const link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = styles;
link.media = 'all';
link.onload = resolve;
link.onerror = reject;
head.appendChild( link );
if ( stylePath !== '' ) {
const head = document.getElementsByTagName( 'head' )[ 0 ];
const link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = stylePath;
link.media = 'all';
link.onload = resolve;
link.onerror = reject;
head.appendChild( link );
} else {
resolve();
}
} ),
] ).then( () => {
this.setState( {
@ -259,106 +275,113 @@ export class ShippingBanner extends Component {
};
openWcsModal() {
if ( window.wcsGetAppStore ) {
const wcsStore = window.wcsGetAppStore(
'wc-connect-create-shipping-label'
);
const state = wcsStore.getState();
const { orderId } = this.state;
const siteId = state.ui.selectedSiteId;
if ( window.wcsGetAppStoreAsync ) {
window
.wcsGetAppStoreAsync( 'wc-connect-create-shipping-label' )
.then( ( wcsStore ) => {
const state = wcsStore.getState();
const { orderId } = this.state;
const siteId = state.ui.selectedSiteId;
const wcsStoreUnsubscribe = wcsStore.subscribe( () => {
const latestState = wcsStore.getState();
const wcsStoreUnsubscribe = wcsStore.subscribe( () => {
const latestState = wcsStore.getState();
const shippingLabelState = get(
latestState,
[
'extensions',
'woocommerce',
'woocommerceServices',
siteId,
'shippingLabel',
orderId,
],
null
);
const shippingLabelState = get(
latestState,
[
'extensions',
'woocommerce',
'woocommerceServices',
siteId,
'shippingLabel',
orderId,
],
null
);
const labelSettingsState = get(
latestState,
[
'extensions',
'woocommerce',
'woocommerceServices',
siteId,
'labelSettings',
],
null
);
const labelSettingsState = get(
latestState,
[
'extensions',
'woocommerce',
'woocommerceServices',
siteId,
'labelSettings',
],
null
);
const packageState = get(
latestState,
[
'extensions',
'woocommerce',
'woocommerceServices',
siteId,
'packages',
],
null
);
const packageState = get(
latestState,
[
'extensions',
'woocommerce',
'woocommerceServices',
siteId,
'packages',
],
null
);
const locationsState = get( latestState, [
'extensions',
'woocommerce',
'sites',
siteId,
'data',
'locations',
] );
const locationsState = get( latestState, [
'extensions',
'woocommerce',
'sites',
siteId,
'data',
'locations',
] );
if (
shippingLabelState &&
labelSettingsState &&
labelSettingsState.meta &&
packageState &&
locationsState
) {
if (
shippingLabelState.loaded &&
labelSettingsState.meta.isLoaded &&
packageState.isLoaded &&
isArray( locationsState ) &&
! this.state.isWcsModalOpen
) {
if ( window.jQuery ) {
this.setState( { isWcsModalOpen: true } );
window
.jQuery( '.shipping-label__new-label-button' )
.click();
if (
shippingLabelState &&
labelSettingsState &&
labelSettingsState.meta &&
packageState &&
locationsState
) {
if (
shippingLabelState.loaded &&
labelSettingsState.meta.isLoaded &&
packageState.isLoaded &&
isArray( locationsState ) &&
! this.state.isWcsModalOpen
) {
if ( window.jQuery ) {
this.setState( { isWcsModalOpen: true } );
window
.jQuery(
'.shipping-label__new-label-button'
)
.click();
}
wcsStore.dispatch( {
type: 'NOTICE_CREATE',
notice: {
duration: 10000,
status: 'is-success',
text: __(
'Plugin installed and activated',
'woocommerce-admin'
),
},
} );
} else if (
shippingLabelState.showPurchaseDialog
) {
wcsStoreUnsubscribe();
if ( window.jQuery ) {
window
.jQuery( '#woocommerce-order-label' )
.show();
}
}
}
wcsStore.dispatch( {
type: 'NOTICE_CREATE',
notice: {
duration: 10000,
status: 'is-success',
text: __(
'Plugin installed and activated',
'woocommerce-admin'
),
},
} );
} else if ( shippingLabelState.showPurchaseDialog ) {
wcsStoreUnsubscribe();
if ( window.jQuery ) {
window.jQuery( '#woocommerce-order-label' ).show();
}
}
}
} );
} );
document.getElementById(
'woocommerce-admin-print-label'
).style.display = 'none';
document.getElementById(
'woocommerce-admin-print-label'
).style.display = 'none';
} );
}
}
@ -456,7 +479,7 @@ ShippingBanner.propTypes = {
isJetpackConnected: PropTypes.bool.isRequired,
activePlugins: PropTypes.array.isRequired,
activatePlugins: PropTypes.func.isRequired,
installPlugin: PropTypes.func.isRequired,
installPlugins: PropTypes.func.isRequired,
isRequesting: PropTypes.bool.isRequired,
};
@ -470,7 +493,7 @@ export default compose(
const isRequesting =
isPluginsRequesting( 'activatePlugins' ) ||
isPluginsRequesting( 'installPlugin' );
isPluginsRequesting( 'installPlugins' );
return {
isRequesting,
@ -479,13 +502,13 @@ export default compose(
};
} ),
withDispatch( ( dispatch ) => {
const { activatePlugins, installPlugin } = dispatch(
const { activatePlugins, installPlugins } = dispatch(
PLUGINS_STORE_NAME
);
return {
activatePlugins,
installPlugin,
installPlugins,
};
} )
)( ShippingBanner );

View File

@ -37,7 +37,7 @@ describe( 'Tracking impression in shippingBanner', () => {
activePlugins={ [ wcsPluginSlug, 'jetpack' ] }
itemsCount={ 1 }
activatePlugins={ jest.fn() }
installPlugin={ jest.fn() }
installPlugins={ jest.fn() }
isRequesting={ false }
/>
);
@ -72,7 +72,7 @@ describe( 'Tracking clicks in shippingBanner', () => {
<ShippingBanner
isJetpackConnected={ isJetpackConnected }
activePlugins={ [ wcsPluginSlug, 'jetpack' ] }
installPlugin={ jest.fn() }
installPlugins={ jest.fn() }
activatePlugins={ jest.fn() }
isRequesting={ false }
itemsCount={ 1 }
@ -116,11 +116,11 @@ describe( 'Tracking clicks in shippingBanner', () => {
describe( 'Create shipping label button', () => {
let shippingBannerWrapper;
const installPlugin = jest.fn().mockReturnValue( {
status: 'success',
const installPlugins = jest.fn().mockReturnValue( {
success: true,
} );
const activatePlugins = jest.fn().mockReturnValue( {
status: 'success',
success: true,
} );
delete window.location; // jsdom won't allow to rewrite window.location unless deleted first
window.location = {
@ -133,7 +133,7 @@ describe( 'Create shipping label button', () => {
isJetpackConnected={ true }
activatePlugins={ activatePlugins }
activePlugins={ [] }
installPlugin={ installPlugin }
installPlugins={ installPlugins }
isRequesting={ false }
itemsCount={ 1 }
/>
@ -144,7 +144,9 @@ describe( 'Create shipping label button', () => {
const createShippingLabelButton = shippingBannerWrapper.find( Button );
expect( createShippingLabelButton.length ).toBe( 1 );
createShippingLabelButton.simulate( 'click' );
expect( installPlugin ).toHaveBeenCalledWith( 'woocommerce-services' );
expect( installPlugins ).toHaveBeenCalledWith( [
'woocommerce-services',
] );
} );
it( 'should activate WooCommerce Shipping when installation finishes', () => {
@ -241,16 +243,18 @@ describe( 'Create shipping label button', () => {
document.getElementsByTagName = getElementsByTagName;
} );
it( 'should open WCS modal', () => {
window.wcsGetAppStore = jest.fn();
it( 'should open WCS modal', async () => {
window.wcsGetAppStoreAsync = jest.fn();
const getState = jest.fn();
const dispatch = jest.fn();
const subscribe = jest.fn();
window.wcsGetAppStore.mockReturnValueOnce( {
getState,
dispatch,
subscribe,
} );
window.wcsGetAppStoreAsync.mockReturnValueOnce(
Promise.resolve( {
getState,
dispatch,
subscribe,
} )
);
getState.mockReturnValueOnce( {
ui: {
selectedSiteId: 'SITE_ID',
@ -264,8 +268,8 @@ describe( 'Create shipping label button', () => {
const getElementById = document.getElementById;
document.getElementById = getElementByIdMock;
shippingBannerWrapper.instance().openWcsModal();
expect( window.wcsGetAppStore ).toHaveBeenCalledWith(
await shippingBannerWrapper.instance().openWcsModal();
expect( window.wcsGetAppStoreAsync ).toHaveBeenCalledWith(
'wc-connect-create-shipping-label'
);
expect( getState ).toHaveBeenCalledTimes( 1 );
@ -287,7 +291,7 @@ describe( 'In the process of installing, activating, loading assets for WooComme
isJetpackConnected={ true }
activatePlugins={ jest.fn() }
activePlugins={ [ 'jetpack', 'woocommerce-services' ] }
installPlugin={ jest.fn() }
installPlugins={ jest.fn() }
isRequesting={ true }
itemsCount={ 1 }
/>
@ -315,7 +319,7 @@ describe( 'Setup error message', () => {
const activatePlugins = jest.fn().mockReturnValue( {
status: 'failed',
} );
const installPlugin = jest.fn().mockReturnValue( {
const installPlugins = jest.fn().mockReturnValue( {
status: 'failed',
} );
@ -325,7 +329,7 @@ describe( 'Setup error message', () => {
isJetpackConnected={ true }
activatePlugins={ activatePlugins }
activePlugins={ [ 'jetpack' ] }
installPlugin={ installPlugin }
installPlugins={ installPlugins }
itemsCount={ 1 }
isRequesting={ false }
/>
@ -348,14 +352,14 @@ describe( 'Setup error message', () => {
} );
it( 'should show if there is activation error', async () => {
// Create a new wrapper with an installPlugin that passes.
// Create a new wrapper with an installPlugins that passes.
const wrapper = shallow(
<ShippingBanner
isJetpackConnected={ true }
activatePlugins={ activatePlugins }
activePlugins={ [ 'jetpack' ] }
installPlugin={ jest.fn().mockReturnValue( {
status: 'success',
installPlugins={ jest.fn().mockReturnValue( {
success: true,
} ) }
itemsCount={ 1 }
isRequesting={ false }
@ -380,7 +384,7 @@ describe( 'The message in the banner', () => {
isJetpackConnected={ true }
activatePlugins={ jest.fn() }
activePlugins={ activePlugins }
installPlugin={ jest.fn() }
installPlugins={ jest.fn() }
wcsPluginSlug={ 'woocommerce-services' }
isRequesting={ true }
itemsCount={ 1 }

View File

@ -107,9 +107,9 @@ class ShippingLabelBanner {
'normal',
'high',
array(
'context' => 'shipping_label',
'order_id' => $post->ID,
'shippable_items_count' => $this->count_shippable_items( $order ),
'context' => 'shipping_label',
'order' => $post->ID,
'items' => $this->count_shippable_items( $order ),
)
);
add_action( 'admin_enqueue_scripts', array( $this, 'add_print_shipping_label_script' ) );