23302 manage user consent through yoast ai

packages/js/src/ai-consent/components/revoke-consent.js

@@ -2,7 +2,7 @@ import ExclamationIcon from "@heroicons/react/outline/ExclamationIcon";
 import { useDispatch, useSelect } from "@wordpress/data";
 import { useCallback, useState } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
-import { Alert, Button, Modal } from "@yoast/ui-library";
+import { Button, Modal } from "@yoast/ui-library";
 
 import { STORE_NAME_AI_CONSENT } from "../constants";
 
@@ -14,26 +14,22 @@ import { STORE_NAME_AI_CONSENT } from "../constants";
  * @returns {JSX.Element} The element.
  */
 export const RevokeConsent = ( { onClose } ) => {
-	const { storeAiGeneratorConsent } = useDispatch( STORE_NAME_AI_CONSENT );
+	const { storeAiGeneratorConsent, giveAiGeneratorConsent } = useDispatch( STORE_NAME_AI_CONSENT );
 	const endpoint = useSelect( select => select( STORE_NAME_AI_CONSENT ).selectAiGeneratorConsentEndpoint(), [] );
 
 	const [ isLoading, setIsLoading ] = useState( false );
-	const [ error, setError ] = useState( false );
 
 	const handleRevokeConsent = useCallback( async() => {
-		setError( false );
 		setIsLoading( true );
 
-		const response = await storeAiGeneratorConsent( false, endpoint );
-		if ( response.consent === false ) {
-			setError( true );
-			setIsLoading( false );
-			return;
-		}
+		await storeAiGeneratorConsent( false, endpoint );
+		// The backend always revokes consent locally, even when the remote call fails, so the
+		// local store must reflect that regardless of the request's outcome.
+		giveAiGeneratorConsent( false );
 		onClose();
 
 		setIsLoading( false );
-	}, [ storeAiGeneratorConsent, setIsLoading, onClose, endpoint ] );
+	}, [ storeAiGeneratorConsent, giveAiGeneratorConsent, setIsLoading, onClose, endpoint ] );
 
 	return (
 		<div className="yst-flex yst-flex-row">
@@ -52,12 +48,6 @@ export const RevokeConsent = ( { onClose } ) => {
 				>
 					{ __( "Revoke AI consent", "wordpress-seo" ) }
 				</Modal.Title>
-				{ error && <Alert
-					className="yst-mt-2"
-					variant="error"
-				>
-					{ __( "Something went wrong, please try again later.", "wordpress-seo" ) }
-				</Alert> }
 				<p className="yst-mt-2 yst-text-slate-600">
 					{   }
 					{ __( "By revoking your consent, you will no longer have access to Yoast AI features. Are you sure you want to revoke your consent?", "wordpress-seo" ) }

packages/js/src/ai-consent/initialize.js

@@ -5,7 +5,7 @@ import { __ } from "@wordpress/i18n";
 import { Modal, useToggleState } from "@yoast/ui-library";
 import classNames from "classnames";
 import { get } from "lodash";
-import { HAS_AI_GENERATOR_CONSENT_NAME, PLUGIN_URL_NAME, LINK_PARAMS_NAME } from "../shared-admin/store";
+import { ADMIN_URL_NAME, HAS_AI_GENERATOR_CONSENT_NAME, PLUGIN_URL_NAME, LINK_PARAMS_NAME } from "../shared-admin/store";
 import { GrantConsent } from "./components/grant-consent";
 import { RevokeConsent } from "./components/revoke-consent";
 import { STORE_NAME_AI_CONSENT } from "./constants";
@@ -19,6 +19,7 @@ domReady( () => {
 		},
 		[ PLUGIN_URL_NAME ]: get( window, "wpseoAiConsent.pluginUrl", "" ),
 		[ LINK_PARAMS_NAME ]: get( window, "wpseoAiConsent.linkParams", {} ),
+		[ ADMIN_URL_NAME ]: get( window, "wpseoAiConsent.adminUrl", "" ),
 	} );
 
 	/**

packages/js/src/ai-consent/store/index.js

@@ -1,6 +1,11 @@
 import { combineReducers, createReduxStore, register } from "@wordpress/data";
 import { merge } from "lodash";
 import {
+	ADMIN_URL_NAME,
+	adminUrlActions,
+	adminUrlReducer,
+	adminUrlSelectors,
+	getInitialAdminUrlState,
 	getInitialHasAiGeneratorConsentState,
 	getInitialLinkParamsState,
 	getInitialPluginUrlState,
@@ -32,25 +37,29 @@ const createStore = ( initialState ) => {
 			...hasAiGeneratorConsentActions,
 			...pluginUrlActions,
 			...linkParamsActions,
+			...adminUrlActions,
 		},
 		selectors: {
 			...hasAiGeneratorConsentSelectors,
 			...pluginUrlSelectors,
 			...linkParamsSelectors,
+			...adminUrlSelectors,
 		},
 		initialState: merge(
 			{},
 			{
 				[ HAS_AI_GENERATOR_CONSENT_NAME ]: getInitialHasAiGeneratorConsentState(),
 				[ PLUGIN_URL_NAME ]: getInitialPluginUrlState(),
 				[ LINK_PARAMS_NAME ]: getInitialLinkParamsState(),
+				[ ADMIN_URL_NAME ]: getInitialAdminUrlState(),
 			},
 			initialState
 		),
 		reducer: combineReducers( {
 			[ HAS_AI_GENERATOR_CONSENT_NAME ]: hasAiGeneratorConsentReducer,
 			[ PLUGIN_URL_NAME ]: pluginUrlReducer,
 			[ LINK_PARAMS_NAME ]: linkParamsReducer,
+			[ ADMIN_URL_NAME ]: adminUrlReducer,
 		} ),
 		controls: {
 			...hasAiGeneratorConsentControls,

packages/js/src/ai-generator/components/errors/generic-alert.js

@@ -1,19 +1,26 @@
 import { useSelect } from "@wordpress/data";
 import { __, sprintf } from "@wordpress/i18n";
 import { Alert } from "@yoast/ui-library";
+import PropTypes from "prop-types";
 import { safeCreateInterpolateElement } from "../../../helpers/i18n";
 import { OutboundLink } from "../../../shared-admin/components";
 import { STORE_NAME_EDITOR } from "../../constants";
 
 /**
+ * @param {string} [linkStoreName] The store to read the common-errors and support links from.
+ *                                  Defaults to the block editor's store; pass a different store
+ *                                  name when rendering outside the block editor (e.g. the AI
+ *                                  consent screen on the user profile page).
+ * @param {string} [className] An optional class name.
+ *
  * @returns {JSX.Element} The element.
  */
-export const GenericAlert = () => {
-	const commonErrorsLink = useSelect( select => select( STORE_NAME_EDITOR ).selectLink( "https://yoa.st/ai-common-errors" ), [] );
-	const supportLink = useSelect( select => select( STORE_NAME_EDITOR ).selectAdminLink( "?page=wpseo_page_support" ), [] );
+export const GenericAlert = ( { linkStoreName = STORE_NAME_EDITOR, className = "" } ) => {
+	const commonErrorsLink = useSelect( select => select( linkStoreName ).selectLink( "https://yoa.st/ai-common-errors" ), [ linkStoreName ] );
+	const supportLink = useSelect( select => select( linkStoreName ).selectAdminLink( "?page=wpseo_page_support" ), [ linkStoreName ] );
 
 	return (
-		<Alert variant="error">
+		<Alert variant="error" className={ className }>
 			<span className="yst-block yst-font-medium">{ __( "Something went wrong", "wordpress-seo" ) }</span>
 			<p className="yst-mt-2">
 				{ safeCreateInterpolateElement(
@@ -35,3 +42,7 @@ export const GenericAlert = () => {
 		</Alert>
 	);
 };
+GenericAlert.propTypes = {
+	linkStoreName: PropTypes.string,
+	className: PropTypes.string,
+};

packages/js/src/shared-admin/components/ai-consent.js

@@ -1,6 +1,7 @@
 import ArrowNarrowRightIcon from "@heroicons/react/solid/ArrowNarrowRightIcon";
-import { useMemo, useCallback } from "@wordpress/element";
+import { useMemo, useCallback, useState } from "@wordpress/element";
 import { __, sprintf } from "@wordpress/i18n";
+import { GenericAlert } from "../../ai-generator/components/errors";
 import { Button, useModalContext, useToggleState, Spinner } from "@yoast/ui-library";
 import PropTypes from "prop-types";
 import { OutboundLink } from ".";
@@ -14,6 +15,7 @@ import { safeCreateInterpolateElement } from "../../helpers/i18n";
  * @param {string} privacyPolicyLink The privacy policy link.
  * @param {string} termsOfServiceLink The terms of service link.
  * @param {Object} imageLink The thumbnail: img props.
+ * @param {string} linkStoreName The store to read the error alert's links from.
  *
  * @returns {JSX.Element} The element.
  */
@@ -23,9 +25,11 @@ export const AiConsent = ( {
 	privacyPolicyLink,
 	termsOfServiceLink,
 	imageLink,
+	linkStoreName,
 } ) => {
 	const { onClose, initialFocus } = useModalContext();
 	const [ consent, toggleConsent ] = useToggleState( false );
+	const [ error, setError ] = useState( false );
 
 	const thumbnail = useMemo( () => ( {
 		src: imageLink,
@@ -55,7 +59,10 @@ export const AiConsent = ( {
 	const [ loading, toggleLoading ] = useToggleState( false );
 	const handleConsentChange = useCallback( async() => {
 		toggleLoading();
-		await onGiveConsent();
+
+		const response = await onGiveConsent();
+		setError( response === false );
+
 		toggleLoading();
 	}, [ onGiveConsent ] );
 
@@ -128,15 +135,18 @@ export const AiConsent = ( {
 						{ checkboxLabel }
 					</label>
 				</div>
+				{ error &&
+					<GenericAlert className="yst-mt-3" linkStoreName={ linkStoreName } />
+				}
 				<div className="yst-w-full yst-flex yst-mt-4">
 					<Button
 						as="button"
 						className="yst-grow"
 						size="large"
-						disabled={ ! consent }
+						disabled={ ! consent || error }
 						onClick={ handleConsentChange }
 					>
-						{ loading && (
+						{ loading && ! error && (
 							<Spinner className="yst-me-2" />
 						) }
 						{ __( "Grant consent", "wordpress-seo" ) }
@@ -160,4 +170,5 @@ AiConsent.propTypes = {
 	privacyPolicyLink: PropTypes.string.isRequired,
 	termsOfServiceLink: PropTypes.string.isRequired,
 	imageLink: PropTypes.string.isRequired,
+	linkStoreName: PropTypes.string.isRequired,
 };

packages/js/src/shared-admin/components/ai-grant-consent.js

@@ -39,8 +39,12 @@ export const AiGrantConsent = ( { storeName, onConsentGranted, linkStoreName, li
 
 	const { storeAiGeneratorConsent } = useDispatch( storeName );
 	const onGiveConsent = useCallback( async() => {
-		await storeAiGeneratorConsent( true, endpoint );
-		onConsentGranted();
+		const response = await storeAiGeneratorConsent( true, endpoint );
+
+		if ( response !== false ) {
+			onConsentGranted();
+		}
+		return response;
 	}, [ storeAiGeneratorConsent, onConsentGranted, endpoint ] );
 
 	return (
@@ -50,6 +54,7 @@ export const AiGrantConsent = ( { storeName, onConsentGranted, linkStoreName, li
 			learnMoreLink={ learnMoreLink }
 			imageLink={ imageLink }
 			onGiveConsent={ onGiveConsent }
+			linkStoreName={ linkStoreName }
 		/>
 	);
 };

src/ai-authorization/application/token-manager-interface.php

@@ -22,7 +22,7 @@ interface Token_Manager_Interface {
 	/**
 	 * Invalidates the access token.
 	 *
-	 * @param string $user_id The user ID.
+	 * @param int $user_id The user ID.
 	 *
 	 * @return void
 	 *
@@ -35,7 +35,7 @@ interface Token_Manager_Interface {
 	 * @throws Too_Many_Requests_Exception Too_Many_Requests_Exception.
 	 * @throws RuntimeException Unable to retrieve the access token.
 	 */
-	public function token_invalidate( string $user_id ): void;
+	public function token_invalidate( int $user_id ): void;
 
 	/**
 	 * Requests a new set of JWT tokens.

src/ai-authorization/application/token-manager.php

@@ -113,7 +113,7 @@ public function __construct(
 	/**
 	 * Invalidates the access token.
 	 *
-	 * @param string $user_id The user ID.
+	 * @param int $user_id The user ID.
 	 *
 	 * @return void
 	 *
@@ -126,7 +126,7 @@ public function __construct(
 	 * @throws Too_Many_Requests_Exception Too_Many_Requests_Exception.
 	 * @throws RuntimeException Unable to retrieve the access token.
 	 */
-	public function token_invalidate( string $user_id ): void {
+	public function token_invalidate( int $user_id ): void {
 		try {
 			$access_jwt = $this->access_token_repository->get_token( $user_id );
 		} catch ( RuntimeException $e ) {