Remove Woo AI Enabled Setting and rework copy on the Woo AI Settings page. (#39784)

* Woo AI - Remove enabled setting. Re-order tone of voice settings and adjust neutral messaging.
This commit is contained in:
Thomas Shellberg 2023-09-06 11:07:39 +02:00 committed by GitHub
parent c45335b936
commit c61f453fdb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 59 additions and 116 deletions

View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Add Woo AI Personalization setting and check setting when generating descriptions with AI.

View File

@ -42,7 +42,6 @@ class Woo_AI_Settings {
private const WOO_AI_OPTIONS_PREFIX = 'woo_ai_';
private const STORE_DESCRIPTION_OPTION_KEY = self::WOO_AI_OPTIONS_PREFIX . 'describe_store_description';
private const TONE_OF_VOICE_OPTION_KEY = self::WOO_AI_OPTIONS_PREFIX . 'tone_of_voice_select';
private const WOO_AI_ENABLED_OPTION_KEY = self::WOO_AI_OPTIONS_PREFIX . 'enable_checkbox';
private const WOO_AI_TITLE_OPTION_KEY = self::WOO_AI_OPTIONS_PREFIX . 'title';
/**
@ -57,18 +56,17 @@ class Woo_AI_Settings {
* Constructor
*/
public function __construct() {
add_action( 'admin_enqueue_scripts', array( $this, 'add_woo_ai_settings_script' ) );
add_filter( 'woocommerce_get_settings_advanced', array( $this, 'add_woo_ai_settings' ), 10, 2 );
add_filter( 'woocommerce_settings_groups', array( $this, 'add_woo_ai_settings_group' ) );
add_filter( 'woocommerce_settings-woo-ai', array( $this, 'add_woo_ai_settings_group_settings' ) );
$this->tone_of_voice_select_options = array(
'informal' => __( 'Relaxed and friendly.', 'woocommerce' ),
'humorous' => __( 'Light-hearted and fun.', 'woocommerce' ),
'neutral' => __( 'A balanced tone that uses casual expressions.', 'woocommerce' ),
'youthful' => __( 'Friendly and cheeky tone.', 'woocommerce' ),
'formal' => __( 'Direct yet respectful formal tone.', 'woocommerce' ),
'informal' => __( 'Relaxed and friendly.', 'woocommerce' ),
'neutral' => __( 'Default: Neutral tone with casual expressions.', 'woocommerce' ),
'motivational' => __( 'Passionate and inspiring.', 'woocommerce' ),
'formal' => __( 'Direct yet respectful formal tone.', 'woocommerce' ),
);
$this->add_sanitization_hooks();
@ -164,19 +162,11 @@ class Woo_AI_Settings {
$settings_ai[] = array(
'id' => self::WOO_AI_TITLE_OPTION_KEY,
'title' => __( 'Artificial Intelligence', 'woocommerce' ),
'desc' => __( "Save time by automating mundane parts of store management. This information will make AI-generated content, visuals, and settings more aligned with your store's goals and identity.", 'woocommerce' ),
'title' => __( 'Woo AI Personalization', 'woocommerce' ),
'desc' => __( "Empower your store with AI-driven content that truly reflects your brand.\nBy providing additional context, like your store's tone of voice and a brief business description, our AI adapts its output to fit seamlessly with your brand's identity.", 'woocommerce' ),
'type' => 'title',
);
$settings_ai[] = array(
'id' => self::WOO_AI_ENABLED_OPTION_KEY,
'title' => __( 'Enable AI', 'woocommerce' ),
'desc' => __( 'Enable AI features in your store', 'woocommerce' ),
'type' => 'checkbox',
'default' => 'yes',
);
$settings_ai[] = array(
'id' => self::TONE_OF_VOICE_OPTION_KEY,
'name' => __( 'Tone of voice', 'woocommerce' ),
@ -204,41 +194,4 @@ class Woo_AI_Settings {
return $settings_ai;
}
/**
* Enqueue the styles and JS
*/
public function add_woo_ai_settings_script() {
global $pagenow;
// phpcs:disable WordPress.Security.NonceVerification.Recommended
if ( 'admin.php' !== $pagenow || ( isset( $_GET['page'] ) && 'wc-settings' !== $_GET['page'] ) ) {
return;
}
$script_path = '/../build/settings.js';
$script_url = plugins_url( $script_path, __FILE__ );
$version = Constants::get_constant( 'WC_VERSION' );
wp_register_script(
'woo-ai-settings',
$script_url,
array( 'jquery' ),
$version,
true
);
wp_enqueue_script( 'woo-ai-settings' );
$css_file_version = filemtime( dirname( __FILE__ ) . '/../build/settings.css' );
wp_register_style(
'woo-ai-settings',
plugins_url( '/../build/settings.css', __FILE__ ),
array(),
$css_file_version
);
wp_enqueue_style( 'woo-ai-settings' );
}
}

View File

@ -7,13 +7,8 @@ import { useQuery, UseQueryResult } from 'react-query';
/**
* Internal dependencies
*/
import { getToneOfVoice, getBusinessDescription } from '../utils/branding';
// Define your data type
interface BrandingData {
toneOfVoice: string;
businessDescription: string;
}
import { getAllBrandingSettings } from '../utils/branding';
import type { BrandingSettings } from '../utils/branding';
// Define your error type
interface BrandingError {
@ -25,22 +20,17 @@ type UseStoreBrandingOptions = {
};
// Async function to fetch branding data
async function fetchBrandingData(): Promise< BrandingData > {
const [ toneOfVoice, businessDescription ] = await Promise.all( [
getToneOfVoice(),
getBusinessDescription(),
] );
return { toneOfVoice, businessDescription };
async function fetchBrandingData(): Promise< BrandingSettings > {
return await getAllBrandingSettings();
}
export function useStoreBranding( {
onError,
}: UseStoreBrandingOptions = {} ): UseQueryResult<
BrandingData,
BrandingSettings,
BrandingError
> {
const result = useQuery< BrandingData, BrandingError >(
const result = useQuery< BrandingSettings, BrandingError >(
'storeBranding',
fetchBrandingData,
{

View File

@ -228,7 +228,10 @@ export function WriteItForMeButtonContainer() {
);
}
if ( brandingData?.toneOfVoice ) {
if (
brandingData?.toneOfVoice &&
brandingData?.toneOfVoice !== 'neutral'
) {
instructions.push(
`Generate the description using a ${ brandingData.toneOfVoice } tone.`
);
@ -236,7 +239,7 @@ export function WriteItForMeButtonContainer() {
if ( brandingData?.businessDescription ) {
instructions.push(
`For more context on the business, refer to the following business description: "${ brandingData.businessDescription }."`
`For more context on the business, refer to the following business description: "${ brandingData.businessDescription }"`
);
}

View File

@ -1,4 +0,0 @@
tr:has(#woo_ai_tone_of_voice_select),
tr:has(#woo_ai_describe_store_description) {
display: none;
}

View File

@ -1,38 +0,0 @@
/**
* Internal dependencies
*/
import './settings.scss';
const fieldMap = {
checkbox: document.getElementById(
'woo_ai_enable_checkbox'
) as HTMLInputElement,
tone: document.getElementById(
'woo_ai_tone_of_voice_select'
) as HTMLSelectElement,
describeBusiness: document.getElementById(
'woo_ai_describe_store_description'
) as HTMLInputElement,
};
( () => {
if ( fieldMap.checkbox?.checked ) {
jQuery( fieldMap.tone ).closest( 'tr' ).show();
jQuery( fieldMap.describeBusiness ).closest( 'tr' ).show();
} else {
// This is a hack for Firefox support since it doesn't have :has() support yet.
jQuery( fieldMap.tone ).closest( 'tr' ).hide();
jQuery( fieldMap.describeBusiness ).closest( 'tr' ).hide();
}
fieldMap.checkbox?.addEventListener( 'change', ( { target } ) => {
const checked = ( target as HTMLInputElement )?.checked;
if ( checked ) {
jQuery( fieldMap.tone ).closest( 'tr' ).fadeIn( 500 );
jQuery( fieldMap.describeBusiness ).closest( 'tr' ).fadeIn( 500 );
} else {
jQuery( fieldMap.tone ).closest( 'tr' ).fadeOut( 500 );
jQuery( fieldMap.describeBusiness ).closest( 'tr' ).fadeOut( 500 );
}
} );
} )();

View File

@ -4,10 +4,20 @@
import apiFetch from '@wordpress/api-fetch';
// Define the expected shape of the API response
type ApiResponse = {
type ApiResponseSingleValue = {
value: string;
};
type ApiResponseItem = {
id: string;
value: string;
};
export type BrandingSettings = {
toneOfVoice: string;
businessDescription: string;
};
/**
* Fetch the tone of voice setting.
*
@ -15,7 +25,7 @@ type ApiResponse = {
*/
export async function getToneOfVoice(): Promise< string > {
try {
const { value } = await apiFetch< ApiResponse >( {
const { value } = await apiFetch< ApiResponseSingleValue >( {
path: '/wc/v3/settings/woo-ai/tone-of-voice',
} );
return value;
@ -24,6 +34,32 @@ export async function getToneOfVoice(): Promise< string > {
}
}
/**
* Fetch all Woo AI branding settings.
*
* @return {Promise<BrandingSettings>} A promise that resolves with all branding settings.
*/
export async function getAllBrandingSettings(): Promise< BrandingSettings > {
try {
const response = await apiFetch< ApiResponseItem[] >( {
path: '/wc/v3/settings/woo-ai',
} );
const toneOfVoice = response.find(
( setting ) => setting.id === 'tone-of-voice'
)?.value;
const businessDescription = response.find(
( setting ) => setting.id === 'store-description'
)?.value;
return {
toneOfVoice: toneOfVoice || '',
businessDescription: businessDescription || '',
};
} catch ( error ) {
throw error;
}
}
/**
* Fetch the business description setting.
*
@ -31,7 +67,7 @@ export async function getToneOfVoice(): Promise< string > {
*/
export async function getBusinessDescription(): Promise< string > {
try {
const { value } = await apiFetch< ApiResponse >( {
const { value } = await apiFetch< ApiResponseSingleValue >( {
path: '/wc/v3/settings/woo-ai/store-description',
} );
return value;

View File

@ -5,7 +5,6 @@ module.exports = {
...defaultConfig,
entry: {
...defaultConfig.entry,
settings: './src/settings/settings.ts',
},
module: {
...defaultConfig.module,