External media: Show connection upgrade screen in transition from Photos to Picker

projects/plugins/jetpack/changelog/update-external-media-google-photos-picker-connection

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Cover case with connection transition from Google Photos to Google Photos Picker 

projects/plugins/jetpack/extensions/shared/external-media/editor.scss

@@ -568,13 +568,13 @@ $grid-size: 8px;
 }
 
 .jetpack-external-media-auth {
-	max-width: 340px;
+	max-width: 400px;
 	margin: 0 auto;
 	padding-bottom: 80px;
 	text-align: center;
 
 	p {
-		margin: 2em 0;
+		margin: 0 0 2em 0;
 	}
 }
 

projects/plugins/jetpack/extensions/shared/external-media/sources/google-photos/google-photos-auth-upgrade.js

@@ -0,0 +1,22 @@
+import { __ } from '@wordpress/i18n';
+import { GooglePhotosLogo } from '../../../icons';
+import GooglePhotosDisconnect from './google-photos-disconnect';
+
+export default function GooglePhotosAuthUpgrade( props ) {
+	const { setAuthenticated } = props;
+
+	return (
+		<div className="jetpack-external-media-auth">
+			<GooglePhotosLogo />
+
+			<p>
+				{ __(
+					"We've updated our Google Photos service. You will need to disconnect and reconnect to continue accessing your photos.",
+					'jetpack'
+				) }
+			</p>
+
+			<GooglePhotosDisconnect setAuthenticated={ setAuthenticated } />
+		</div>
+	);
+}

projects/plugins/jetpack/extensions/shared/external-media/sources/google-photos/google-photos-picker-button.js

@@ -15,7 +15,7 @@ export default function GooglePhotosPickerButton( props ) {
 
 	useEffect( () => {
 		const interval = setInterval( () => {
-			pickerSession.id && fetchPickerSession( pickerSession.id );
+			pickerSession?.id && fetchPickerSession( pickerSession.id );
 		}, 3000 );
 		return () => clearInterval( interval );
 	}, [ fetchPickerSession, pickerSession?.id ] );

projects/plugins/jetpack/extensions/shared/external-media/sources/google-photos/index.js

@@ -1,10 +1,11 @@
 import moment from 'moment';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import MediaLoadingPlaceholder from '../../media-browser/placeholder';
 import { getGooglePhotosPickerCachedSessionId } from '../../media-service';
 import { MediaSource } from '../../media-service/types';
 import withMedia from '../with-media';
 import GooglePhotosAuth from './google-photos-auth';
+import GooglePhotosAuthUpgrade from './google-photos-auth-upgrade';
 import GooglePhotosMedia from './google-photos-media';
 import GooglePhotosPickerButton from './google-photos-picker-button';
 
@@ -15,23 +16,50 @@ function GooglePhotos( props ) {
 		createPickerSession,
 		fetchPickerSession,
 		getPickerStatus,
+		setAuthenticated,
 	} = props;
 	const [ cachedSessionId ] = useState( getGooglePhotosPickerCachedSessionId() );
 	const [ isCachedSessionChecked, setIsCachedSessionChecked ] = useState( false );
 	const [ pickerFeatureEnabled, setPickerFeatureEnabled ] = useState( null );
+	const [ authUpgradeRequired, setAuthUpgradeRequired ] = useState( false );
 	const isPickerSessionAccurate = pickerSession !== null && ! ( 'code' in pickerSession );
 	const isSessionExpired =
 		pickerSession?.expireTime && moment( pickerSession.expireTime ).isBefore( new Date() );
 
+	const catchAuthErrors = useCallback(
+		error => {
+			if ( error.code === 'authorization_required' ) {
+				setAuthenticated( false );
+			}
+
+			// If the picker session endpoint returns a 404
+			// the user needs to upgrade their auth
+			if ( error.code === 'rest_not_found' ) {
+				setAuthUpgradeRequired( true );
+			}
+		},
+		[ setAuthenticated, setAuthUpgradeRequired ]
+	);
+
+	useEffect( () => {
+		! isAuthenticated && setAuthUpgradeRequired( false );
+	}, [ isAuthenticated ] );
+
 	useEffect( () => {
 		getPickerStatus().then( feature => {
 			feature && setPickerFeatureEnabled( feature.enabled );
 		} );
 
 		cachedSessionId === null && setIsCachedSessionChecked( true );
-		cachedSessionId &&
-			fetchPickerSession( cachedSessionId ).then( () => setIsCachedSessionChecked( true ) );
-	}, [ getPickerStatus, fetchPickerSession, cachedSessionId ] );
+		fetchPickerSession( cachedSessionId )
+			.then( () => {
+				setIsCachedSessionChecked( true );
+			} )
+			.catch( error => {
+				setIsCachedSessionChecked( true );
+				catchAuthErrors( error );
+			} );
+	}, [ getPickerStatus, fetchPickerSession, cachedSessionId, catchAuthErrors ] );
 
 	useEffect( () => {
 		if (
@@ -40,7 +68,7 @@ function GooglePhotos( props ) {
 			isAuthenticated &&
 			( ! isPickerSessionAccurate || isSessionExpired )
 		) {
-			createPickerSession();
+			createPickerSession().catch( catchAuthErrors );
 		}
 	}, [
 		pickerFeatureEnabled,
@@ -50,12 +78,17 @@ function GooglePhotos( props ) {
 		isSessionExpired,
 		createPickerSession,
 		pickerSession,
+		catchAuthErrors,
 	] );
 
 	if ( pickerFeatureEnabled === null || ! isCachedSessionChecked ) {
 		return <MediaLoadingPlaceholder />;
 	}
 
+	if ( authUpgradeRequired ) {
+		return <GooglePhotosAuthUpgrade { ...props } />;
+	}
+
 	if ( ! isAuthenticated ) {
 		return <GooglePhotosAuth { ...props } />;
 	}

projects/plugins/jetpack/extensions/shared/external-media/sources/with-media.js

@@ -252,15 +252,24 @@ export default function withMedia( mediaSource = MediaSource.Unknown ) {
 					.then( session => {
 						setGooglePhotosPickerSession( session );
 						return session;
-					} )
-					.catch( this.handleApiError );
+					} );
 			};
 
 			fetchPickerSession = sessionId => {
 				return apiFetch( {
 					path: `/wpcom/v2/external-media/session/google_photos/${ sessionId }`,
 					method: 'GET',
-				} ).then( setGooglePhotosPickerSession );
+				} )
+					.then( response => {
+						if ( 'code' in response ) {
+							throw response;
+						}
+						return response;
+					} )
+					.then( session => {
+						setGooglePhotosPickerSession( session );
+						return session;
+					} );
 			};
 
 			deletePickerSession = ( sessionId, updateState = true ) => {