From f5daf38b596f6c532a634c749485d5133947513b Mon Sep 17 00:00:00 2001
From: Dharmesh Patel <dspatel44@gmail.com>
Date: Tue, 17 Dec 2024 19:52:10 +0530
Subject: [PATCH] Updated welcome to classifAI from page to notice.

---
 includes/Classifai/Admin/Notifications.php    |  2 +-
 includes/Classifai/Plugin.php                 |  2 +-
 .../components/classifai-onboarding/hooks.js  | 21 ------
 .../components/classifai-settings/index.js    | 68 +++++++++----------
 .../welcome-guide.js}                         | 30 ++++++--
 src/js/settings/components/index.js           |  1 -
 src/scss/admin.scss                           |  2 +-
 src/scss/settings.scss                        |  1 -
 8 files changed, 61 insertions(+), 66 deletions(-)
 delete mode 100644 src/js/settings/components/classifai-onboarding/hooks.js
 rename src/js/settings/components/{classifai-onboarding/index.js => classifai-settings/welcome-guide.js} (66%)

diff --git a/includes/Classifai/Admin/Notifications.php b/includes/Classifai/Admin/Notifications.php
index 9c238cd7a..93e70eafd 100644
--- a/includes/Classifai/Admin/Notifications.php
+++ b/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' );
 		}
diff --git a/includes/Classifai/Plugin.php b/includes/Classifai/Plugin.php
index a2eff375d..a62da0b18 100644
--- a/includes/Classifai/Plugin.php
+++ b/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' );
 		}
diff --git a/src/js/settings/components/classifai-onboarding/hooks.js b/src/js/settings/components/classifai-onboarding/hooks.js
deleted file mode 100644
index 474d78822..000000000
--- a/src/js/settings/components/classifai-onboarding/hooks.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import { useLocation } from 'react-router-dom';
-
-/**
- * Custom hook to determine if the current page is a setup page.
- *
- * This hook provides an object containing:
- * - `isSetupPage`: A boolean indicating whether the current page is a setup page.
- *
- * @return {Object} An object containing the setup page status.
- */
-export const useSetupPage = () => {
-	const location = useLocation();
-	const isSetupPage =
-		location?.pathname?.startsWith( '/classifai_setup' ) || false;
-	return {
-		isSetupPage,
-	};
-};
diff --git a/src/js/settings/components/classifai-settings/index.js b/src/js/settings/components/classifai-settings/index.js
index b78d62349..bbbffe56c 100644
--- a/src/js/settings/components/classifai-settings/index.js
+++ b/src/js/settings/components/classifai-settings/index.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 /> }
diff --git a/src/js/settings/components/classifai-onboarding/index.js b/src/js/settings/components/classifai-settings/welcome-guide.js
similarity index 66%
rename from src/js/settings/components/classifai-onboarding/index.js
rename to src/js/settings/components/classifai-settings/welcome-guide.js
index b2bd0f646..8bbd439de 100644
--- a/src/js/settings/components/classifai-onboarding/index.js
+++ b/src/js/settings/components/classifai-settings/welcome-guide.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>
 					{ __(
diff --git a/src/js/settings/components/index.js b/src/js/settings/components/index.js
index a6aa466e8..49bf8d7b3 100644
--- a/src/js/settings/components/index.js
+++ b/src/js/settings/components/index.js
@@ -1,5 +1,4 @@
 export * from './header';
-export * from './classifai-onboarding';
 export * from './classifai-settings';
 export * from './service-settings';
 export * from './feature-settings';
diff --git a/src/scss/admin.scss b/src/scss/admin.scss
index 7999c0a58..61beb70c6 100644
--- a/src/scss/admin.scss
+++ b/src/scss/admin.scss
@@ -543,7 +543,7 @@ input.classifai-button {
 	}
 
 	&__content {
-		padding: 24px 32px;
+		padding: 24px;
 		background-color: #fff;
 		box-sizing: border-box;
 		display: block;
diff --git a/src/scss/settings.scss b/src/scss/settings.scss
index 8bdba56ae..d2916ef42 100644
--- a/src/scss/settings.scss
+++ b/src/scss/settings.scss
@@ -453,7 +453,6 @@
 	}
 
 	&__welcome-note {
-		margin-top: 36px;
 
 		p {
 			font-size: 14px;