Social | Initial state: Migrate feature flags to script data

projects/js-packages/publicize-components/changelog/update-social-initial-state-migrate-feature-flags

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Social: Migrated feature flags to new script data

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

@@ -34,5 +34,6 @@ export * from './src/hooks/use-saving-post';
 export * from './src/hooks/use-post-meta';
 export * from './src/components/share-buttons';
 export * from './src/components/manage-connections-modal';
+export * from './src/utils/script-data';
 export * from './src/utils/shares-data';
 export * from './src/components/global-modals';

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

@@ -1,12 +1,13 @@
 import { Button } from '@automattic/jetpack-components';
 import { ExternalLink } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { createInterpolateElement, Fragment } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import usePublicizeConfig from '../../hooks/use-publicize-config';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import { store } from '../../social-store';
 import { Connection } from '../../social-store/types';
+import { getSocialScriptData } from '../../utils/script-data';
 import Notice from '../notice';
 import { useServiceLabel } from '../services/use-service-label';
 import styles from './styles.module.scss';
@@ -27,7 +28,8 @@ export const BrokenConnectionsNotice: React.FC = () => {
 
 	const { connectionsAdminUrl } = usePublicizeConfig();
 
-	const useAdminUiV1 = useSelect( select => select( store ).useAdminUiV1(), [] );
+	const { useAdminUiV1 } = getSocialScriptData().feature_flags;
+
 	const { openConnectionsModal } = useDispatch( store );
 
 	const fixLink = useAdminUiV1 ? (

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

@@ -7,15 +7,14 @@
  */
 
 import { Disabled, PanelRow } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 import { Fragment } from '@wordpress/element';
 import { usePublicizeConfig } from '../../..';
 import useAttachedMedia from '../../hooks/use-attached-media';
 import useFeaturedImage from '../../hooks/use-featured-image';
 import useMediaDetails from '../../hooks/use-media-details';
 import useMediaRestrictions from '../../hooks/use-media-restrictions';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
-import { store as socialStore } from '../../social-store';
+import { getSocialScriptData } from '../../utils/script-data';
 import { ThemedConnectionsModal as ManageConnectionsModal } from '../manage-connections-modal';
 import { SocialPostModal } from '../social-post-modal/modal';
 import { ConnectionNotice } from './connection-notice';
@@ -48,28 +47,22 @@ export default function PublicizeForm() {
 			attachedMedia.length > 0 ||
 			( Object.keys( validationErrors ).length !== 0 && ! isConvertible ) );
 
-	const { useAdminUiV1, featureFlags } = useSelect( select => {
-		const store = select( socialStore );
-		return {
-			useAdminUiV1: store.useAdminUiV1(),
-			featureFlags: store.featureFlags(),
-		};
-	}, [] );
-
 	const Wrapper = isPublicizeDisabledBySitePlan ? Disabled : Fragment;
 
+	const { feature_flags } = getSocialScriptData();
+
 	return (
 		<Wrapper>
 			{
 				// Render modal only once
-				useAdminUiV1 ? <ManageConnectionsModal /> : null
+				feature_flags.useAdminUiV1 ? <ManageConnectionsModal /> : null
 			}
 			{ hasConnections ? (
 				<>
 					<PanelRow>
 						<ConnectionsList />
 					</PanelRow>
-					{ featureFlags.useEditorPreview && isPublicizeEnabled ? <SocialPostModal /> : null }
+					{ feature_flags.useEditorPreview && isPublicizeEnabled ? <SocialPostModal /> : null }
 					<EnhancedFeaturesNudge />
 				</>
 			) : null }

projects/js-packages/publicize-components/src/components/form/settings-button.tsx

@@ -9,6 +9,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import usePublicizeConfig from '../../hooks/use-publicize-config';
 import { store } from '../../social-store';
+import { getSocialScriptData } from '../../utils/script-data';
 import styles from './styles.module.scss';
 
 type SettingsButtonProps = {
@@ -24,9 +25,10 @@ type SettingsButtonProps = {
  * @return {import('react').ReactNode} The button/link component.
  */
 export function SettingsButton( { label, variant = 'primary' }: SettingsButtonProps ) {
-	const { useAdminUiV1, connections } = useSelect( select => {
+	const { useAdminUiV1 } = getSocialScriptData().feature_flags;
+
+	const { connections } = useSelect( select => {
 		return {
-			useAdminUiV1: select( store ).useAdminUiV1(),
 			connections: select( store ).getConnections(),
 		};
 	}, [] );

projects/js-packages/publicize-components/src/components/global-modals/index.tsx

@@ -1,9 +1,8 @@
-import { useSelect } from '@wordpress/data';
-import { store as socialStore } from '../../social-store';
+import { getSocialScriptData } from '../../utils/script-data';
 import { ThemedShareStatusModal as ShareStatusModal } from '../share-status';
 
 export const GlobalModals = () => {
-	const featureFlags = useSelect( select => select( socialStore ).featureFlags(), [] );
+	const { feature_flags } = getSocialScriptData();
 
-	return <>{ featureFlags.useShareStatus ? <ShareStatusModal /> : null }</>;
+	return <>{ feature_flags.useShareStatus ? <ShareStatusModal /> : null }</>;
 };

projects/js-packages/publicize-components/src/components/post-publish-panels/index.tsx

@@ -1,12 +1,14 @@
 import { ThemeProvider } from '@automattic/jetpack-components';
+import { getSocialScriptData } from '../../utils/script-data';
 import PostPublishManualSharing from '../post-publish-manual-sharing';
 import PostPublishReviewPrompt from '../post-publish-review-prompt';
 import { PostPublishShareStatus } from '../post-publish-share-status';
 
 const PostPublishPanels = () => {
+	const { feature_flags } = getSocialScriptData();
 	return (
 		<ThemeProvider targetDom={ document.body }>
-			<PostPublishShareStatus />
+			{ feature_flags.useShareStatus ? <PostPublishShareStatus /> : null }
 			<PostPublishManualSharing />
 			<PostPublishReviewPrompt />
 		</ThemeProvider>

projects/js-packages/publicize-components/src/components/post-publish-share-status/index.tsx

@@ -13,14 +13,11 @@ import { ShareStatus } from './share-status';
  */
 export function PostPublishShareStatus() {
 	const { isPublicizeEnabled } = usePostMeta();
-	const { featureFlags, postId, isPostPublised } = useSelect( select => {
-		const store = select( socialStore );
-
+	const { postId, isPostPublised } = useSelect( select => {
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- `@wordpress/editor` is a nightmare to work with TypeScript
 		const _editorStore = select( editorStore ) as any;
 
 		return {
-			featureFlags: store.featureFlags(),
 			postId: _editorStore.getCurrentPostId(),
 			isPostPublised: _editorStore.isCurrentPostPublished(),
 		};
@@ -32,7 +29,7 @@ export function PostPublishShareStatus() {
 
 	const willPostBeShared = isPublicizeEnabled && enabledConnections.length > 0;
 
-	if ( ! featureFlags.useShareStatus || ! willPostBeShared || ! isPostPublised ) {
+	if ( ! willPostBeShared || ! isPostPublised ) {
 		return null;
 	}
 

projects/js-packages/publicize-components/src/components/share-status/modal-trigger.tsx

@@ -1,8 +1,9 @@
 import { Button } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from 'react';
 import { store as socialStore } from '../../social-store';
+import { getSocialScriptData } from '../../utils/script-data';
 import styles from './styles.module.scss';
 import type { ButtonProps } from '@wordpress/components/build-types/button/types';
 
@@ -16,10 +17,9 @@ type ModalTriggerProps = ButtonProps & {
 export const ModalTrigger = forwardRef(
 	( { withWrapper = false, ...props }: ModalTriggerProps, ref: unknown ) => {
 		const { openShareStatusModal } = useDispatch( socialStore );
+		const { feature_flags } = getSocialScriptData();
 
-		const featureFlags = useSelect( select => select( socialStore ).featureFlags(), [] );
-
-		if ( ! featureFlags.useShareStatus ) {
+		if ( ! feature_flags.useShareStatus ) {
 			return null;
 		}
 

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

@@ -13,8 +13,6 @@ const reducer = combineReducers( {
 	shareStatus,
 	hasPaidPlan: ( state = false ) => state,
 	userConnectionUrl: ( state = '' ) => state,
-	useAdminUiV1: ( state = false ) => state,
-	featureFlags: ( state = false ) => state,
 	hasPaidFeatures: ( state = false ) => state,
 } );
 

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

@@ -11,8 +11,6 @@ const selectors = {
 	...socialImageGeneratorSettingsSelectors,
 	...shareStatusSelectors,
 	userConnectionUrl: state => state.userConnectionUrl,
-	useAdminUiV1: state => state.useAdminUiV1,
-	featureFlags: state => state.featureFlags,
 	hasPaidFeatures: state => state.hasPaidFeatures,
 };
 

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

@@ -61,8 +61,6 @@ export type SocialStoreState = {
 	hasPaidPlan?: boolean;
 	// on Jetack Social admin page
 	jetpackSettings?: JetpackSettings;
-	useAdminUiV1?: boolean;
-	featureFlags?: Record< string, boolean >;
 	shareStatus?: ShareStatus;
 };
 

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

@@ -6,6 +6,8 @@ export type SharesData = {
 
 export interface FeatureFlags {
 	useAdminUiV1: boolean;
+	useEditorPreview: boolean;
+	useShareStatus: boolean;
 }
 
 export type ConnectionService = {

projects/packages/publicize/changelog/update-social-initial-state-migrate-feature-flags

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Social: Migrated feature flags to new script data

projects/packages/publicize/src/class-publicize-base.php

@@ -297,16 +297,7 @@ public function use_admin_ui_v1(): bool {
 	 * @return bool
 	 */
 	public function has_feature_flag( $flag_name, $feature_name ): bool {
-		// If the option is set, use it.
-		if ( get_option( 'jetpack_social_has_' . $flag_name, false ) ) {
-			return true;
-		}
-		// If the constant is set, use it.
-		if ( defined( 'JETPACK_SOCIAL_HAS_' . strtoupper( $flag_name ) ) && constant( 'JETPACK_SOCIAL_HAS_' . strtoupper( $flag_name ) ) ) {
-			return true;
-		}
-
-		return Current_Plan::supports( 'social-' . $feature_name );
+		return Publicize_Script_Data::has_feature_flag( $feature_name );
 	}
 
 	/**

projects/packages/publicize/src/class-publicize-script-data.php

@@ -120,7 +120,9 @@ public static function get_admin_script_data() {
 	 */
 	public static function get_feature_flags() {
 		$variable_to_feature_map = array(
-			'useAdminUiV1' => 'connections-management',
+			'useAdminUiV1'     => 'connections-management',
+			'useEditorPreview' => 'editor-preview',
+			'useShareStatus'   => 'share-status',
 		);
 
 		$feature_flags = array();

projects/plugins/jetpack/_inc/client/recommendations/feature-utils.js

@@ -1,6 +1,7 @@
 import formatCurrency from '@automattic/format-currency';
 import restApi from '@automattic/jetpack-api';
 import { getRedirectUrl } from '@automattic/jetpack-components';
+import { getSocialScriptData } from '@automattic/jetpack-publicize-components';
 import { sprintf, __, _x } from '@wordpress/i18n';
 import {
 	PLAN_JETPACK_SECURITY_T1_YEARLY,
@@ -14,7 +15,6 @@ import {
 	getSiteRawUrl,
 	getJetpackCloudUrl,
 	getStaticProductsForPurchase,
-	getSocialInitiaState,
 } from 'state/initial-state';
 import { updateSettings } from 'state/settings';
 import { fetchPluginsData } from 'state/site/plugins';
@@ -79,12 +79,12 @@ export const mapStateToSummaryFeatureProps = ( state, featureSlug ) => {
 			};
 		case 'publicize':
 			return {
-				configureButtonLabel: getSocialInitiaState( state ).useAdminUiV1
+				configureButtonLabel: getSocialScriptData().feature_flags.useAdminUiV1
 					? __( 'View Jetpack Social settings', 'jetpack' )
 					: _x( 'Manage connections', '', 'jetpack' ),
 				displayName: __( 'Social Media Sharing', 'jetpack' ),
 				summaryActivateButtonLabel: __( 'Enable', 'jetpack' ),
-				configLink: getSocialInitiaState( state ).useAdminUiV1
+				configLink: getSocialScriptData().feature_flags.useAdminUiV1
 					? '#/sharing'
 					: getRedirectUrl( 'calypso-marketing-connections', {
 							site: getSiteRawUrl( state ),
@@ -562,7 +562,7 @@ export const getStepContent = ( state, stepSlug ) => {
 					'jetpack'
 				),
 				ctaText: __( 'Manage Social Media Connections', 'jetpack' ),
-				ctaLink: getSocialInitiaState( state ).useAdminUiV1
+				ctaLink: getSocialScriptData().feature_flags.useAdminUiV1
 					? getSiteAdminUrl( state ) + 'admin.php?page=jetpack#/sharing'
 					: getRedirectUrl( 'calypso-marketing-connections', {
 							site: getSiteRawUrl( state ),

projects/plugins/jetpack/_inc/client/sharing/index.jsx

@@ -1,3 +1,4 @@
+import { getSocialScriptData } from '@automattic/jetpack-publicize-components';
 import { __ } from '@wordpress/i18n';
 import QuerySite from 'components/data/query-site';
 import React, { Component } from 'react';
@@ -27,6 +28,8 @@ import { ShareButtons } from './share-buttons';
 
 class Sharing extends Component {
 	render() {
+		const { useAdminUiV1 } = getSocialScriptData().feature_flags;
+
 		const commonProps = {
 			settings: this.props.settings,
 			getModule: this.props.module,
@@ -45,7 +48,7 @@ class Sharing extends Component {
 			isAtomicSite: this.props.isAtomicSite,
 			hasSharingBlock: this.props.hasSharingBlock,
 			isBlockTheme: this.props.isBlockTheme,
-			useAdminUiV1: this.props.useAdminUiV1,
+			useAdminUiV1,
 		};
 
 		const foundPublicize = this.props.isModuleFound( 'publicize' ),
@@ -100,6 +103,5 @@ export default connect( state => {
 		isAtomicSite: isAtomicSite( state ),
 		hasSharingBlock: isSharingBlockAvailable( state ),
 		isBlockTheme: currentThemeIsBlockTheme( state ),
-		useAdminUiV1: state.jetpack.initialState.socialInitialState.useAdminUiV1,
 	};
 } )( Sharing );

projects/plugins/jetpack/changelog/update-social-initial-state-migrate-feature-flags

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Social: Migrated feature flags to new script data

projects/plugins/social/changelog/update-social-initial-state-migrate-feature-flags

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Social: Migrated feature flags to new script data

projects/plugins/social/package.json

@@ -29,7 +29,6 @@
 		"@automattic/jetpack-base-styles": "workspace:*",
 		"@automattic/jetpack-components": "workspace:*",
 		"@automattic/jetpack-connection": "workspace:*",
-		"@automattic/jetpack-script-data": "workspace:*",
 		"@automattic/jetpack-publicize-components": "workspace:*",
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
 		"@wordpress/api-fetch": "7.5.0",

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

@@ -8,11 +8,11 @@ import {
 } from '@automattic/jetpack-components';
 import { ConnectionError, useConnectionErrorNotice } from '@automattic/jetpack-connection';
 import {
-	store as socialStore,
+	getSocialScriptData,
 	getTotalSharesCount,
 	getSharedPostsCount,
+	store as socialStore,
 } from '@automattic/jetpack-publicize-components';
-import { getScriptData } from '@automattic/jetpack-script-data';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { Icon, postList } from '@wordpress/icons';
@@ -36,8 +36,8 @@ const Header = () => {
 			newPostUrl: `${ store.getAdminUrl() }post-new.php`,
 		};
 	} );
-	// TODO - Replace this with a utility function like `getSocialFeatureFlags` when available
-	const { useAdminUiV1 } = getScriptData().social.feature_flags;
+
+	const { useAdminUiV1 } = getSocialScriptData().feature_flags;
 
 	const { hasConnectionError } = useConnectionErrorNotice();