Redirect back to media page post checkout (#96447)

* add redirect back to media page post checkout * add upgrade status as query param * fix video upload message
Automattic · Nov 20, 2024 · 1d79e49 · 1d79e49
1 parent 8d1c79e
commit 1d79e49
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/client/my-sites/media-library/list-plan-upgrade-nudge.jsx b/client/my-sites/media-library/list-plan-upgrade-nudge.jsx
@@ -23,7 +23,9 @@ export const MediaLibraryUpgradeNudge = ( { translate, filter = 'video', site }
 
 	const handleClick = () => {
 		const planSlug = 'audio' === filter ? PLAN_PERSONAL : PLAN_PREMIUM;
-		const checkoutUrl = addQueryArgs( `/checkout/${ site.slug }/${ planSlug }` );
+		const checkoutUrl = addQueryArgs( `/checkout/${ site.slug }/${ planSlug }`, {
+			redirect_to: `/media/${ filter }/${ site.slug }?upgrade=success`,
+		} );
 
 		recordTracksEvent( 'calypso_upgrade_nudge_cta_click', commonEventProps );
 		page.redirect( checkoutUrl );

diff --git a/client/my-sites/media/main.jsx b/client/my-sites/media/main.jsx
@@ -22,6 +22,7 @@ import { EditorMediaModalDetail } from 'calypso/post-editor/media-modal/detail';
 import EditorMediaModalDialog from 'calypso/post-editor/media-modal/dialog';
 import { withJetpackConnectionProblem } from 'calypso/state/jetpack-connection-health/selectors/is-jetpack-connection-problem.js';
 import { selectMediaItems, changeMediaSource, clearSite } from 'calypso/state/media/actions';
+import { successNotice } from 'calypso/state/notices/actions';
 import getCurrentRoute from 'calypso/state/selectors/get-current-route';
 import getMediaItem from 'calypso/state/selectors/get-media-item';
 import getMediaLibrarySelectedItems from 'calypso/state/selectors/get-media-library-selected-items';
@@ -57,6 +58,12 @@ class Media extends Component {
 		this.setState( {
 			containerWidth: this.containerRef.current.clientWidth,
 		} );
+
+		const params = new URLSearchParams( window.location.search );
+		const upgradeStatus = params.get( 'upgrade' );
+		if ( upgradeStatus ) {
+			this.showUpgradeStatusNotice( upgradeStatus );
+		}
 	}
 
 	onFilterChange = ( filter ) => {
@@ -351,6 +358,20 @@ class Media extends Component {
 		);
 	};
 
+	showUpgradeStatusNotice = ( status ) => {
+		const { translate, filter, successNotice: showSuccessNotice } = this.props;
+		let message = '';
+		if ( filter === 'audio' ) {
+			message = translate( 'Audio upload has been enabled.' );
+		} else if ( filter === 'videos' ) {
+			message = translate( 'Video upload has been enabled.' );
+		}
+
+		if ( status === 'success' && message ) {
+			showSuccessNotice( message );
+		}
+	};
+
 	render() {
 		const {
 			selectedSite: site,
@@ -472,6 +493,9 @@ const mapStateToProps = ( state, { mediaId } ) => {
 	};
 };
 
-export default connect( mapStateToProps, { selectMediaItems, changeMediaSource, clearSite } )(
-	localize( withJetpackConnectionProblem( withDeleteMedia( withEditMedia( Media ) ) ) )
-);
+export default connect( mapStateToProps, {
+	selectMediaItems,
+	changeMediaSource,
+	clearSite,
+	successNotice,
+} )( localize( withJetpackConnectionProblem( withDeleteMedia( withEditMedia( Media ) ) ) ) );