Merge pull request #2296 from Parsely/fix/pch-editor-sidebar-incorect…

…-ai-opt-in-message

PCH Editor Sidebar: Fix incorrect AI opt-in message

build/content-helper/dashboard-widget.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-url'), 'version' => '68d9813064fecfe775a1');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-url'), 'version' => '9d2937a55403c7a2c84f');

build/content-helper/editor-sidebar.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url'), 'version' => '17e829c27839c9ce2c3b');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url'), 'version' => '17c17c38e859a7a2cb72');

build/content-helper/excerpt-generator.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url', 'wp-wordcount'), 'version' => 'f7e99682a4b31332222f');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url', 'wp-wordcount'), 'version' => 'b8c5184c2f31db63e73a');

src/RemoteAPI/content-suggestions/class-content-suggestions-base-api.php

@@ -143,14 +143,24 @@ protected function post_request( array $query = array(), array $body = array() )
 				return new WP_Error( 400, __( 'Unable to encode request body', 'wp-parsely' ) );
 			}
 		}
+
 		$response = wp_safe_remote_post( $full_api_url, $options );
 		if ( is_wp_error( $response ) ) {
 			return $response;
 		}
 
+		// Handle any errors returned by the API.
 		if ( 200 !== $response['response']['code'] ) {
-			$error = $response['response'];
-			return new WP_Error( $error['code'], $error['message'] );
+			$error = json_decode( wp_remote_retrieve_body( $response ), true );
+
+			if ( ! is_array( $error ) ) {
+				return new WP_Error(
+					400,
+					__( 'Unable to decode upstream API error', 'wp-parsely' )
+				);
+			}
+
+			return new WP_Error( $error['error'], $error['detail'] );
 		}
 
 		$body    = wp_remote_retrieve_body( $response );

src/content-helper/common/content-helper-error.tsx

@@ -25,15 +25,20 @@ export enum ContentHelperErrorCode {
 	ParselyApiResponseContainsError = 'ch_response_contains_error',
 	ParselyApiReturnedNoData = 'ch_parsely_api_returned_no_data',
 	ParselyApiReturnedTooManyResults = 'ch_parsely_api_returned_too_many_results',
-	ParselyApiUnauthorized = 401, // Intentionally without quotes.
-	ParselyInternalServerError = 500, // Intentionally without quotes.
-	ParselySchemaValidationFailed = 422, // Intentionally without quotes.
-	ParselyUpstreamMalformedResponse = 507, // Intentionally without quotes.
-	ParselyUpstreamNotAvailable = 503, // Intentionally without quotes.
 	PluginCredentialsNotSetMessageDetected = 'parsely_credentials_not_set_message_detected',
 	PluginSettingsApiSecretNotSet = 'parsely_api_secret_not_set',
 	PluginSettingsSiteIdNotSet = 'parsely_site_id_not_set',
 	PostIsNotPublished = 'ch_post_not_published',
+
+	// Suggestions API.
+	ParselySuggestionsApiAuthUnavailable = 'AUTH_UNAVAILABLE', // HTTP Code 503.
+	ParselySuggestionsApiNoAuthentication = 'NO_AUTHENTICATION', // HTTP Code 401.
+	ParselySuggestionsApiNoAuthorization = 'NO_AUTHORIZATION', // HTTP Code 403.
+	ParselySuggestionsApiNoData = 'NO_DATA', // HTTP Code 507.
+	ParselySuggestionsApiOpenAiError = 'OPENAI_ERROR', // HTTP Code 500.
+	ParselySuggestionsApiOpenAiSchema = 'OPENAI_SCHEMA', // HTTP Code 507.
+	ParselySuggestionsApiOpenAiUnavailable = 'OPENAI_UNAVAILABLE', // HTTP Code 500.
+	ParselySuggestionsApiSchemaError = 'SCHEMA_ERROR', // HTTP Code 422.
 }
 
 /**
@@ -57,11 +62,21 @@ export class ContentHelperError extends Error {
 			ContentHelperErrorCode.ParselyApiResponseContainsError,
 			ContentHelperErrorCode.ParselyApiReturnedNoData,
 			ContentHelperErrorCode.ParselyApiReturnedTooManyResults,
-			ContentHelperErrorCode.ParselyApiUnauthorized,
 			ContentHelperErrorCode.PluginCredentialsNotSetMessageDetected,
 			ContentHelperErrorCode.PluginSettingsApiSecretNotSet,
 			ContentHelperErrorCode.PluginSettingsSiteIdNotSet,
 			ContentHelperErrorCode.PostIsNotPublished,
+
+			// Don't perform any fetch retries for the Suggestions API due to
+			// its time-consuming operations.
+			ContentHelperErrorCode.ParselySuggestionsApiAuthUnavailable,
+			ContentHelperErrorCode.ParselySuggestionsApiNoAuthentication,
+			ContentHelperErrorCode.ParselySuggestionsApiNoAuthorization,
+			ContentHelperErrorCode.ParselySuggestionsApiNoData,
+			ContentHelperErrorCode.ParselySuggestionsApiOpenAiError,
+			ContentHelperErrorCode.ParselySuggestionsApiOpenAiSchema,
+			ContentHelperErrorCode.ParselySuggestionsApiOpenAiUnavailable,
+			ContentHelperErrorCode.ParselySuggestionsApiSchemaError,
 		];
 
 		this.retryFetch = ! noRetryFetchErrors.includes( this.code );
@@ -70,15 +85,16 @@ export class ContentHelperError extends Error {
 		Object.setPrototypeOf( this, ContentHelperError.prototype );
 
 		// Errors that need rephrasing.
-		if ( this.code === ContentHelperErrorCode.ParselyApiUnauthorized ) {
+		if ( this.code === ContentHelperErrorCode.ParselySuggestionsApiNoAuthorization ) {
 			this.message = __(
 				'This AI-powered feature is opt-in. To gain access, please submit a request ' +
 				'<a href="https://wpvip.com/parsely-content-helper/" target="_blank" rel="noreferrer">here</a>.',
 				'wp-parsely'
 			);
-		} else if ( this.code === ContentHelperErrorCode.ParselyInternalServerError ) {
+		} else if ( this.code === ContentHelperErrorCode.ParselySuggestionsApiOpenAiError ||
+			this.code === ContentHelperErrorCode.ParselySuggestionsApiOpenAiUnavailable ) {
 			this.message = __(
-				'The Parse.ly API returned an internal server error. Please try again later.',
+				'The Parse.ly API returned an internal server error. Please retry with a different input, or try again later.',
 				'wp-parsely'
 			);
 		} else if ( this.code === ContentHelperErrorCode.HttpRequestFailed &&
@@ -87,23 +103,22 @@ export class ContentHelperError extends Error {
 				'The Parse.ly API did not respond in a timely manner. Please try again later.',
 				'wp-parsely'
 			);
-		} else if ( this.code === ContentHelperErrorCode.ParselySchemaValidationFailed ) {
+		} else if ( this.code === ContentHelperErrorCode.ParselySuggestionsApiSchemaError ) {
 			this.message = __(
-				'The Parse.ly API returned a validation error. Please try again later.',
+				'The Parse.ly API returned a validation error. Please try again with different parameters.',
 				'wp-parsely'
 			);
-		} else if ( this.code === ContentHelperErrorCode.ParselyUpstreamMalformedResponse &&
-			this.message.includes( 'Insufficient Storage' ) ) {
+		} else if ( this.code === ContentHelperErrorCode.ParselySuggestionsApiNoData ) {
 			this.message = __(
 				'The Parse.ly API couldn\'t find any relevant data to fulfill the request. Please retry with a different input.',
 				'wp-parsely'
 			);
-		} else if ( this.code === ContentHelperErrorCode.ParselyUpstreamMalformedResponse ) {
+		} else if ( this.code === ContentHelperErrorCode.ParselySuggestionsApiOpenAiSchema ) {
 			this.message = __(
-				'The Parse.ly API returned a malformed response. Please try again later.',
+				'The Parse.ly API returned an incorrect response. Please try again later.',
 				'wp-parsely'
 			);
-		} else if ( this.code === ContentHelperErrorCode.ParselyUpstreamNotAvailable ) {
+		} else if ( this.code === ContentHelperErrorCode.ParselySuggestionsApiAuthUnavailable ) {
 			this.message = __(
 				'The Parse.ly API is currently unavailable. Please try again later.',
 				'wp-parsely'
@@ -136,7 +151,8 @@ export class ContentHelperError extends Error {
 				'wp-parsely'
 			) );
 		}
-		if ( this.code === ContentHelperErrorCode.ParselyApiForbidden ) {
+		if ( this.code === ContentHelperErrorCode.ParselyApiForbidden ||
+			this.code === ContentHelperErrorCode.ParselySuggestionsApiNoAuthentication ) {
 			this.hint = this.Hint( __(
 				"Please ensure that the Site ID and API Secret given in the plugin's settings are correct.",
 				'wp-parsely'

src/content-helper/editor-sidebar/editor-sidebar.scss

@@ -36,6 +36,22 @@ p.content-helper-error-message-hint {
 	color: var(--gray-700);
 }
 
+// Notice components with errors that appear within Sidebar panels.
+.wp-parsely-content-helper-error.components-notice {
+
+	.components-notice__content {
+		margin: 0;
+
+		.content-helper-error-message {
+			margin-top: 0 !important;
+
+			p:last-child {
+				margin-bottom: 0 !important;
+			}
+		}
+	}
+}
+
 .wp-parsely-content-helper {
 
 	.wp-parsely-sidebar-header {

src/content-helper/editor-sidebar/smart-linking/component.tsx

@@ -8,7 +8,7 @@ import { useDebounce } from '@wordpress/compose';
 import { dispatch, select, useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { external, Icon } from '@wordpress/icons';
+import { Icon, external } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -512,7 +512,7 @@ export const SmartLinkingPanel = ( {
 				</div>
 				{ error && (
 					<Notice status="info" isDismissible={ false } className="wp-parsely-content-helper-error">
-						{ error.message }
+						{ error.Message() }
 					</Notice>
 				) }
 				{ suggestedLinks !== null && (

src/content-helper/editor-sidebar/title-suggestions/component.tsx

@@ -5,7 +5,7 @@ import { Button, Notice, PanelRow } from '@wordpress/components';
 import { dispatch, useDispatch, useSelect } from '@wordpress/data';
 import { createInterpolateElement, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Icon, external } from '@wordpress/icons';
+import { external, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -248,7 +248,7 @@ export const TitleSuggestionsPanel = (): JSX.Element => {
 				</div>
 				{ error && (
 					<Notice status="info" isDismissible={ false } className="wp-parsely-content-helper-error">
-						{ error.message }
+						{ error.Message() }
 					</Notice>
 				) }
 				{ ( originalTitle !== undefined ) && (

src/content-helper/editor-sidebar/title-suggestions/title-suggestions.scss

@@ -186,6 +186,9 @@
 		align-self: stretch;
 	}
 
+	.wp-parsely-content-helper-error.components-notice {
+		margin-bottom: var(--grid-unit-10, to_rem(8px));
+	}
 }
 
 .wp-parsely-popover .components-popover__content {