Social: Remove share limits UI and data logic (#38904)

* Remove unused show_advanced_plan_upgrade_nudge

* Remove share limits UI and data store logic

* Add changelog

* Fix up versions

* Restore upgrade nudge from share count info

* Hide advanced features nudge on WPCOM

projects/js-packages/publicize-components/changelog/update-social-initial-stat-migrate-shares-data

@@ -0,0 +1,4 @@
+Significance: minor
+Type: removed
+
+Social: Removed share limits UI and data logic

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

@@ -31,9 +31,7 @@ export * from './src/social-store';
 export * from './src/utils';
 export * from './src/components/share-post';
 export * from './src/hooks/use-sync-post-data-to-store';
-export * from './src/components/share-limits-bar';
 export * from './src/hooks/use-saving-post';
-export * from './src/hooks/use-share-limits';
 export * from './src/hooks/use-post-meta';
 export * from './src/components/share-buttons';
 export * from './src/components/manage-connections-modal';

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

@@ -0,0 +1,44 @@
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import {
+	getSiteFragment,
+	isAtomicSite,
+	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 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 ) {
+		return null;
+	}
+
+	return (
+		<PanelRow className={ styles[ 'enhanced-features-nudge' ] }>
+			<Button
+				key="upgrade"
+				variant="link"
+				onClick={ autosaveAndRedirect }
+				href={ getRedirectUrl( 'jetpack-social-basic-plan-block-editor', {
+					site: getSiteFragment() || '',
+					query: 'redirect_to=' + encodeURIComponent( window.location.href ),
+				} ) }
+			>
+				{ _x(
+					'Unlock enhanced media sharing features.',
+					'Call to action to buy a new plan',
+					'jetpack'
+				) }
+			</Button>
+		</PanelRow>
+	);
+};

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

@@ -16,7 +16,7 @@ import { ThemedConnectionsModal as ManageConnectionsModal } from '../manage-conn
 import { SocialPostModal } from '../social-post-modal/modal';
 import { ConnectionNotice } from './connection-notice';
 import { ConnectionsList } from './connections-list';
-import { ShareCountInfo } from './share-count-info';
+import { EnhancedFeaturesNudge } from './enhanced-features-nudge';
 import { SharePostForm } from './share-post-form';
 
 /**
@@ -50,7 +50,7 @@ export default function PublicizeForm() {
 						<ConnectionsList />
 					</PanelRow>
 					{ featureFlags.useEditorPreview && isPublicizeEnabled ? <SocialPostModal /> : null }
-					<ShareCountInfo />
+					<EnhancedFeaturesNudge />
 				</>
 			) : null }
 			<ConnectionNotice />

projects/js-packages/publicize-components/src/components/form/styles.module.scss

@@ -24,26 +24,7 @@
 	margin-inline-start: 15px;
 }
 
-.bar-wrapper {
-	:global .record-meter-bar {
-		.record-meter-bar__legend--items {
-			flex-wrap: wrap;
-		}
-
-		.record-meter-bar__items {
-			height: 0.5rem;
-			margin-bottom: 0.8em;
-		}
-
-		.record-meter-bar__legend--item-circle {
-			width: 0.5rem;
-			height: 0.5rem;
-		}
-	}
-}
-
-.share-count-info {
-	flex-grow: 1;
+.enhanced-features-nudge {
 	margin-block-end: 1rem;
 }
 
@@ -52,16 +33,6 @@
 	margin-bottom: 0.25rem;
 }
 
-p.auto-share-title {
-	font-weight: 600;
-	text-transform: uppercase;
-}
-
-.title-container {
-	display: flex;
-	gap: 0.4rem;
-}
-
 .no-connections-text {
 	display: block;
 	margin-bottom: 1rem;

projects/js-packages/publicize-components/src/components/form/use-connection-state.ts

@@ -1,4 +1,3 @@
-import { useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import { useMemo } from 'react';
 import { usePublicizeConfig } from '../../..';
@@ -8,18 +7,11 @@ import useMediaDetails from '../../hooks/use-media-details';
 import useMediaRestrictions from '../../hooks/use-media-restrictions';
 import { NO_MEDIA_ERROR } from '../../hooks/use-media-restrictions/constants';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
-import { store as socialStore } from '../../social-store';
 import { Connection } from '../../social-store/types';
 
 export const useConnectionState = () => {
-	const { connections, enabledConnections } = useSocialMediaConnections();
+	const { connections } = useSocialMediaConnections();
 	const { isPublicizeEnabled, isPublicizeDisabledBySitePlan } = usePublicizeConfig();
-	const { showShareLimits, numberOfSharesRemaining } = useSelect( select => {
-		return {
-			showShareLimits: select( socialStore ).showShareLimits(),
-			numberOfSharesRemaining: select( socialStore ).numberOfSharesRemaining(),
-		};
-	}, [] );
 	const { attachedMedia } = useAttachedMedia();
 	const featuredImageId = useFeaturedImage();
 	const mediaId = attachedMedia[ 0 ]?.id || featuredImageId;
@@ -29,8 +21,6 @@ export const useConnectionState = () => {
 		useMediaDetails( mediaId )[ 0 ]
 	);
 
-	const outOfConnections = showShareLimits && numberOfSharesRemaining <= enabledConnections.length;
-
 	/**
 	 * Returns whether a connection is in good shape.
 	 *
@@ -69,20 +59,14 @@ export const useConnectionState = () => {
 	 */
 	const shouldBeDisabled = useCallback(
 		( connection: Connection ) => {
-			const { enabled, toggleable } = connection;
-
-			const isOutOfConnections = ! enabled && toggleable && outOfConnections;
-			// A connection toggle should be disabled if
 			return (
 				// Publicize is disabled
 				! isPublicizeEnabled ||
-				// or if there are no more connections available
-				isOutOfConnections ||
 				// or the connection is not in good shape
 				! isInGoodShape( connection )
 			);
 		},
-		[ isInGoodShape, isPublicizeEnabled, outOfConnections ]
+		[ isInGoodShape, isPublicizeEnabled ]
 	);
 
 	/**