Social | Hide irrelevant UI on social admin page

projects/js-packages/publicize-components/changelog/update-social-hide-irrelevant-ui-on-admin-page

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Hide Social Notes if Social plugin is not active

projects/js-packages/publicize-components/src/components/admin-page/header/index.js

@@ -13,7 +13,11 @@ import { __ } from '@wordpress/i18n';
 import { Icon, postList } from '@wordpress/icons';
 import { store as socialStore } from '../../../social-store';
 import { getSocialScriptData } from '../../../utils';
-import { getSharedPostsCount, getTotalSharesCount } from '../../../utils/shares-data';
+import {
+	getSharedPostsCount,
+	getTotalSharesCount,
+	isShareLimitEnabled,
+} from '../../../utils/shares-data';
 import StatCards from './stat-cards';
 import styles from './styles.module.scss';
 
@@ -22,7 +26,7 @@ const Header = () => {
 		const store = select( socialStore );
 		return {
 			hasConnections: store.getConnections().length > 0,
-			isModuleEnabled: select( socialStore ).getSocialModuleSettings().publicize,
+			isModuleEnabled: store.getSocialModuleSettings().publicize_active,
 		};
 	} );
 
@@ -76,22 +80,24 @@ const Header = () => {
 						</Button>
 					</div>
 				</Col>
-				<Col sm={ 4 } md={ 4 } lg={ { start: 7, end: 12 } }>
-					<StatCards
-						stats={ [
-							{
-								icon: <SocialIcon />,
-								label: __( 'Total shares past 30 days', 'jetpack-publicize-components' ),
-								value: formatter.format( getTotalSharesCount() ),
-							},
-							{
-								icon: <Icon icon={ postList } />,
-								label: __( 'Posted this month', 'jetpack-publicize-components' ),
-								value: formatter.format( getSharedPostsCount() ),
-							},
-						] }
-					/>
-				</Col>
+				{ isShareLimitEnabled() ? (
+					<Col sm={ 4 } md={ 4 } lg={ { start: 7, end: 12 } }>
+						<StatCards
+							stats={ [
+								{
+									icon: <SocialIcon />,
+									label: __( 'Total shares past 30 days', 'jetpack-publicize-components' ),
+									value: formatter.format( getTotalSharesCount() ),
+								},
+								{
+									icon: <Icon icon={ postList } />,
+									label: __( 'Posted this month', 'jetpack-publicize-components' ),
+									value: formatter.format( getSharedPostsCount() ),
+								},
+							] }
+						/>
+					</Col>
+				) : null }
 			</Container>
 		</>
 	);

projects/js-packages/publicize-components/src/components/admin-page/index.tsx

@@ -7,7 +7,7 @@ import {
 	GlobalNotices,
 } from '@automattic/jetpack-components';
 import { useConnection } from '@automattic/jetpack-connection';
-import { siteHasFeature } from '@automattic/jetpack-script-data';
+import { getScriptData, siteHasFeature } from '@automattic/jetpack-script-data';
 import { useSelect } from '@wordpress/data';
 import { useState, useCallback } from '@wordpress/element';
 import { store as socialStore } from '../../social-store';
@@ -25,8 +25,12 @@ import SocialNotesToggle from './toggles/social-notes-toggle';
 import UtmToggle from './toggles/utm-toggle';
 
 export const SocialAdminPage = () => {
+	const is_wpcom = getScriptData().site.host === 'wpcom';
+	const is_woa = getScriptData().site.host === 'woa';
+
 	const { isUserConnected, isRegistered } = useConnection();
-	const showConnectionCard = ! isRegistered || ! isUserConnected;
+	const showConnectionCard = ! is_wpcom && ( ! isRegistered || ! isUserConnected );
+
 	const [ forceDisplayPricingPage, setForceDisplayPricingPage ] = useState( false );
 
 	const onPricingPageDismiss = useCallback( () => setForceDisplayPricingPage( false ), [] );
@@ -42,9 +46,9 @@ export const SocialAdminPage = () => {
 		};
 	}, [] );
 
-	const pluginVersion = getSocialScriptData().plugin_info.social.version;
+	const socialPluginVersion = getSocialScriptData().plugin_info.social.version;
 
-	const moduleName = `Jetpack Social ${ pluginVersion }`;
+	const moduleName = `Jetpack Social ${ socialPluginVersion }`;
 
 	if ( showConnectionCard ) {
 		return (
@@ -59,9 +63,10 @@ export const SocialAdminPage = () => {
 	}
 
 	return (
-		<AdminPage moduleName={ moduleName } header={ <AdminPageHeader /> }>
+		<AdminPage moduleName={ moduleName } header={ <AdminPageHeader /> } showFooter={ ! is_wpcom }>
 			<GlobalNotices />
-			{ ( ! hasSocialPaidFeatures() && showPricingPage ) || forceDisplayPricingPage ? (
+			{ ( ! is_wpcom && ! is_woa && ! hasSocialPaidFeatures() && showPricingPage ) ||
+			forceDisplayPricingPage ? (
 				<AdminSectionHero>
 					<Container horizontalSpacing={ 3 } horizontalGap={ 3 }>
 						<Col>
@@ -77,7 +82,12 @@ export const SocialAdminPage = () => {
 					<AdminSection>
 						<SocialModuleToggle />
 						{ isModuleEnabled && <UtmToggle /> }
-						{ isModuleEnabled && <SocialNotesToggle disabled={ isUpdatingJetpackSettings } /> }
+						{
+							// Only show the Social Notes toggle if Social plugin is active
+							socialPluginVersion && isModuleEnabled && (
+								<SocialNotesToggle disabled={ isUpdatingJetpackSettings } />
+							)
+						}
 						{ isModuleEnabled && siteHasFeature( features.IMAGE_GENERATOR ) && (
 							<SocialImageGeneratorToggle disabled={ isUpdatingJetpackSettings } />
 						) }

projects/js-packages/publicize-components/src/components/admin-page/page-header/index.jsx

@@ -5,24 +5,29 @@ import { hasSocialPaidFeatures } from '../../../utils';
 import Logo from './logo';
 import styles from './styles.module.scss';
 
+/**
+ * @type {Array<import('@automattic/jetpack-script-data').AdminSiteData['host']>}
+ */
+const HIDE_LICENSE_UI_FOR = [ 'woa', 'wpcom' ];
+
 const AdminPageHeader = () => {
-	const activateLicenseUrl = getMyJetpackUrl( '#/add-license' );
+	const showLicenceUi = ! HIDE_LICENSE_UI_FOR.includes( getScriptData().site.host );
 
 	return (
 		<div className={ styles.header }>
 			<span className={ styles.logo }>
 				<Logo />
 			</span>
 
-			{ ! hasSocialPaidFeatures() && getScriptData().site.host !== 'woa' && (
+			{ ! hasSocialPaidFeatures() && showLicenceUi && (
 				<p>
 					{ createInterpolateElement(
 						__(
 							'Already have an existing plan or license key? <a>Click here to get started</a>',
 							'jetpack-publicize-components'
 						),
 						{
-							a: <a href={ activateLicenseUrl } />,
+							a: <a href={ getMyJetpackUrl( '#/add-license' ) } />,
 						}
 					) }
 				</p>

projects/js-packages/publicize-components/src/components/admin-page/test/index.test.jsx

@@ -12,6 +12,9 @@ describe( 'load the app', () => {
 
 	beforeEach( () => {
 		window.JetpackScriptData = {
+			site: {
+				host: 'unknown',
+			},
 			social: {
 				api_paths: {},
 				plugin_info: {

projects/js-packages/publicize-components/src/components/admin-page/toggles/social-module-toggle/index.tsx

@@ -29,8 +29,8 @@ const SocialModuleToggle: React.FC = () => {
 		};
 	}, [] );
 
-	const blogID = getScriptData().site.wpcom.blog_id;
-	const siteSuffix = getScriptData().site.suffix;
+	const { wpcom, host, suffix: siteSuffix } = getScriptData().site;
+	const is_wpcom = host === 'wpcom';
 
 	const { urls, feature_flags } = getSocialScriptData();
 
@@ -79,6 +79,7 @@ const SocialModuleToggle: React.FC = () => {
 
 	return (
 		<ToggleSection
+			hideToggle={ is_wpcom }
 			title={ __(
 				'Automatically share your posts to social networks',
 				'jetpack-publicize-components'
@@ -88,22 +89,31 @@ const SocialModuleToggle: React.FC = () => {
 			onChange={ toggleModule }
 		>
 			<Text className={ styles.text }>
-				{ __(
-					'When enabled, you’ll be able to connect your social media accounts and send a post’s featured image and content to the selected channels with a single click when the post is published.',
-					'jetpack-publicize-components'
-				) }
+				{ ! is_wpcom
+					? __(
+							'When enabled, you’ll be able to connect your social media accounts and send a post’s featured image and content to the selected channels with a single click when the post is published.',
+							'jetpack-publicize-components',
+							/* dummy arg to avoid bad minification */ 0
+					  )
+					: __(
+							'Connect your social media accounts and send a post’s featured image and content to the selected channels with a single click when the post is published.',
+							'jetpack-publicize-components'
+					  ) }
 				&nbsp;
-				<ExternalLink href="https://jetpack.com/redirect/?source=social-plugin-publicize-support-admin-page">
+				<ExternalLink
+					href="https://jetpack.com/redirect/?source=social-plugin-publicize-support-admin-page"
+					className={ styles.learn }
+				>
 					{ __( 'Learn more', 'jetpack-publicize-components' ) }
 				</ExternalLink>
 			</Text>
-			{ ! hasSocialPaidFeatures() ? (
+			{ ! is_wpcom && ! hasSocialPaidFeatures() ? (
 				<ContextualUpgradeTrigger
 					className={ clsx( styles.cut, { [ styles.small ]: isSmall } ) }
 					description={ __( 'Unlock advanced sharing options', 'jetpack-publicize-components' ) }
 					cta={ __( 'Power up Jetpack Social', 'jetpack-publicize-components' ) }
 					href={ getRedirectUrl( 'jetpack-social-admin-page-upsell', {
-						site: `${ blogID ?? siteSuffix }`,
+						site: `${ wpcom.blog_id ?? siteSuffix }`,
 						query: 'redirect_to=admin.php?page=jetpack-social',
 					} ) }
 					tooltipText={ __(

projects/js-packages/publicize-components/src/components/admin-page/toggles/social-module-toggle/styles.module.scss

@@ -37,3 +37,7 @@
 		grid-column: span 2;
 	}
 }
+
+.learn {
+	text-wrap: nowrap;
+}

projects/js-packages/publicize-components/src/components/admin-page/toggles/styles.module.scss

@@ -26,6 +26,13 @@
 	}
 }
 
+.column.notoggle {
+	grid-template-columns: 1fr 0;
+	> * {
+		grid-column: span 2;
+	}
+}
+
 .title {
 	grid-row: 1;
 

projects/js-packages/publicize-components/src/components/admin-page/toggles/toggle-section.tsx

@@ -33,6 +33,11 @@ type ToggleSectionProps = {
 	 * Children to be rendered inside the toggle.
 	 */
 	children: React.ReactNode;
+
+	/**
+	 * Whether to hide the toggle.
+	 */
+	hideToggle?: boolean;
 };
 
 /**
@@ -51,17 +56,20 @@ const ToggleSection: React.FC< ToggleSectionProps > = ( {
 	checked,
 	disabled,
 	children,
+	hideToggle,
 } ) => (
 	<Container horizontalSpacing={ 7 } horizontalGap={ 3 }>
-		<div className={ styles.column }>
-			<ToggleControl
-				label={ '' }
-				className={ styles.toggle }
-				disabled={ disabled }
-				checked={ checked }
-				onChange={ onChange }
-				__nextHasNoMarginBottom={ true }
-			/>
+		<div className={ `${ styles.column } ${ hideToggle ? styles.notoggle : '' }` }>
+			{ ! hideToggle && (
+				<ToggleControl
+					label={ '' }
+					className={ styles.toggle }
+					disabled={ disabled }
+					checked={ checked }
+					onChange={ onChange }
+					__nextHasNoMarginBottom={ true }
+				/>
+			) }
 			<Text className={ styles.title } variant="title-medium">
 				{ title }
 				{ beta && <div className={ styles.beta }>Beta</div> }

projects/js-packages/publicize-components/src/types.ts

@@ -13,6 +13,7 @@ export type SharesData = {
 	to_be_publicized_count: number;
 	publicized_count: number;
 	shared_posts_count: number;
+	is_share_limit_enabled: boolean;
 };
 
 export interface FeatureFlags {
@@ -44,7 +45,7 @@ export type SocialSettings = {
 	showPricingPage: boolean;
 };
 
-export type PluginInfo = Record< 'social' | 'jetpack', { version: string } >;
+export type PluginInfo = Record< 'social' | 'jetpack', { version: string | null } >;
 
 export interface SocialScriptData {
 	api_paths: ApiPaths;

projects/js-packages/publicize-components/src/utils/shares-data.ts

@@ -45,3 +45,15 @@ export function getTotalSharesCount() {
 export function getSharedPostsCount() {
 	return getSharesData().shared_posts_count ?? 0;
 }
+
+/**
+ * Get whether the sharing limits are enabled. This is partially
+ * irrelevant now as we have given the feature to all sites, but
+ * if the limits are enabled we count the shares made, and can
+ * display those stats.
+ *
+ * @return {boolean} Whether the sharing limits are enabled
+ */
+export function isShareLimitEnabled() {
+	return getSharesData().is_share_limit_enabled ?? false;
+}