@elementor/editor-audits 4.4.0-1074 → 4.4.0-1076

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-audits",
-  "version": "4.4.0-1074",
+  "version": "4.4.0-1076",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,19 +39,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.4.0-1074",
-    "@elementor/editor-mcp": "4.4.0-1074",
-    "@elementor/editor-app-bar": "4.4.0-1074",
-    "@elementor/editor-elements": "4.4.0-1074",
-    "@elementor/editor-floating-panels": "4.4.0-1074",
-    "@elementor/editor-notifications": "4.4.0-1074",
-    "@elementor/editor-v1-adapters": "4.4.0-1074",
-    "@elementor/events": "4.4.0-1074",
-    "@elementor/http-client": "4.4.0-1074",
+    "@elementor/editor": "4.4.0-1076",
+    "@elementor/editor-mcp": "4.4.0-1076",
+    "@elementor/editor-app-bar": "4.4.0-1076",
+    "@elementor/editor-elements": "4.4.0-1076",
+    "@elementor/editor-floating-panels": "4.4.0-1076",
+    "@elementor/editor-notifications": "4.4.0-1076",
+    "@elementor/editor-v1-adapters": "4.4.0-1076",
+    "@elementor/events": "4.4.0-1076",
+    "@elementor/http-client": "4.4.0-1076",
     "@elementor/icons": "~1.77.0",
-    "@elementor/locations": "4.4.0-1074",
-    "@elementor/session": "4.4.0-1074",
-    "@elementor/store": "4.4.0-1074",
+    "@elementor/locations": "4.4.0-1076",
+    "@elementor/session": "4.4.0-1076",
+    "@elementor/store": "4.4.0-1076",
     "@elementor/ui": "1.37.5"
   },
   "peerDependencies": {

package/src/api/page-context-client.ts

@@ -1,19 +1,38 @@
 import { httpService } from '@elementor/http-client';
 
 import { type PageContextResponse } from '../types';
+import { isNonceInvalidError, refreshAuditsNonce } from '../utils/session-expiration';
 import { getWindowConfig } from '../utils/window-config';
 
 export async function fetchPageContext( documentId: number, attachmentIds: number[] ): Promise< PageContextResponse > {
+	return requestPageContext( documentId, attachmentIds, true );
+}
+
+async function requestPageContext(
+	documentId: number,
+	attachmentIds: number[],
+	allowNonceRetry: boolean
+): Promise< PageContextResponse > {
 	const { restNamespace, nonce } = getWindowConfig();
 	const url = `${ restNamespace }/audits/page-context`;
 
-	const response = await httpService().get< PageContextResponse >( url, {
-		params: {
-			document_id: documentId,
-			attachment_ids: attachmentIds,
-		},
-		headers: { 'X-WP-Nonce': nonce },
-	} );
+	try {
+		const response = await httpService().get< PageContextResponse >( url, {
+			params: {
+				document_id: documentId,
+				attachment_ids: attachmentIds,
+			},
+			headers: { 'X-WP-Nonce': nonce },
+		} );
+
+		return response.data;
+	} catch ( error ) {
+		if ( ! allowNonceRetry || ! isNonceInvalidError( error ) ) {
+			throw error;
+		}
+
+		await refreshAuditsNonce();
 
-	return response.data;
+		return requestPageContext( documentId, attachmentIds, false );
+	}
 }

package/src/audits/privacy-policy.ts

@@ -28,6 +28,7 @@ export const audit: Audit = {
 					auditId: audit.id,
 					label: __( 'No privacy policy page is set.', 'elementor' ),
 					externalUrl: ctx.pageContext.privacy_settings_url,
+					ctaLabel: __( 'Create', 'elementor' ),
 				},
 			],
 		};

package/src/components/violation-cta-button.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Button } from '@elementor/ui';
+
+type Props = {
+	ctaLabel: string;
+	externalUrl: string;
+};
+
+export default function ViolationCtaButton( { ctaLabel, externalUrl }: Props ) {
+	const handleClick = ( event: React.MouseEvent< HTMLButtonElement > ) => {
+		event.stopPropagation();
+		event.preventDefault();
+
+		window.open( externalUrl, '_blank', 'noopener' );
+	};
+
+	return (
+		<Button variant="outlined" color="secondary" size="small" onClick={ handleClick }>
+			{ ctaLabel }
+		</Button>
+	);
+}

package/src/components/violation-row.tsx

@@ -11,6 +11,7 @@ import { buildAngiePrompt } from '../utils/build-angie-prompt';
 import { onKeyboardClick } from '../utils/keyboard-click';
 import FixViolationWithAngie from './fix-violation-with-angie';
 import SeverityIcon from './severity-icons';
+import ViolationCtaButton from './violation-cta-button';
 import ViolationIcon from './violation-icons';
 
 type Props = {
@@ -157,7 +158,18 @@ export default function ViolationRow( { audit, skipReason, violations }: Props )
 									{ violation.angieFix && (
 										<FixViolationWithAngie prompt={ buildAngiePrompt( rowLabel ) } />
 									) }
-									<EyeIcon className="violation-hover-icon" fontSize="tiny" aria-hidden={ true } />
+									{ violation.ctaLabel && violation.externalUrl ? (
+										<ViolationCtaButton
+											ctaLabel={ violation.ctaLabel }
+											externalUrl={ violation.externalUrl }
+										/>
+									) : (
+										<EyeIcon
+											className="violation-hover-icon"
+											fontSize="tiny"
+											aria-hidden={ true }
+										/>
+									) }
 								</Box>
 							);
 						} ) }

package/src/hooks/use-audit-report.ts

@@ -5,6 +5,7 @@ import { __useDispatch as useDispatch, __useSelector as useSelector } from '@ele
 import { runPageAudit } from '../runner';
 import { type GlobalState, selectError, selectReport, selectStatus, slice } from '../store';
 import { getPersistedReport, persistReport } from '../utils/report-storage';
+import { SessionExpiredError } from '../utils/session-expiration';
 
 export function useAuditReport() {
 	const status = useSelector( ( state: GlobalState ) => selectStatus( state ) );
@@ -35,6 +36,11 @@ export function useAuditReport() {
 			dispatch( slice.actions.runSucceeded( nextReport ) );
 			persistReport( documentIdToRun, nextReport );
 		} catch ( e ) {
+			if ( e instanceof SessionExpiredError ) {
+				dispatch( slice.actions.runAborted() );
+				return;
+			}
+
 			dispatch( slice.actions.runFailed( e instanceof Error ? e.message : 'Unknown error' ) );
 		}
 	};

package/src/store/slice.ts

@@ -26,6 +26,9 @@ export const slice = __createSlice( {
 			state.status = 'error';
 			state.error = action.payload;
 		},
+		runAborted( state ) {
+			state.status = state.report ? 'ready' : 'idle';
+		},
 		reportRestored( state, action: PayloadAction< PageAuditReport > ) {
 			state.status = 'ready';
 			state.report = action.payload;

package/src/types.ts

@@ -38,6 +38,7 @@ export type AuditViolation = {
 	label: string;
 	detail?: string;
 	angieFix?: boolean;
+	ctaLabel?: string;
 };
 
 export type PageContextResponse = {

package/src/utils/session-expiration.ts

@@ -0,0 +1,63 @@
+import { getWindowConfig } from './window-config';
+
+const NONCE_INVALID_CODE = 'rest_cookie_invalid_nonce';
+const DEFAULT_AJAX_URL = '/wp-admin/admin-ajax.php';
+
+type AjaxErrorLikeResponse = {
+	status?: number;
+	data?: { code?: string };
+};
+
+type AjaxErrorLike = {
+	response?: AjaxErrorLikeResponse;
+};
+
+type SessionWindow = Window & {
+	elementorCommon?: { ajax?: { config?: { url?: string } } };
+};
+
+export class SessionExpiredError extends Error {}
+
+let nonceRefreshPromise: Promise< string > | null = null;
+
+export function isNonceInvalidError( error: unknown ): boolean {
+	const response = ( error as AjaxErrorLike | undefined )?.response;
+
+	return response?.status === 403 && response?.data?.code === NONCE_INVALID_CODE;
+}
+
+export async function refreshAuditsNonce(): Promise< string > {
+	if ( nonceRefreshPromise ) {
+		return nonceRefreshPromise;
+	}
+
+	nonceRefreshPromise = requestFreshNonce();
+
+	try {
+		return await nonceRefreshPromise;
+	} finally {
+		nonceRefreshPromise = null;
+	}
+}
+
+async function requestFreshNonce(): Promise< string > {
+	const ajaxUrl = ( window as SessionWindow ).elementorCommon?.ajax?.config?.url ?? DEFAULT_AJAX_URL;
+	const url = new URL( ajaxUrl, window.location.origin );
+	url.searchParams.set( 'action', 'rest-nonce' );
+
+	const response = await fetch( url.toString(), { credentials: 'same-origin' } );
+
+	if ( ! response.ok ) {
+		throw new Error( `Failed to refresh audits nonce: HTTP ${ response.status }` );
+	}
+
+	const nonce = await response.text();
+
+	if ( ! nonce || '0' === nonce ) {
+		throw new SessionExpiredError( 'Session expired — received invalid nonce' );
+	}
+
+	window.elementorAudits = { ...getWindowConfig(), nonce };
+
+	return nonce;
+}