fix: Woo functionality based on API key Verification Failed or Expired

admin/class-rtgodam-transcoder-admin.php

@@ -856,6 +856,22 @@ public function expired_api_key_notice() {
 			return;
 		}
 
+		// rtgodam_get_api_key_status() only reads the persistent DB status option
+		// ('rtgodam-api-key-status') which can NEVER contain 'verification_failed'
+		// because that state is transient and not persistable. The actual runtime
+		// status — including transient 'verification_failed' — is stored in the
+		// 'rtgodam_user_data' option by rtgodam_get_user_data(). Read from there
+		// so we don't show a false "expired" banner when the server is temporarily
+		// unreachable.
+		$cached_user_data = get_option( 'rtgodam_user_data', array() );
+		$runtime_status   = isset( $cached_user_data['api_key_status'] )
+			? $cached_user_data['api_key_status']
+			: rtgodam_get_api_key_status();
+
+		if ( \RTGODAM\Inc\Enums\Api_Key_Status::VERIFICATION_FAILED === $runtime_status ) {
+			return;
+		}
+
 		$pricing_url = add_query_arg(
 			array(
 				'utm_campaign' => 'expired-key',

pages/video-editor/VideoJSPlayer.js

@@ -52,6 +52,8 @@ const layerTypes = [
 		icon: thumbsUp,
 		type: 'poll',
 	},
+	// Merge add-on layer types registered via PHP filters (e.g. WooCommerce).
+	...( window.godamVideoEditorConfig?.layerOptions || [] ),
 ];
 
 export const VideoJS = ( props ) => {
@@ -681,7 +683,13 @@ const Slider = ( props ) => {
 							>
 								<div className="layer-indicator--container">
 									<div className={ `icon ${ layer.id === currentLayerID ? 'active' : '' }` }>
-										<Icon icon={ layerTypes.find( ( type ) => type.type === layer.type )?.icon } />
+										{ ( () => {
+											const layerType = layerTypes.find( ( type ) => type.type === layer.type );
+											if ( layerType?.iconUrl ) {
+												return <img src={ layerType.iconUrl } alt={ layerType.title } className="layer-indicator__addon-icon" />;
+											}
+											return <Icon icon={ layerType?.icon } />;
+										} )() }
 										<div>
 											{ layer?.type?.toUpperCase() }
 											{

pages/video-editor/components/SidebarLayers.js

@@ -290,10 +290,13 @@ const SidebarLayers = ( { currentTime, onSelectLayer, onPauseVideo, duration } )
 									addWarning = true;
 								}
 
+								// Disable the button when the required plugin/feature is inactive
+								// (e.g. form plugin not installed, or WooCommerce layer API key missing/expired).
+								const isLayerDisabled = ( formType && ! formType.isActive ) || layerData?.isActive === false;
+
 								return (
 									<Tooltip
 										key={ layer.id }
-										className="w-full flex justify-between items-center px-2 py-3 border rounded-md mb-2 hover:bg-gray-50 cursor-pointer"
 										text={ tooltipMessage }
 										placement="right"
 									>
@@ -304,6 +307,7 @@ const SidebarLayers = ( { currentTime, onSelectLayer, onPauseVideo, duration } )
 													dispatch( setCurrentLayer( layer ) );
 													onSelectLayer( layer.displayTime );
 												} }
+												disabled={ isLayerDisabled }
 											>
 												<div className="flex items-center gap-2">
 													{

pages/video-editor/style.scss

@@ -246,6 +246,16 @@
 				}
 			}
 
+			// Add-on layer icon (e.g. WooCommerce) rendered as <img>.
+			// Matches the intrinsic 24x24 size of the WordPress <Icon> SVG component.
+			.layer-indicator__addon-icon {
+				width: 20px;
+				height: 20px;
+				display: block;
+				flex-shrink: 0;
+				margin: 2px;
+			}
+
 			.info {
 				position: absolute;
 				bottom: -3rem;