Updated welcome to classifAI from page to notice.

Author: iamdharmesh

includes/Classifai/Admin/Notifications.php

@@ -87,7 +87,7 @@ public function render_activation_notice() {
 			return;
 		}
 
-		$setup_url = admin_url( 'tools.php?page=classifai#/classifai_setup' );
+		$setup_url = admin_url( 'tools.php?page=classifai#/language_processing?welcome_guide=1' );
 		if ( should_use_legacy_settings_panel() ) {
 			$setup_url = admin_url( 'admin.php?page=classifai_setup' );
 		}

includes/Classifai/Plugin.php

@@ -226,7 +226,7 @@ public function filter_plugin_action_links( $links ): array {
 			return $links;
 		}
 
-		$setup_url = admin_url( 'tools.php?page=classifai#/classifai_setup' );
+		$setup_url = admin_url( 'tools.php?page=classifai#/language_processing?welcome_guide=1' );
 		if ( should_use_legacy_settings_panel() ) {
 			$setup_url = admin_url( 'admin.php?page=classifai_setup' );
 		}

src/js/settings/components/classifai-onboarding/hooks.js

@@ -8,6 +8,7 @@ import {
 	HashRouter,
 	useParams,
 	NavLink,
+	useLocation,
 } from 'react-router-dom';
 
 /**
@@ -16,22 +17,17 @@ import {
 import { useDispatch } from '@wordpress/data';
 import { SlotFillProvider } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Internal dependencies
  */
-import {
-	ClassifAIOnboarding,
-	FeatureSettings,
-	Header,
-	ServiceSettings,
-} from '..';
+import { FeatureSettings, Header, ServiceSettings } from '..';
 import { STORE_NAME } from '../../data/store';
 import { FeatureContext } from '../feature-settings/context';
 import { ClassifAIRegistration } from '../classifai-registration';
-import { useSetupPage } from '../classifai-onboarding/hooks';
+import { ClassifAIWelcomeGuide } from './welcome-guide';
 
 const { services, features } = window.classifAISettings;
 
@@ -81,39 +77,47 @@ const ServiceSettingsWrapper = () => {
  * @return {React.ReactElement} The ServiceNavigation component.
  */
 export const ServiceNavigation = () => {
-	const { isSetupPage } = useSetupPage();
-	if ( isSetupPage ) {
-		return null;
-	}
+	const location = useLocation();
+	const queryParams = new URLSearchParams( location.search );
+	const [ showWelcomeGuide, setShowWelcomeGuide ] = useState(
+		() => '1' === queryParams.get( 'welcome_guide' )
+	);
 
 	const serviceKeys = Object.keys( services || {} );
 	return (
-		<div className="classifai-tabs" aria-orientation="horizontal">
-			{ serviceKeys.map( ( service ) => (
+		<>
+			{ !! showWelcomeGuide && (
+				<ClassifAIWelcomeGuide
+					closeWelcomeGuide={ () => setShowWelcomeGuide( false ) }
+				/>
+			) }
+			<div className="classifai-tabs" aria-orientation="horizontal">
+				{ serviceKeys.map( ( service ) => (
+					<NavLink
+						to={ service }
+						key={ service }
+						className={ ( { isActive } ) =>
+							isActive
+								? 'active-tab classifai-tabs-item'
+								: 'classifai-tabs-item'
+						}
+					>
+						{ services[ service ] }
+					</NavLink>
+				) ) }
 				<NavLink
-					to={ service }
-					key={ service }
+					to="classifai_registration"
+					key="classifai_registration"
 					className={ ( { isActive } ) =>
 						isActive
 							? 'active-tab classifai-tabs-item'
 							: 'classifai-tabs-item'
 					}
 				>
-					{ services[ service ] }
+					{ __( 'ClassifAI Registration', 'classifai' ) }
 				</NavLink>
-			) ) }
-			<NavLink
-				to="classifai_registration"
-				key="classifai_registration"
-				className={ ( { isActive } ) =>
-					isActive
-						? 'active-tab classifai-tabs-item'
-						: 'classifai-tabs-item'
-				}
-			>
-				{ __( 'ClassifAI Registration', 'classifai' ) }
-			</NavLink>
-		</div>
+			</div>
+		</>
 	);
 };
 
@@ -194,10 +198,6 @@ export const ClassifAISettings = () => {
 							path=":service/:feature"
 							element={ <FeatureSettingsWrapper /> }
 						/>
-						<Route
-							path="classifai_setup"
-							element={ <ClassifAIOnboarding /> }
-						/>
 						<Route
 							path="classifai_registration"
 							element={ <ClassifAIRegistration /> }

src/js/settings/components/classifai-settings/index.js

@@ -3,19 +3,37 @@
  */
 import { __ } from '@wordpress/i18n';
 import { NavLink } from 'react-router-dom';
+import { Icon, Button, Flex, FlexItem } from '@wordpress/components';
+import { close } from '@wordpress/icons';
 
 /**
- * ClassifAI Onboarding Component.
+ * ClassifAI Welcome Guide Component.
  *
- * This component handles the rendering of the entire onboarding process for ClassifAI.
+ * This component handles the rendering of the Welcome Guide for ClassifAI.
  * It guides users through the necessary steps to configure and enable various features.
  *
- * @return {React.ReactElement} ClassifAIOnboarding component.
+ * @param {Object}   props                   Component props.
+ * @param {Function} props.closeWelcomeGuide Function to close the welcome guide.
+ *
+ * @return {React.ReactElement} ClassifAIWelcomeGuide component.
  */
-export const ClassifAIOnboarding = () => {
+export const ClassifAIWelcomeGuide = ( { closeWelcomeGuide } ) => {
 	return (
-		<div className="classifai-setup__content">
-			<h1>{ __( 'Welcome to ClassifAI', 'classifai' ) }</h1>
+		<div className="classifai-setup__content classifai-welcome-guide">
+			<Flex justifyContent="space-between" align="flex-start">
+				<FlexItem>
+					<h1>{ __( 'Welcome to ClassifAI', 'classifai' ) }</h1>
+				</FlexItem>
+				<FlexItem>
+					<Button
+						icon={ <Icon icon={ close } /> }
+						onClick={ () => closeWelcomeGuide() }
+						className="classifai-welcome-guide-close"
+						label={ __( 'Close welcome guide', 'classifai' ) }
+						showTooltip={ true }
+					/>
+				</FlexItem>
+			</Flex>
 			<div className="classifai-onboarding__welcome-note">
 				<p>
 					{ __(

src/js/settings/components/classifai-onboarding/index.js renamed to src/js/settings/components/classifai-settings/welcome-guide.js

@@ -1,5 +1,4 @@
 export * from './header';
-export * from './classifai-onboarding';
 export * from './classifai-settings';
 export * from './service-settings';
 export * from './feature-settings';

src/js/settings/components/index.js

@@ -543,7 +543,7 @@ input.classifai-button {
 	}
 
 	&__content {
-		padding: 24px 32px;
+		padding: 24px;
 		background-color: #fff;
 		box-sizing: border-box;
 		display: block;

src/scss/admin.scss

@@ -453,7 +453,6 @@
 	}
 
 	&__welcome-note {
-		margin-top: 36px;
 
 		p {
 			font-size: 14px;