diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/business-details.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/business-details.js
index b2c23ed50ec..83556652ea4 100644
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/business-details.js
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/business-details.js
@@ -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 (
+
+ { sprintf(
+ __( 'The following plugins will be installed for free: %s' ),
+ extensions
+ .map( extension => {
+ return extensionSlugs[ extension ];
+ } )
+ .join( ', ' )
+ ) }
+
+ );
+ }
+
+ 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 (
+
+ { extensionBenefits.map( benefit => (
+
+
+
+
+
+
{ benefit.title }
+
{ benefit.description }
+
+
+ this.onExtensionChange( benefit.slug ) }
+ className="woocommerce-profile-wizard__toggle"
+ />
+
+
+ ) ) }
+
+ );
+ }
+
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 (
@@ -193,6 +289,8 @@ class BusinessDetails extends Component {
/>
) }
+ { showExtensions && this.renderBusinessExtensions() }
+
);
}
diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/index.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/index.js
index 780f5332207..eb478964b71 100644
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/index.js
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/index.js
@@ -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"
/>
diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/style.scss b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/style.scss
deleted file mode 100644
index 438758e35a8..00000000000
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/style.scss
+++ /dev/null
@@ -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;
- }
- }
-}
diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss b/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
index 847a46f0632..a1b96f938f0 100644
--- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
+++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
@@ -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;
diff --git a/plugins/woocommerce-admin/images/onboarding/facebook.png b/plugins/woocommerce-admin/images/onboarding/facebook.png
new file mode 100644
index 00000000000..2de3787cf5c
Binary files /dev/null and b/plugins/woocommerce-admin/images/onboarding/facebook.png differ
diff --git a/plugins/woocommerce-admin/images/onboarding/mailchimp.png b/plugins/woocommerce-admin/images/onboarding/mailchimp.png
new file mode 100644
index 00000000000..a7ee044481b
Binary files /dev/null and b/plugins/woocommerce-admin/images/onboarding/mailchimp.png differ
diff --git a/plugins/woocommerce-admin/includes/api/class-wc-admin-rest-onboarding-profile-controller.php b/plugins/woocommerce-admin/includes/api/class-wc-admin-rest-onboarding-profile-controller.php
index 3cd2727e87f..2754b61e7b3 100644
--- a/plugins/woocommerce-admin/includes/api/class-wc-admin-rest-onboarding-profile-controller.php
+++ b/plugins/woocommerce-admin/includes/api/class-wc-admin-rest-onboarding-profile-controller.php
@@ -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' ),
diff --git a/plugins/woocommerce-admin/tests/api/onboarding-profile.php b/plugins/woocommerce-admin/tests/api/onboarding-profile.php
index 5338f51c015..f103b6cd956 100644
--- a/plugins/woocommerce-admin/tests/api/onboarding-profile.php
+++ b/plugins/woocommerce-admin/tests/api/onboarding-profile.php
@@ -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 );
}