Add onboarding step 6 - Product Types (https://github.com/woocommerce/woocommerce-admin/pull/2335)
* Add product type information to onboarding * Add product types step to onboarding profiler * Update product type prices and learn more URLs * Add styling to allow help text in checkbox group * Match button and card action styling
This commit is contained in:
Joshua T Flowers
GitHub
parent
b6b411bab4
commit
7622dee166
|
|
@ -23,6 +23,7 @@ import Plugins from './steps/plugins';
|
|||
import Start from './steps/start';
|
||||
import Industry from './steps/industry';
|
||||
import StoreDetails from './steps/store-details';
|
||||
import ProductTypes from './steps/product-types';
|
||||
import './style.scss';
|
||||
|
||||
const getSteps = () => {
|
||||
|
|
@ -47,7 +48,7 @@ const getSteps = () => {
|
|||
} );
|
||||
steps.push( {
|
||||
key: 'product-types',
|
||||
container: Fragment,
|
||||
container: ProductTypes,
|
||||
label: __( 'Product Types', 'woocommerce-admin' ),
|
||||
} );
|
||||
steps.push( {
|
||||
|
|
|
|||
|
|
@ -80,13 +80,11 @@ class Industry extends Component {
|
|||
} ) }
|
||||
</div>
|
||||
|
||||
<div className="woocommerce-profile-wizard__industry-actions">
|
||||
{ selected.length > 0 && (
|
||||
<Button isPrimary onClick={ this.onContinue }>
|
||||
{ __( 'Continue', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
) }
|
||||
</div>
|
||||
{ selected.length > 0 && (
|
||||
<Button isPrimary onClick={ this.onContinue }>
|
||||
{ __( 'Continue', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
) }
|
||||
</Card>
|
||||
</Fragment>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
/** @format */
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Component, Fragment } from '@wordpress/element';
|
||||
import { compose } from '@wordpress/compose';
|
||||
import { Button, CheckboxControl } from 'newspack-components';
|
||||
import { includes, filter } from 'lodash';
|
||||
import interpolateComponents from 'interpolate-components';
|
||||
import { withDispatch } from '@wordpress/data';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { H, Card, Link } from '@woocommerce/components';
|
||||
import withSelect from 'wc-api/with-select';
|
||||
|
||||
class ProductTypes extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.state = {
|
||||
selected: [],
|
||||
};
|
||||
|
||||
this.onContinue = this.onContinue.bind( this );
|
||||
this.onChange = this.onChange.bind( this );
|
||||
}
|
||||
|
||||
async onContinue() {
|
||||
const { addNotice, goToNextStep, isError, updateProfileItems } = this.props;
|
||||
|
||||
await updateProfileItems( { product_types: this.state.selected } );
|
||||
|
||||
if ( ! isError ) {
|
||||
goToNextStep();
|
||||
} else {
|
||||
addNotice( {
|
||||
status: 'error',
|
||||
message: __( 'There was a problem updating your product types.', 'woocommerce-admin' ),
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
onChange( slug ) {
|
||||
this.setState( state => {
|
||||
if ( includes( state.selected, slug ) ) {
|
||||
return {
|
||||
selected:
|
||||
filter( state.selected, value => {
|
||||
return value !== slug;
|
||||
} ) || [],
|
||||
};
|
||||
}
|
||||
const newSelected = state.selected;
|
||||
newSelected.push( slug );
|
||||
return {
|
||||
selected: newSelected,
|
||||
};
|
||||
} );
|
||||
}
|
||||
|
||||
render() {
|
||||
const { productTypes } = wcSettings.onboarding;
|
||||
const { selected } = this.state;
|
||||
return (
|
||||
<Fragment>
|
||||
<H className="woocommerce-profile-wizard__header-title">
|
||||
{ __( 'What type of products will be listed?', 'woocommerce-admin' ) }
|
||||
</H>
|
||||
<p>{ __( 'Choose any that apply' ) }</p>
|
||||
|
||||
<Card className="woocommerce-profile-wizard__product-types-card">
|
||||
<div className="woocommerce-profile-wizard__checkbox-group">
|
||||
{ Object.keys( productTypes ).map( slug => {
|
||||
const helpText = interpolateComponents( {
|
||||
mixedString:
|
||||
productTypes[ slug ].description +
|
||||
( productTypes[ slug ].more_url ? ' {{moreLink/}}' : '' ),
|
||||
components: {
|
||||
moreLink: productTypes[ slug ].more_url ? (
|
||||
<Link href={ productTypes[ slug ].more_url } target="_blank" type="external">
|
||||
{ __( 'Learn more', 'woocommerce-admin' ) }
|
||||
</Link>
|
||||
) : (
|
||||
''
|
||||
),
|
||||
},
|
||||
} );
|
||||
|
||||
return (
|
||||
<CheckboxControl
|
||||
key={ slug }
|
||||
label={ productTypes[ slug ].label }
|
||||
help={ helpText }
|
||||
onChange={ () => this.onChange( slug ) }
|
||||
/>
|
||||
);
|
||||
} ) }
|
||||
</div>
|
||||
|
||||
{ selected.length > 0 && (
|
||||
<Button
|
||||
isPrimary
|
||||
className="woocommerce-profile-wizard__continue"
|
||||
onClick={ this.onContinue }
|
||||
>
|
||||
{ __( 'Continue', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
) }
|
||||
</Card>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withSelect( select => {
|
||||
const { getProfileItemsError } = select( 'wc-api' );
|
||||
|
||||
const isError = Boolean( getProfileItemsError() );
|
||||
|
||||
return { isError };
|
||||
} ),
|
||||
withDispatch( dispatch => {
|
||||
const { addNotice, updateProfileItems } = dispatch( 'wc-api' );
|
||||
|
||||
return {
|
||||
addNotice,
|
||||
updateProfileItems,
|
||||
};
|
||||
} )
|
||||
)( ProductTypes );
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
button {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
margin: $gap auto 0;
|
||||
min-width: 310px;
|
||||
max-width: 100%;
|
||||
justify-content: center;
|
||||
|
|
@ -210,34 +210,60 @@
|
|||
.muriel-checkbox {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
height: 56px;
|
||||
position: relative;
|
||||
padding-top: $gap;
|
||||
padding-bottom: $gap;
|
||||
|
||||
label.components-checkbox-control__label {
|
||||
border-bottom: 1px solid $muriel-gray-50;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: $gap-small;
|
||||
width: calc(100% - #{$gap-large});
|
||||
padding-bottom: $gap;
|
||||
left: $gap-large * 2;
|
||||
width: calc(100% - #{$gap * 2});
|
||||
height: 1px;
|
||||
background-color: $muriel-gray-50;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.components-base-control {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.components-base-control__field {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.components-checkbox-control__input {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
label.components-checkbox-control__label,
|
||||
.components-base-control__help {
|
||||
margin-left: $gap-large * 2;
|
||||
}
|
||||
|
||||
.components-base-control__help {
|
||||
color: $muriel-gray-600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
label.components-checkbox-control__label {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-profile-wizard__industry-card {
|
||||
.woocommerce-card__body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.woocommerce-profile-wizard__industry-actions {
|
||||
padding-bottom: $gap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide wp-admin and WooCommerce elements when viewing the profile wizard */
|
||||
#adminmenumain,
|
||||
#wpadminbar,
|
||||
|
|
@ -270,9 +296,10 @@
|
|||
margin-left: 64px;
|
||||
min-height: 28px;
|
||||
|
||||
button {
|
||||
button.muriel-button {
|
||||
margin: 0;
|
||||
height: 40px;
|
||||
min-width: none;
|
||||
min-width: auto;
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -239,15 +239,7 @@ class WC_Admin_REST_Onboarding_Profile_Controller extends WC_REST_Data_Controlle
|
|||
'sanitize_callback' => 'wp_parse_slug_list',
|
||||
'validate_callback' => 'rest_validate_request_arg',
|
||||
'items' => array(
|
||||
'enum' => array(
|
||||
'physical',
|
||||
'downloads',
|
||||
'subscriptions',
|
||||
'memberships',
|
||||
'composite',
|
||||
'spaces',
|
||||
'rentals',
|
||||
),
|
||||
'enum' => array_keys( WC_Admin_Onboarding::get_allowed_product_types() ),
|
||||
'type' => 'string',
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -71,6 +71,53 @@ class WC_Admin_Onboarding {
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a list of allowed product types for the onboarding wizard.
|
||||
*
|
||||
* @todo Prices for products should be pulled dynamically.
|
||||
* @return array
|
||||
*/
|
||||
public static function get_allowed_product_types() {
|
||||
return apply_filters(
|
||||
'woocommerce_admin_onboarding_product_types',
|
||||
array(
|
||||
'physical' => array(
|
||||
'label' => __( 'Physical products', 'woocommerce-admin' ),
|
||||
'description' => __( 'Products you ship to customers.', 'woocommerce-admin' ),
|
||||
),
|
||||
'downloads' => array(
|
||||
'label' => __( 'Downloads', 'woocommerce-admin' ),
|
||||
'description' => __( 'Virtual products that customers download.', 'woocommerce-admin' ),
|
||||
),
|
||||
'subscriptions' => array(
|
||||
'label' => __( 'Subscriptions — $199 per year', 'woocommerce-admin' ),
|
||||
'description' => __( 'Products with recurring payment.', 'woocommerce-admin' ),
|
||||
'more_url' => __( 'https://woocommerce.com/products/woocommerce-subscriptions/', 'woocommerce-admin' ),
|
||||
),
|
||||
'memberships' => array(
|
||||
'label' => __( 'Memberships — $149 per year', 'woocommerce-admin' ),
|
||||
'description' => __( 'Restrict content to customer groups.', 'woocommerce-admin' ),
|
||||
'more_url' => __( 'https://woocommerce.com/products/woocommerce-memberships/', 'woocommerce-admin' ),
|
||||
),
|
||||
'composite' => array(
|
||||
'label' => __( 'Composite Products — $79 per year', 'woocommerce-admin' ),
|
||||
'description' => __( 'Kits with configurable components.', 'woocommerce-admin' ),
|
||||
'more_url' => __( 'https://woocommerce.com/products/composite-products/', 'woocommerce-admin' ),
|
||||
),
|
||||
'spaces' => array(
|
||||
'label' => __( 'Spaces — $249 per year', 'woocommerce-admin' ),
|
||||
'description' => __( 'Sell access to spaces, e.g. hotel rooms.', 'woocommerce-admin' ),
|
||||
'more_url' => __( 'https://woocommerce.com/products/woocommerce-accommodation-bookings/', 'woocommerce-admin' ),
|
||||
),
|
||||
'rentals' => array(
|
||||
'label' => __( 'Rentals — $249 per year', 'woocommerce-admin' ),
|
||||
'description' => __( 'Sell access to rental items, e.g. cars.', 'woocommerce-admin' ),
|
||||
'more_url' => __( 'https://woocommerce.com/products/woocommerce-bookings/', 'woocommerce-admin' ),
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add profiler items to component settings.
|
||||
*
|
||||
|
|
@ -78,8 +125,9 @@ class WC_Admin_Onboarding {
|
|||
*/
|
||||
public function component_settings( $settings ) {
|
||||
$settings['onboarding'] = array(
|
||||
'profile' => get_option( 'wc_onboarding_profile', array() ),
|
||||
'industries' => self::get_allowed_industries(),
|
||||
'industries' => self::get_allowed_industries(),
|
||||
'productTypes' => self::get_allowed_product_types(),
|
||||
'profile' => get_option( 'wc_onboarding_profile', array() ),
|
||||
);
|
||||
return $settings;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue