Social: Move the admin upsell (#37731)

* Remove nudge from the header

* Add nudge to the toggle section

* changelog

* Fixup versions

* Fix small screens

projects/plugins/social/changelog/change-social-admin-page-upsell

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Move the admin upsell to the toggle section

projects/plugins/social/composer.json

@@ -84,6 +84,6 @@
 			"automattic/jetpack-autoloader": true,
 			"automattic/jetpack-composer-plugin": true
 		},
-		"autoloader-suffix": "c4802e05bbcf59fd3b6350e8d3e5482c_socialⓥ4_4_1_alpha"
+		"autoloader-suffix": "c4802e05bbcf59fd3b6350e8d3e5482c_socialⓥ4_5_0_alpha"
 	}
 }

projects/plugins/social/jetpack-social.php

@@ -4,7 +4,7 @@
  * Plugin Name: Jetpack Social
  * Plugin URI: https://wordpress.org/plugins/jetpack-social
  * Description: Share your site’s posts on several social media networks automatically when you publish a new post.
- * Version: 4.4.1-alpha
+ * Version: 4.5.0-alpha
  * Author: Automattic - Jetpack Social team
  * Author URI: https://jetpack.com/social/
  * License: GPLv2 or later

projects/plugins/social/src/js/components/header/index.js

@@ -1,11 +1,9 @@
 import {
 	Container,
-	ContextualUpgradeTrigger,
 	Col,
 	H3,
 	Button,
 	SocialIcon,
-	getRedirectUrl,
 	getUserLocale,
 	Text,
 } from '@automattic/jetpack-components';
@@ -30,10 +28,7 @@ const Header = () => {
 		newPostUrl,
 		postsCount,
 		totalShareCount,
-		siteSuffix,
-		blogID,
 		showShareLimits,
-		hasPaidFeatures,
 		useAdminUiV1,
 	} = useSelect( select => {
 		const store = select( socialStore );
@@ -44,10 +39,7 @@ const Header = () => {
 			newPostUrl: `${ store.getAdminUrl() }post-new.php`,
 			postsCount: store.getSharedPostsCount(),
 			totalShareCount: store.getTotalSharesCount(),
-			siteSuffix: store.getSiteSuffix(),
-			blogID: store.getBlogID(),
 			showShareLimits: store.showShareLimits(),
-			hasPaidFeatures: store.hasPaidFeatures() || store.hasPaidPlan(),
 			useAdminUiV1: store.useAdminUiV1(),
 		};
 	} );
@@ -125,18 +117,6 @@ const Header = () => {
 							] }
 						/>
 					) }
-					{ ! hasPaidFeatures ? (
-						<ContextualUpgradeTrigger
-							className={ styles.cut }
-							description={ __( 'Unlock advanced posting options', 'jetpack-social' ) }
-							cta={ __( 'Get a Jetpack Social Plan', 'jetpack-social' ) }
-							href={ getRedirectUrl( 'jetpack-social-admin-page-upsell', {
-								site: blogID ?? siteSuffix,
-								query: 'redirect_to=admin.php?page=jetpack-social',
-							} ) }
-							tooltipText={ __( 'Share as a post for more engagement', 'jetpack-social' ) }
-						/>
-					) : null }
 				</Col>
 			</Container>
 		</>

projects/plugins/social/src/js/components/header/styles.module.scss

@@ -55,10 +55,6 @@
 	}
 }
 
-.cut {
-	margin-top: calc( var( --spacing-base ) * 2 );
-}
-
 .connection-error-col {
 	margin-top: 25px;
 }

projects/plugins/social/src/js/components/social-module-toggle/index.tsx

@@ -1,21 +1,39 @@
-import { Button, Text, useBreakpointMatch } from '@automattic/jetpack-components';
+import {
+	Button,
+	ContextualUpgradeTrigger,
+	Text,
+	getRedirectUrl,
+	useBreakpointMatch,
+} from '@automattic/jetpack-components';
 import { ConnectionManagement, SOCIAL_STORE_ID } from '@automattic/jetpack-publicize-components';
 import { ExternalLink } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
 import React, { useCallback } from 'react';
 import ToggleSection from '../toggle-section';
 import { SocialStoreSelectors } from '../types/types';
 import styles from './styles.module.scss';
 
 const SocialModuleToggle: React.FC = () => {
-	const { connectionsAdminUrl, isModuleEnabled, isUpdating, useAdminUiV1 } = useSelect( select => {
+	const {
+		connectionsAdminUrl,
+		isModuleEnabled,
+		isUpdating,
+		useAdminUiV1,
+		siteSuffix,
+		blogID,
+		hasPaidFeatures,
+	} = useSelect( select => {
 		const store = select( SOCIAL_STORE_ID ) as SocialStoreSelectors;
 		return {
 			isModuleEnabled: store.isModuleEnabled(),
 			isUpdating: store.isUpdatingJetpackSettings(),
 			connectionsAdminUrl: store.getConnectionsAdminUrl(),
 			useAdminUiV1: store.useAdminUiV1(),
+			siteSuffix: store.getSiteSuffix(),
+			blogID: store.getBlogID(),
+			hasPaidFeatures: store.hasPaidFeatures(),
 		};
 	}, [] );
 
@@ -74,6 +92,21 @@ const SocialModuleToggle: React.FC = () => {
 					{ __( 'Learn more', 'jetpack-social' ) }
 				</ExternalLink>
 			</Text>
+			{ ! hasPaidFeatures ? (
+				<ContextualUpgradeTrigger
+					className={ classNames( styles.cut, { [ styles.small ]: isSmall } ) }
+					description={ __( 'Unlock advanced sharing options', 'jetpack-social' ) }
+					cta={ __( 'Power up Jetpack Social', 'jetpack-social' ) }
+					href={ getRedirectUrl( 'jetpack-social-admin-page-upsell', {
+						site: blogID ?? siteSuffix,
+						query: 'redirect_to=admin.php?page=jetpack-social',
+					} ) }
+					tooltipText={ __(
+						'Get access to priority support, engagement optimization options like image and video sharing, and Social Image Generator.',
+						'jetpack-social'
+					) }
+				/>
+			) : null }
 			{ renderConnectionManagement() }
 		</ToggleSection>
 	);

projects/plugins/social/src/js/components/social-module-toggle/styles.module.scss

@@ -27,4 +27,13 @@
 	@media ( min-width: 600px ) {
 		grid-column: 2;
 	}
-}
+}
+
+.cut {
+	grid-column: 2;
+	margin-top: var( --spacing-base );
+
+	&.small {
+		grid-column: span 2;
+	}
+}

projects/plugins/social/src/js/components/types/types.ts

@@ -9,6 +9,7 @@ type JetpackSettingsSelectors = {
 	isUpdatingJetpackSettings: () => boolean;
 	hasPaidPlan: () => boolean;
 	useAdminUiV1: () => boolean;
+	hasPaidFeatures: () => boolean;
 };
 
 type ConnectionDataSelectors = {
@@ -27,6 +28,8 @@ type SharesDataSelectors = {
 type SiteDataSelectors = {
 	getSiteData: () => Array< object >;
 	getSiteTitle: () => string;
+	getSiteSuffix: () => string;
+	getBlogID: () => number;
 };
 
 type SocialImageGeneratorSettingsSelectors = {