Fix/bug where connection banner shows in p2 (#39667)

* Fix issue where simple and atomic sites were showing connection banner

* changelog

projects/packages/videopress/changelog/fix-bug-where-connection-banner-shows-in-p2

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix bug where connection banner was showing in P2s and other atomic/simple sites

projects/packages/videopress/src/client/block-editor/blocks/video/components/videopress-uploader/index.js

@@ -10,9 +10,9 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { usePermission } from '../../../../../admin/hooks/use-permission';
 import useResumableUploader from '../../../../../hooks/use-resumable-uploader';
 import { uploadFromLibrary } from '../../../../../hooks/use-uploader';
+import { isUserConnected } from '../../../../../lib/connection';
 import { buildVideoPressURL, pickVideoBlockAttributesFromUrl } from '../../../../../lib/url';
 import { VIDEOPRESS_VIDEO_ALLOWED_MEDIA_TYPES } from '../../constants';
 import { PlaceholderWrapper } from '../../edit';
@@ -37,7 +37,7 @@ const VideoPressUploader = ( {
 	const [ isUploadingInProgress, setIsUploadingInProgress ] = useState( false );
 	const [ isVerifyingLocalMedia, setIsVerifyingLocalMedia ] = useState( false );
 
-	const { hasConnectedOwner } = usePermission();
+	const hasUserConnection = isUserConnected();
 
 	/*
 	 * When the file to upload is set, start the upload process
@@ -331,7 +331,7 @@ const VideoPressUploader = ( {
 
 		return (
 			<PlaceholderWrapper disableInstructions className="disabled">
-				<span>{ ! hasConnectedOwner ? needsConnectionText : needsActivationText }</span>
+				<span>{ ! hasUserConnection ? needsConnectionText : needsActivationText }</span>
 			</PlaceholderWrapper>
 		);
 	}

projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx

@@ -21,12 +21,12 @@ import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
-import { usePermission } from '../../../admin/hooks/use-permission';
 import {
 	isStandaloneActive,
 	isVideoPressActive,
 	isVideoPressModuleActive,
 } from '../../../lib/connection';
+import { isUserConnected } from '../../../lib/connection';
 import { buildVideoPressURL, getVideoPressUrl } from '../../../lib/url';
 import { usePreview } from '../../hooks/use-preview';
 import { useSyncMedia } from '../../hooks/use-sync-media';
@@ -151,7 +151,7 @@ export default function VideoPressEdit( {
 
 	// Get the redirect URI for the connection flow.
 	const [ isRedirectingToMyJetpack, setIsRedirectingToMyJetpack ] = useState( false );
-	const { hasConnectedOwner } = usePermission();
+	const hasUserConnection = isUserConnected();
 
 	// Detect if the chapter file is auto-generated.
 	const chapter = tracks?.filter( track => track.kind === 'chapters' )?.[ 0 ];
@@ -399,12 +399,12 @@ export default function VideoPressEdit( {
 			<div { ...blockProps } className={ blockMainClassName }>
 				<>
 					<ConnectBanner
-						isConnected={ hasConnectedOwner }
+						isConnected={ hasUserConnection }
 						isModuleActive={ isModuleActive || isStandalonePluginActive }
 						isConnecting={ isRedirectingToMyJetpack }
 						onConnect={ () => {
 							setIsRedirectingToMyJetpack( true );
-							if ( ! hasConnectedOwner ) {
+							if ( ! hasUserConnection ) {
 								return ( window.location.href = myJetpackConnectUrl );
 							}
 							window.location.href = jetpackVideoPressSettingUrl;
@@ -597,11 +597,11 @@ export default function VideoPressEdit( {
 
 			<ConnectBanner
 				isModuleActive={ isModuleActive || isStandalonePluginActive }
-				isConnected={ hasConnectedOwner }
+				isConnected={ hasUserConnection }
 				isConnecting={ isRedirectingToMyJetpack }
 				onConnect={ () => {
 					setIsRedirectingToMyJetpack( true );
-					if ( ! hasConnectedOwner ) {
+					if ( ! hasUserConnection ) {
 						return ( window.location.href = myJetpackConnectUrl );
 					}
 

projects/packages/videopress/src/client/lib/connection/index.ts

@@ -1,13 +1,12 @@
 /**
  * External dependencies
  */
+import { isAtomicSite, isSimpleSite } from '@automattic/jetpack-shared-extension-utils';
 import debugFactory from 'debug';
 
 // Get connection initial state from the global window object.
 const initialState = window?.JP_CONNECTION_INITIAL_STATE;
 
-const { siteType = '' } = window?.videoPressEditorState || {};
-
 const debug = debugFactory( 'videopress:connection' );
 
 /**
@@ -20,11 +19,16 @@ const debug = debugFactory( 'videopress:connection' );
  * @return {boolean} True if the user is connected, false otherwise.
  */
 export function isUserConnected(): boolean {
-	if ( siteType === 'simple' ) {
+	if ( isSimpleSite() ) {
 		debug( 'Simple site connected ✅' );
 		return true;
 	}
 
+	if ( isAtomicSite() ) {
+		debug( 'Atomic site connected ✅' );
+		return true;
+	}
+
 	if ( initialState?.connectionStatus?.isUserConnected ) {
 		debug( 'Jetpack user is connected ✅' );
 		return true;