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).

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 (
+			<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>
 		);
 	}

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"
 						/>
 					</div>
 

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

@@ -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;
-		}
-	}
-}

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;

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

@@ -283,6 +283,18 @@ class WC_Admin_REST_Onboarding_Profile_Controller extends WC_REST_Data_Controlle
 					'other',
 				),
 			),
+			'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' ),

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 );
 	}