v3.33.1

core/app/assets/js/hooks/use-feature-lock.js

@@ -0,0 +1,22 @@
+import ConnectButtonUI from '../ui/connect-button';
+import { htmlDecodeTextContent, replaceUtmPlaceholders } from '../utils';
+
+export default function useFeatureLock( featureName ) {
+	const appConfig = elementorAppProConfig[ featureName ] ?? {},
+		isLocked = appConfig.lock?.is_locked ?? false;
+
+	const buttonText = htmlDecodeTextContent( appConfig.lock?.button.text );
+	const buttonLink = replaceUtmPlaceholders(
+		appConfig.lock?.button.url ?? '',
+		appConfig.utms ?? {},
+	);
+
+	const ConnectButton = () => (
+		<ConnectButtonUI text={ buttonText } url={ buttonLink } />
+	);
+
+	return {
+		isLocked,
+		ConnectButton,
+	};
+}

core/app/assets/js/index.js

@@ -0,0 +1,5 @@
+import Module from '../../modules/site-editor/assets/js/site-editor';
+import ImportExportCustomizationModule from '../../modules/import-export-customization/assets/js/module';
+
+new Module();
+new ImportExportCustomizationModule();

core/app/assets/js/ui/connect-button.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { useRef, useEffect } from 'react';
+import { Button } from '@elementor/app-ui';
+import { arrayToClassName } from '../utils.js';
+
+const ConnectButton = ( props ) => {
+	const className = arrayToClassName( [
+		'e-app-connect-button',
+		props.className,
+	] );
+
+	const buttonRef = useRef( null );
+
+	useEffect( () => {
+		if ( ! buttonRef.current ) {
+			return;
+		}
+
+		jQuery( buttonRef.current ).elementorConnect();
+	}, [] );
+
+	return (
+		<Button
+			{ ...props }
+			elRef={ buttonRef }
+			className={ className }
+		/>
+	);
+};
+
+ConnectButton.propTypes = {
+	...Button.propTypes,
+	text: PropTypes.string.isRequired,
+	url: PropTypes.string.isRequired,
+	className: PropTypes.string,
+};
+
+ConnectButton.defaultProps = {
+	className: '',
+	variant: 'contained',
+	size: 'sm',
+	color: 'cta',
+	target: '_blank',
+	rel: 'noopener noreferrer',
+	text: __( 'Connect & Activate', 'elementor-pro' ),
+};
+
+export default React.memo( ConnectButton );

core/app/assets/js/utils.js

@@ -0,0 +1,29 @@
+// Copied from Core.
+export const arrayToClassName = ( array, action ) => {
+	return array
+		.filter( ( item ) => 'object' === typeof ( item ) ? Object.entries( item )[ 0 ][ 1 ] : item )
+		.map( ( item ) => {
+			const value = 'object' === typeof ( item ) ? Object.entries( item )[ 0 ][ 0 ] : item;
+
+			return action ? action( value ) : value;
+		} )
+		.join( ' ' );
+};
+
+export const htmlDecodeTextContent = ( input ) => {
+	const doc = new DOMParser().parseFromString( input, 'text/html' );
+	return doc.documentElement.textContent;
+};
+
+export const replaceUtmPlaceholders = ( link = '', utms = {} ) => {
+	if ( ! link || ! utms ) {
+		return link;
+	}
+
+	Object.keys( utms ).forEach( ( key ) => {
+		const match = new RegExp( `%%${ key }%%`, 'g' );
+		link = link.replace( match, utms[ key ] );
+	} );
+
+	return link;
+};