Initial State: Replace isSocialImageGeneratorAvailable with feature…

… check (#39836)

* Initial State: Replace isSocialImageGeneratorAvailable with feature check

* Use constants instead of strings

projects/js-packages/publicize-components/changelog/update-social-sig-feature-check

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Initial state: Migrated isSocialImageGeneratorAvailable to feature check
+
+

projects/js-packages/publicize-components/index.ts

@@ -32,6 +32,7 @@ export * from './src/components/share-post';
 export * from './src/hooks/use-sync-post-data-to-store';
 export * from './src/hooks/use-saving-post';
 export * from './src/hooks/use-post-meta';
+export * from './src/hooks/use-post-can-use-sig';
 export * from './src/components/share-buttons';
 export * from './src/components/manage-connections-modal';
 export * from './src/utils/script-data';

projects/js-packages/publicize-components/src/hooks/use-post-can-use-sig/index.ts

@@ -0,0 +1,21 @@
+import { siteHasFeature } from '@automattic/jetpack-script-data';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { features } from '../../utils/constants';
+
+/**
+ * When a post can use the Social Image Generator (SIG).
+ *
+ * @return {boolean} Whether the post can use the Social Image Generator.
+ */
+export function usePostCanUseSig() {
+	const isJetpackSocialNote = useSelect( select => {
+		const currentPostType = select( editorStore )
+			// @ts-expect-error -- `@wordpress/editor` is a nightmare to work with TypeScript - getCurrentPostType exists on the editor store
+			.getCurrentPostType();
+
+		return 'jetpack-social-note' === currentPostType;
+	}, [] );
+
+	return ! isJetpackSocialNote && siteHasFeature( features.IMAGE_GENERATOR );
+}

projects/js-packages/publicize-components/src/hooks/use-publicize-config/index.js

@@ -25,7 +25,6 @@ export default function usePublicizeConfig() {
 	const isRePublicizeFeatureAvailable =
 		isJetpackSite || getJetpackExtensionAvailability( republicizeFeatureName )?.available;
 	const isPostPublished = useSelect( select => select( editorStore ).isCurrentPostPublished(), [] );
-	const currentPostType = useSelect( select => select( editorStore ).getCurrentPostType(), [] );
 	const { isUserConnected } = useConnection();
 	const { urls } = getSocialScriptData();
 
@@ -80,11 +79,6 @@ export default function usePublicizeConfig() {
 	 */
 	const hidePublicizeFeature = isPostPublished && ! isRePublicizeFeatureAvailable;
 
-	/**\
-	 * Returns true if the post type is a Jetpack Social Note.
-	 */
-	const isJetpackSocialNote = 'jetpack-social-note' === currentPostType;
-
 	const needsUserConnection = ! isUserConnected && ! isSimpleSite();
 
 	return {
@@ -96,11 +90,8 @@ export default function usePublicizeConfig() {
 		isRePublicizeUpgradableViaUpsell,
 		hidePublicizeFeature,
 		isPostAlreadyShared,
-		isSocialImageGeneratorAvailable:
-			!! getJetpackData()?.social?.isSocialImageGeneratorAvailable && ! isJetpackSocialNote,
 		isSocialImageGeneratorEnabled: !! getJetpackData()?.social?.isSocialImageGeneratorEnabled,
 		connectionsPageUrl: urls.connectionsManagementPage,
-		isJetpackSocialNote,
 		needsUserConnection,
 	};
 }

projects/js-packages/publicize-components/src/social-store/selectors/social-image-generator-settings.js

@@ -1,6 +1,5 @@
 const socialImageGeneratorSettingsSelectors = {
 	getSocialImageGeneratorSettings: state => state.socialImageGeneratorSettings,
-	isSocialImageGeneratorAvailable: state => state.socialImageGeneratorSettings.available,
 	isSocialImageGeneratorEnabled: state => state.socialImageGeneratorSettings.enabled,
 	isUpdatingSocialImageGeneratorSettings: state => state.socialImageGeneratorSettings.isUpdating,
 	getSocialImageGeneratorDefaultTemplate: state => state.socialImageGeneratorSettings.template,

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

@@ -67,7 +67,6 @@ type SocialImageGeneratorSettingsSelectors = {
 			template: string;
 		};
 	};
-	isSocialImageGeneratorAvailable: () => boolean;
 	isSocialImageGeneratorEnabled: () => boolean;
 	isUpdatingSocialImageGeneratorSettings: () => boolean;
 	getSocialImageGeneratorDefaultTemplate: () => string;

projects/js-packages/publicize-components/src/utils/constants.ts

@@ -1,3 +1,4 @@
 export const features = {
 	ENHANCED_PUBLISHING: 'social-enhanced-publishing',
+	IMAGE_GENERATOR: 'social-image-generator',
 };

projects/js-packages/publicize-components/src/utils/index.js

@@ -3,3 +3,4 @@ export * from './get-supported-additional-connections';
 export * from './request-external-access';
 export * from './types';
 export * from './script-data';
+export * from './constants';

projects/plugins/jetpack/changelog/update-social-sig-feature-check

@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Initial state: Migrated isSocialImageGeneratorAvailable to feature check
+
+

projects/plugins/jetpack/extensions/plugins/publicize/index.js

@@ -10,7 +10,7 @@
 import {
 	PublicizePanel,
 	SocialImageGeneratorPanel,
-	usePublicizeConfig,
+	usePostCanUseSig,
 	PostPublishPanels,
 	GlobalModals,
 } from '@automattic/jetpack-publicize-components';
@@ -29,7 +29,7 @@ export const name = 'publicize';
 const PublicizeSettings = () => {
 	const { isLoadingModules, isChangingStatus, isModuleActive, changeStatus } =
 		useModuleStatus( name );
-	const { isSocialImageGeneratorAvailable } = usePublicizeConfig();
+	const postCanUseSig = usePostCanUseSig();
 
 	let children = null;
 	let panels = null;
@@ -50,12 +50,12 @@ const PublicizeSettings = () => {
 				<PublicizePanel>
 					<UpsellNotice />
 				</PublicizePanel>
-				{ isSocialImageGeneratorAvailable && <SocialImageGeneratorPanel /> }
+				{ postCanUseSig && <SocialImageGeneratorPanel /> }
 			</>
 		);
 		panels = (
 			<>
-				<PrePublishPanels isSocialImageGeneratorAvailable={ isSocialImageGeneratorAvailable } />
+				<PrePublishPanels />
 				<PostPublishPanels />
 				<GlobalModals />
 			</>

projects/plugins/jetpack/extensions/plugins/publicize/pre-publish.js

@@ -3,16 +3,18 @@ import {
 	SocialImageGeneratorPanel,
 	useSyncPostDataToStore,
 	useSocialMediaConnections,
+	usePostCanUseSig,
 } from '@automattic/jetpack-publicize-components';
 import { JetpackEditorPanelLogo } from '@automattic/jetpack-shared-extension-utils';
 import { PluginPrePublishPanel } from '@wordpress/edit-post';
 import { __ } from '@wordpress/i18n';
 import UpsellNotice from './components/upsell';
 
-const PrePublishPanels = ( { isSocialImageGeneratorAvailable } ) => {
+const PrePublishPanels = () => {
 	useSyncPostDataToStore();
 
 	const { hasEnabledConnections } = useSocialMediaConnections();
+	const postCanUseSig = usePostCanUseSig();
 
 	return (
 		<>
@@ -31,7 +33,7 @@ const PrePublishPanels = ( { isSocialImageGeneratorAvailable } ) => {
 				</PublicizePanel>
 			</PluginPrePublishPanel>
 
-			{ isSocialImageGeneratorAvailable && (
+			{ postCanUseSig && (
 				<PluginPrePublishPanel
 					initialOpen
 					title={ __( 'Social Image Generator', 'jetpack' ) }

projects/plugins/social/changelog/update-social-sig-feature-check

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Initial state: Migrated isSocialImageGeneratorAvailable to feature check
+
+

projects/plugins/social/src/js/components/admin-page/index.jsx

@@ -10,7 +10,9 @@ import { useConnection } from '@automattic/jetpack-connection';
 import {
 	hasSocialPaidFeatures,
 	store as socialStore,
+	features,
 } from '@automattic/jetpack-publicize-components';
+import { siteHasFeature } from '@automattic/jetpack-script-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useCallback, useEffect, useRef } from '@wordpress/element';
 import React from 'react';
@@ -34,31 +36,30 @@ const Admin = () => {
 
 	const onPricingPageDismiss = useCallback( () => setForceDisplayPricingPage( false ), [] );
 
-	const {
-		isModuleEnabled,
-		showPricingPage,
-		pluginVersion,
-		isSocialImageGeneratorAvailable,
-		isUpdatingJetpackSettings,
-	} = useSelect( select => {
-		const store = select( socialStore );
-		return {
-			isModuleEnabled: store.isModuleEnabled(),
-			showPricingPage: store.showPricingPage(),
-			pluginVersion: store.getPluginVersion(),
-			isSocialImageGeneratorAvailable: store.isSocialImageGeneratorAvailable(),
-			isUpdatingJetpackSettings: store.isUpdatingJetpackSettings(),
-		};
-	} );
+	const { isModuleEnabled, showPricingPage, pluginVersion, isUpdatingJetpackSettings } = useSelect(
+		select => {
+			const store = select( socialStore );
+			return {
+				isModuleEnabled: store.isModuleEnabled(),
+				showPricingPage: store.showPricingPage(),
+				pluginVersion: store.getPluginVersion(),
+				isUpdatingJetpackSettings: store.isUpdatingJetpackSettings(),
+			};
+		}
+	);
 
 	const hasEnabledModule = useRef( isModuleEnabled );
 
 	useEffect( () => {
-		if ( isModuleEnabled && ! hasEnabledModule.current && isSocialImageGeneratorAvailable ) {
+		if (
+			isModuleEnabled &&
+			! hasEnabledModule.current &&
+			siteHasFeature( features.IMAGE_GENERATOR )
+		) {
 			hasEnabledModule.current = true;
 			refreshJetpackSocialSettings();
 		}
-	}, [ isModuleEnabled, isSocialImageGeneratorAvailable, refreshJetpackSocialSettings ] );
+	}, [ isModuleEnabled, refreshJetpackSocialSettings ] );
 
 	const moduleName = `Jetpack Social ${ pluginVersion }`;
 
@@ -93,7 +94,7 @@ const Admin = () => {
 					<AdminSection>
 						<SocialModuleToggle />
 						{ isModuleEnabled && <SocialNotesToggle disabled={ isUpdatingJetpackSettings } /> }
-						{ isModuleEnabled && isSocialImageGeneratorAvailable && (
+						{ isModuleEnabled && siteHasFeature( features.IMAGE_GENERATOR ) && (
 							<SocialImageGeneratorToggle disabled={ isUpdatingJetpackSettings } />
 						) }
 					</AdminSection>

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

@@ -29,7 +29,6 @@ type SocialImageGeneratorSettingsSelectors = {
 			template: string;
 		};
 	};
-	isSocialImageGeneratorAvailable: () => boolean;
 	isSocialImageGeneratorEnabled: () => boolean;
 	isUpdatingSocialImageGeneratorSettings: () => boolean;
 	getSocialImageGeneratorDefaultTemplate: () => string;

projects/plugins/social/src/js/editor.js

@@ -9,6 +9,7 @@ import {
 	useSyncPostDataToStore,
 	PostPublishPanels,
 	GlobalModals,
+	usePostCanUseSig,
 } from '@automattic/jetpack-publicize-components';
 import { JetpackEditorPanelLogo } from '@automattic/jetpack-shared-extension-utils';
 import { PanelBody } from '@wordpress/components';
@@ -51,8 +52,9 @@ const JetpackSocialSidebar = () => {
 	const closeModal = useCallback( () => setIsModalOpened( false ), [] );
 
 	const { hasConnections, hasEnabledConnections } = useSocialMediaConnections();
-	const { isPublicizeEnabled, hidePublicizeFeature, isSocialImageGeneratorAvailable } =
-		usePublicizeConfig();
+	const { isPublicizeEnabled, hidePublicizeFeature } = usePublicizeConfig();
+	const postCanUseSig = usePostCanUseSig();
+
 	const isPostPublished = useSelect( select => select( editorStore ).isCurrentPostPublished(), [] );
 	const PanelDescription = () => (
 		<Description
@@ -79,7 +81,7 @@ const JetpackSocialSidebar = () => {
 				<PublicizePanel>
 					<PanelDescription />
 				</PublicizePanel>
-				{ isSocialImageGeneratorAvailable && <SocialImageGeneratorPanel /> }
+				{ postCanUseSig && <SocialImageGeneratorPanel /> }
 				<PanelBody title={ __( 'Social Previews', 'jetpack-social' ) }>
 					<SocialPreviewsPanel openModal={ openModal } />
 				</PanelBody>
@@ -95,7 +97,7 @@ const JetpackSocialSidebar = () => {
 				</PublicizePanel>
 			</PluginPrePublishPanel>
 
-			{ isSocialImageGeneratorAvailable && (
+			{ postCanUseSig && (
 				<PluginPrePublishPanel
 					initialOpen
 					title={ __( 'Social Image Generator', 'jetpack-social' ) }