Social: Add Social Share status component and cleanup panels (#39049)

* Move PostPublishPanels to publicize components

* changelog

* Wrap with ThemeProvider

* Move share status component to postpublish component

* Add feature flag to postpublishShareStatus

* Cleanup ThemeProvider

* Pass targetDom and jsDoc update

projects/js-packages/publicize-components/changelog/refactor-social-post-publish-panel

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Moved PostPublishPanels component to publicize-components package

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

@@ -16,8 +16,7 @@ export { default as SocialImageGeneratorToggle } from './src/components/social-i
 export { default as TemplatePickerButton } from './src/components/social-image-generator/template-picker/button';
 export { default as PublicizePanel } from './src/components/panel';
 export { default as ReviewPrompt } from './src/components/review-prompt';
-export { default as PostPublishReviewPrompt } from './src/components/post-publish-review-prompt';
-export { default as PostPublishManualSharing } from './src/components/post-publish-manual-sharing';
+export { default as PostPublishPanels } from './src/components/post-publish-panels';
 export { default as RefreshJetpackSocialSettingsWrapper } from './src/components/refresh-jetpack-social-settings';
 export { default as ConnectionManagement } from './src/components/connection-management';
 

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

@@ -1,5 +1,4 @@
 .wrapper {
-	margin-top: 1rem;
 	padding-block: 1rem;
 	display: flex;
 	flex-direction: column;

projects/js-packages/publicize-components/src/components/panel/index.jsx

@@ -12,10 +12,10 @@ import usePublicizeConfig from '../../hooks/use-publicize-config';
 import useRefreshConnections from '../../hooks/use-refresh-connections';
 import { usePostJustPublished } from '../../hooks/use-saving-post';
 import useSelectSocialMediaConnections from '../../hooks/use-social-media-connections';
-import { store as socialStore } from '../../social-store';
 import PublicizeForm from '../form';
 import { ManualSharing } from '../manual-sharing';
 import { SharePostRow } from '../share-post';
+import { ShareStatusModal } from '../share-status-modal';
 import styles from './styles.module.scss';
 import './global.scss';
 
@@ -26,13 +26,6 @@ const PublicizePanel = ( { prePublish, children } ) => {
 
 	const { isPublicizeEnabled, hidePublicizeFeature, togglePublicizeFeature } = usePublicizeConfig();
 
-	const { featureFlags } = useSelect( select => {
-		const store = select( socialStore );
-		return {
-			featureFlags: store.featureFlags(),
-		};
-	}, [] );
-
 	// Refresh connections when the post is just published.
 	usePostJustPublished(
 		function () {
@@ -81,8 +74,8 @@ const PublicizePanel = ( { prePublish, children } ) => {
 			) }
 			{ isPostPublished && (
 				<>
+					<ShareStatusModal />
 					<ManualSharing />
-					{ featureFlags?.useShareStatus && 'Share status modal comes here' }
 				</>
 			) }
 		</PanelWrapper>

projects/js-packages/publicize-components/src/components/post-publish-manual-sharing/index.jsx

@@ -1,28 +1,19 @@
-import { ThemeProvider } from '@automattic/jetpack-components';
 import { JetpackEditorPanelLogo } from '@automattic/jetpack-shared-extension-utils';
 import { useSelect } from '@wordpress/data';
 import { PluginPostPublishPanel } from '@wordpress/edit-post';
 import { store as editorStore } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
-import { store as socialStore } from '../../social-store';
 import { ManualSharingInfo } from '../manual-sharing/info';
 import { ShareButtons } from '../share-buttons/share-buttons';
 import styles from './styles.module.scss';
 /**
  * Post Publish Manual Sharing component.
  *
- * @return {import('react').ReactNode} Post Publish Manual Sharing component.
+ * @return {import('react').JSX.Element} Post Publish Manual Sharing component.
  */
 export default function PostPublishManualSharing() {
 	const { isCurrentPostPublished } = useSelect( select => select( editorStore ), [] );
 
-	const { featureFlags } = useSelect( select => {
-		const store = select( socialStore );
-		return {
-			featureFlags: store.featureFlags(),
-		};
-	}, [] );
-
 	if ( ! isCurrentPostPublished() ) {
 		return null;
 	}
@@ -34,11 +25,8 @@ export default function PostPublishManualSharing() {
 			id="publicize-manual-sharing"
 			icon={ <JetpackEditorPanelLogo /> }
 		>
-			<ThemeProvider>
-				<ManualSharingInfo className={ styles.description } variant="body-small" />
-				<ShareButtons />
-				{ featureFlags?.useShareStatus && 'Share status modal comes here' }
-			</ThemeProvider>
+			<ManualSharingInfo className={ styles.description } variant="body-small" />
+			<ShareButtons />
 		</PluginPostPublishPanel>
 	);
 }

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

@@ -0,0 +1,16 @@
+import { ThemeProvider } from '@automattic/jetpack-components';
+import PostPublishManualSharing from '../post-publish-manual-sharing';
+import PostPublishReviewPrompt from '../post-publish-review-prompt';
+import { PostPublishShareStatus } from '../post-publish-share-status';
+
+const PostPublishPanels = () => {
+	return (
+		<ThemeProvider targetDom={ document.body }>
+			<PostPublishShareStatus />
+			<PostPublishManualSharing />
+			<PostPublishReviewPrompt />
+		</ThemeProvider>
+	);
+};
+
+export default PostPublishPanels;

projects/js-packages/publicize-components/src/components/post-publish-review-prompt/index.js

@@ -8,7 +8,7 @@ import { usePostStartedPublishing } from '../../hooks/use-saving-post';
 import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import ReviewPrompt from '../review-prompt';
 
-const PostPublishReviewPropmpt = () => {
+const PostPublishReviewPrompt = () => {
 	const [ isReviewRequestDismissed, setIsReviewRequestDismissed ] = useState(
 		getJetpackData()?.social?.reviewRequestDismissed ?? true
 	);
@@ -54,4 +54,4 @@ const PostPublishReviewPropmpt = () => {
 	);
 };
 
-export default PostPublishReviewPropmpt;
+export default PostPublishReviewPrompt;

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

@@ -0,0 +1,29 @@
+import { useSelect } from '@wordpress/data';
+import { PluginPostPublishPanel } from '@wordpress/edit-post';
+import { store as socialStore } from '../../social-store';
+import { ShareStatusModal } from '../share-status-modal';
+
+/**
+ * Post publish share status component.
+ *
+ * @return {import('react').ReactNode} - Post publish share status component.
+ */
+export function PostPublishShareStatus() {
+	const { featureFlags } = useSelect( select => {
+		const store = select( socialStore );
+		return {
+			featureFlags: store.featureFlags(),
+		};
+	}, [] );
+
+	if ( ! featureFlags.useShareStatus ) {
+		return null;
+	}
+
+	return (
+		<PluginPostPublishPanel id="publicize-share-status">
+			Your post was successfully shared in 4 connections.
+			<ShareStatusModal />
+		</PluginPostPublishPanel>
+	);
+}

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

@@ -0,0 +1,29 @@
+import { Button } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { store as socialStore } from '../../social-store';
+import styles from './styles.module.scss';
+
+/**
+ * Share status modal component.
+ *
+ * @return {import('react').ReactNode} - Share status modal component.
+ */
+export function ShareStatusModal() {
+	const { featureFlags } = useSelect( select => {
+		const store = select( socialStore );
+		return {
+			featureFlags: store.featureFlags(),
+		};
+	}, [] );
+
+	if ( ! featureFlags.useShareStatus ) {
+		return null;
+	}
+
+	return (
+		<div className={ styles.wrapper }>
+			<Button variant="secondary">{ __( 'Review sharing status', 'jetpack' ) }</Button>{ ' ' }
+		</div>
+	);
+}

projects/js-packages/publicize-components/src/components/share-status-modal/styles.module.scss

@@ -0,0 +1,4 @@
+.wrapper {
+	margin-top: 1rem;
+	padding-block: 1rem;
+}

projects/plugins/jetpack/changelog/refactor-social-post-publish-panel

@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Moved PostPublishPanels component to publicize-coomponents package

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

@@ -11,14 +11,14 @@ import {
 	PublicizePanel,
 	SocialImageGeneratorPanel,
 	usePublicizeConfig,
+	PostPublishPanels,
 } from '@automattic/jetpack-publicize-components';
 import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils';
 import { PostTypeSupportCheck } from '@wordpress/editor';
 import JetpackPluginSidebar from '../../shared/jetpack-plugin-sidebar';
 import { PublicizePlaceholder } from './components/placeholder';
 import PublicizeSkeletonLoader from './components/skeleton-loader';
 import UpsellNotice from './components/upsell';
-import PostPublishPanels from './post-publish';
 import PrePublishPanels from './pre-publish';
 
 import './editor.scss';

projects/plugins/social/changelog/refactor-social-post-publish-panel

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Moved PostPublishPanels component to publicize-components package

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

@@ -6,9 +6,8 @@ import {
 	usePublicizeConfig,
 	useSocialMediaConnections,
 	PublicizePanel,
-	PostPublishReviewPrompt,
-	PostPublishManualSharing,
 	useSyncPostDataToStore,
+	PostPublishPanels,
 } from '@automattic/jetpack-publicize-components';
 import { JetpackEditorPanelLogo } from '@automattic/jetpack-shared-extension-utils';
 import { PanelBody } from '@wordpress/components';
@@ -113,8 +112,7 @@ const JetpackSocialSidebar = () => {
 				<SocialPreviewsPanel openModal={ openModal } />
 			</PluginPrePublishPanel>
 
-			<PostPublishManualSharing />
-			<PostPublishReviewPrompt />
+			<PostPublishPanels />
 		</PostTypeSupportCheck>
 	);
 };