Jetpack Search: add tracking to the post-purchse Thank you note (#40682)

* Add tracking to the thank you note after purchasing Jetpack Search

* Search: fire Tracks event only once in the Thank you modal.

onClick() needs to contain a function. After the change, it does not fire on render.

client/my-sites/plans/current-plan/current-plan-thank-you/thank-you.js

@@ -19,6 +19,7 @@ import { getSelectedSiteId } from 'state/ui/selectors';
 import { getSiteAdminUrl, getSiteSlug } from 'state/sites/selectors';
 import getPrimarySiteId from 'state/selectors/get-primary-site-id';
 import { getCurrentUser } from 'state/current-user/selectors';
+import { recordTracksEvent } from 'state/analytics/actions';
 
 import './style.scss';
 
@@ -54,6 +55,13 @@ export class ThankYouCard extends Component {
 			return null;
 		}
 
+		const recordThankYouClick = value => {
+			this.props.recordTracksEvent( 'calypso_jetpack_product_thankyou', {
+				product_name: 'search',
+				value,
+			} );
+		};
+
 		return (
 			<div className="current-plan-thank-you">
 				{ illustration && (
@@ -99,11 +107,15 @@ export class ThankYouCard extends Component {
 							<Button
 								primary
 								href={ siteAdminUrl + 'customize.php?autofocus[section]=jetpack_search' }
+								onClick={ () => recordThankYouClick( 'customizer' ) }
 							>
 								{ translate( 'Customize Search now' ) }
 							</Button>
 
-							<Button href={ siteAdminUrl + 'admin.php?page=jetpack#/dashboard' }>
+							<Button
+								href={ siteAdminUrl + 'admin.php?page=jetpack#/dashboard' }
+								onClick={ () => recordThankYouClick( 'my_site' ) }
+							>
 								{ translate( 'Go back to my site' ) }
 							</Button>
 						</p>
@@ -139,5 +151,5 @@ export default connect(
 			queryArgs: getCurrentQueryArguments( state ),
 		};
 	},
-	{ requestGuidedTour }
+	{ recordTracksEvent, requestGuidedTour }
 )( localize( ThankYouCard ) );