From a7ad1a932bcf71fcdbac8ee728d0ea55c909d383 Mon Sep 17 00:00:00 2001
From: oskosk <oskosk@gmail.com>
Date: Fri, 4 Feb 2022 10:55:45 -0300
Subject: [PATCH 1/3] Fire Tracks event when clicking CTA button on product
 Interstitial page

---
 .../components/product-detail-card/index.jsx  | 25 ++++++++++++++-----
 .../components/product-interstitial/index.jsx |  8 ++++--
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx
index d91444f616b57..132edb9748705 100644
--- a/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx
@@ -63,11 +63,12 @@ function Price( { value, currency, isOld } ) {
 /**
  * Product Detail component.
  *
- * @param {object} props          - Component props.
- * @param {string} props.slug     - Product slug
- * @returns {object}                ProductDetailCard react component.
+ * @param {object} props                    - Component props.
+ * @param {string} props.slug               - Product slug
+ * @param {Function} props.trackButtonClick - Function to call for tracking clicks on Call To Action button
+ * @returns {object}                        ProductDetailCard react component.
  */
-export function ProductDetail( { slug } ) {
+const ProductDetail = ( { slug, trackButtonClick } ) => {
 	const { detail } = useProduct( slug );
 	const { title, longDescription, features } = detail;
 	const price = 9;
@@ -95,7 +96,13 @@ export function ProductDetail( { slug } ) {
 				</div>
 			</div>
 
-			<Button isLink isPrimary href="#" className={ styles[ 'checkout-button' ] }>
+			<Button
+				onClick={ trackButtonClick }
+				isLink
+				isPrimary
+				href="#"
+				className={ styles[ 'checkout-button' ] }
+			>
 				{
 					/* translators: placeholder is product name. */
 					sprintf( __( 'Add %s', 'jetpack-my-jetpack' ), title )
@@ -103,7 +110,13 @@ export function ProductDetail( { slug } ) {
 			</Button>
 		</div>
 	);
-}
+};
+
+ProductDetail.defaultProps = {
+	trackButtonClick: () => {},
+};
+
+export { ProductDetail };
 
 /**
  * ProductDetailCard component.
diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx b/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx
index b4b4d53d8f7c8..d4adb5743a9b0 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Container, Col } from '@automattic/jetpack-components';
 
 /**
@@ -28,10 +28,14 @@ export default function ProductInterstitial( { slug, children = null } ) {
 	useEffect( () => {
 		recordEvent( 'jetpack_myjetpack_product_interstitial_view', { product: slug } );
 	}, [ recordEvent, slug ] );
+
+	const trackProductClick = useCallback( () => {
+		recordEvent( 'jetpack_myjetpack_product_interstitial_add_link_click', { product: slug } );
+	}, [ recordEvent, slug ] );
 	return (
 		<Container className={ styles.container } horizontalSpacing={ 0 } horizontalGap={ 0 }>
 			<Col sm={ 4 } md={ 4 } lg={ 5 }>
-				<ProductDetail slug={ slug } />
+				<ProductDetail slug={ slug } trackButtonClick={ trackProductClick } />
 			</Col>
 			<Col sm={ 4 } md={ 4 } lg={ 7 } className={ styles.imageContainer }>
 				{ children }

From bad7656d08352eb994411917c14cfc87376553fa Mon Sep 17 00:00:00 2001
From: oskosk <oskosk@gmail.com>
Date: Fri, 4 Feb 2022 10:57:21 -0300
Subject: [PATCH 2/3] Add changelog file

---
 .../changelog/add-my-jetpack-tracks-event-interstitial-click  | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 projects/packages/my-jetpack/changelog/add-my-jetpack-tracks-event-interstitial-click

diff --git a/projects/packages/my-jetpack/changelog/add-my-jetpack-tracks-event-interstitial-click b/projects/packages/my-jetpack/changelog/add-my-jetpack-tracks-event-interstitial-click
new file mode 100644
index 0000000000000..a13aedaf7087b
--- /dev/null
+++ b/projects/packages/my-jetpack/changelog/add-my-jetpack-tracks-event-interstitial-click
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Fire Tracks event when clicking CTA button on product Interstitial page

From 559449d61e6d11ca3a8565a5970ae2bc7a5af206 Mon Sep 17 00:00:00 2001
From: oskosk <oskosk@gmail.com>
Date: Fri, 4 Feb 2022 10:59:43 -0300
Subject: [PATCH 3/3] Fix space on doc

---
 .../my-jetpack/_inc/components/product-detail-card/index.jsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx
index 132edb9748705..0a4c9f945347c 100644
--- a/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx
@@ -66,7 +66,7 @@ function Price( { value, currency, isOld } ) {
  * @param {object} props                    - Component props.
  * @param {string} props.slug               - Product slug
  * @param {Function} props.trackButtonClick - Function to call for tracking clicks on Call To Action button
- * @returns {object}                        ProductDetailCard react component.
+ * @returns {object}                          ProductDetailCard react component.
  */
 const ProductDetail = ( { slug, trackButtonClick } ) => {
 	const { detail } = useProduct( slug );