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