Jetpack Search: Add upgrade notice to the Thank you modal for pre-8.4…

… Jetpack versions. (#42307) * Search: Add notice to Thank you modal forpre-8.4 Jetpack versions. Also, "useTranslate" hook instead of localize HoC. * Search: update redirect and CTA copy for JP < 8.3.
Automattic · Jun 3, 2020 · c4e979a · c4e979a
1 parent e26a52e
commit c4e979a
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 23 deletions.
diff --git a/client/my-sites/plans/current-plan/current-plan-thank-you/search-thank-you.js b/client/my-sites/plans/current-plan/current-plan-thank-you/search-thank-you.js
@@ -2,27 +2,37 @@
  * External dependencies
  */
 import React from 'react';
-import { localize } from 'i18n-calypso';
+import { useTranslate } from 'i18n-calypso';
 
 /**
  * Internal dependencies
  */
 import ThankYou from './thank-you';
+import versionCompare from 'lib/version-compare';
 
-const SearchProductThankYou = ( { translate } ) => (
-	<ThankYou
-		illustration="/calypso/images/illustrations/thankYou.svg"
-		showSearchRedirects
-		title={ translate( 'Welcome to Jetpack Search!' ) }
-	>
-		<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>
-	</ThankYou>
-);
+function SearchProductThankYou( { jetpackVersion } ) {
+	const translate = useTranslate();
+	return (
+		<ThankYou
+			illustration="/calypso/images/illustrations/thankYou.svg"
+			showSearchRedirects
+			title={ translate( 'Welcome to Jetpack Search!' ) }
+		>
+			<p>{ translate( 'We are currently indexing your site.' ) }</p>
+			<p>
+				{ jetpackVersion && versionCompare( jetpackVersion, '8.4', '<' )
+					? translate(
+							"In the meantime you'll need to update Jetpack to version 8.4 or higher in order " +
+								"to get the most out of Jetpack Search. Once you've updated Jetpack, " +
+								"we'll configure Search for you. You can try search and customize it to your liking."
+					  )
+					: translate(
+							'In the meantime, we have configured Jetpack Search on your site — ' +
+								'you should try customizing it in your traditional WordPress dashboard.'
+					  ) }
+			</p>
+		</ThankYou>
+	);
+}
 
-export default localize( SearchProductThankYou );
+export default SearchProductThankYou;
diff --git a/client/my-sites/plans/current-plan/current-plan-thank-you/thank-you.js b/client/my-sites/plans/current-plan/current-plan-thank-you/thank-you.js
@@ -4,6 +4,7 @@
 import { isDesktop } from '@automattic/viewport';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
+import { get } from 'lodash';
 import React, { Component } from 'react';
 
 /**
@@ -15,11 +16,12 @@ import { Button } from '@automattic/components';
 import getCurrentQueryArguments from 'state/selectors/get-current-query-arguments';
 import getCurrentRoute from 'state/selectors/get-current-route';
 import { addQueryArgs } from 'lib/url';
-import { getSelectedSiteId } from 'state/ui/selectors';
+import { getSelectedSite, 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 versionCompare from 'lib/version-compare';
 
 import './style.scss';
 
@@ -41,6 +43,7 @@ export class ThankYouCard extends Component {
 			showSearchRedirects,
 			showScanCTAs,
 			siteAdminUrl,
+			selectedSite,
 			selectedSiteSlug,
 			title,
 			translate,
@@ -62,6 +65,8 @@ export class ThankYouCard extends Component {
 			} );
 		};
 
+		const jetpackVersion = get( selectedSite, 'options.jetpack_version', 0 );
+
 		return (
 			<div className="current-plan-thank-you">
 				{ illustration && (
@@ -106,10 +111,16 @@ export class ThankYouCard extends Component {
 						<p className="current-plan-thank-you__followup">
 							<Button
 								primary
-								href={ siteAdminUrl + 'customize.php?autofocus[section]=jetpack_search' }
+								href={
+									jetpackVersion && versionCompare( jetpackVersion, '8.4', '<' )
+										? siteAdminUrl + 'plugins.php'
+										: siteAdminUrl + 'customize.php?autofocus[section]=jetpack_search'
+								}
 								onClick={ () => recordThankYouClick( 'customizer' ) }
 							>
-								{ translate( 'Try Search and customize it now' ) }
+								{ jetpackVersion && versionCompare( jetpackVersion, '8.4', '<' )
+									? translate( 'Update Jetpack' )
+									: translate( 'Try Search and customize it now' ) }
 							</Button>
 						</p>
 					) }
@@ -132,13 +143,15 @@ export class ThankYouCard extends Component {
 export default connect(
 	( state ) => {
 		const currentUser = getCurrentUser( state );
+		const selectedSite = getSelectedSite( state );
 		const selectedSiteId = getSelectedSiteId( state );
 		const selectedSiteSlug = getSiteSlug( state, selectedSiteId );
 		const isSingleSite = !! selectedSiteId || currentUser.site_count === 1;
 		const siteId = selectedSiteId || ( isSingleSite && getPrimarySiteId( state ) ) || null;
 		const siteAdminUrl = getSiteAdminUrl( state, siteId );
 		return {
 			siteAdminUrl,
+			selectedSite,
 			selectedSiteSlug,
 			currentRoute: getCurrentRoute( state ),
 			queryArgs: getCurrentQueryArguments( state ),

diff --git a/client/my-sites/plans/current-plan/index.jsx b/client/my-sites/plans/current-plan/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import React, { Component, Fragment } from 'react';
-import { startsWith } from 'lodash';
+import { get, startsWith } from 'lodash';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
@@ -78,7 +78,7 @@ class CurrentPlan extends Component {
 	}
 
 	renderThankYou() {
-		const { currentPlan, product } = this.props;
+		const { currentPlan, product, selectedSite } = this.props;
 
 		if ( startsWith( product, 'jetpack_backup' ) ) {
 			return <BackupProductThankYou />;
@@ -89,7 +89,9 @@ class CurrentPlan extends Component {
 		}
 
 		if ( startsWith( product, 'jetpack_search' ) ) {
-			return <SearchProductThankYou />;
+			const jetpackVersion = get( selectedSite, 'options.jetpack_version', 0 );
+
+			return <SearchProductThankYou { ...{ jetpackVersion } } />;
 		}
 
 		if ( ! currentPlan || isFreePlan( currentPlan ) || isFreeJetpackPlan( currentPlan ) ) {