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

This reverts commit b0f2e6e.
Automattic · Sep 27, 2024 · 7cdc12f · 7cdc12f
1 parent b0f2e6e
commit 7cdc12f
Show file tree

Hide file tree

Showing 14 changed files with 19 additions and 45 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,6 +129,7 @@ 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,7 +13,6 @@ 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';
@@ -347,7 +346,6 @@ 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 { Component } from 'react';
+import React, { Component } from 'react';
+import peopleSvgUrl from './people.svg';
 
 const CRM_PLUGIN_DASH = 'admin.php?page=zerobscrm-dash';
 const CRM_PLUGIN_FILES = [ 'zero-bs-crm/ZeroBSCRM.php' ];
@@ -19,6 +19,8 @@ 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',
@@ -37,7 +39,6 @@ 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, FEATURE_JETPACK_AI } from 'lib/plans/constants';
+import { getJetpackProductUpsellByFeature, PLAN_JETPACK_AI_YEARLY } from 'lib/plans/constants';
 import { getProductDescriptionUrl } from 'product-descriptions/utils';
 import { connect } from 'react-redux';
 import {
@@ -65,7 +65,8 @@ function DashJetpackAi( props ) {
 							'Connect your WordPress.com account to enable AI features and assistant.',
 							'jetpack'
 						) }
-						plan={ getJetpackProductUpsellByFeature( FEATURE_JETPACK_AI ) }
+						noIcon={ true }
+						plan={ getJetpackProductUpsellByFeature( PLAN_JETPACK_AI_YEARLY ) }
 						callToAction={ __( 'Connect', 'jetpack' ) }
 						onClick={ props.connectUser }
 						eventFeature="ai-assistant"
@@ -76,8 +77,9 @@ function DashJetpackAi( props ) {
 				( showUpgradeBanner && (
 					<JetpackBanner
 						title={ cardText }
+						noIcon={ true }
 						description={ learnMoreLink }
-						plan={ getJetpackProductUpsellByFeature( FEATURE_JETPACK_AI ) }
+						plan={ getJetpackProductUpsellByFeature( PLAN_JETPACK_AI_YEARLY ) }
 						callToAction={ __( 'Upgrade', 'jetpack' ) }
 						href={ props.upgradeUrl }
 						eventFeature="ai-assistant"
@@ -87,12 +89,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,6 +262,7 @@ 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,6 +134,7 @@ class DashSearch extends Component {
 						plan={ getJetpackProductUpsellByFeature( FEATURE_SEARCH_JETPACK ) }
 						icon="search"
 						trackBannerDisplay={ this.props.trackUpgradeButtonView }
+						noIcon
 					/>
 				) : (
 					<JetpackBanner
@@ -147,6 +148,7 @@ 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,6 +115,7 @@ class DashVideoPress extends Component {
 									title={ bannerText }
 									disableHref="false"
 									eventFeature="videopress"
+									noIcon
 									path={ 'dashboard' }
 									plan={ getJetpackProductUpsellByFeature( FEATURE_VIDEOPRESS ) }
 									feature="jetpack_videopress"
@@ -148,6 +149,7 @@ 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,7 +138,6 @@
 
 	@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,15 +136,6 @@
 	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 &,
@@ -162,10 +153,6 @@
 		}
 	}
 
-	.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,7 +103,6 @@ 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';
@@ -214,8 +213,6 @@ 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;
 
@@ -330,8 +327,5 @@ 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,7 +10,6 @@ export const PluginDashItem = ( {
 	pluginName,
 	pluginSlug,
 	pluginFiles,
-	plan,
 } ) => {
 	return (
 		<div className="plugin-dash-item">
@@ -21,7 +20,6 @@ export const PluginDashItem = ( {
 				pluginLink={ pluginLink }
 				pluginFiles={ pluginFiles }
 				installOrActivatePrompt={ installOrActivatePrompt }
-				plan={ plan }
 			/>
 		</div>
 	);
@@ -32,7 +30,6 @@ 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,7 +23,6 @@ const PluginInstallSection = ( {
 	pluginLink,
 	installOrActivatePrompt,
 	installedPrompt,
-	plan,
 } ) => {
 	const [ isActivating, setIsActivating ] = useState( false );
 	const [ isInstalling, setIsInstalling ] = useState( false );
@@ -99,7 +98,7 @@ const PluginInstallSection = ( {
 				) }
 				title={ installOrActivatePrompt }
 				onClick={ activateOrInstallPlugin }
-				plan={ plan }
+				noIcon
 			/>
 		);
 	} else if ( ! aPluginIsActive ) {
@@ -112,7 +111,7 @@ const PluginInstallSection = ( {
 				) }
 				title={ installOrActivatePrompt }
 				onClick={ activateOrInstallPlugin }
-				plan={ plan }
+				noIcon
 			/>
 		);
 	}
@@ -125,7 +124,7 @@ const PluginInstallSection = ( {
 			) }
 			title={ installedPrompt ?? __( 'Plugin is installed & active.', 'jetpack' ) }
 			href={ pluginLink }
-			plan={ plan }
+			noIcon
 		/>
 	);
 };

diff --git a/projects/plugins/jetpack/_inc/client/lib/plans/constants.js b/projects/plugins/jetpack/_inc/client/lib/plans/constants.js
@@ -396,9 +396,6 @@ 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
@@ -414,8 +411,6 @@ 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