lazy load cimo notice, display notice in image control

Author: kaeizen

.config/webpack.config.dev.js

@@ -178,7 +178,6 @@ module.exports = [
 		'frontend_block_horizontal_scroller': path.resolve( __dirname, '../src/block/horizontal-scroller/frontend-horizontal-scroller.js' ),
 		'frontend_block_tabs': path.resolve( __dirname, '../src/block/tabs/frontend-tabs.js' ),
 		'frontend_image_optimizer_polyfill': path.resolve( __dirname, '../src/block-components/image/image-optimizer-polyfill.js' ),
-		'stk_cimo_notice': path.resolve( __dirname, '../src/compatibility/cimo/index.js' ),
 	},
 
 	output: {

.config/webpack.config.prod.js

@@ -163,7 +163,6 @@ module.exports = [
 		'frontend_block_horizontal_scroller': path.resolve( __dirname, '../src/block/horizontal-scroller/frontend-horizontal-scroller.js' ),
 		'frontend_block_tabs': path.resolve( __dirname, '../src/block/tabs/frontend-tabs.js' ),
 		'frontend_image_optimizer_polyfill': path.resolve( __dirname, '../src/block-components/image/image-optimizer-polyfill.js' ),
-		'stk_cimo_notice': path.resolve( __dirname, '../src/compatibility/cimo/index.js' ),
 	},
 
 	output: {

plugin.php

@@ -288,6 +288,10 @@ function is_frontend() {
 require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/block-styles/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/css-optimize.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/compatibility/index.php' );
+
+// For cross-selling
+require_once( plugin_dir_path( __FILE__ ) . 'src/lazy-components/cimo/index.php' );
+
 if ( ! is_admin() ) {
 	require_once( plugin_dir_path( __FILE__ ) . 'src/lightbox/index.php' );
 	require_once( plugin_dir_path( __FILE__ ) . 'src/block/accordion/index.php' );

src/compatibility/cimo/index.js

@@ -9,4 +9,3 @@
 require_once( plugin_dir_path( __FILE__ ) . './ewww.php' );
 require_once( plugin_dir_path( __FILE__ ) . './woocommerce.php' );
 require_once( plugin_dir_path( __FILE__ ) . './blocksy/index.php' );
-require_once( plugin_dir_path( __FILE__ ) . './cimo/index.php' );

src/compatibility/cimo/index.php

@@ -11,7 +11,7 @@ import Button from '../button'
  * External dependencies
  */
 import classnames from 'classnames'
-import { i18n } from 'stackable'
+import { i18n, cimo } from 'stackable'
 import {
 	useAttributeName, useBlockAttributesContext, useBlockSetAttributesContext,
 } from '~stackable/hooks'
@@ -20,8 +20,11 @@ import {
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n'
-import { Fragment, memo } from '@wordpress/element'
+import {
+	Fragment, memo, useEffect, useState,
+} from '@wordpress/element'
 import { MediaUpload } from '@wordpress/block-editor'
+import { currentUserHasCapability } from '~stackable/util'
 
 const ImageControl = memo( props => {
 	const attrNameId = useAttributeName( `${ props.attribute }Id`, props.responsive, props.hover )
@@ -81,7 +84,37 @@ const ImageControl = memo( props => {
 		} )
 	}
 
-	return (
+	const [ CimoDownloadNotice, setCimoDownloadNotice ] = useState( null )
+
+	useEffect( () => {
+		// Skip displaying the Cimo notice if the plugin is already activated or the user has chosen to hide the notice
+		if ( ! cimo || cimo.hideNotice || cimo.status === 'activated' ) {
+			return
+		}
+
+		const userCanInstall = currentUserHasCapability( 'install_plugins' )
+		const userCanActivate = currentUserHasCapability( 'activate_plugins' )
+		// Show the Cimo notice only if the user has permissions to install or activate plugins
+		if ( ( cimo.status === 'not_installed' && userCanInstall ) || ( cimo.status === 'installed' && userCanActivate ) ) {
+			const loadNotice = async () => {
+				try {
+					// Import the Cimo notice component with explicit chunk naming
+					const { default: CimoNoticeComponent } = await import(
+						/* webpackChunkName: "cimo-download-notice" */
+						/* webpackMode: "lazy" */
+						'../../lazy-components/cimo'
+					)
+					setCimoDownloadNotice( () => CimoNoticeComponent )
+				} catch ( err ) {
+					// eslint-disable-next-line no-console
+					console.error( 'Failed to load Cimo download notice component:', err )
+				}
+			}
+			loadNotice()
+		}
+	}, [] )
+
+	return ( <>
 		<AdvancedControl
 			{ ...controlProps }
 			valueCheckAttribute={ props.attribute + 'Url' }
@@ -112,7 +145,7 @@ const ImageControl = memo( props => {
 										/>
 									) }
 									{ type === 'image' && (
-									// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+										// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
 										<img
 											className="ugb-image-preview"
 											draggable="false"
@@ -172,6 +205,8 @@ const ImageControl = memo( props => {
 				hasPanelModifiedIndicator={ props.hasPanelModifiedIndicator }
 			/>
 		</AdvancedControl>
+		{ CimoDownloadNotice && <CimoDownloadNotice onDismiss={ () => setCimoDownloadNotice( null ) } /> }
+	</>
 	)
 } )
 

src/compatibility/index.php

@@ -349,6 +349,7 @@ public function register_block_editor_assets() {
 				'version' => array_shift( $version_parts ),
 				'wpVersion' => ! empty( $wp_version ) ? preg_replace( '/-.*/', '', $wp_version ) : $wp_version, // Ensure semver, strip out after dash
 				'adminUrl' => admin_url(),
+				'ajaxUrl' => admin_url('admin-ajax.php'),
 
 				// Fonts.
 				'locale' => get_locale(),