Plugins on starter: adds the announcement modal in customer home. (#6…

…5494)

* Announcement modal: prevent widow words.

* Plugins on starter: adds the announcement modal in plugins browser.

* Plugins on starter: adds the announcement modal in customer home.

* Plugins on starter: accounts of /plugins generic page.

* Announcement modal: CSS changes

Co-authored-by: cpap <[email protected]>

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 } ) => {
 				<div className="announcement-modal__headline">
 					<span>{ headline }</span>
 				</div>
-				<div className="announcement-modal__heading">
-					<Title tagName="h2">{ heading }</Title>
-				</div>
+				<div className="announcement-modal__heading">{ preventWidows( heading ) }</div>
 				<div className="announcement-modal__description">
-					<p>{ content }</p>
+					<p>{ preventWidows( content ) }</p>
 				</div>
 				{ cta && (
 					<div className="announcement-modal__cta">

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;
 	}
 }
 

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 = ( {
 			) : (
 				<>
 					<Primary cards={ layout.primary } />
+					<PluginsAnnouncementModal />
 					<div className="customer-home__layout">
 						<div className="customer-home__layout-col customer-home__layout-col-left">
 							<Secondary cards={ layout.secondary } />

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 (
+		<AnnouncementModal
+			announcementId="plugins-page-starter-plan-launch"
+			pages={ announcementPages }
+			finishButtonText={ translate( 'Explore now' ) }
+		/>
+	);
+};
+
+export default PluginsAnnouncementModal;