My Jetpack: add Search interstitial view

projects/packages/my-jetpack/_inc/admin.jsx

@@ -12,7 +12,7 @@ import { Container, Col, JetpackFooter } from '@automattic/jetpack-components';
 import MyJetpackScreen from './components/my-jetpack-screen';
 import ConnectionScreen from './components/connection-screen';
 import { initStore } from './state/store';
-import { BoostInterstitial } from './components/product-interstitial';
+import { BoostInterstitial, SearchInterstitial } from './components/product-interstitial';
 import GoBackLink from './components/go-back-link';
 import styles from './style.module.scss';
 
@@ -75,6 +75,10 @@ function render() {
 					path="/add-boost"
 					element={ <Layout nav={ true } children={ <BoostInterstitial /> } /> }
 				/>
+				<Route
+					path="/add-search"
+					element={ <Layout nav={ true } children={ <SearchInterstitial /> } /> }
+				/>
 			</Routes>
 		</HashRouter>,
 		container

projects/packages/my-jetpack/_inc/components/product-card/index.jsx

@@ -18,11 +18,13 @@ export const PRODUCT_STATUSES = {
 	INACTIVE: 'inactive',
 	ERROR: 'error',
 	ABSENT: 'plugin_absent',
+	NEEDS_PURCHASE: 'needs_purchase',
 };
 
 const PRODUCT_STATUSES_LABELS = {
 	[ PRODUCT_STATUSES.ACTIVE ]: __( 'Active', 'jetpack-my-jetpack' ),
 	[ PRODUCT_STATUSES.INACTIVE ]: __( 'Inactive', 'jetpack-my-jetpack' ),
+	[ PRODUCT_STATUSES.NEEDS_PURCHASE ]: __( 'Inactive', 'jetpack-my-jetpack' ),
 	[ PRODUCT_STATUSES.ERROR ]: __( 'Error', 'jetpack-my-jetpack' ),
 };
 
@@ -65,6 +67,7 @@ const renderActionButton = ( {
 	};
 
 	switch ( status ) {
+		case PRODUCT_STATUSES.NEEDS_PURCHASE:
 		case PRODUCT_STATUSES.ABSENT:
 			return (
 				<Button variant="link" onClick={ onAdd }>
@@ -110,12 +113,14 @@ const ProductCard = props => {
 	const isActive = status === PRODUCT_STATUSES.ACTIVE;
 	const isError = status === PRODUCT_STATUSES.ERROR;
 	const isInactive = status === PRODUCT_STATUSES.INACTIVE;
-	const isAbsent = status === PRODUCT_STATUSES.ABSENT;
+	const isAbsent = status === PRODUCT_STATUSES.ABSENT || status === PRODUCT_STATUSES.NEEDS_PURCHASE;
+	const isPurchaseRequired = status === PRODUCT_STATUSES.NEEDS_PURCHASE;
 	const flagLabel = PRODUCT_STATUSES_LABELS[ status ];
 	const canDeactivate = ( isActive || isError ) && admin;
 
 	const containerClassName = classNames( styles.container, {
 		[ styles.plugin_absent ]: isAbsent,
+		[ styles[ 'is-purchase-required' ] ]: isPurchaseRequired,
 	} );
 
 	const statusClassName = classNames( styles.status, {
@@ -211,6 +216,7 @@ ProductCard.propTypes = {
 		PRODUCT_STATUSES.INACTIVE,
 		PRODUCT_STATUSES.ERROR,
 		PRODUCT_STATUSES.ABSENT,
+		PRODUCT_STATUSES.NEEDS_PURCHASE,
 	] ).isRequired,
 };
 

projects/packages/my-jetpack/_inc/components/product-card/style.module.scss

@@ -25,6 +25,7 @@
   flex-direction: column;
   justify-content: space-between;
 
+  &.is-purchase-required,
   &.plugin_absent {
     background: none;
     box-shadow: none;

projects/packages/my-jetpack/_inc/components/product-cards-section/search-card.jsx

@@ -1,8 +1,9 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+import { useNavigate } from 'react-router-dom';
 
 /**
  * Internal dependencies
@@ -21,6 +22,9 @@ const SearchCard = ( { admin } ) => {
 	const { status, activate, deactivate, detail, isFetching } = useProduct( 'search' );
 	const { name, description } = detail;
 
+	const navigate = useNavigate();
+	const onAddHandler = useCallback( () => navigate( '/add-search' ), [ navigate ] );
+
 	return (
 		<ProductCard
 			name={ name }
@@ -31,6 +35,7 @@ const SearchCard = ( { admin } ) => {
 			isFetching={ isFetching }
 			onDeactivate={ deactivate }
 			onActivate={ activate }
+			onAdd={ onAddHandler }
 		/>
 	);
 };

projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx

@@ -9,8 +9,9 @@ import { Container, Col } from '@automattic/jetpack-components';
  */
 import { ProductDetail } from '../product-detail-card';
 import styles from './style.module.scss';
-import boostImage from './boost.png';
 import useAnalytics from '../../hooks/use-analytics';
+import boostImage from './boost.png';
+import searchImage from './search.png';
 
 /**
  * Product Interstitial component.
@@ -61,7 +62,7 @@ export function BackupInterstitial() {
 }
 
 /**
- * BoostInterstitial component
+ * SearchInterstitial component
  *
  * @returns {object} BoostInterstitial react component.
  */
@@ -72,3 +73,16 @@ export function BoostInterstitial() {
 		</ProductInterstitial>
 	);
 }
+
+/**
+ * SearchInterstitial component
+ *
+ * @returns {object} SearchInterstitial react component.
+ */
+export function SearchInterstitial() {
+	return (
+		<ProductInterstitial slug="search">
+			<img src={ searchImage } alt="Search" />
+		</ProductInterstitial>
+	);
+}

projects/packages/my-jetpack/_inc/components/product-interstitial/stories/index.jsx

@@ -8,7 +8,11 @@ import withMock from 'storybook-addon-mock';
 /**
  * Internal dependencies
  */
-import ProductInterstitial, { BackupInterstitial, BoostInterstitial } from '../index.jsx';
+import ProductInterstitial, {
+	BackupInterstitial,
+	BoostInterstitial,
+	SearchInterstitial,
+} from '../index.jsx';
 
 export default {
 	title: 'Packages/My Jetpack/Product Interstitial',
@@ -31,3 +35,7 @@ JetpackBackup.parameters = {};
 const BoostTemplate = args => <BoostInterstitial { ...args } />;
 export const JetpackBoost = BoostTemplate.bind( {} );
 JetpackBoost.parameters = {};
+
+const SearchTemplate = args => <SearchInterstitial { ...args } />;
+export const JetpackSearch = SearchTemplate.bind( {} );
+JetpackSearch.parameters = {};

projects/packages/my-jetpack/changelog/update-my-jetpack-handle-search-product-from-ui

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Implement Search product interstitial

projects/packages/my-jetpack/src/products/class-product.php

@@ -161,11 +161,10 @@ public static function has_required_plan() {
 	 * @return string
 	 */
 	public static function get_status() {
-		if ( static::is_active() ) {
+		if ( ! static::has_required_plan() ) {
+			$status = 'needs_purchase';
+		} elseif ( static::is_active() ) {
 			$status = 'active';
-			if ( ! static::has_required_plan() ) {
-				$status = 'needs_purchase';
-			}
 		} elseif ( ! self::is_plugin_installed() ) {
 			$status = 'plugin_absent';
 		} else {