Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Joel Thiessen 2023-10-23 07:56:49 -07:00 committed by GitHub
parent 2fb59293ad
commit a84538554b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 115 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woo-ai/changelog/update-background-removal-elligibility-40917 Normal file
View File

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

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

@ -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(
`#${ LINK_CONTAINER_ID }`
renderWrappedComponent(
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 = () => {
},
}
);
};
} )();

73
plugins/woo-ai/src/index.js
View File

@ -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
);
}

14
plugins/woo-ai/src/index.ts Normal file
View File

@ -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();

16
plugins/woo-ai/src/product-category/index.ts
View File

@ -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 );
}

13
plugins/woo-ai/src/product-description/index.ts
View File

@ -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' )
);
}

13
plugins/woo-ai/src/product-name/index.ts
View File

@ -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';

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

@ -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'
)
);
}

1
plugins/woo-ai/src/utils/index.ts
View File

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

32
plugins/woo-ai/src/utils/renderWrappedComponent.tsx Normal file
View File

@ -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 );
}
};