Photos picker: Integrate GooglePhotos connection upgrade (#97117)

* Photos picker: Disable session fetching if there is no feature flag

* Update logic to refetch connection if it's an invalid status

* Photos picker: create upgrade component

* Integrate google photos connection upgrade screen

client/data/media/with-google-photos-picker-session.js

@@ -20,7 +20,9 @@ export const withGooglePhotosPickerSession = createHigherOrderComponent( ( Wrapp
 		);
 		const photosPickerSession = useSelector( ( state ) => getGooglePhotosPickerSession( state ) );
 
-		const { data: cachedSession } = useGooglePhotosPickerSessionQuery( cachedSessionId );
+		const { data: cachedSession } = useGooglePhotosPickerSessionQuery( cachedSessionId, {
+			enabled: !! photosPickerApiEnabled,
+		} );
 		const { createSession, isPending } = useCreateGooglePhotosPickerSessionMutation();
 		const { mutate: deletePickerSession } = useDeleteGooglePhotosPickerSessionMutation();
 

client/my-sites/media-library/content.jsx

@@ -21,7 +21,6 @@ import {
 	MEDIA_IMAGE_THUMBNAIL,
 	SCALE_TOUCH_GRID,
 } from 'calypso/lib/media/constants';
-import GooglePhotosPickerButton from 'calypso/my-sites/media-library/google-photos-picker-button';
 import InlineConnection from 'calypso/sites/marketing/connections/inline-connection';
 import { pauseGuidedTour, resumeGuidedTour } from 'calypso/state/guided-tours/actions';
 import { getGuidedTourState } from 'calypso/state/guided-tours/selectors';
@@ -37,6 +36,8 @@ import {
 import { getSiteSlug, isJetpackSite } from 'calypso/state/sites/selectors';
 import { getSelectedSiteId } from 'calypso/state/ui/selectors';
 import MediaLibraryExternalHeader from './external-media-header';
+import GooglePhotosAuthUpgrade from './google-photos-auth-upgrade';
+import GooglePhotosPickerButton from './google-photos-picker-button';
 import MediaLibraryHeader from './header';
 import MediaLibraryList from './list';
 import './content.scss';
@@ -142,6 +143,12 @@ export class MediaLibraryContent extends Component {
 		return false;
 	}
 
+	hasGoogleInvalidConnection( props ) {
+		const { googleConnection, source } = props;
+
+		return source === 'google_photos' && googleConnection && googleConnection.status === 'invalid';
+	}
+
 	renderErrors() {
 		const { isJetpack, mediaValidationErrorTypes, site, siteSlug, translate } = this.props;
 		return map( groupBy( mediaValidationErrorTypes ), ( occurrences, errorType ) => {
@@ -409,6 +416,10 @@ export class MediaLibraryContent extends Component {
 			);
 		}
 
+		if ( this.hasGoogleInvalidConnection( this.props ) ) {
+			return <GooglePhotosAuthUpgrade connection={ this.props.googleConnection } />;
+		}
+
 		if ( this.needsToBeConnected() ) {
 			return this.renderConnectExternalMedia();
 		}

client/my-sites/media-library/google-photos-auth-upgrade.tsx

@@ -0,0 +1,46 @@
+import { Button } from '@wordpress/components';
+import { useTranslate } from 'i18n-calypso';
+import { useState } from 'react';
+import { useDispatch } from 'calypso/state';
+import { deleteStoredKeyringConnection } from 'calypso/state/sharing/keyring/actions';
+import type { Connection } from 'calypso/sites/marketing/connections/types';
+
+interface Props {
+	connection: Connection;
+}
+const GooglePhotosAutUpgrade = ( props: Props ) => {
+	const translate = useTranslate();
+	const dispatch = useDispatch();
+	const { connection } = props;
+	const [ isDisconnecting, setIsDisconnecting ] = useState( false );
+
+	return (
+		<div className="media-library__connect-message">
+			<p>
+				<img
+					src="/calypso/images/sharing/google-photos-logo-text.svg?v=20241124"
+					width="400"
+					alt={ translate( 'Google Photos' ) }
+				/>
+			</p>
+			<p>
+				{ translate(
+					"We've updated our Google Photos service. You will need to disconnect and reconnect to continue accessing your photos."
+				) }
+			</p>
+
+			<Button
+				variant="secondary"
+				isBusy={ isDisconnecting }
+				onClick={ () => {
+					dispatch( deleteStoredKeyringConnection( connection ) );
+					setIsDisconnecting( true );
+				} }
+			>
+				{ translate( 'Disconnect from Google Photos' ) }
+			</Button>
+		</div>
+	);
+};
+
+export default GooglePhotosAutUpgrade;

client/my-sites/media-library/index.jsx

@@ -33,10 +33,14 @@ const isConnected = ( state, source ) =>
 	! sourceNeedsKeyring( source ) ||
 	some( getKeyringConnections( state ), { type: 'other', status: 'ok', service: source } );
 
-const needsKeyring = ( state, source ) =>
-	sourceNeedsKeyring( source ) &&
-	! isKeyringConnectionsFetching( state ) &&
-	! some( getKeyringConnections( state ), { type: 'other', status: 'ok' } );
+const needsKeyring = ( state, source ) => {
+	return (
+		sourceNeedsKeyring( source ) &&
+		! isKeyringConnectionsFetching( state ) &&
+		( ! some( getKeyringConnections( state ), { type: 'other', status: 'ok' } ) ||
+			! some( getKeyringConnections( state ), { type: 'other', status: 'invalid' } ) )
+	);
+};
 
 class MediaLibrary extends Component {
 	static propTypes = {