Merge pull request #29 from heikkivihersalo/feature/15/check-if-api-k…

…ey-is-set-and-prevent-usage-if-so

Check if api key is set and prevent usage if so

src/features/admin/components/inputs/lib/Input.tsx

@@ -31,7 +31,7 @@ const Input = ({
 				type={type}
 				id={name}
 				name={name}
-				defaultValue={value}
+				defaultValue={value || ''}
 				placeholder={placeholder}
 				onChange={onChange}
 				disabled={disabled}

src/features/ai-modal/features/modal/components/form/Form.tsx

@@ -1,26 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
+import { MODAL_STATUS } from '@constants/modal';
+import CloseButton from '../CloseButton';
+
 import styles from '../../index.module.css';
 
 /**
  * Form component
  * @param {Object} props - Component props
  * @param {React.ReactNode} props.children - Form children
  * @param {Function} props.onSubmit - Form submit handler
+ * @param {boolean} props.hasApiKey - API key status
  * @return {JSX.Element} Form component
  */
 const Form = ({
 	children,
 	onSubmit,
+	hasApiKey = true,
 }: {
 	children: React.ReactNode;
 	onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+	hasApiKey: boolean;
 }): JSX.Element => {
+	const { setStatus, setSelection } = useDispatch('theme/ai');
+
+	const handleClose = () => {
+		setStatus(MODAL_STATUS.INITIAL);
+		setSelection({
+			block: null,
+			text: '',
+			start: 0,
+			end: 0,
+		});
+	};
+
 	return (
-		<form className={styles.form} onSubmit={onSubmit}>
-			{children}
-		</form>
+		<div className={styles.formContainer} data-api-active={hasApiKey}>
+			<form className={styles.form} onSubmit={onSubmit}>
+				{children}
+			</form>
+			{!hasApiKey ? (
+				<>
+					<div className={styles.formOverlay}>
+						<p>
+							Please create your API key in the{' '}
+							<a
+								href="https://platform.openai.com/api-keys"
+								target="_blank"
+								rel="noreferrer"
+							>
+								OpenAI dashboard
+							</a>{' '}
+							and add it to the{' '}
+							<a
+								href="/wp-admin/options-general.php?page=gutenberg-native-ai"
+								target="_blank"
+								rel="noreferrer"
+							>
+								plugin options
+							</a>{' '}
+							to enable the AI features
+						</p>
+					</div>
+					<CloseButton closeCallback={handleClose} />
+				</>
+			) : null}
+		</div>
 	);
 };
 

src/features/ai-modal/features/modal/components/modal-text/ModalControlsText.tsx

@@ -24,7 +24,7 @@ import {
 
 import { MODAL_STATUS } from '@constants/modal';
 
-import type { ModalStatus, ModalSelection } from 'types/modal';
+import type { ModalStatus, ModalSelection, ModalSettings } from 'types/modal';
 
 import styles from '../../index.module.css';
 
@@ -33,10 +33,11 @@ import styles from '../../index.module.css';
  * @return {JSX.Element} Popover component
  */
 const ModalControlsText = (): JSX.Element | null => {
-	const { status, selection } = useSelect((select: WPAny) => {
+	const { status, selection, settings } = useSelect((select: WPAny) => {
 		return {
 			status: select('theme/ai').getStatus() as ModalStatus,
 			selection: select('theme/ai').getSelection() as ModalSelection,
+			settings: select('theme/ai').getSettings() as ModalSettings,
 		};
 	}, []);
 
@@ -111,7 +112,7 @@ const ModalControlsText = (): JSX.Element | null => {
 	};
 
 	return (
-		<Form onSubmit={generateContent}>
+		<Form onSubmit={generateContent} hasApiKey={settings.has_api_key}>
 			<div className={styles.controlContainer}>
 				<FormInput
 					placeholder={__(

src/features/ai-modal/features/modal/index.module.css

@@ -62,6 +62,50 @@
 	width: 1px;
 }
 
+/**
+ * Handle the form blur when no API key is set
+ */
+[data-api-active="false"].formContainer {
+	position: relative;
+}
+
+[data-api-active="false"].formContainer button {
+	--_background-color: transparent;
+
+	position: absolute;
+	top: 0.25rem;
+	right: 0.25rem;
+}
+
+[data-api-active="false"].formContainer button svg {
+	fill: var(--wp--preset--color--foreground);
+}
+
+[data-api-active="false"] .form {
+	pointer-events: none;
+	filter: blur(4px);
+}
+
+[data-api-active="false"] .formOverlay {
+	display: grid;
+	align-content: center;
+	justify-content: center;
+
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+
+	background-color: rgba(255, 255, 255, 0.5);
+}
+
+[data-api-active="false"] .formOverlay > * {
+	max-width: 80%;
+	margin-inline: auto;
+	text-align: center;
+}
+
 /** ======================
  ** BUTTONS
  ** ==================== */

src/stores/ai/data/resolvers.ts

@@ -10,6 +10,23 @@ import {
 	SettingsApiResponse,
 } from 'types/store';
 
+/**
+ * Check that API key is set
+ * @param {string} apiKey - API key
+ * @return {boolean} API key status
+ */
+const checkApiKey = (apiKey: string): boolean => {
+	if (!apiKey) {
+		return false;
+	}
+
+	if (apiKey === '') {
+		return false;
+	}
+
+	return true;
+};
+
 /**
  * Resolvers for the store.
  */
@@ -27,6 +44,7 @@ const resolvers = {
 		return actions.setSettings({
 			model: result.data.model,
 			tone_of_voice: result.data.tone_of_voice,
+			has_api_key: checkApiKey(result.data.api_key),
 		});
 	},
 };

types/modal.d.ts

@@ -25,5 +25,6 @@ type ModalMode = (typeof MODAL_MODE)[keyof typeof MODAL_MODE];
 type ModalSettings = {
 	model: string;
 	tone_of_voice: string;
+	has_api_key: boolean;
 	[key: string]: any;
 };