Social: Refactor resharing and scheduling logic to clean it up

projects/js-packages/components/changelog/update-social-resharing

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Fix navigator modal height and z-index.

projects/js-packages/components/components/navigator-modal/styles.module.scss

@@ -4,10 +4,14 @@
 	container-type: inline-size;
 	container-name: navigator-modal;
 
+	:global(.components-modal__screen-overlay):has(&) {
+		z-index: 99999; // Slightly lower than snackbar z-index (100001) so snackbars remain visible above the modal
+	}
+
 	width: 80rem;
 
 	@include gb.break-medium() {
-		height: 40rem;
+		height: 48rem;
 		max-height: 90%;
 	}
 

projects/js-packages/publicize-components/changelog/update-social-resharing

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Refactor resharing logic to move it to data store.

projects/js-packages/publicize-components/src/components/schedule-button/index.tsx

@@ -1,13 +1,11 @@
 import { Dropdown, Button, DateTimePicker } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { getDate, date, isInTheFuture } from '@wordpress/date';
-import { store as editorStore } from '@wordpress/editor';
 import { useCallback, useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { calendar } from '@wordpress/icons';
 import { useIsReSharingPossible } from '../../hooks/use-is-resharing-possible';
 import { useSchedulePost } from '../../hooks/use-schedule-post';
-import useSocialMediaConnections from '../../hooks/use-social-media-connections';
 import { store as socialStore } from '../../social-store';
 import styles from './styles.module.scss';
 
@@ -72,41 +70,37 @@ const ScheduleButton = () => {
 	const defaultTimestamp = Math.floor( Date.now() / 1000 );
 	const [ currentTimestamp, setCurrentTimestamp ] = useState( defaultTimestamp );
 	const isReSharingPossible = useIsReSharingPossible();
-	const { enabledConnections } = useSocialMediaConnections();
-	const { schedulePost } = useSchedulePost();
-	const isSavingPost = useSelect( select => select( editorStore ).isSavingPost(), [] );
+	const schedulePost = useSchedulePost();
+	const isSharingCurrentPost = useSelect( select => select( socialStore ).isSharingCurrentPost() );
 
-	const isSavingScheduledShare = useSelect(
-		select => select( socialStore ).isSavingScheduledShare(),
-		[]
-	);
-	const isBusy = isSavingScheduledShare || isSavingPost;
+	const isSchedulingShares = useSelect( select => select( socialStore ).isSchedulingShares(), [] );
+	const isBusy = isSchedulingShares;
+	const isDisabled = ! isReSharingPossible || isSharingCurrentPost;
 
 	const onConfirm = useCallback(
 		async ( scheduleTimestamp: number ) => {
 			await schedulePost( {
-				connectionIds: enabledConnections.map( connection => Number( connection.connection_id ) ),
 				timestamp: scheduleTimestamp,
 			} );
 		},
-		[ schedulePost, enabledConnections ]
+		[ schedulePost ]
 	);
 
 	const toggle = useCallback(
 		( { onToggle, isOpen } ) => (
 			<Button
-				onClick={ ! isBusy ? onToggle : null }
+				onClick={ ! isBusy && ! isDisabled ? onToggle : null }
 				aria-expanded={ isOpen }
 				aria-live="polite"
 				icon={ calendar }
 				isSecondary
 				isBusy={ isBusy }
-				disabled={ ! isReSharingPossible }
+				disabled={ isDisabled }
 			>
 				{ __( 'Schedule', 'jetpack-publicize-components' ) }
 			</Button>
 		),
-		[ isBusy, isReSharingPossible ]
+		[ isBusy, isDisabled ]
 	);
 
 	const content = useCallback(

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

@@ -0,0 +1,74 @@
+import { isSimpleSite, isWoASite } from '@automattic/jetpack-script-data';
+import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
+import { Button } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { send } from '@wordpress/icons';
+import { useIsReSharingPossible } from '../../hooks/use-is-resharing-possible';
+import { useSharePost } from '../../hooks/use-share-post';
+import { store as socialStore } from '../../social-store';
+
+/**
+ * Get the site type from environment
+ *
+ * @return Site type
+ */
+function getSiteType() {
+	if ( isWoASite() ) {
+		return 'atomic';
+	}
+
+	if ( isSimpleSite() ) {
+		return 'simple';
+	}
+
+	return 'jetpack';
+}
+
+type SharePostButtonProps = {
+	/**
+	 * The callback to be called when the share is completed.
+	 */
+	onShareCompleted: VoidFunction;
+};
+
+/**
+ * Component to trigger the resharing of the post.
+ *
+ * @param {SharePostButtonProps} props - The component props.
+ * @return A button component that will share the current post when clicked.
+ */
+export function SharePostButton( { onShareCompleted }: SharePostButtonProps ) {
+	const isSharingCurrentPost = useSelect( select => select( socialStore ).isSharingCurrentPost() );
+	const { recordEvent } = useAnalytics();
+	const isSchedulingShares = useSelect( select => select( socialStore ).isSchedulingShares(), [] );
+	const shareThePost = useSharePost();
+
+	const isReSharingPossible = useIsReSharingPossible();
+
+	const sharePost = useCallback( async () => {
+		recordEvent( 'jetpack_social_reshare_clicked', {
+			location: 'editor',
+			environment: getSiteType(),
+		} );
+
+		const success = await shareThePost();
+
+		if ( success ) {
+			onShareCompleted();
+		}
+	}, [ recordEvent, shareThePost, onShareCompleted ] );
+
+	return (
+		<Button
+			variant="primary"
+			onClick={ sharePost }
+			disabled={ ! isReSharingPossible || isSchedulingShares }
+			isBusy={ isSharingCurrentPost }
+			icon={ send }
+		>
+			{ __( 'Share', 'jetpack-publicize-components' ) }
+		</Button>
+	);
+}

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

@@ -2,11 +2,10 @@ import { IconTooltip } from '@automattic/jetpack-components';
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { Button, Spinner } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
 import { __, _x } from '@wordpress/i18n';
 import { useCallback, useState } from 'react';
 import usePublicizeConfig from '../../hooks/use-publicize-config';
-import useSharePost from '../../hooks/use-share-post';
+import { useSharePost } from '../../hooks/use-share-post';
 import { store as socialStore } from '../../social-store';
 import { ShareStatusItem } from '../../social-store/types';
 import {
@@ -24,18 +23,17 @@ export type RetryProps = {
  *
  * @param {RetryProps} props - component props
  *
- * @return {import('react').ReactNode} - React element
+ * @return - React element
  */
 export function Retry( { shareItem }: RetryProps ) {
 	const { recordEvent } = useAnalytics();
-	const postId = useSelect( select => select( editorStore ).getCurrentPostId(), [] );
 	const connections = useSelect( select => select( socialStore ).getConnections(), [] );
 
 	const { isRePublicizeFeatureAvailable } = usePublicizeConfig();
 
 	const connectionStillExists = connections.some( connectionMatchesShareItem( shareItem ) );
 
-	const { doPublicize } = useSharePost( Number( postId ) );
+	const sharePost = useSharePost();
 	const { pollForPostShareStatus } = useDispatch( socialStore );
 
 	const [ isRetrying, setIsRetrying ] = useState( false );
@@ -47,11 +45,11 @@ export function Retry( { shareItem }: RetryProps ) {
 		} );
 		const connectionMatches = connectionMatchesShareItem( shareItem );
 
-		const skippedConnections = connections
+		const connectionsToSkip = connections
 			.filter( connection => ! connectionMatches( connection ) )
 			.map( ( { connection_id } ) => connection_id );
 
-		if ( skippedConnections.length === connections.length ) {
+		if ( connectionsToSkip.length === connections.length ) {
 			// We should ideally never reach this point,
 			// because we disable the retry button if the connection doesn't still exist,
 			// but just in case, if we do, we should return early
@@ -60,7 +58,7 @@ export function Retry( { shareItem }: RetryProps ) {
 
 		setIsRetrying( true );
 
-		await doPublicize( skippedConnections );
+		await sharePost( { connectionsToSkip } );
 
 		await pollForPostShareStatus( {
 			isRequestComplete( { postShareStatus, lastTimestamp } ) {
@@ -77,7 +75,7 @@ export function Retry( { shareItem }: RetryProps ) {
 				return isComplete;
 			},
 		} );
-	}, [ recordEvent, shareItem, connections, doPublicize, pollForPostShareStatus ] );
+	}, [ recordEvent, shareItem, connections, sharePost, pollForPostShareStatus ] );
 
 	if ( isRetrying ) {
 		return <Spinner />;