diff --git a/client/assets/images/marketplace/plugins-browser.svg b/client/assets/images/marketplace/plugins-browser.svg new file mode 100644 index 0000000000000..867d0b15dbf64 --- /dev/null +++ b/client/assets/images/marketplace/plugins-browser.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/blocks/announcement-modal/index.jsx b/client/blocks/announcement-modal/index.jsx index 62a39c34cdc09..49279ca85b6b3 100644 --- a/client/blocks/announcement-modal/index.jsx +++ b/client/blocks/announcement-modal/index.jsx @@ -1,7 +1,7 @@ import { Button } from '@automattic/components'; -import { Title } from '@automattic/onboarding'; import { Guide } from '@wordpress/components'; import { useSelector, useDispatch } from 'react-redux'; +import { preventWidows } from 'calypso/lib/formatting'; import { recordTracksEvent } from 'calypso/state/analytics/actions'; import { getCurrentUserId } from 'calypso/state/current-user/selectors'; import { savePreference } from 'calypso/state/preferences/actions'; @@ -16,11 +16,9 @@ const Page = ( { headline, heading, content, image, cta, handleDismiss } ) => {
{ headline }
-
- { heading } -
+
{ preventWidows( heading ) }
-

{ content }

+

{ preventWidows( content ) }

{ cta && (
diff --git a/client/blocks/announcement-modal/style.scss b/client/blocks/announcement-modal/style.scss index 3eab656d8df61..abc7f04417d57 100644 --- a/client/blocks/announcement-modal/style.scss +++ b/client/blocks/announcement-modal/style.scss @@ -28,7 +28,7 @@ $modal-footer-height: 30px + ( $modal-footer-padding-v * 2 ); } @media ( min-width: $modal-breakpoint ) { - width: 740px; + width: 720px; max-height: 80vh; } @@ -79,7 +79,6 @@ $modal-footer-height: 30px + ( $modal-footer-padding-v * 2 ); @media ( min-width: $modal-breakpoint ) { flex-direction: row; justify-content: flex-start; - min-height: $modal-content-min-height; height: 100%; } @@ -98,7 +97,7 @@ $modal-footer-height: 30px + ( $modal-footer-padding-v * 2 ); .announcement-modal__visual { @media ( min-width: $modal-breakpoint ) { flex: 1 auto; - min-width: 355px; + min-width: 310px; } } @@ -143,17 +142,11 @@ $modal-footer-height: 30px + ( $modal-footer-padding-v * 2 ); @include onboarding-font-recoleta; color: var( --studio-gray-90 ); font-size: 24px; - - h2 { - line-height: 1.19; - } + line-height: 1.19; + margin: 12px 0; @media ( min-width: $modal-breakpoint ) { - font-size: 24px; - - h2 { - margin: 12px 0; - } + font-size: 32px; } } diff --git a/client/my-sites/customer-home/main.jsx b/client/my-sites/customer-home/main.jsx index 4fa2950a91900..2ae00588af977 100644 --- a/client/my-sites/customer-home/main.jsx +++ b/client/my-sites/customer-home/main.jsx @@ -18,6 +18,7 @@ import { preventWidows } from 'calypso/lib/formatting'; import Primary from 'calypso/my-sites/customer-home/locations/primary'; import Secondary from 'calypso/my-sites/customer-home/locations/secondary'; import Tertiary from 'calypso/my-sites/customer-home/locations/tertiary'; +import PluginsAnnouncementModal from 'calypso/my-sites/plugins/plugins-announcement-modal'; import { bumpStat, composeAnalytics, recordTracksEvent } from 'calypso/state/analytics/actions'; import { getCurrentUserCountryCode } from 'calypso/state/current-user/selectors'; import { successNotice } from 'calypso/state/notices/actions'; @@ -137,6 +138,7 @@ const Home = ( { ) : ( <> +
diff --git a/client/my-sites/plugins/plugins-announcement-modal/index.jsx b/client/my-sites/plugins/plugins-announcement-modal/index.jsx new file mode 100644 index 0000000000000..1989050a2f411 --- /dev/null +++ b/client/my-sites/plugins/plugins-announcement-modal/index.jsx @@ -0,0 +1,47 @@ +import { isStarter } from '@automattic/calypso-products'; +import { useTranslate } from 'i18n-calypso'; +import { useSelector } from 'react-redux'; +import announcementImage from 'calypso/assets/images/marketplace/plugins-browser.svg'; +import AnnouncementModal from 'calypso/blocks/announcement-modal'; +import isAtomicSite from 'calypso/state/selectors/is-site-automated-transfer'; +import { isJetpackSite, getSitePlan } from 'calypso/state/sites/selectors'; +import { getSelectedSiteId } from 'calypso/state/ui/selectors'; + +const PluginsAnnouncementModal = () => { + const translate = useTranslate(); + const siteId = useSelector( getSelectedSiteId ); + const jetpackNonAtomic = useSelector( + ( state ) => isJetpackSite( state, siteId ) && ! isAtomicSite( state, siteId ) + ); + const sitePlan = useSelector( ( state ) => getSitePlan( state, siteId ) ); + + if ( jetpackNonAtomic ) { + // Buying plugins is not yet available to self hosted sites. + return null; + } + + if ( ! siteId || ! isStarter( sitePlan ) ) { + return null; + } + + const announcementPages = [ + { + headline: translate( 'NEW' ), + heading: translate( 'Install premium plugins on your site' ), + content: translate( + "You can now extend your site's capabilities with premium plugins. Available for purchase on the plugins page." + ), + featureImage: announcementImage, + }, + ]; + + return ( + + ); +}; + +export default PluginsAnnouncementModal; diff --git a/client/my-sites/plugins/plugins-browser/index.jsx b/client/my-sites/plugins/plugins-browser/index.jsx index f6d4aca36886e..5a1e7983ccfed 100644 --- a/client/my-sites/plugins/plugins-browser/index.jsx +++ b/client/my-sites/plugins/plugins-browser/index.jsx @@ -16,8 +16,6 @@ import { Icon, upload } from '@wordpress/icons'; import { useTranslate } from 'i18n-calypso'; import { useCallback, useEffect, useMemo, useRef } from 'react'; import { useSelector, useDispatch } from 'react-redux'; -import announcementImage from 'calypso/assets/images/marketplace/diamond.svg'; -import AnnouncementModal from 'calypso/blocks/announcement-modal'; import UpsellNudge from 'calypso/blocks/upsell-nudge'; import DocumentHead from 'calypso/components/data/document-head'; import QueryJetpackPlugins from 'calypso/components/data/query-jetpack-plugins'; @@ -37,6 +35,7 @@ import { useCategories } from 'calypso/my-sites/plugins/categories/use-categorie import EducationFooter from 'calypso/my-sites/plugins/education-footer'; import NoPermissionsError from 'calypso/my-sites/plugins/no-permissions-error'; import { isCompatiblePlugin } from 'calypso/my-sites/plugins/plugin-compatibility'; +import PluginsAnnouncementModal from 'calypso/my-sites/plugins/plugins-announcement-modal'; import PluginsBrowserList from 'calypso/my-sites/plugins/plugins-browser-list'; import { PluginsBrowserListVariant } from 'calypso/my-sites/plugins/plugins-browser-list/types'; import SearchBoxHeader from 'calypso/my-sites/plugins/search-box-header'; @@ -652,16 +651,6 @@ const PluginsBrowser = ( { trackPageViews = true, category, search, searchTitle, recordGoogleEvent( 'Jetpack', 'Clicked in site indicator to start Jetpack Disconnect flow' ), recordTracksEvent( 'calypso_jetpack_site_indicator_disconnect_start' ) ); - const annoncementPages = [ - { - headline: translate( 'NEW' ), - heading: translate( 'Buy the best plugins' ), - content: translate( - "Now you can purchase plugins right on WordPress.com to extend your website's capabilities." - ), - featureImage: announcementImage, - }, - ]; useEffect( () => { if ( search && searchTitle ) { @@ -688,13 +677,7 @@ const PluginsBrowser = ( { trackPageViews = true, category, search, searchTitle, /> - { ! jetpackNonAtomic && ( - - ) } + { ! hideHeader && (