Onboarding: Add tracks to extension purchase task and modal (https://github.com/woocommerce/woocommerce-admin/pull/3493)

* Add purchase task and modal to task list

* Track when cart modal is opened from task list

* Track when extensions are purchased or skipped

* Track checkout proceed on modal close

plugins/woocommerce-admin/client/dashboard/components/cart-modal.js

@@ -23,6 +23,7 @@ import { List } from '@woocommerce/components';
 import withSelect from 'wc-api/with-select';
 import { getProductIdsForCart } from 'dashboard/utils';
 import sanitizeHTML from 'lib/sanitize-html';
+import { recordEvent } from 'lib/tracks';
 
 class CartModal extends Component {
 	constructor( props ) {
@@ -43,6 +44,11 @@ class CartModal extends Component {
 			return;
 		}
 
+		recordEvent( 'tasklist_modal_proceed_checkout', {
+			product_ids: productIds,
+			purchase_install: false,
+		} );
+
 		const url = addQueryArgs( 'https://woocommerce.com/cart', {
 			'wccom-site': getSetting( 'siteUrl' ),
 			'wccom-woo-version': getSetting( 'wcVersion' ),
@@ -60,10 +66,28 @@ class CartModal extends Component {
 	}
 
 	onClickPurchaseLater() {
+		const { productIds } = this.props;
+
+		recordEvent( 'tasklist_modal_proceed_checkout', {
+			product_ids: productIds,
+			purchase_install: false,
+		} );
+
 		this.setState( { purchaseLaterButtonBusy: true } );
 		this.props.onClickPurchaseLater();
 	}
 
+	onClose() {
+		const { onClose, productIds } = this.props;
+
+		recordEvent( 'tasklist_modal_proceed_checkout', {
+			product_ids: productIds,
+			purchase_install: false,
+		} );
+
+		onClose();
+	}
+
 	renderProducts() {
 		const { productIds } = this.props;
 		const { productTypes = {}, themes = [] } = getSetting( 'onboarding', {} );
@@ -108,7 +132,7 @@ class CartModal extends Component {
 					'Would you like to purchase and install the following features now?',
 					'woocommerce-admin'
 				) }
-				onRequestClose={ () => this.props.onClose() }
+				onRequestClose={ () => this.onClose() }
 				className="woocommerce-cart-modal"
 			>
 				{ this.renderProducts() }

plugins/woocommerce-admin/client/dashboard/task-list/index.js

@@ -90,8 +90,10 @@ class TaskDashboard extends Component {
 		if ( this.getCurrentTask() ) {
 			return;
 		}
+
 		const { profileItems } = this.props;
 		const tasks = this.getTasks();
+
 		recordEvent( 'tasklist_view', {
 			number_tasks: tasks.length,
 			store_connected: profileItems.wccom_connected,
@@ -170,7 +172,13 @@ class TaskDashboard extends Component {
 	}
 
 	toggleCartModal() {
-		this.setState( { isCartModalOpen: ! this.state.isCartModalOpen } );
+		const { isCartModalOpen } = this.state;
+
+		if ( ! isCartModalOpen ) {
+			recordEvent( 'tasklist_purchase_extensions' );
+		}
+
+		this.setState( { isCartModalOpen: ! isCartModalOpen } );
 	}
 
 	closeWelcomeModal() {