Initial State: Migrate hasPaidFeatures with feature check on front-…

…end (#39838)

* Initial State: Migrate `hasPaidFeatures` with feature check on front-end

* Replace hasPaidPlan by hasSocialPaidFeatures

projects/js-packages/publicize-components/changelog/update-social-replace-has-paid-features-check

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Initial State: Migrated hasPaidFeatures flag with feature check on front-end
+
+

projects/js-packages/publicize-components/src/components/form/enhanced-features-nudge.tsx

@@ -5,20 +5,17 @@ import {
 	isSimpleSite,
 } from '@automattic/jetpack-shared-extension-utils';
 import { Button, PanelRow } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 import { _x } from '@wordpress/i18n';
-import { store as socialStore } from '../../social-store';
+import { hasSocialPaidFeatures } from '../../utils';
 import styles from './styles.module.scss';
 import { useAutoSaveAndRedirect } from './use-auto-save-and-redirect';
 
 export const EnhancedFeaturesNudge: React.FC = () => {
-	const hasPaidFeatures = useSelect( select => select( socialStore ).hasPaidFeatures(), [] );
-
 	const autosaveAndRedirect = useAutoSaveAndRedirect();
 
 	const isWpcom = isSimpleSite() || isAtomicSite();
 
-	if ( isWpcom || hasPaidFeatures ) {
+	if ( isWpcom || hasSocialPaidFeatures() ) {
 		return null;
 	}
 

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

@@ -12,7 +12,6 @@ const reducer = combineReducers( {
 	socialImageGeneratorSettings,
 	shareStatus,
 	hasPaidPlan: ( state = false ) => state,
-	hasPaidFeatures: ( state = false ) => state,
 } );
 
 export default reducer;

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

@@ -10,7 +10,6 @@ const selectors = {
 	...jetpackSettingSelectors,
 	...socialImageGeneratorSettingsSelectors,
 	...shareStatusSelectors,
-	hasPaidFeatures: state => state.hasPaidFeatures,
 };
 
 export default selectors;

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

@@ -1,4 +1,4 @@
-import { getScriptData } from '@automattic/jetpack-script-data';
+import { getScriptData, siteHasFeature } from '@automattic/jetpack-script-data';
 import { SocialScriptData } from '../types/types';
 
 /**
@@ -9,3 +9,12 @@ import { SocialScriptData } from '../types/types';
 export function getSocialScriptData(): SocialScriptData {
 	return getScriptData().social;
 }
+
+/**
+ * Check if the site has social paid features.
+ *
+ * @return {boolean} Whether the site has social paid features.
+ */
+export function hasSocialPaidFeatures() {
+	return siteHasFeature( 'social-enhanced-publishing' );
+}

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

@@ -1,4 +1,7 @@
-import { getSocialScriptData } from '@automattic/jetpack-publicize-components';
+import {
+	getSocialScriptData,
+	hasSocialPaidFeatures,
+} from '@automattic/jetpack-publicize-components';
 import { __ } from '@wordpress/i18n';
 import QuerySite from 'components/data/query-site';
 import React, { Component } from 'react';
@@ -97,7 +100,7 @@ export default connect( state => {
 		blogID: getSiteId( state ),
 		siteAdminUrl: getSiteAdminUrl( state ),
 		activeFeatures: getActiveFeatures( state ),
-		hasPaidFeatures: siteHasFeature( state, 'social-enhanced-publishing' ),
+		hasPaidFeatures: hasSocialPaidFeatures(),
 		hasSocialImageGenerator: siteHasFeature( state, 'social-image-generator' ),
 		userCanManageModules: userCanManageModules( state ),
 		isAtomicSite: isAtomicSite( state ),

projects/plugins/jetpack/changelog/update-social-replace-has-paid-features-check

@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Initial State: Migrated hasPaidFeatures flag with feature check on front-end
+
+

projects/plugins/social/changelog/update-social-replace-has-paid-features-check

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Initial State: Migrated hasPaidFeatures flag with feature check on front-end
+
+

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

@@ -7,7 +7,10 @@ import {
 	GlobalNotices,
 } from '@automattic/jetpack-components';
 import { useConnection } from '@automattic/jetpack-connection';
-import { store as socialStore } from '@automattic/jetpack-publicize-components';
+import {
+	hasSocialPaidFeatures,
+	store as socialStore,
+} from '@automattic/jetpack-publicize-components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useCallback, useEffect, useRef } from '@wordpress/element';
 import React from 'react';
@@ -34,7 +37,6 @@ const Admin = () => {
 	const {
 		isModuleEnabled,
 		showPricingPage,
-		hasPaidFeatures,
 		pluginVersion,
 		isSocialImageGeneratorAvailable,
 		isUpdatingJetpackSettings,
@@ -43,7 +45,6 @@ const Admin = () => {
 		return {
 			isModuleEnabled: store.isModuleEnabled(),
 			showPricingPage: store.showPricingPage(),
-			hasPaidFeatures: store.hasPaidFeatures(),
 			pluginVersion: store.getPluginVersion(),
 			isSocialImageGeneratorAvailable: store.isSocialImageGeneratorAvailable(),
 			isUpdatingJetpackSettings: store.isUpdatingJetpackSettings(),
@@ -76,7 +77,7 @@ const Admin = () => {
 	return (
 		<AdminPage moduleName={ moduleName } header={ <AdminPageHeader /> }>
 			<GlobalNotices />
-			{ ( ! hasPaidFeatures && showPricingPage ) || forceDisplayPricingPage ? (
+			{ ( ! hasSocialPaidFeatures() && showPricingPage ) || forceDisplayPricingPage ? (
 				<AdminSectionHero>
 					<Container horizontalSpacing={ 3 } horizontalGap={ 3 }>
 						<Col>

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

@@ -9,6 +9,7 @@ import {
 	ConnectionManagement,
 	SOCIAL_STORE_ID,
 	getSocialScriptData,
+	hasSocialPaidFeatures,
 } from '@automattic/jetpack-publicize-components';
 import { ExternalLink } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -26,15 +27,13 @@ const SocialModuleToggle: React.FC = () => {
 		isUpdating,
 		siteSuffix,
 		blogID,
-		hasPaidFeatures,
 	} = useSelect( select => {
 		const store = select( SOCIAL_STORE_ID ) as SocialStoreSelectors;
 		return {
 			isModuleEnabled: store.isModuleEnabled(),
 			isUpdating: store.isUpdatingJetpackSettings(),
 			siteSuffix: store.getSiteSuffix(),
 			blogID: store.getBlogID(),
-			hasPaidFeatures: store.hasPaidFeatures(),
 		};
 	}, [] );
 
@@ -97,7 +96,7 @@ const SocialModuleToggle: React.FC = () => {
 					{ __( 'Learn more', 'jetpack-social' ) }
 				</ExternalLink>
 			</Text>
-			{ ! hasPaidFeatures ? (
+			{ ! hasSocialPaidFeatures() ? (
 				<ContextualUpgradeTrigger
 					className={ clsx( styles.cut, { [ styles.small ]: isSmall } ) }
 					description={ __( 'Unlock advanced sharing options', 'jetpack-social' ) }

projects/plugins/social/src/js/components/support-section/index.js

@@ -4,9 +4,8 @@ import {
 	getRedirectUrl,
 	useBreakpointMatch,
 } from '@automattic/jetpack-components';
-import { SOCIAL_STORE_ID } from '@automattic/jetpack-publicize-components';
+import { hasSocialPaidFeatures } from '@automattic/jetpack-publicize-components';
 import { ExternalLink } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { Icon, lifesaver } from '@wordpress/icons';
 import clsx from 'clsx';
@@ -15,9 +14,8 @@ import styles from './styles.module.scss';
 
 const SupportSection = () => {
 	const [ isAtLeastMedium ] = useBreakpointMatch( 'md', '>=' );
-	const hasPaidPlan = useSelect( select => select( SOCIAL_STORE_ID ).hasPaidPlan() );
 
-	if ( ! hasPaidPlan ) {
+	if ( ! hasSocialPaidFeatures() ) {
 		return null;
 	}
 

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

@@ -8,7 +8,6 @@ type JetpackSettingsSelectors = {
 	showPricingPage: () => boolean;
 	isUpdatingJetpackSettings: () => boolean;
 	hasPaidPlan: () => boolean;
-	hasPaidFeatures: () => boolean;
 };
 
 type ConnectionDataSelectors = {