Social: Hide custom message box for Social Notes (#41948)

* Create util hook for checking if post is a Social Note

* Use util hook for hiding the messaebox and for sig hook

* changelog

* Add test

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/13494036666

Upstream-Ref: Automattic/jetpack@a096b32

Author: gmjuhasz

CHANGELOG.md

@@ -14,6 +14,7 @@ This is an alpha version! The changes listed here are not final.
 
 ### Fixed
 - Fixed an issue with unsupported connection showing up
+- Fixed custom message box showing up for custom notes
 - Social Previews | Fixed distorted image for Tumblr preview
 - Social | Fix plugin version in admin page footer
 - Social | Hide upgrade nudge for Atomic sites

src/components/form/share-post-form.tsx

@@ -1,6 +1,7 @@
 import { siteHasFeature } from '@automattic/jetpack-script-data';
 import useSocialMediaMessage from '../../hooks/use-social-media-message';
 import { features } from '../../utils/constants';
+import { useIsSocialNote } from '../../utils/use-is-social-note';
 import MediaSection from '../media-section';
 import MessageBoxControl from '../message-box-control';
 import styles from './styles.module.scss';
@@ -17,15 +18,18 @@ type SharePostFormProps = {
  */
 export const SharePostForm: React.FC< SharePostFormProps > = ( { analyticsData = null } ) => {
 	const { message, updateMessage, maxLength } = useSocialMediaMessage();
+	const isSocialNote = useIsSocialNote();
 
 	return (
 		<>
-			<MessageBoxControl
-				maxLength={ maxLength }
-				onChange={ updateMessage }
-				message={ message }
-				analyticsData={ analyticsData }
-			/>
+			{ ! isSocialNote && (
+				<MessageBoxControl
+					maxLength={ maxLength }
+					onChange={ updateMessage }
+					message={ message }
+					analyticsData={ analyticsData }
+				/>
+			) }
 			{ siteHasFeature( features.ENHANCED_PUBLISHING ) && (
 				<div className={ styles[ 'share-post-form__media-section' ] }>
 					<MediaSection analyticsData={ analyticsData } />

src/hooks/use-post-can-use-sig/index.ts

@@ -1,19 +1,14 @@
 import { siteHasFeature } from '@automattic/jetpack-script-data';
-import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
 import { features } from '../../utils/constants';
+import { useIsSocialNote } from '../../utils/use-is-social-note';
 
 /**
  * When a post can use the Social Image Generator (SIG).
  *
  * @return {boolean} Whether the post can use the Social Image Generator.
  */
 export function usePostCanUseSig() {
-	const isJetpackSocialNote = useSelect( select => {
-		const currentPostType = select( editorStore ).getCurrentPostType();
-
-		return 'jetpack-social-note' === currentPostType;
-	}, [] );
+	const isJetpackSocialNote = useIsSocialNote();
 
 	return ! isJetpackSocialNote && siteHasFeature( features.IMAGE_GENERATOR );
 }

src/utils/test/use-is-social-note.test.ts

@@ -0,0 +1,39 @@
+import { renderHook } from '@testing-library/react';
+import { store as editorStore } from '@wordpress/editor';
+import { useIsSocialNote } from '../use-is-social-note';
+
+// Mock the editor store
+jest.mock( '@wordpress/editor', () => ( {
+	store: 'core/editor',
+} ) );
+
+const mockGetCurrentPostType = jest.fn();
+const mockSelect = jest.fn().mockReturnValue( { getCurrentPostType: mockGetCurrentPostType } );
+
+jest.mock( '@wordpress/data', () => ( {
+	useSelect: jest.fn( fn => fn( mockSelect ) ),
+} ) );
+
+describe( 'useIsSocialNote', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should return true when post type is jetpack-social-note', () => {
+		mockGetCurrentPostType.mockReturnValue( 'jetpack-social-note' );
+		const { result } = renderHook( () => useIsSocialNote() );
+
+		expect( result.current ).toBe( true );
+		expect( mockSelect ).toHaveBeenCalledWith( editorStore );
+		expect( mockGetCurrentPostType ).toHaveBeenCalled();
+	} );
+
+	it( 'should return false when post type is not jetpack-social-note', () => {
+		mockGetCurrentPostType.mockReturnValue( 'post' );
+		const { result } = renderHook( () => useIsSocialNote() );
+
+		expect( result.current ).toBe( false );
+		expect( mockSelect ).toHaveBeenCalledWith( editorStore );
+		expect( mockGetCurrentPostType ).toHaveBeenCalled();
+	} );
+} );

src/utils/use-is-social-note.ts

@@ -0,0 +1,15 @@
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+
+/**
+ * Whether the current post is a social note.
+ *
+ * @return {boolean} Whether the current post is a social note.
+ */
+export function useIsSocialNote() {
+	return useSelect( select => {
+		const currentPostType = select( editorStore ).getCurrentPostType();
+
+		return 'jetpack-social-note' === currentPostType;
+	}, [] );
+}