Only initializing background removal with jetpack connection present (#40918)

plugins/woo-ai/changelog/update-background-removal-elligibility-40917

@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Only initializing background removal when JP connection present.

plugins/woo-ai/src/image-background-removal/index.tsx

@@ -1,19 +1,16 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore createRoot included for future compatibility
-// eslint-disable-next-line @woocommerce/dependency-group
-import { render, createRoot } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
 import { BackgroundRemovalLink } from './background-removal-link';
 import { getCurrentAttachmentDetails } from './image_utils';
 import { FILENAME_APPEND, LINK_CONTAINER_ID } from './constants';
+import { renderWrappedComponent } from '../utils';
+
+( () => {
+	if ( ! window.JP_CONNECTION_INITIAL_STATE?.connectionStatus?.isActive ) {
+		return;
+	}
 
-export const init = () => {
 	const _previous = wp.media.view.Attachment.Details.prototype;
 
 	wp.media.view.Attachment.Details = wp.media.view.Attachment.Details.extend(
@@ -22,17 +19,10 @@ export const init = () => {
 				_previous.initialize.call( this );
 
 				setTimeout( () => {
-					const root = document.body.querySelector(
+					renderWrappedComponent(
-						`#${ LINK_CONTAINER_ID }`
+						BackgroundRemovalLink,
+						document.body.querySelector( `#${ LINK_CONTAINER_ID }` )
 					);
-					if ( ! root ) {
-						return;
-					}
-					if ( createRoot ) {
-						createRoot( root ).render( <BackgroundRemovalLink /> );
-					} else {
-						render( <BackgroundRemovalLink />, root );
-					}
 				}, 0 );
 			},
 			template( view: { id: number } ) {
@@ -54,4 +44,4 @@ export const init = () => {
 			},
 		}
 	);
-};
+} )();

plugins/woo-ai/src/index.js

@@ -1,73 +0,0 @@
-/**
- * External dependencies
- */
-import { render, createRoot } from '@wordpress/element';
-import { QueryClient, QueryClientProvider } from 'react-query';
-
-/**
- * Internal dependencies
- */
-import { WriteItForMeButtonContainer } from './product-description';
-import { ProductNameSuggestions } from './product-name';
-import { ProductCategorySuggestions } from './product-category';
-import { WriteShortDescriptionButtonContainer } from './product-short-description';
-import setPreferencesPersistence from './utils/preferencesPersistence';
-import { init as initBackgroundRemoval } from './image-background-removal';
-
-import './index.scss';
-
-// This sets up loading and saving the plugin's preferences.
-setPreferencesPersistence();
-
-initBackgroundRemoval();
-
-const queryClient = new QueryClient();
-
-const renderComponent = ( Component, rootElement ) => {
-	if ( ! rootElement ) {
-		return;
-	}
-
-	const WrappedComponent = () => (
-		<QueryClientProvider client={ queryClient }>
-			<Component />
-		</QueryClientProvider>
-	);
-
-	if ( createRoot ) {
-		createRoot( rootElement ).render( <WrappedComponent /> );
-	} else {
-		render( <WrappedComponent />, rootElement );
-	}
-};
-
-const renderProductCategorySuggestions = () => {
-	const root = document.createElement( 'div' );
-	root.id = 'woocommerce-ai-app-product-category-suggestions';
-
-	renderComponent( ProductCategorySuggestions, root );
-
-	// Insert the category suggestions node in the product category meta box.
-	document.getElementById( 'taxonomy-product_cat' ).append( root );
-};
-
-const descriptionButtonRoot = document.getElementById(
-	'woocommerce-ai-app-product-gpt-button'
-);
-const nameSuggestionsRoot = document.getElementById(
-	'woocommerce-ai-app-product-name-suggestions'
-);
-
-const shortDescriptionButtonRoot = document.getElementById(
-	'woocommerce-ai-app-product-short-description-gpt-button'
-);
-
-if ( window.JP_CONNECTION_INITIAL_STATE?.connectionStatus?.isActive ) {
-	renderComponent( WriteItForMeButtonContainer, descriptionButtonRoot );
-	renderComponent( ProductNameSuggestions, nameSuggestionsRoot );
-	renderProductCategorySuggestions();
-	renderComponent(
-		WriteShortDescriptionButtonContainer,
-		shortDescriptionButtonRoot
-	);
-}

plugins/woo-ai/src/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import setPreferencesPersistence from './utils/preferencesPersistence';
+import './image-background-removal';
+import './product-description';
+import './product-short-description';
+import './product-name';
+import './product-category';
+
+import './index.scss';
+
+// This sets up loading and saving the plugin's preferences.
+setPreferencesPersistence();

plugins/woo-ai/src/product-category/index.ts

@@ -1 +1,15 @@
-export * from './product-category-suggestions';
+/**
+ * Internal dependencies
+ */
+import { renderWrappedComponent } from '../utils';
+import { ProductCategorySuggestions } from './product-category-suggestions';
+
+if ( window.JP_CONNECTION_INITIAL_STATE?.connectionStatus?.isActive ) {
+	const root = document.createElement( 'div' );
+	root.id = 'woocommerce-ai-app-product-category-suggestions';
+
+	renderWrappedComponent( ProductCategorySuggestions, root );
+
+	// Insert the category suggestions node in the product category meta box.
+	document.getElementById( 'taxonomy-product_cat' )?.append( root );
+}

plugins/woo-ai/src/product-description/index.ts

@@ -1 +1,12 @@
-export * from './product-description-button-container';
+/**
+ * Internal dependencies
+ */
+import { renderWrappedComponent } from '../utils';
+import { WriteItForMeButtonContainer } from './product-description-button-container';
+
+if ( window.JP_CONNECTION_INITIAL_STATE?.connectionStatus?.isActive ) {
+	renderWrappedComponent(
+		WriteItForMeButtonContainer,
+		document.getElementById( 'woocommerce-ai-app-product-gpt-button' )
+	);
+}

plugins/woo-ai/src/product-name/index.ts

@@ -1,3 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { renderWrappedComponent } from '../utils';
+import { ProductNameSuggestions } from './product-name-suggestions';
+
+if ( window.JP_CONNECTION_INITIAL_STATE?.connectionStatus?.isActive ) {
+	renderWrappedComponent(
+		ProductNameSuggestions,
+		document.getElementById( 'woocommerce-ai-app-product-name-suggestions' )
+	);
+}
+
 export * from './product-name-suggestions';
 export * from './powered-by-link';
 export * from './suggestion-item';

plugins/woo-ai/src/product-short-description/index.ts

@@ -1 +1,14 @@
-export * from './product-short-description-button-container';
+/**
+ * Internal dependencies
+ */
+import { renderWrappedComponent } from '../utils';
+import { WriteShortDescriptionButtonContainer } from './product-short-description-button-container';
+
+if ( window.JP_CONNECTION_INITIAL_STATE?.connectionStatus?.isActive ) {
+	renderWrappedComponent(
+		WriteShortDescriptionButtonContainer,
+		document.getElementById(
+			'woocommerce-ai-app-product-short-description-gpt-button'
+		)
+	);
+}

plugins/woo-ai/src/utils/index.ts

@@ -6,3 +6,4 @@ export * from './tiny-tools';
 export * from './productDataInstructionsGenerator';
 export * from './categorySelector';
 export * from './htmlEntities';
+export * from './renderWrappedComponent';

plugins/woo-ai/src/utils/renderWrappedComponent.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import * as elementExports from '@wordpress/element';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+const queryClient = new QueryClient();
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore Incorrect type definition for createRoot
+const { createRoot, render } = elementExports;
+
+export const renderWrappedComponent = (
+	Component: React.ComponentType,
+	rootElement: HTMLElement | null
+) => {
+	if ( ! rootElement ) {
+		return;
+	}
+
+	const WrappedComponent = () => (
+		<QueryClientProvider client={ queryClient }>
+			<Component />
+		</QueryClientProvider>
+	);
+
+	if ( createRoot ) {
+		createRoot( rootElement ).render( <WrappedComponent /> );
+	} else {
+		render( <WrappedComponent />, rootElement );
+	}
+};