Jetpack Search: add WP.com Search purchase Thank you note (#43910)

* Add WP.com Search purchase Thank you note.

* Add tracking to the Search customizer redirect.

The redirect happens at the Thank You for your purchase stage
of the flow, when we invite users to the try the product
within their Customizer section.

* Extend the calypso_jetpack_product_thankyou event with a site type info.

* Space the text in the WP.com Search Thank you note.

* Adapt the spacing.

* Adjust strings for translation

client/my-sites/checkout/checkout-thank-you/header.jsx

@@ -25,6 +25,7 @@ import { recordTracksEvent } from 'state/analytics/actions';
 import { localize } from 'i18n-calypso';
 import { preventWidows } from 'lib/formatting';
 import { domainManagementEdit, domainManagementTransferInPrecheck } from 'my-sites/domains/paths';
+import { getSiteAdminUrl } from 'state/sites/selectors';
 import { recordStartTransferClickInThankYou } from 'state/domains/actions';
 import Gridicon from 'components/gridicon';
 import getCheckoutUpgradeIntent from '../../../state/selectors/get-checkout-upgrade-intent';
@@ -43,7 +44,7 @@ export class CheckoutThankYouHeader extends PureComponent {
 	};
 
 	getHeading() {
-		const { translate, isDataLoaded, hasFailedPurchases, primaryPurchase } = this.props;
+		const { translate, isDataLoaded, hasFailedPurchases, primaryPurchase, purchases } = this.props;
 
 		if ( ! isDataLoaded ) {
 			return this.props.translate( 'Loading…' );
@@ -53,6 +54,10 @@ export class CheckoutThankYouHeader extends PureComponent {
 			return translate( 'Some items failed.' );
 		}
 
+		if ( purchases && purchases[ 0 ].productType === 'search' ) {
+			return translate( 'Welcome to Jetpack Search!' );
+		}
+
 		if (
 			primaryPurchase &&
 			isDomainMapping( primaryPurchase ) &&
@@ -79,12 +84,28 @@ export class CheckoutThankYouHeader extends PureComponent {
 			hasFailedPurchases,
 			primaryPurchase,
 			displayMode,
+			purchases,
 		} = this.props;
 
 		if ( hasFailedPurchases ) {
 			return translate( 'Some of the items in your cart could not be added.' );
 		}
 
+		if ( purchases && purchases[ 0 ].productType === 'search' ) {
+			return (
+				<div>
+					<p>{ translate( 'We are currently indexing your site.' ) }</p>
+					<p>
+						{ translate(
+							'In the meantime, we have configured Jetpack Search on your site' +
+								' ' +
+								'— you should try customizing it in your traditional WordPress dashboard.'
+						) }
+					</p>
+				</div>
+			);
+		}
+
 		if ( ! isDataLoaded || ! primaryPurchase ) {
 			if ( 'concierge' === displayMode ) {
 				return translate(
@@ -303,6 +324,19 @@ export class CheckoutThankYouHeader extends PureComponent {
 		page( domainManagementTransferInPrecheck( selectedSite.slug, primaryPurchase.meta ) );
 	};
 
+	goToCustomizer = ( event ) => {
+		event.preventDefault();
+		const { siteAdminUrl } = this.props;
+
+		this.props.recordTracksEvent( 'calypso_jetpack_product_thankyou', {
+			product_name: 'search',
+			value: 'Customizer',
+			site: 'wpcom',
+		} );
+
+		window.location.href = siteAdminUrl + 'customize.php?autofocus[section]=jetpack_search';
+	};
+
 	getButtonText = () => {
 		const {
 			displayMode,
@@ -382,12 +416,24 @@ export class CheckoutThankYouHeader extends PureComponent {
 			hasFailedPurchases,
 			translate,
 			primaryPurchase,
+			purchases,
 			selectedSite,
 			displayMode,
 			isAtomic,
 		} = this.props;
 		const headerButtonClassName = 'button is-primary';
 		const isConciergePurchase = 'concierge' === displayMode;
+		const isSearch = purchases && purchases[ 0 ].productType === 'search';
+
+		if ( isSearch ) {
+			return (
+				<div className="checkout-thank-you__header-button">
+					<button className={ headerButtonClassName } onClick={ this.goToCustomizer }>
+						{ translate( 'Try Search and customize it now' ) }
+					</button>
+				</div>
+			);
+		}
 
 		if (
 			! isConciergePurchase &&
@@ -510,6 +556,7 @@ export default connect(
 	( state, ownProps ) => ( {
 		upgradeIntent: ownProps.upgradeIntent || getCheckoutUpgradeIntent( state ),
 		isAtomic: isAtomicSite( state, ownProps.selectedSite.ID ),
+		siteAdminUrl: getSiteAdminUrl( state, ownProps.selectedSite.ID ),
 	} ),
 	{
 		recordStartTransferClickInThankYou,

client/my-sites/checkout/checkout-thank-you/style.scss

@@ -178,6 +178,7 @@
 .checkout-thank-you__success-message-item {
 	font-size: 18px;
 	font-weight: 400;
+	margin-top: 15px;
 }
 
 .checkout-thank-you__header.is-placeholder {

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

@@ -63,6 +63,7 @@ export class ThankYouCard extends Component {
 			this.props.recordTracksEvent( 'calypso_jetpack_product_thankyou', {
 				product_name: 'search',
 				value,
+				site: 'jetpack',
 			} );
 		};