Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Onboarding - Add business extension recommendations (https://github.com/woocommerce/woocommerce-admin/pull/2551) 

* Add business extension recommendations

* Fix failing test. Set max height and width for toggle

* Fix toggle display and fix when the extensions show (so they dont hide and disapear as "currently" selling is selected).
This commit is contained in:
Justin Shreve 2019-07-04 11:56:28 -04:00 committed by GitHub
parent 49d15db27e
commit 5a2f0c9da0
8 changed files with 239 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/business-details.js
View File

@ -5,8 +5,10 @@
import { __, _x, sprintf } from '@wordpress/i18n';
import { Component, Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { FormToggle } from '@wordpress/components';
import { Button, SelectControl } from 'newspack-components';
import { withDispatch } from '@wordpress/data';
import { keys, pickBy } from 'lodash';
/**
* WooCommerce dependencies
@ -28,6 +30,10 @@ class BusinessDetails extends Component {
other_platform: '',
product_count: '',
selling_venues: '',
extensions: {
facebook: true,
mailchimp: true,
},
};
this.onContinue = this.onContinue.bind( this );
@ -36,14 +42,22 @@ class BusinessDetails extends Component {
async onContinue() {
const { addNotice, goToNextStep, isError, updateProfileItems } = this.props;
const { other_platform, product_count, selling_venues } = this.state;
const extensions = keys( pickBy( this.state.extensions ) );
recordEvent( 'storeprofiler_store_business_details_continue', {
product_number: product_count,
already_selling: 'no' !== selling_venues,
used_platform: other_platform,
install_facebook: this.state.extensions.facebook,
install_mailchimp: this.state.extensions.mailchimp,
} );
await updateProfileItems( { other_platform, product_count, selling_venues } );
await updateProfileItems( {
other_platform,
product_count,
selling_venues,
business_extensions: extensions,
} );
if ( ! isError ) {
goToNextStep();
@ -89,6 +103,85 @@ class BusinessDetails extends Component {
}
}
onExtensionChange( extension ) {
this.setState( {
extensions: {
...this.state.extensions,
[ extension ]: ! this.state.extensions[ extension ],
},
} );
}
renderBusinessExtensionHelpText() {
const extensionSlugs = {
facebook: __( 'Facebook for WooCommerce', 'woocommerce-admin' ),
mailchimp: __( 'Mailchimp for WooCommerce', 'woocommerce-admin' ),
};
const extensions = keys( pickBy( this.state.extensions ) );
if ( 0 === extensions.length ) {
return null;
}
return (
<p>
{ sprintf(
__( 'The following plugins will be installed for free: %s' ),
extensions
.map( extension => {
return extensionSlugs[ extension ];
} )
.join( ', ' )
) }
</p>
);
}
renderBusinessExtensions() {
const extensionBenefits = [
{
slug: 'facebook',
title: __( 'Market on Facebook', 'woocommerce-admin' ),
icon: 'onboarding/facebook.png',
description: __(
'Grow your business by targeting the right people and driving sales with Facebook.',
'woocommerce-admin'
),
},
{
slug: 'mailchimp',
title: __( 'Contact customers with Mailchimp', 'woocommerce-admin' ),
icon: 'onboarding/mailchimp.png',
description: __(
'Send targeted campaigns, recover abandoned carts and much more with Mailchimp.',
'woocommerce-admin'
),
},
];
return (
<div className="woocommerce-profile-wizard__benefits">
{ extensionBenefits.map( benefit => (
<div className="woocommerce-profile-wizard__benefit" key={ benefit.title }>
<div className="woocommerce-profile-wizard__business-extension">
<img src={ wcSettings.wcAdminAssetUrl + benefit.icon } alt="" />
</div>
<div className="woocommerce-profile-wizard__benefit-content">
<H className="woocommerce-profile-wizard__benefit-title">{ benefit.title }</H>
<p>{ benefit.description }</p>
</div>
<div className="woocommerce-profile-wizard__benefit-toggle">
<FormToggle
checked={ this.state.extensions[ benefit.slug ] }
onChange={ () => this.onExtensionChange( benefit.slug ) }
className="woocommerce-profile-wizard__toggle"
/>
</div>
</div>
) ) }
</div>
);
}
render() {
const { other_platform, product_count, selling_venues } = this.state;
@ -156,6 +249,9 @@ class BusinessDetails extends Component {
},
];
// Show extensions when the currently selling elsewhere checkbox has been answered.
const showExtensions = '' !== this.state.selling_venues;
return (
<Fragment>
<H className="woocommerce-profile-wizard__header-title">
@ -193,6 +289,8 @@ class BusinessDetails extends Component {
/>
) }
{ showExtensions && this.renderBusinessExtensions() }
<Button
isPrimary
className="woocommerce-profile-wizard__continue"
@ -202,6 +300,8 @@ class BusinessDetails extends Component {
{ __( 'Continue', 'woocommerce-admin' ) }
</Button>
</Card>
{ showExtensions && this.renderBusinessExtensionHelpText() }
</Fragment>
);
}

2
plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/index.js
View File

@ -18,7 +18,6 @@ import SecurityIcon from './images/security';
import SalesTaxIcon from './images/local_atm';
import SpeedIcon from './images/flash_on';
import MobileAppIcon from './images/phone_android';
import './style.scss';
import withSelect from 'wc-api/with-select';
import { recordEvent } from 'lib/tracks';
@ -182,6 +181,7 @@ class Start extends Component {
onChange={ this.onTrackingChange }
onClick={ e => e.stopPropagation() }
tabIndex="-1"
className="woocommerce-profile-wizard__toggle"
/>
</div>

84
plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/style.scss
View File

@ -1,84 +0,0 @@
/** @format */
.woocommerce-profile-wizard__body {
.woocommerce-profile-wizard__tracking {
margin-bottom: $gap;
label {
font-size: 14px;
}
.components-base-control {
display: inline-block;
}
.components-form-toggle {
display: none;
}
.components-base-control__field {
margin-bottom: 0;
}
.muriel-checkbox label.components-checkbox-control__label {
margin-left: $gap-large;
}
.components-form-toggle__track {
background-color: $muriel-hot-purple-600;
}
border-bottom: 1px solid $muriel-gray-50;
border-top: 1px solid $muriel-gray-50;
margin-left: -$gap;
margin-right: -$gap;
padding-left: $gap;
padding-right: $gap;
@include breakpoint( '<782px' ) {
.components-form-toggle {
display: inline-block;
}
.components-checkbox-control__input {
display: none;
}
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: flex-end;
.muriel-checkbox label.components-checkbox-control__label {
margin-left: $gap-small;
}
}
}
.woocommerce-profile-wizard__benefit {
display: flex;
svg {
width: 24px;
min-width: 24px;
margin-right: $gap-large;
}
.woocommerce-profile-wizard__benefit-title {
font-size: 16px;
font-weight: 400;
margin-top: 0;
margin-bottom: $gap-smaller;
}
.woocommerce-profile-wizard__benefit-content p {
padding-bottom: $gap;
margin-top: 0;
border-bottom: 1px solid $muriel-gray-50;
font-size: 14px;
}
&:last-child p {
border-bottom: 0;
}
}
}

113
plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
View File

@ -213,6 +213,119 @@
border-color: $muriel-hot-purple-600;
}
.woocommerce-profile-wizard__benefit {
display: flex;
svg:first-child {
width: 24px;
min-width: 24px;
margin-right: $gap-large;
}
.woocommerce-profile-wizard__benefit-title {
font-size: 16px;
font-weight: 400;
margin-top: 0;
margin-bottom: $gap-smaller;
}
.woocommerce-profile-wizard__benefit-content p {
padding-bottom: $gap;
margin-top: 0;
border-bottom: 1px solid $muriel-gray-50;
font-size: 14px;
}
.woocommerce-profile-wizard__benefit-toggle {
padding-top: $gap-larger;
margin-left: $gap;
}
&:last-child p {
border-bottom: 0;
}
}
.woocommerce-profile-wizard__business-extension {
background: #f6f6f6;
padding-right: 4px;
padding-left: 4px;
height: 100%;
padding-top: 12px;
padding-bottom: 12px;
img {
box-sizing: unset;
max-width: 100px;
max-height: 50%;
}
}
.woocommerce-profile-wizard__product-types-card {
.woocommerce-profile-wizard__benefit-content {
margin-left: 12px;
}
}
.woocommerce-profile-wizard__toggle {
label {
font-size: 14px;
}
.components-base-control {
display: inline-block;
}
&.components-form-toggle {
display: inline-block;
}
&.components-form-toggle .components-form-toggle__track {
width: 36px;
max-width: 36px;
height: 18px;
max-height: 18px;
}
.components-base-control__field {
margin-bottom: 0;
}
.muriel-checkbox label.components-checkbox-control__label {
margin-left: $gap-large;
}
&.components-form-toggle.is-checked {
.components-form-toggle__track {
background-color: $muriel-hot-purple-600;
border-color: $muriel-hot-purple-600;
}
}
}
.woocommerce-profile-wizard__tracking {
.components-form-toggle {
display: none;
}
@include breakpoint( '<782px' ) {
.components-form-toggle {
display: inline-block;
}
.components-checkbox-control__input {
display: none;
}
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: flex-end;
.muriel-checkbox label.components-checkbox-control__label {
margin-left: $gap-small;
}
}
}
.woocommerce-profile-wizard__checkbox-group {
.muriel-checkbox {
margin-top: 0;

BIN
plugins/woocommerce-admin/images/onboarding/facebook.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
plugins/woocommerce-admin/images/onboarding/mailchimp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

32
plugins/woocommerce-admin/includes/api/class-wc-admin-rest-onboarding-profile-controller.php
View File

@ -193,21 +193,21 @@ class WC_Admin_REST_Onboarding_Profile_Controller extends WC_REST_Data_Controlle
*/
public static function get_profile_properties() {
$properties = array(
'completed' => array(
'completed' => array(
'type' => 'boolean',
'description' => __( 'Whether or not the profile was completed.', 'woocommerce-admin' ),
'context' => array( 'view' ),
'readonly' => true,
'validate_callback' => 'rest_validate_request_arg',
),
'skipped' => array(
'skipped' => array(
'type' => 'boolean',
'description' => __( 'Whether or not the profile was skipped.', 'woocommerce-admin' ),
'context' => array( 'view' ),
'readonly' => true,
'validate_callback' => 'rest_validate_request_arg',
),
'account_type' => array(
'account_type' => array(
'type' => 'string',
'description' => __( 'Account type used for Jetpack.', 'woocommerce-admin' ),
'context' => array( 'view' ),
@ -219,7 +219,7 @@ class WC_Admin_REST_Onboarding_Profile_Controller extends WC_REST_Data_Controlle
'google',
),
),
'industry' => array(
'industry' => array(
'type' => 'array',
'description' => __( 'Industry.', 'woocommerce-admin' ),
'context' => array( 'view' ),
@ -231,7 +231,7 @@ class WC_Admin_REST_Onboarding_Profile_Controller extends WC_REST_Data_Controlle
'type' => 'string',
),
),
'product_types' => array(
'product_types' => array(
'type' => 'array',
'description' => __( 'Types of products sold.', 'woocommerce-admin' ),
'context' => array( 'view' ),
@ -243,7 +243,7 @@ class WC_Admin_REST_Onboarding_Profile_Controller extends WC_REST_Data_Controlle
'type' => 'string',
),
),
'product_count' => array(
'product_count' => array(
'type' => 'string',
'description' => __( 'Number of products to be added.', 'woocommerce-admin' ),
'context' => array( 'view' ),
@ -256,7 +256,7 @@ class WC_Admin_REST_Onboarding_Profile_Controller extends WC_REST_Data_Controlle
'1000+',
),
),
'selling_venues' => array(
'selling_venues' => array(
'type' => 'string',
'description' => __( 'Other places the store is selling products.', 'woocommerce-admin' ),
'context' => array( 'view' ),
@ -269,7 +269,7 @@ class WC_Admin_REST_Onboarding_Profile_Controller extends WC_REST_Data_Controlle
'brick-mortar-other',
),
),
'other_platform' => array(
'other_platform' => array(
'type' => 'string',
'description' => __( 'Name of other platform used to sell.', 'woocommerce-admin' ),
'context' => array( 'view' ),
@ -283,7 +283,19 @@ class WC_Admin_REST_Onboarding_Profile_Controller extends WC_REST_Data_Controlle
'other',
),
),
'theme' => array(
'business_extensions' => array(
'type' => 'array',
'description' => __( 'Extra business extensions to install.', 'woocommerce-admin' ),
'context' => array( 'view' ),
'readonly' => true,
'sanitize_callback' => 'wp_parse_slug_list',
'validate_callback' => 'rest_validate_request_arg',
'items' => array(
'enum' => array( 'mailchimp', 'facebook' ),
'type' => 'string',
),
),
'theme' => array(
'type' => 'string',
'description' => __( 'Selected store theme.', 'woocommerce-admin' ),
'context' => array( 'view' ),
@ -291,7 +303,7 @@ class WC_Admin_REST_Onboarding_Profile_Controller extends WC_REST_Data_Controlle
'sanitize_callback' => 'sanitize_title_with_dashes',
'validate_callback' => 'rest_validate_request_arg',
),
'items_purchased' => array(
'items_purchased' => array(
'type' => 'boolean',
'description' => __( 'Whether or not the user opted to purchase items now or later.', 'woocommerce-admin' ),
'context' => array( 'view' ),

3
plugins/woocommerce-admin/tests/api/onboarding-profile.php
View File

@ -97,7 +97,7 @@ class WC_Tests_API_Onboarding_Profiles extends WC_REST_Unit_Test_Case {
$data = $response->get_data();
$properties = $data['schema']['properties'];
$this->assertCount( 10, $properties );
$this->assertCount( 11, $properties );
$this->assertArrayHasKey( 'completed', $properties );
$this->assertArrayHasKey( 'skipped', $properties );
$this->assertArrayHasKey( 'account_type', $properties );
@ -106,6 +106,7 @@ class WC_Tests_API_Onboarding_Profiles extends WC_REST_Unit_Test_Case {
$this->assertArrayHasKey( 'product_count', $properties );
$this->assertArrayHasKey( 'selling_venues', $properties );
$this->assertArrayHasKey( 'other_platform', $properties );
$this->assertArrayHasKey( 'business_extensions', $properties );
$this->assertArrayHasKey( 'theme', $properties );
$this->assertArrayHasKey( 'items_purchased', $properties );
}