Jetpack Social | Direct non-admin authors to user connection if needed (

#36976)

* Jetpack Social | Direct non-admin authors to user connection if needed

* Fix versions

projects/js-packages/publicize-components/changelog/update-direct-authors-to-user-connection

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update the Social sidebar share post panel to direct non-admin authors to user connection if there is no user connection.

projects/js-packages/publicize-components/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize-components",
-	"version": "0.49.2",
+	"version": "0.49.3-alpha",
 	"description": "A library of JS components required by the Publicize editor plugin",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/publicize-components/#readme",
 	"bugs": {

projects/js-packages/publicize-components/src/components/form/connections-list.tsx

@@ -1,3 +1,4 @@
+import { useConnection } from '@automattic/jetpack-connection';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import PublicizeConnection from '../connection';
 import PublicizeSettingsButton from '../settings-button';
@@ -9,6 +10,8 @@ export const ConnectionsList: React.FC = () => {
 
 	const { canBeTurnedOn, shouldBeDisabled } = useConnectionState();
 
+	const { isUserConnected } = useConnection();
+
 	return (
 		<ul className={ styles[ 'connections-list' ] }>
 			{ connections.map( conn => {
@@ -28,9 +31,11 @@ export const ConnectionsList: React.FC = () => {
 					/>
 				);
 			} ) }
-			<li>
-				<PublicizeSettingsButton />
-			</li>
+			{ isUserConnected ? (
+				<li>
+					<PublicizeSettingsButton />
+				</li>
+			) : null }
 		</ul>
 	);
 };

projects/js-packages/publicize-components/src/components/form/index.tsx

@@ -6,6 +6,7 @@
  * sharing message.
  */
 
+import { useConnection } from '@automattic/jetpack-connection';
 import { Disabled, ExternalLink, PanelRow } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { Fragment, useMemo } from '@wordpress/element';
@@ -45,6 +46,8 @@ export default function PublicizeForm() {
 	const { isPublicizeEnabled, isPublicizeDisabledBySitePlan, connectionsAdminUrl } =
 		usePublicizeConfig();
 
+	const useConnectionUrl = useSelect( select => select( socialStore ).userConnectionUrl(), [] );
+
 	const { numberOfSharesRemaining } = useSelect( select => {
 		return {
 			showShareLimits: select( socialStore ).showShareLimits(),
@@ -90,6 +93,8 @@ export default function PublicizeForm() {
 
 	refreshConnections();
 
+	const { isUserConnected } = useConnection();
+
 	return (
 		<Wrapper>
 			{ hasConnections ? (
@@ -113,13 +118,44 @@ export default function PublicizeForm() {
 							/>
 						) ) }
 				</>
-			) : (
-				<PanelRow>
-					<ExternalLink href={ connectionsAdminUrl }>
-						{ __( 'Connect an account', 'jetpack' ) }
-					</ExternalLink>
-				</PanelRow>
-			) }
+			) : null }
+			<PanelRow>
+				{
+					// Use IIFE make it more readable and avoid nested ternary operators.
+					( () => {
+						if ( ! isUserConnected ) {
+							return (
+								<p>
+									{ __(
+										'You must connect your WordPress.com account to be able to add social media connections.',
+										'jetpack'
+									) }
+									&nbsp;
+									<a href={ useConnectionUrl }>{ __( 'Connect now', 'jetpack' ) }</a>
+								</p>
+							);
+						}
+
+						if ( ! hasConnections ) {
+							return (
+								<p>
+									{ __(
+										'Sharing is disabled because there are no social media accounts connected.',
+										'jetpack'
+									) }
+									<br />
+									<ExternalLink href={ connectionsAdminUrl }>
+										{ __( 'Connect an account', 'jetpack' ) }
+									</ExternalLink>
+								</p>
+							);
+						}
+
+						return null;
+					} )()
+				}
+			</PanelRow>
+
 			{ ! isPublicizeDisabledBySitePlan && (
 				<Fragment>
 					{ isPublicizeEnabled && hasEnabledConnections && <SharePostForm /> }

projects/js-packages/publicize-components/src/components/panel/index.jsx

@@ -59,7 +59,7 @@ const PublicizePanel = ( { prePublish, children } ) => {
 									  )
 							}
 							onChange={ togglePublicizeFeature }
-							checked={ isPublicizeEnabled }
+							checked={ isPublicizeEnabled && hasConnections }
 							disabled={ ! hasConnections }
 						/>
 					) }

projects/js-packages/publicize-components/src/social-store/reducer/index.js

@@ -14,6 +14,7 @@ const reducer = combineReducers( {
 	socialImageGeneratorSettings,
 	autoConversionSettings,
 	hasPaidPlan: ( state = false ) => state,
+	userConnectionUrl: ( state = '' ) => state,
 } );
 
 export default reducer;

projects/js-packages/publicize-components/src/social-store/selectors/index.js

@@ -12,6 +12,7 @@ const selectors = {
 	...sharesData,
 	...socialImageGeneratorSettingsSelectors,
 	...autoConversionSettingsSelectors,
+	userConnectionUrl: state => state.userConnectionUrl,
 };
 
 export default selectors;

projects/plugins/jetpack/changelog/update-direct-authors-to-user-connection

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Add the userConnectionUrl to initial state to use in Social sidebar

projects/plugins/jetpack/class.jetpack-gutenberg.php

@@ -757,6 +757,7 @@ public static function enqueue_block_editor_assets() {
 				'supportedAdditionalConnections'  => $publicize->get_supported_additional_connections(),
 				'autoConversionSettings'          => $settings['autoConversionSettings'],
 				'jetpackSharingSettingsUrl'       => esc_url_raw( admin_url( 'admin.php?page=jetpack#/sharing' ) ),
+				'userConnectionUrl'               => esc_url_raw( admin_url( 'admin.php?page=my-jetpack#/connection' ) ),
 			);
 		}
 

projects/plugins/social/changelog/update-direct-authors-to-user-connection

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update the Social sidebar share post panel to direct non-admin authors to user connection if there is no user connection.

projects/plugins/social/src/class-jetpack-social.php

@@ -350,6 +350,7 @@ class_exists( 'Jetpack' ) ||
 					'autoConversionSettings'          => $settings['autoConversionSettings'],
 					'dismissedNotices'                => Dismissed_Notices::get_dismissed_notices(),
 					'supportedAdditionalConnections'  => $publicize->get_supported_additional_connections(),
+					'userConnectionUrl'               => esc_url_raw( admin_url( 'admin.php?page=my-jetpack#/connection' ) ),
 				),
 			)
 		);