Social Notes: Add CTA to admin page (#36972)

* Add the CTA button to the admin page * changelog
Automattic · Apr 18, 2024 · 2199ce4 · 2199ce4
1 parent c3e4df9
commit 2199ce4
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/projects/plugins/social/changelog/add-social-notes-cta-button b/projects/plugins/social/changelog/add-social-notes-cta-button
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added a CTA button to create a social note
diff --git a/projects/plugins/social/src/js/components/social-notes-toggle/index.tsx b/projects/plugins/social/src/js/components/social-notes-toggle/index.tsx
@@ -1,4 +1,4 @@
-import { Text } from '@automattic/jetpack-components';
+import { Text, Button, useBreakpointMatch } from '@automattic/jetpack-components';
 import { store as socialStore } from '@automattic/jetpack-publicize-components';
 import { ExternalLink, SelectControl, ToggleControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -29,11 +29,12 @@ const handleStateUpdating = ( updateFunction, updatingStateSetter, ...args ) =>
 };
 
 const SocialNotesToggle: React.FC< SocialNotesToggleProps > = ( { disabled } ) => {
-	const { isEnabled, notesConfig } = useSelect( select => {
+	const { isEnabled, notesConfig, newNoteUrl } = useSelect( select => {
 		const store = select( socialStore );
 		return {
 			isEnabled: store.isSocialNotesEnabled(),
 			notesConfig: store.getSocialNotesConfig(),
+			newNoteUrl: `${ store.getAdminUrl() }post-new.php?post_type=jetpack-social-note`,
 			// Temporarily we disable forever after action to wait for the page to reload.
 			// isUpdating: store.isSocialNotesSettingsUpdating(),
 		};
@@ -43,6 +44,8 @@ const SocialNotesToggle: React.FC< SocialNotesToggleProps > = ( { disabled } ) =
 	const [ isAppendLinkToggleUpdating, setIsAppendLinkToggleUpdating ] = useState( false );
 	const [ isLinkFormatUpdating, setIsLinkFormatUpdating ] = useState( false );
 
+	const [ isSmall ] = useBreakpointMatch( 'sm' );
+
 	const { updateSocialNotesSettings: updateOptions, updateSocialNotesConfig } =
 		useDispatch( socialStore );
 
@@ -57,7 +60,14 @@ const SocialNotesToggle: React.FC< SocialNotesToggleProps > = ( { disabled } ) =
 		setIsUpdating( true );
 		document.body.style.cursor = 'wait';
 		updatePromise.then( () => {
-			window.location.reload();
+			// If the toggle is turned on we don't need to reload the page,
+			// as they will have the CTA to create a note.
+			if ( newOption.social_notes_enabled ) {
+				setIsUpdating( false );
+				document.body.style.cursor = 'auto';
+			} else {
+				window.location.reload();
+			}
 		} );
 	}, [ isEnabled, updateOptions ] );
 
@@ -93,6 +103,17 @@ const SocialNotesToggle: React.FC< SocialNotesToggleProps > = ( { disabled } ) =
 					'jetpack-social'
 				) }
 			</Text>
+
+			<Button
+				className={ styles.button }
+				fullWidth={ isSmall }
+				variant="secondary"
+				disabled={ isUpdating || ! isEnabled }
+				href={ newNoteUrl }
+			>
+				{ __( 'Create a note', 'jetpack-social' ) }
+			</Button>
+
 			{ isEnabled && ! isUpdating ? (
 				<div className={ styles[ 'notes-options-wrapper' ] }>
 					<ToggleControl

diff --git a/projects/plugins/social/src/js/components/social-notes-toggle/styles.module.scss b/projects/plugins/social/src/js/components/social-notes-toggle/styles.module.scss
@@ -10,6 +10,16 @@
 	}
 }
 
+.button {
+	margin-top: calc( var( --spacing-base ) * 2 );
+	grid-column: span 2;
+	justify-self: flex-start;
+
+	@media ( min-width: 600px ) {
+		grid-column: 2;
+	}
+}
+
 .notes-options-wrapper {
 	display: flex;
 	flex-direction: column;