Add/icons for all product cards on dashboard (#39513)

* Ensure all product cards on Jetpack Dashboard have icons when inactive * changelog * Add icon to boost install section * Fix AI missing icon when active * Move CRM back to where it was
Automattic · Sep 27, 2024 · b0f2e6e · b0f2e6e
1 parent a2dfe03
commit b0f2e6e
Show file tree

Hide file tree

Showing 14 changed files with 45 additions and 19 deletions.
diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/akismet.jsx b/projects/plugins/jetpack/_inc/client/at-a-glance/akismet.jsx
@@ -129,7 +129,6 @@ class DashAkismet extends Component {
 					path="dashboard"
 					plan={ getJetpackProductUpsellByFeature( FEATURE_SPAM_AKISMET_PLUS ) }
 					trackBannerDisplay={ this.props.trackUpgradeButtonView }
-					noIcon
 				/>
 			);
 		};

diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/boost/index.jsx b/projects/plugins/jetpack/_inc/client/at-a-glance/boost/index.jsx
@@ -13,6 +13,7 @@ import InfoPopover from 'components/info-popover';
 import PluginInstallSection from 'components/plugin-install-section';
 import SectionHeader from 'components/section-header';
 import analytics from 'lib/analytics';
+import { FEATURE_JETPACK_BOOST, getJetpackProductUpsellByFeature } from 'lib/plans/constants';
 import PropTypes from 'prop-types';
 import { useCallback, useEffect, useState } from 'react';
 import { connect } from 'react-redux';
@@ -346,6 +347,7 @@ const DashBoost = ( {
 						}
 					) }
 					installedPrompt={ getPluginInstallSectionText() }
+					plan={ getJetpackProductUpsellByFeature( FEATURE_JETPACK_BOOST ) }
 				/>
 			</div>
 		</div>

diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/crm/index.jsx b/projects/plugins/jetpack/_inc/client/at-a-glance/crm/index.jsx
@@ -3,9 +3,9 @@ import { ExternalLink } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import PluginDashItem from 'components/plugin-dash-item';
+import { FEATURE_JETPACK_CRM } from 'lib/plans/constants';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import peopleSvgUrl from './people.svg';
+import { Component } from 'react';
 
 const CRM_PLUGIN_DASH = 'admin.php?page=zerobscrm-dash';
 const CRM_PLUGIN_FILES = [ 'zero-bs-crm/ZeroBSCRM.php' ];
@@ -19,8 +19,6 @@ class DashCRM extends Component {
 	render() {
 		return (
 			<PluginDashItem
-				iconAlt={ __( 'Plugin icon', 'jetpack' ) }
-				iconSrc={ peopleSvgUrl }
 				pluginName={ _x(
 					'CRM',
 					'The Jetpack CRM product name, without the Jetpack prefix',
@@ -39,6 +37,7 @@ class DashCRM extends Component {
 						br: <br />,
 					}
 				) }
+				plan={ FEATURE_JETPACK_CRM }
 			/>
 		);
 	}

diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/jetpack-ai.jsx b/projects/plugins/jetpack/_inc/client/at-a-glance/jetpack-ai.jsx
@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
  */
 import DashItem from 'components/dash-item';
 import JetpackBanner from 'components/jetpack-banner';
-import { getJetpackProductUpsellByFeature, PLAN_JETPACK_AI_YEARLY } from 'lib/plans/constants';
+import { getJetpackProductUpsellByFeature, FEATURE_JETPACK_AI } from 'lib/plans/constants';
 import { getProductDescriptionUrl } from 'product-descriptions/utils';
 import { connect } from 'react-redux';
 import {
@@ -65,8 +65,7 @@ function DashJetpackAi( props ) {
 							'Connect your WordPress.com account to enable AI features and assistant.',
 							'jetpack'
 						) }
-						noIcon={ true }
-						plan={ getJetpackProductUpsellByFeature( PLAN_JETPACK_AI_YEARLY ) }
+						plan={ getJetpackProductUpsellByFeature( FEATURE_JETPACK_AI ) }
 						callToAction={ __( 'Connect', 'jetpack' ) }
 						onClick={ props.connectUser }
 						eventFeature="ai-assistant"
@@ -77,9 +76,8 @@ function DashJetpackAi( props ) {
 				( showUpgradeBanner && (
 					<JetpackBanner
 						title={ cardText }
-						noIcon={ true }
 						description={ learnMoreLink }
-						plan={ getJetpackProductUpsellByFeature( PLAN_JETPACK_AI_YEARLY ) }
+						plan={ getJetpackProductUpsellByFeature( FEATURE_JETPACK_AI ) }
 						callToAction={ __( 'Upgrade', 'jetpack' ) }
 						href={ props.upgradeUrl }
 						eventFeature="ai-assistant"
@@ -89,12 +87,12 @@ function DashJetpackAi( props ) {
 				( showTeaserBanner && (
 					<JetpackBanner
 						title={ cardText }
-						noIcon={ true }
 						callToAction={ __( 'All features', 'jetpack' ) }
 						href={ `${ props.siteAdminUrl }admin.php?page=my-jetpack#/jetpack-ai` }
 						eventFeature="ai-assistant"
 						path="dashboard"
 						eventProps={ { type: 'teaser' } }
+						plan={ getJetpackProductUpsellByFeature( FEATURE_JETPACK_AI ) }
 					/>
 				) ) ||
 				null

diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/scan.jsx b/projects/plugins/jetpack/_inc/client/at-a-glance/scan.jsx
@@ -262,7 +262,6 @@ class DashScan extends Component {
 				path="dashboard"
 				plan={ getJetpackProductUpsellByFeature( FEATURE_SECURITY_SCANNING_JETPACK ) }
 				trackBannerDisplay={ this.props.trackUpgradeButtonView }
-				noIcon
 			/>
 		);
 	}

diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/search.jsx b/projects/plugins/jetpack/_inc/client/at-a-glance/search.jsx
@@ -134,7 +134,6 @@ class DashSearch extends Component {
 						plan={ getJetpackProductUpsellByFeature( FEATURE_SEARCH_JETPACK ) }
 						icon="search"
 						trackBannerDisplay={ this.props.trackUpgradeButtonView }
-						noIcon
 					/>
 				) : (
 					<JetpackBanner
@@ -148,7 +147,6 @@ class DashSearch extends Component {
 						eventFeature="search"
 						path="dashboard"
 						plan={ getJetpackProductUpsellByFeature( FEATURE_SEARCH_JETPACK ) }
-						noIcon
 					/>
 				),
 			} );

diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/videopress.jsx b/projects/plugins/jetpack/_inc/client/at-a-glance/videopress.jsx
@@ -115,7 +115,6 @@ class DashVideoPress extends Component {
 									title={ bannerText }
 									disableHref="false"
 									eventFeature="videopress"
-									noIcon
 									path={ 'dashboard' }
 									plan={ getJetpackProductUpsellByFeature( FEATURE_VIDEOPRESS ) }
 									feature="jetpack_videopress"
@@ -149,7 +148,6 @@ class DashVideoPress extends Component {
 							eventFeature="videopress"
 							path="dashboard"
 							plan={ getJetpackProductUpsellByFeature( FEATURE_VIDEOPRESS ) }
-							icon="video"
 						/>
 					) : null
 				}

diff --git a/projects/plugins/jetpack/_inc/client/components/banner/style.scss b/projects/plugins/jetpack/_inc/client/components/banner/style.scss
@@ -138,6 +138,7 @@
 
 	@include breakpoint( '>480px' ) {
 		align-items: center;
+		align-self: center;
 	}
 }
 

diff --git a/projects/plugins/jetpack/_inc/client/components/dash-item/style.scss b/projects/plugins/jetpack/_inc/client/components/dash-item/style.scss
@@ -136,6 +136,15 @@
 	text-transform: uppercase;
 }
 
+.jp-at-a-glance__left,
+.jp-at-a-glance__right {
+	.jp-dash-item__is-inactive {
+		.dops-banner__content {
+			height: 100%;
+		}
+	}
+}
+
 // conditional styles for content when items are inactive
 .jp-dash-item__is-inactive {
 	.jp-at-a-glance__left &,
@@ -153,6 +162,10 @@
 		}
 	}
 
+	.dops-card.dops-banner {
+		flex-grow: unset;
+	}
+
 	.dops-section-header {
 		border-bottom: 0;
 	}

diff --git a/projects/plugins/jetpack/_inc/client/components/plans/plan-icon/index.jsx b/projects/plugins/jetpack/_inc/client/components/plans/plan-icon/index.jsx
@@ -103,6 +103,7 @@ import {
 	PLAN_JETPACK_CREATOR_BI_YEARLY,
 	PLAN_JETPACK_CREATOR_YEARLY,
 	PLAN_JETPACK_CREATOR_MONTHLY,
+	FEATURE_JETPACK_CRM,
 } from 'lib/plans/constants';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
@@ -213,6 +214,8 @@ const PRODUCT_ICON_MAP = {
 	[ PLAN_JETPACK_STATS_YEARLY ]: 'products/product-jetpack-stats.svg',
 	[ PLAN_JETPACK_STATS_PWYW_YEARLY ]: 'products/product-jetpack-stats.svg',
 	[ PLAN_JETPACK_STATS_FREE ]: 'products/product-jetpack-stats.svg',
+	// CRM plans do not exist on WPCOM so this is a hacky way of assigning an icon anyway
+	[ FEATURE_JETPACK_CRM ]: 'products/product-jetpack-crm.svg',
 };
 const DEFAULT_SIZE = 32;
 
@@ -327,5 +330,8 @@ PlanIcon.propTypes = {
 		PLAN_JETPACK_STATS_YEARLY,
 		PLAN_JETPACK_STATS_PWYW_YEARLY,
 		PLAN_JETPACK_STATS_FREE,
+		PLAN_JETPACK_AI_YEARLY,
+		PLAN_JETPACK_BOOST,
+		FEATURE_JETPACK_CRM,
 	] ).isRequired,
 };
diff --git a/projects/plugins/jetpack/_inc/client/components/plugin-dash-item/index.jsx b/projects/plugins/jetpack/_inc/client/components/plugin-dash-item/index.jsx
@@ -10,6 +10,7 @@ export const PluginDashItem = ( {
 	pluginName,
 	pluginSlug,
 	pluginFiles,
+	plan,
 } ) => {
 	return (
 		<div className="plugin-dash-item">
@@ -20,6 +21,7 @@ export const PluginDashItem = ( {
 				pluginLink={ pluginLink }
 				pluginFiles={ pluginFiles }
 				installOrActivatePrompt={ installOrActivatePrompt }
+				plan={ plan }
 			/>
 		</div>
 	);
@@ -30,6 +32,7 @@ PluginDashItem.propTypes = {
 	pluginFiles: PropTypes.arrayOf( PropTypes.string ).isRequired,
 	pluginSlug: PropTypes.string.isRequired,
 	pluginLink: PropTypes.string.isRequired,
+	plan: PropTypes.string,
 	installOrActivatePrompt: PropTypes.element.isRequired,
 };
 

diff --git a/projects/plugins/jetpack/_inc/client/components/plugin-install-section/index.jsx b/projects/plugins/jetpack/_inc/client/components/plugin-install-section/index.jsx
@@ -23,6 +23,7 @@ const PluginInstallSection = ( {
 	pluginLink,
 	installOrActivatePrompt,
 	installedPrompt,
+	plan,
 } ) => {
 	const [ isActivating, setIsActivating ] = useState( false );
 	const [ isInstalling, setIsInstalling ] = useState( false );
@@ -98,7 +99,7 @@ const PluginInstallSection = ( {
 				) }
 				title={ installOrActivatePrompt }
 				onClick={ activateOrInstallPlugin }
-				noIcon
+				plan={ plan }
 			/>
 		);
 	} else if ( ! aPluginIsActive ) {
@@ -111,7 +112,7 @@ const PluginInstallSection = ( {
 				) }
 				title={ installOrActivatePrompt }
 				onClick={ activateOrInstallPlugin }
-				noIcon
+				plan={ plan }
 			/>
 		);
 	}
@@ -124,7 +125,7 @@ const PluginInstallSection = ( {
 			) }
 			title={ installedPrompt ?? __( 'Plugin is installed & active.', 'jetpack' ) }
 			href={ pluginLink }
-			noIcon
+			plan={ plan }
 		/>
 	);
 };

diff --git a/projects/plugins/jetpack/_inc/client/lib/plans/constants.js b/projects/plugins/jetpack/_inc/client/lib/plans/constants.js
@@ -396,6 +396,9 @@ export const FEATURE_WORDADS_JETPACK = 'wordads-jetpack';
 export const FEATURE_GOOGLE_ANALYTICS_JETPACK = 'google-analytics-jetpack';
 export const FEATURE_SEARCH_JETPACK = 'search-jetpack';
 export const FEATURE_VIDEOPRESS = 'videopress-jetpack';
+export const FEATURE_JETPACK_AI = 'ai-jetpack';
+export const FEATURE_JETPACK_CRM = 'crm-jetpack';
+export const FEATURE_JETPACK_BOOST = 'boost-jetpack';
 export const FEATURE_SIMPLE_PAYMENTS_JETPACK = 'simple-payments-jetpack';
 
 // Upsells
@@ -411,6 +414,8 @@ export const JETPACK_FEATURE_PRODUCT_UPSELL_MAP = {
 	[ FEATURE_SPAM_AKISMET_PLUS ]: PLAN_JETPACK_ANTI_SPAM,
 	[ FEATURE_VIDEOPRESS ]: PLAN_JETPACK_VIDEOPRESS,
 	[ FEATURE_SIMPLE_PAYMENTS_JETPACK ]: PLAN_JETPACK_SECURITY_T1_YEARLY,
+	[ FEATURE_JETPACK_AI ]: PLAN_JETPACK_AI_YEARLY,
+	[ FEATURE_JETPACK_BOOST ]: PLAN_JETPACK_BOOST,
 };
 
 /**

diff --git a/projects/plugins/jetpack/changelog/add-icons-for-all-product-cards-on-dashboard b/projects/plugins/jetpack/changelog/add-icons-for-all-product-cards-on-dashboard
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Add icons for all product cards on dashboard
-Original file line number
+Diff line change
@@ Expand Up / @@ -129,7 +129,6 @@ class DashAkismet extends Component { @@
     					path="dashboard"
     					plan={ getJetpackProductUpsellByFeature( FEATURE_SPAM_AKISMET_PLUS ) }
     					trackBannerDisplay={ this.props.trackUpgradeButtonView }
-    					noIcon
     				/>
     			);
     		};
@@ Expand Down @@