added notice popup screen when no api key exists

classes/class-assets.php

@@ -45,6 +45,7 @@ class Mind_Assets {
 	 * Enqueue editor assets
 	 */
 	public function enqueue_block_editor_assets() {
+		$openai_key = Mind_Settings::get_option( 'openai_key', 'mind_general' );
 		$asset_data = $this->get_asset_file( 'build/index' );
 
 		wp_enqueue_script(
@@ -55,6 +56,15 @@ class Mind_Assets {
 			true
 		);
 
+		wp_localize_script(
+			'mind-editor',
+			'mindData',
+			array(
+				'connected'   => ! ! $openai_key,
+				'settingsURL' => admin_url( 'admin.php?page=mind' ),
+			)
+		);
+
 		wp_enqueue_style(
 			'mind-editor',
 			mind()->plugin_url . 'build/style-index.css',

package-lock.json

@@ -9,6 +9,7 @@
 			"version": "0.1.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
+				"clsx": "^2.0.0",
 				"marked": "^5.0.4"
 			},
 			"devDependencies": {
@@ -5462,6 +5463,14 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/clsx": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+			"integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/co": {
 			"version": "4.6.0",
 			"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",

package.json

@@ -22,6 +22,7 @@
 		"prettier": "^2.8.8"
 	},
 	"dependencies": {
+		"clsx": "^2.0.0",
 		"marked": "^5.0.4"
 	}
 }

src/popup/components/not-connected-screen/index.js

@@ -0,0 +1,35 @@
+/**
+ * Styles
+ */
+import './style.scss';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+const { settingsURL } = window.mindData;
+
+export default function NotConnectedScreen() {
+	return (
+		<div className="mind-popup-connected-screen">
+			<h2>{__('OpenAI Key', 'mind')}</h2>
+			<div>
+				<p>
+					{__(
+						'In order to use Mind, you will need to provide your OpenAI API key. Please insert your API key in the plugin settings to get started.',
+						'mind'
+					)}
+				</p>
+			</div>
+			<div>
+				<a
+					className="mind-popup-connected-screen-button"
+					href={settingsURL}
+				>
+					{__('Go to Settings', 'mind')}
+				</a>
+			</div>
+		</div>
+	);
+}

src/popup/components/not-connected-screen/style.scss

@@ -0,0 +1,49 @@
+.mind-popup-not-connected {
+	width: 440px;
+}
+
+.mind-popup-connected-screen {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	padding: 30px;
+	text-align: center;
+
+	h2 {
+		font-size: 16px;
+		font-weight: 500;
+		margin: 0;
+	}
+
+	p {
+		font-size: 14px;
+		font-weight: 300;
+		margin: 0;
+	}
+}
+
+.mind-popup-connected-screen-button {
+	position: relative;
+	display: inline-block;
+	text-decoration: none;
+	padding: 10px 15px;
+	margin-top: -10px;
+	margin-bottom: -10px;
+	color: var(--mind-brand-color);
+	font-weight: 500;
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		opacity: 0.05;
+	}
+
+	&:hover::after,
+	&:focus::after {
+		background-color: var(--mind-brand-color);
+	}
+}

src/popup/index.js

@@ -11,6 +11,7 @@ import { Modal } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { rawHandler } from '@wordpress/blocks';
 import domReady from '@wordpress/dom-ready';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -19,6 +20,9 @@ import Input from './components/input';
 import LoadingLine from './components/loading-line';
 import Content from './components/content';
 import Footer from './components/footer';
+import NotConnectedScreen from './components/not-connected-screen';
+
+const { connected } = window.mindData;
 
 const POPUP_CONTAINER_CLASS = 'mind-popup-container';
 
@@ -89,7 +93,10 @@ export default function Popup() {
 	return (
 		<Modal
 			title={false}
-			className="mind-popup"
+			className={clsx(
+				'mind-popup',
+				!connected && 'mind-popup-not-connected'
+			)}
 			overlayClassName="mind-popup-overlay"
 			onRequestClose={() => {
 				reset();
@@ -97,10 +104,16 @@ export default function Popup() {
 			}}
 			__experimentalHideHeader
 		>
-			<Input onInsert={onInsert} />
-			{loading && <LoadingLine />}
-			<Content />
-			<Footer onInsert={onInsert} />
+			{connected ? (
+				<>
+					<Input onInsert={onInsert} />
+					{loading && <LoadingLine />}
+					<Content />
+					<Footer onInsert={onInsert} />
+				</>
+			) : (
+				<NotConnectedScreen />
+			)}
 		</Modal>
 	);
 }

src/style.scss

@@ -6,7 +6,8 @@
 // Gradients for logos.
 @supports (-webkit-background-clip: text) {
 	.mind-post-toolbar-toggle button,
-	.mind-popup-footer-logo {
+	.mind-popup-footer-logo,
+	.mind-popup-connected-screen-button {
 		background: linear-gradient(to right, #e455df, #4376ec);
 		background-clip: text;
 		-webkit-text-fill-color: transparent;