diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/akismet.jsx b/projects/plugins/jetpack/_inc/client/at-a-glance/akismet.jsx
index 85e877f5e845e..587da434b838b 100644
--- 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
index 1009884250d8c..557f65127424b 100644
--- 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 ) }
/>
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
index 322ff5d6ed406..26cc6c55ef665 100644
--- 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 (
,
}
) }
+ 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
index 7f90a7451a420..5c67f245eacbd 100644
--- 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 && (
) ) ||
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
index ad0dc801c49b7..4ad77e80e1678 100644
--- 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
index 106c8a3eba9c1..a335526896585 100644
--- 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
/>
) : (
),
} );
diff --git a/projects/plugins/jetpack/_inc/client/at-a-glance/videopress.jsx b/projects/plugins/jetpack/_inc/client/at-a-glance/videopress.jsx
index db82cc76f1b28..8d61b02796b6a 100644
--- 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
index 090290c0c74a9..a14d44236ca51 100644
--- 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
index 286fcd812490d..f832780ed0a6d 100644
--- 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
index 42b191ab8c254..ab1785a0ae69f 100644
--- 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
index 5df4a540b7725..361cdcce142ae 100644
--- 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 (
@@ -20,6 +21,7 @@ export const PluginDashItem = ( {
pluginLink={ pluginLink }
pluginFiles={ pluginFiles }
installOrActivatePrompt={ installOrActivatePrompt }
+ plan={ plan }
/>
);
@@ -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
index 85a229a544cd9..473d9daa017c0 100644
--- 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
index 0b645cb29aa46..8112965e3ae8e 100644
--- 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
new file mode 100644
index 0000000000000..5096b4ac4dfa7
--- /dev/null
+++ 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