diff --git a/projects/js-packages/publicize-components/changelog/refactor-social-post-publish-panel b/projects/js-packages/publicize-components/changelog/refactor-social-post-publish-panel
new file mode 100644
index 0000000000000..c2d9eb2e4c754
--- /dev/null
+++ b/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
diff --git a/projects/js-packages/publicize-components/index.ts b/projects/js-packages/publicize-components/index.ts
index f3764bec1f7a4..33210937ae819 100644
--- a/projects/js-packages/publicize-components/index.ts
+++ b/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';
diff --git a/projects/js-packages/publicize-components/src/components/manual-sharing/styles.module.scss b/projects/js-packages/publicize-components/src/components/manual-sharing/styles.module.scss
index f949387e01aa5..7a44bc078c41f 100644
--- a/projects/js-packages/publicize-components/src/components/manual-sharing/styles.module.scss
+++ b/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;
diff --git a/projects/js-packages/publicize-components/src/components/panel/index.jsx b/projects/js-packages/publicize-components/src/components/panel/index.jsx
index d9d348228bb38..9da06f51729af 100644
--- a/projects/js-packages/publicize-components/src/components/panel/index.jsx
+++ b/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 && (
<>
+
- { featureFlags?.useShareStatus && 'Share status modal comes here' }
) }
diff --git a/projects/js-packages/publicize-components/src/components/post-publish-manual-sharing/index.jsx b/projects/js-packages/publicize-components/src/components/post-publish-manual-sharing/index.jsx
index cc9d57440d7e0..cd38f7b8402e8 100644
--- a/projects/js-packages/publicize-components/src/components/post-publish-manual-sharing/index.jsx
+++ b/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={ }
>
-
-
-
- { featureFlags?.useShareStatus && 'Share status modal comes here' }
-
+
+
);
}
diff --git a/projects/js-packages/publicize-components/src/components/post-publish-panels/index.tsx b/projects/js-packages/publicize-components/src/components/post-publish-panels/index.tsx
new file mode 100644
index 0000000000000..158be6c8cbac9
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ );
+};
+
+export default PostPublishPanels;
diff --git a/projects/js-packages/publicize-components/src/components/post-publish-review-prompt/index.js b/projects/js-packages/publicize-components/src/components/post-publish-review-prompt/index.js
index d70f72e39d0d3..abeb8654c598d 100644
--- a/projects/js-packages/publicize-components/src/components/post-publish-review-prompt/index.js
+++ b/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;
diff --git a/projects/js-packages/publicize-components/src/components/post-publish-share-status/index.tsx b/projects/js-packages/publicize-components/src/components/post-publish-share-status/index.tsx
new file mode 100644
index 0000000000000..942ed52ff4aa3
--- /dev/null
+++ b/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 (
+
+ Your post was successfully shared in 4 connections.
+
+
+ );
+}
diff --git a/projects/js-packages/publicize-components/src/components/share-status-modal/index.tsx b/projects/js-packages/publicize-components/src/components/share-status-modal/index.tsx
new file mode 100644
index 0000000000000..9d688c6ae2ddc
--- /dev/null
+++ b/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 (
+
+ { ' ' }
+
+ );
+}
diff --git a/projects/js-packages/publicize-components/src/components/share-status-modal/styles.module.scss b/projects/js-packages/publicize-components/src/components/share-status-modal/styles.module.scss
new file mode 100644
index 0000000000000..a4bdac5ae6174
--- /dev/null
+++ b/projects/js-packages/publicize-components/src/components/share-status-modal/styles.module.scss
@@ -0,0 +1,4 @@
+.wrapper {
+ margin-top: 1rem;
+ padding-block: 1rem;
+}
\ No newline at end of file
diff --git a/projects/plugins/jetpack/changelog/refactor-social-post-publish-panel b/projects/plugins/jetpack/changelog/refactor-social-post-publish-panel
new file mode 100644
index 0000000000000..a4c11c733d294
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/refactor-social-post-publish-panel
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Moved PostPublishPanels component to publicize-coomponents package
diff --git a/projects/plugins/jetpack/extensions/plugins/publicize/index.js b/projects/plugins/jetpack/extensions/plugins/publicize/index.js
index ea955d1918d95..5ac22be8d162b 100644
--- a/projects/plugins/jetpack/extensions/plugins/publicize/index.js
+++ b/projects/plugins/jetpack/extensions/plugins/publicize/index.js
@@ -11,6 +11,7 @@ import {
PublicizePanel,
SocialImageGeneratorPanel,
usePublicizeConfig,
+ PostPublishPanels,
} from '@automattic/jetpack-publicize-components';
import { useModuleStatus } from '@automattic/jetpack-shared-extension-utils';
import { PostTypeSupportCheck } from '@wordpress/editor';
@@ -18,7 +19,6 @@ 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';
diff --git a/projects/plugins/jetpack/extensions/plugins/publicize/post-publish.js b/projects/plugins/jetpack/extensions/plugins/publicize/post-publish.js
deleted file mode 100644
index f3cceba56e3bf..0000000000000
--- a/projects/plugins/jetpack/extensions/plugins/publicize/post-publish.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import {
- PostPublishManualSharing,
- PostPublishReviewPrompt,
-} from '@automattic/jetpack-publicize-components';
-
-const PostPublishPanels = () => {
- return (
- <>
-
-
-
- );
-};
-
-export default PostPublishPanels;
diff --git a/projects/plugins/social/changelog/refactor-social-post-publish-panel b/projects/plugins/social/changelog/refactor-social-post-publish-panel
new file mode 100644
index 0000000000000..c2d9eb2e4c754
--- /dev/null
+++ b/projects/plugins/social/changelog/refactor-social-post-publish-panel
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Moved PostPublishPanels component to publicize-components package
diff --git a/projects/plugins/social/src/js/editor.js b/projects/plugins/social/src/js/editor.js
index 840a63360981f..eca205fa7c5ee 100644
--- a/projects/plugins/social/src/js/editor.js
+++ b/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 = () => {
-
-
+
);
};