Update shipping logic when OBW is skipped (#33630)
* Update shipping task fields when shipping smart default feature is enabled. * Always display the shipping task regardless of having a physical product * Updated text copy for the fields * Do not display the step description if it is not the current step * Added a banner for the shipping printing step Remove description if the it is not the current step * Add changelog * Fix namespace conflict after the rebase * Re-use wcs banner from the experimental shipping recommendation * Delete ShippingLabelPrinting -- replaced by wcs banner from experimental-shipping-recommendation * Add TOS link * Remove ShippingPrintLabel styles -- no longer needed * Minor refactor * Move description set logic to getSteps() * Use map to override step fields * Remove unnecessary feature check * Remove description in the map func * Render ShipStation banner if plugins includes woocommerce-shipstation-integration
This commit is contained in:
Moon
GitHub
parent
88a66e6983
commit
feb3ab0581
|
|
@ -0,0 +1,79 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import ShipStationImage from '../images/shipstation.svg';
|
||||
import TimerImage from '../images/timer.svg';
|
||||
import StarImage from '../images/star.svg';
|
||||
import DiscountImage from '../images/discount.svg';
|
||||
import './wcs-banner.scss';
|
||||
|
||||
export const ShipStationBanner = () => {
|
||||
return (
|
||||
<div className="woocommerce-task-shipping-recommendation__plugins-install">
|
||||
<div className="plugins-install__shipstation-image">
|
||||
<img src={ ShipStationImage } alt="" />
|
||||
</div>
|
||||
<div className="plugins-install__list">
|
||||
<div className="plugins-install__list-item">
|
||||
<div className="plugins-install__list-icon">
|
||||
<img src={ TimerImage } alt="" />
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>
|
||||
{ __( 'Save your time', 'woocommerce' ) }
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
{ __(
|
||||
'Import your orders automatically, no matter where you sell.',
|
||||
'woocommerce'
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="plugins-install__list-item">
|
||||
<div className="plugins-install__list-icon">
|
||||
<img src={ DiscountImage } alt="" />
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>
|
||||
{ __( 'Save your money', 'woocommerce' ) }
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
{ __(
|
||||
'Live shipping rates amongst all the carrier choices.',
|
||||
'woocommerce'
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="plugins-install__list-item">
|
||||
<div className="plugins-install__list-icon">
|
||||
<img src={ StarImage } alt="" />
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<strong>
|
||||
{ __( 'Wow your shoppers', 'woocommerce' ) }
|
||||
</strong>
|
||||
</div>
|
||||
<div>
|
||||
{ __(
|
||||
'Customize notification emails, packing slips, shipping labels.',
|
||||
'woocommerce'
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.0 KiB |
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.644531" width="28" height="28" rx="4" fill="#F6F7F7"/>
|
||||
<mask id="mask0_887_120547" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="7" width="15" height="13">
|
||||
<path d="M14.6442 7.33301L16.3655 11.9683L21.3109 12.171L17.4295 15.239L18.7642 19.9997L14.6442 17.2603L10.5242 19.9997L11.8589 15.239L7.97754 12.171L12.9229 11.9683L14.6442 7.33301Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_887_120547)">
|
||||
<rect x="6.64453" y="6" width="16" height="16" fill="#A2AAB2"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 594 B |
|
|
@ -0,0 +1,9 @@
|
|||
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.644531" width="28" height="28" rx="4" fill="#F6F7F7"/>
|
||||
<mask id="mask0_887_120535" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="8" y="6" width="13" height="15">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6445 6.66699H16.6445V8.00033H12.6445V6.66699ZM13.9779 15.3337V11.3337H15.3112V15.3337H13.9779ZM19.3312 10.927L20.2779 9.98033C19.9912 9.64033 19.6779 9.32033 19.3379 9.04033L18.3912 9.98699C17.3579 9.16033 16.0579 8.66699 14.6445 8.66699C11.3312 8.66699 8.64453 11.3537 8.64453 14.667C8.64453 17.9803 11.3245 20.667 14.6445 20.667C17.9645 20.667 20.6445 17.9803 20.6445 14.667C20.6445 13.2537 20.1512 11.9537 19.3312 10.927ZM9.97786 14.667C9.97786 17.247 12.0645 19.3337 14.6445 19.3337C17.2245 19.3337 19.3112 17.247 19.3112 14.667C19.3112 12.087 17.2245 10.0003 14.6445 10.0003C12.0645 10.0003 9.97786 12.087 9.97786 14.667Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_887_120535)">
|
||||
<rect x="6.64453" y="6" width="16" height="16" fill="#A2AAB2"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -21,6 +21,7 @@ import {
|
|||
import { recordEvent } from '@woocommerce/tracks';
|
||||
import { registerPlugin } from '@wordpress/plugins';
|
||||
import { WooOnboardingTask } from '@woocommerce/onboarding';
|
||||
import { Text } from '@woocommerce/experimental';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -29,6 +30,9 @@ import Connect from '../../../dashboard/components/connect';
|
|||
import { getCountryCode } from '../../../dashboard/utils';
|
||||
import StoreLocation from '../steps/location';
|
||||
import ShippingRates from './rates';
|
||||
import { WCSBanner } from '../experimental-shipping-recommendation/components/wcs-banner';
|
||||
import { ShipStationBanner } from '../experimental-shipping-recommendation/components/shipstation-banner';
|
||||
|
||||
import { createNoticesFromResponse } from '../../../lib/notices';
|
||||
import './shipping.scss';
|
||||
|
||||
|
|
@ -46,6 +50,10 @@ export class Shipping extends Component {
|
|||
this.activePlugins = props.activePlugins;
|
||||
this.state = this.initialState;
|
||||
this.completeStep = this.completeStep.bind( this );
|
||||
|
||||
this.shippingSmartDefaultsEnabled =
|
||||
window.wcAdminFeatures &&
|
||||
window.wcAdminFeatures[ 'shipping-smart-defaults' ];
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
@ -195,7 +203,7 @@ export class Shipping extends Component {
|
|||
const requiresJetpackConnection =
|
||||
! isJetpackConnected && countryCode === 'US';
|
||||
|
||||
const steps = [
|
||||
let steps = [
|
||||
{
|
||||
key: 'store_location',
|
||||
label: __( 'Set store location', 'woocommerce' ),
|
||||
|
|
@ -328,12 +336,176 @@ export class Shipping extends Component {
|
|||
},
|
||||
];
|
||||
|
||||
// Override the step fields for the smart shipping defaults.
|
||||
if ( this.shippingSmartDefaultsEnabled ) {
|
||||
const agreementText = pluginsToActivate.includes(
|
||||
'woocommerce-services'
|
||||
)
|
||||
? __(
|
||||
'By installing Jetpack and WooCommerce Shipping you agree to the {{link}}Terms of Service{{/link}}.',
|
||||
'woocommerce'
|
||||
)
|
||||
: __(
|
||||
'By installing Jetpack you agree to the {{link}}Terms of Service{{/link}}.',
|
||||
'woocommerce'
|
||||
);
|
||||
const shippingSmartDefaultsSteps = {
|
||||
rates: {
|
||||
label: __( 'Review your shipping options', 'woocommerce' ),
|
||||
description: __(
|
||||
'We recommend the following shipping options based on your location. You can manage your shipping options again at any time in WooCommerce Shipping settings.',
|
||||
'woocommerce'
|
||||
),
|
||||
content: (
|
||||
<ShippingRates
|
||||
buttonText={ __(
|
||||
'Save shipping options',
|
||||
'woocommerce'
|
||||
) }
|
||||
shippingZones={ this.state.shippingZones }
|
||||
onComplete={ () => {
|
||||
const { id } = task;
|
||||
optimisticallyCompleteTask( id );
|
||||
invalidateResolutionForStoreSelector();
|
||||
this.completeStep();
|
||||
} }
|
||||
createNotice={ createNotice }
|
||||
/>
|
||||
),
|
||||
},
|
||||
label_printing: {
|
||||
label: __(
|
||||
'Enable shipping label printing and discounted rates',
|
||||
'woocommerce'
|
||||
),
|
||||
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'
|
||||
),
|
||||
components: {
|
||||
link: (
|
||||
<Link
|
||||
href="https://woocommerce.com/products/shipstation-integration?utm_medium=product"
|
||||
target="_blank"
|
||||
type="external"
|
||||
/>
|
||||
),
|
||||
},
|
||||
} )
|
||||
: __(
|
||||
'Save time and fulfill your orders with WooCommerce Shipping. You can manage it at any time in WooCommerce Shipping Settings.',
|
||||
'woocommerce'
|
||||
),
|
||||
|
||||
content: (
|
||||
<>
|
||||
{ pluginsToActivate.includes(
|
||||
'woocommerce-services'
|
||||
) ? (
|
||||
<WCSBanner />
|
||||
) : (
|
||||
<ShipStationBanner />
|
||||
) }
|
||||
<Plugins
|
||||
onComplete={ ( plugins, response ) => {
|
||||
createNoticesFromResponse( response );
|
||||
recordEvent(
|
||||
'tasklist_shipping_label_printing',
|
||||
{
|
||||
install: true,
|
||||
plugins_to_activate:
|
||||
pluginsToActivate,
|
||||
}
|
||||
);
|
||||
this.completeStep();
|
||||
} }
|
||||
onError={ ( errors, response ) =>
|
||||
createNoticesFromResponse( response )
|
||||
}
|
||||
onSkip={ () => {
|
||||
recordEvent(
|
||||
'tasklist_shipping_label_printing',
|
||||
{
|
||||
install: false,
|
||||
plugins_to_activate:
|
||||
pluginsToActivate,
|
||||
}
|
||||
);
|
||||
getHistory().push(
|
||||
getNewPath( {}, '/', {} )
|
||||
);
|
||||
onComplete();
|
||||
} }
|
||||
pluginSlugs={ pluginsToActivate }
|
||||
/>
|
||||
{ ! isJetpackConnected &&
|
||||
pluginsToActivate.includes(
|
||||
'woocommerce-services'
|
||||
) && (
|
||||
<Text
|
||||
variant="caption"
|
||||
className="woocommerce-task__caption"
|
||||
size="12"
|
||||
lineHeight="16px"
|
||||
style={ { display: 'block' } }
|
||||
>
|
||||
{ interpolateComponents( {
|
||||
mixedString: agreementText,
|
||||
components: {
|
||||
link: (
|
||||
<Link
|
||||
href={
|
||||
'https://wordpress.com/tos/'
|
||||
}
|
||||
target="_blank"
|
||||
type="external"
|
||||
>
|
||||
<></>
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
} ) }
|
||||
</Text>
|
||||
) }
|
||||
</>
|
||||
),
|
||||
},
|
||||
store_location: {
|
||||
label: __( 'Set your store location', 'woocommerce' ),
|
||||
description: __(
|
||||
'Add your store location to help us calculate shipping rates and the best shipping options for you. You can manage your store location again at any time in WooCommerce Settings General.',
|
||||
'woocommerce'
|
||||
),
|
||||
buttonText: __( 'Save store location', 'woocommerce' ),
|
||||
},
|
||||
};
|
||||
|
||||
steps = steps.map( ( step ) => {
|
||||
if ( shippingSmartDefaultsSteps.hasOwnProperty( step.key ) ) {
|
||||
step = {
|
||||
...step,
|
||||
...shippingSmartDefaultsSteps[ step.key ],
|
||||
};
|
||||
}
|
||||
// Empty description field if it's not the current step.
|
||||
if ( step.key !== this.state.step ) {
|
||||
step.description = '';
|
||||
}
|
||||
return step;
|
||||
} );
|
||||
}
|
||||
return filter( steps, ( step ) => step.visible );
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isPending, step } = this.state;
|
||||
const { isUpdateSettingsRequesting } = this.props;
|
||||
const steps = this.getSteps();
|
||||
|
||||
return (
|
||||
<div className="woocommerce-task-shipping">
|
||||
|
|
@ -345,7 +517,7 @@ export class Shipping extends Component {
|
|||
}
|
||||
isVertical
|
||||
currentStep={ step }
|
||||
steps={ this.getSteps() }
|
||||
steps={ steps }
|
||||
/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ const StoreLocation = ( {
|
|||
isSettingsRequesting,
|
||||
updateAndPersistSettingsForGroup,
|
||||
settings,
|
||||
buttonText = __( 'Continue', 'woocommerce' ),
|
||||
} ) => {
|
||||
const { getLocale, hasFinishedResolution } = useSelect( ( select ) => {
|
||||
const countryStore = select( COUNTRIES_STORE_NAME );
|
||||
|
|
@ -101,7 +102,7 @@ const StoreLocation = ( {
|
|||
setValue={ setValue }
|
||||
/>
|
||||
<Button isPrimary onClick={ handleSubmit }>
|
||||
{ __( 'Continue', 'woocommerce' ) }
|
||||
{ buttonText }
|
||||
</Button>
|
||||
</Fragment>
|
||||
) }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: update
|
||||
|
||||
Update shipping task fields when shipping smart default feature is enabled.
|
||||
|
|
@ -2,9 +2,9 @@
|
|||
|
||||
namespace Automattic\WooCommerce\Admin\Features\OnboardingTasks\Tasks;
|
||||
|
||||
use Automattic\WooCommerce\Admin\Features\Features;
|
||||
use Automattic\WooCommerce\Internal\Admin\Onboarding\OnboardingProfile;
|
||||
use Automattic\WooCommerce\Admin\Features\OnboardingTasks\Task;
|
||||
use Automattic\WooCommerce\Admin\Features\Features;
|
||||
use Automattic\WooCommerce\Admin\PluginsHelper;
|
||||
use WC_Data_Store;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue