woocommerce/plugins/woocommerce-admin/client/task-list/tasks/shipping/index.js

364 lines
9.4 KiB
JavaScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';
import { Component } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { difference, filter } from 'lodash';
import interpolateComponents from 'interpolate-components';
import { withDispatch, withSelect } from '@wordpress/data';
/**
* WooCommerce dependencies
*/
import { Card, Link, Stepper, Plugins } from '@woocommerce/components';
import { getAdminLink, getSetting } from '@woocommerce/wc-admin-settings';
import { getHistory, getNewPath } from '@woocommerce/navigation';
import { SETTINGS_STORE_NAME, PLUGINS_STORE_NAME } from '@woocommerce/data';
/**
* Internal dependencies
*/
import Connect from 'dashboard/components/connect';
import { getCountryCode } from 'dashboard/utils';
import StoreLocation from '../steps/location';
import ShippingRates from './rates';
import { recordEvent } from 'lib/tracks';
class Shipping extends Component {
constructor( props ) {
super( props );
this.initialState = {
isPending: false,
step: 'store_location',
shippingZones: [],
};
// Cache active plugins to prevent removal mid-step.
this.activePlugins = props.activePlugins;
this.state = this.initialState;
this.completeStep = this.completeStep.bind( this );
}
componentDidMount() {
this.reset();
}
reset() {
this.setState( this.initialState );
}
async fetchShippingZones() {
this.setState( { isPending: true } );
const { countryCode, countryName } = this.props;
// @todo The following fetches for shipping information should be moved into
// the wc-api to make these methods and states more readily available.
const shippingZones = [];
const zones = await apiFetch( { path: '/wc/v3/shipping/zones' } );
let hasCountryZone = false;
await Promise.all(
zones.map( async ( zone ) => {
// "Rest of the world zone"
if ( zone.id === 0 ) {
zone.methods = await apiFetch( {
path: `/wc/v3/shipping/zones/${ zone.id }/methods`,
} );
zone.name = __( 'Rest of the world', 'woocommerce-admin' );
zone.toggleable = true;
shippingZones.push( zone );
return;
}
// Return any zone with a single location matching the country zone.
zone.locations = await apiFetch( {
path: `/wc/v3/shipping/zones/${ zone.id }/locations`,
} );
const countryLocation = zone.locations.find(
( location ) => countryCode === location.code
);
if ( countryLocation ) {
zone.methods = await apiFetch( {
path: `/wc/v3/shipping/zones/${ zone.id }/methods`,
} );
shippingZones.push( zone );
hasCountryZone = true;
}
} )
);
// Create the default store country zone if it doesn't exist.
if ( ! hasCountryZone ) {
const zone = await apiFetch( {
method: 'POST',
path: '/wc/v3/shipping/zones',
data: { name: countryName },
} );
zone.locations = await apiFetch( {
method: 'POST',
path: `/wc/v3/shipping/zones/${ zone.id }/locations`,
data: [ { code: countryCode, type: 'country' } ],
} );
shippingZones.push( zone );
}
shippingZones.reverse();
this.setState( { isPending: false, shippingZones } );
}
componentDidUpdate( prevProps, prevState ) {
const { countryCode, settings } = this.props;
const {
woocommerce_store_address: storeAddress,
woocommerce_default_country: defaultCountry,
woocommerce_store_postcode: storePostCode,
} = settings;
const { step } = this.state;
if (
step === 'rates' &&
( prevProps.countryCode !== countryCode ||
prevState.step !== 'rates' )
) {
this.fetchShippingZones();
}
const isCompleteAddress = Boolean(
storeAddress && defaultCountry && storePostCode
);
if ( step === 'store_location' && isCompleteAddress ) {
this.completeStep();
}
}
completeStep() {
const { createNotice } = this.props;
const { step } = this.state;
const steps = this.getSteps();
const currentStepIndex = steps.findIndex( ( s ) => s.key === step );
const nextStep = steps[ currentStepIndex + 1 ];
if ( nextStep ) {
this.setState( { step: nextStep.key } );
} else {
createNotice(
'success',
__(
"📦 Shipping is done! Don't worry, you can always change it later.",
'woocommerce-admin'
)
);
getHistory().push( getNewPath( {}, '/', {} ) );
}
}
getPluginsToActivate() {
const { countryCode } = this.props;
const plugins = [];
if ( [ 'GB', 'CA', 'AU' ].includes( countryCode ) ) {
plugins.push( 'woocommerce-shipstation-integration' );
} else if ( countryCode === 'US' ) {
plugins.push( 'woocommerce-services' );
plugins.push( 'jetpack' );
}
return difference( plugins, this.activePlugins );
}
getSteps() {
const { countryCode, isJetpackConnected } = this.props;
const pluginsToActivate = this.getPluginsToActivate();
const requiresJetpackConnection =
! isJetpackConnected && countryCode === 'US';
const steps = [
{
key: 'store_location',
label: __( 'Set store location', 'woocommerce-admin' ),
description: __(
'The address from which your business operates',
'woocommerce-admin'
),
content: (
<StoreLocation
{ ...this.props }
onComplete={ ( values ) => {
const country = getCountryCode(
values.countryState
);
recordEvent( 'tasklist_shipping_set_location', {
country,
} );
this.completeStep();
} }
/>
),
visible: true,
},
{
key: 'rates',
label: __( 'Set shipping costs', 'woocommerce-admin' ),
description: __(
'Define how much customers pay to ship to different destinations',
'woocommerce-admin'
),
content: (
<ShippingRates
buttonText={
pluginsToActivate.length ||
requiresJetpackConnection
? __( 'Proceed', 'woocommerce-admin' )
: __( 'Complete task', 'woocommerce-admin' )
}
shippingZones={ this.state.shippingZones }
onComplete={ this.completeStep }
{ ...this.props }
/>
),
visible: true,
},
{
key: 'label_printing',
label: __(
'Enable shipping label printing',
'woocommerce-admin'
),
description: pluginsToActivate.includes(
'woocommerce-shipstation-integration'
)
? interpolateComponents( {
mixedString: __(
'We recommend using ShipStation to save time at the post office by printing your shipping ' +
'labels at home. Try ShipStation free for 30 days. {{link}}Learn more{{/link}}.',
'woocommerce-admin'
),
components: {
link: (
<Link
href="https://woocommerce.com/products/shipstation-integration"
target="_blank"
type="external"
/>
),
},
} )
: __(
'With WooCommerce Services and Jetpack you can save time at the ' +
'Post Office by printing your shipping labels at home',
'woocommerce-admin'
),
content: (
<Plugins
onComplete={ () => {
recordEvent( 'tasklist_shipping_label_printing', {
install: true,
pluginsToActivate,
} );
this.completeStep();
} }
onSkip={ () => {
recordEvent( 'tasklist_shipping_label_printing', {
install: false,
pluginsToActivate,
} );
getHistory().push( getNewPath( {}, '/', {} ) );
} }
pluginSlugs={ pluginsToActivate }
{ ...this.props }
/>
),
visible: pluginsToActivate.length,
},
{
key: 'connect',
label: __( 'Connect your store', 'woocommerce-admin' ),
description: __(
'Connect your store to WordPress.com to enable label printing',
'woocommerce-admin'
),
content: (
<Connect
redirectUrl={ getAdminLink(
'admin.php?page=wc-admin'
) }
completeStep={ this.completeStep }
{ ...this.props }
onConnect={ () => {
recordEvent( 'tasklist_shipping_connect_store' );
} }
/>
),
visible: requiresJetpackConnection,
},
];
return filter( steps, ( step ) => step.visible );
}
render() {
const { isPending, step } = this.state;
const { isUpdateSettingsRequesting } = this.props;
return (
<div className="woocommerce-task-shipping">
<Card className="is-narrow">
<Stepper
isPending={ isPending || isUpdateSettingsRequesting }
isVertical
currentStep={ step }
steps={ this.getSteps() }
/>
</Card>
</div>
);
}
}
export default compose(
withSelect( ( select ) => {
const { getSettings, isUpdateSettingsRequesting } = select(
SETTINGS_STORE_NAME
);
const { getActivePlugins, isJetpackConnected } = select(
PLUGINS_STORE_NAME
);
const { general: settings = {} } = getSettings( 'general' );
const countryCode = getCountryCode(
settings.woocommerce_default_country
);
const { countries = [] } = getSetting( 'dataEndpoints', {} );
const country = countryCode
? countries.find( ( c ) => c.code === countryCode )
: null;
const countryName = country ? country.name : null;
const activePlugins = getActivePlugins();
return {
countryCode,
countryName,
isUpdateSettingsRequesting: isUpdateSettingsRequesting( 'general' ),
settings,
activePlugins,
isJetpackConnected: isJetpackConnected(),
};
} ),
withDispatch( ( dispatch ) => {
const { createNotice } = dispatch( 'core/notices' );
const { updateAndPersistSettingsForGroup } = dispatch(
SETTINGS_STORE_NAME
);
return {
createNotice,
updateAndPersistSettingsForGroup,
};
} )
)( Shipping );