diff --git a/projects/plugins/social/changelog/add-social-notes-cta-button b/projects/plugins/social/changelog/add-social-notes-cta-button new file mode 100644 index 0000000000000..0780b24ff612f --- /dev/null +++ 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 index 3541794e99101..f3dc53bc8a187 100644 --- 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' ) } + + + { isEnabled && ! isUpdating ? (