Skip to content

Commit f5daf38

Browse files
committed
Updated welcome to classifAI from page to notice.
1 parent 9f0d935 commit f5daf38

File tree

8 files changed

+61
-66
lines changed

8 files changed

+61
-66
lines changed

includes/Classifai/Admin/Notifications.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ public function render_activation_notice() {
8787
return;
8888
}
8989

90-
$setup_url = admin_url( 'tools.php?page=classifai#/classifai_setup' );
90+
$setup_url = admin_url( 'tools.php?page=classifai#/language_processing?welcome_guide=1' );
9191
if ( should_use_legacy_settings_panel() ) {
9292
$setup_url = admin_url( 'admin.php?page=classifai_setup' );
9393
}

includes/Classifai/Plugin.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ public function filter_plugin_action_links( $links ): array {
226226
return $links;
227227
}
228228

229-
$setup_url = admin_url( 'tools.php?page=classifai#/classifai_setup' );
229+
$setup_url = admin_url( 'tools.php?page=classifai#/language_processing?welcome_guide=1' );
230230
if ( should_use_legacy_settings_panel() ) {
231231
$setup_url = admin_url( 'admin.php?page=classifai_setup' );
232232
}

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

-21
This file was deleted.

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

+34-34
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
HashRouter,
99
useParams,
1010
NavLink,
11+
useLocation,
1112
} from 'react-router-dom';
1213

1314
/**
@@ -16,22 +17,17 @@ import {
1617
import { useDispatch } from '@wordpress/data';
1718
import { SlotFillProvider } from '@wordpress/components';
1819
import { __, sprintf } from '@wordpress/i18n';
19-
import { useEffect } from '@wordpress/element';
20+
import { useEffect, useState } from '@wordpress/element';
2021
import apiFetch from '@wordpress/api-fetch';
2122

2223
/**
2324
* Internal dependencies
2425
*/
25-
import {
26-
ClassifAIOnboarding,
27-
FeatureSettings,
28-
Header,
29-
ServiceSettings,
30-
} from '..';
26+
import { FeatureSettings, Header, ServiceSettings } from '..';
3127
import { STORE_NAME } from '../../data/store';
3228
import { FeatureContext } from '../feature-settings/context';
3329
import { ClassifAIRegistration } from '../classifai-registration';
34-
import { useSetupPage } from '../classifai-onboarding/hooks';
30+
import { ClassifAIWelcomeGuide } from './welcome-guide';
3531

3632
const { services, features } = window.classifAISettings;
3733

@@ -81,39 +77,47 @@ const ServiceSettingsWrapper = () => {
8177
* @return {React.ReactElement} The ServiceNavigation component.
8278
*/
8379
export const ServiceNavigation = () => {
84-
const { isSetupPage } = useSetupPage();
85-
if ( isSetupPage ) {
86-
return null;
87-
}
80+
const location = useLocation();
81+
const queryParams = new URLSearchParams( location.search );
82+
const [ showWelcomeGuide, setShowWelcomeGuide ] = useState(
83+
() => '1' === queryParams.get( 'welcome_guide' )
84+
);
8885

8986
const serviceKeys = Object.keys( services || {} );
9087
return (
91-
<div className="classifai-tabs" aria-orientation="horizontal">
92-
{ serviceKeys.map( ( service ) => (
88+
<>
89+
{ !! showWelcomeGuide && (
90+
<ClassifAIWelcomeGuide
91+
closeWelcomeGuide={ () => setShowWelcomeGuide( false ) }
92+
/>
93+
) }
94+
<div className="classifai-tabs" aria-orientation="horizontal">
95+
{ serviceKeys.map( ( service ) => (
96+
<NavLink
97+
to={ service }
98+
key={ service }
99+
className={ ( { isActive } ) =>
100+
isActive
101+
? 'active-tab classifai-tabs-item'
102+
: 'classifai-tabs-item'
103+
}
104+
>
105+
{ services[ service ] }
106+
</NavLink>
107+
) ) }
93108
<NavLink
94-
to={ service }
95-
key={ service }
109+
to="classifai_registration"
110+
key="classifai_registration"
96111
className={ ( { isActive } ) =>
97112
isActive
98113
? 'active-tab classifai-tabs-item'
99114
: 'classifai-tabs-item'
100115
}
101116
>
102-
{ services[ service ] }
117+
{ __( 'ClassifAI Registration', 'classifai' ) }
103118
</NavLink>
104-
) ) }
105-
<NavLink
106-
to="classifai_registration"
107-
key="classifai_registration"
108-
className={ ( { isActive } ) =>
109-
isActive
110-
? 'active-tab classifai-tabs-item'
111-
: 'classifai-tabs-item'
112-
}
113-
>
114-
{ __( 'ClassifAI Registration', 'classifai' ) }
115-
</NavLink>
116-
</div>
119+
</div>
120+
</>
117121
);
118122
};
119123

@@ -194,10 +198,6 @@ export const ClassifAISettings = () => {
194198
path=":service/:feature"
195199
element={ <FeatureSettingsWrapper /> }
196200
/>
197-
<Route
198-
path="classifai_setup"
199-
element={ <ClassifAIOnboarding /> }
200-
/>
201201
<Route
202202
path="classifai_registration"
203203
element={ <ClassifAIRegistration /> }

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

+24-6
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,37 @@
33
*/
44
import { __ } from '@wordpress/i18n';
55
import { NavLink } from 'react-router-dom';
6+
import { Icon, Button, Flex, FlexItem } from '@wordpress/components';
7+
import { close } from '@wordpress/icons';
68

79
/**
8-
* ClassifAI Onboarding Component.
10+
* ClassifAI Welcome Guide Component.
911
*
10-
* This component handles the rendering of the entire onboarding process for ClassifAI.
12+
* This component handles the rendering of the Welcome Guide for ClassifAI.
1113
* It guides users through the necessary steps to configure and enable various features.
1214
*
13-
* @return {React.ReactElement} ClassifAIOnboarding component.
15+
* @param {Object} props Component props.
16+
* @param {Function} props.closeWelcomeGuide Function to close the welcome guide.
17+
*
18+
* @return {React.ReactElement} ClassifAIWelcomeGuide component.
1419
*/
15-
export const ClassifAIOnboarding = () => {
20+
export const ClassifAIWelcomeGuide = ( { closeWelcomeGuide } ) => {
1621
return (
17-
<div className="classifai-setup__content">
18-
<h1>{ __( 'Welcome to ClassifAI', 'classifai' ) }</h1>
22+
<div className="classifai-setup__content classifai-welcome-guide">
23+
<Flex justifyContent="space-between" align="flex-start">
24+
<FlexItem>
25+
<h1>{ __( 'Welcome to ClassifAI', 'classifai' ) }</h1>
26+
</FlexItem>
27+
<FlexItem>
28+
<Button
29+
icon={ <Icon icon={ close } /> }
30+
onClick={ () => closeWelcomeGuide() }
31+
className="classifai-welcome-guide-close"
32+
label={ __( 'Close welcome guide', 'classifai' ) }
33+
showTooltip={ true }
34+
/>
35+
</FlexItem>
36+
</Flex>
1937
<div className="classifai-onboarding__welcome-note">
2038
<p>
2139
{ __(

src/js/settings/components/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
export * from './header';
2-
export * from './classifai-onboarding';
32
export * from './classifai-settings';
43
export * from './service-settings';
54
export * from './feature-settings';

src/scss/admin.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -543,7 +543,7 @@ input.classifai-button {
543543
}
544544

545545
&__content {
546-
padding: 24px 32px;
546+
padding: 24px;
547547
background-color: #fff;
548548
box-sizing: border-box;
549549
display: block;

src/scss/settings.scss

-1
Original file line numberDiff line numberDiff line change
@@ -453,7 +453,6 @@
453453
}
454454

455455
&__welcome-note {
456-
margin-top: 36px;
457456

458457
p {
459458
font-size: 14px;

0 commit comments

Comments
 (0)