8
8
HashRouter ,
9
9
useParams ,
10
10
NavLink ,
11
+ useLocation ,
11
12
} from 'react-router-dom' ;
12
13
13
14
/**
@@ -16,22 +17,17 @@ import {
16
17
import { useDispatch } from '@wordpress/data' ;
17
18
import { SlotFillProvider } from '@wordpress/components' ;
18
19
import { __ , sprintf } from '@wordpress/i18n' ;
19
- import { useEffect } from '@wordpress/element' ;
20
+ import { useEffect , useState } from '@wordpress/element' ;
20
21
import apiFetch from '@wordpress/api-fetch' ;
21
22
22
23
/**
23
24
* Internal dependencies
24
25
*/
25
- import {
26
- ClassifAIOnboarding ,
27
- FeatureSettings ,
28
- Header ,
29
- ServiceSettings ,
30
- } from '..' ;
26
+ import { FeatureSettings , Header , ServiceSettings } from '..' ;
31
27
import { STORE_NAME } from '../../data/store' ;
32
28
import { FeatureContext } from '../feature-settings/context' ;
33
29
import { ClassifAIRegistration } from '../classifai-registration' ;
34
- import { useSetupPage } from '../classifai-onboarding/hooks ' ;
30
+ import { ClassifAIWelcomeGuide } from './welcome-guide ' ;
35
31
36
32
const { services, features } = window . classifAISettings ;
37
33
@@ -81,39 +77,47 @@ const ServiceSettingsWrapper = () => {
81
77
* @return {React.ReactElement } The ServiceNavigation component.
82
78
*/
83
79
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
+ ) ;
88
85
89
86
const serviceKeys = Object . keys ( services || { } ) ;
90
87
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
+ ) ) }
93
108
< NavLink
94
- to = { service }
95
- key = { service }
109
+ to = "classifai_registration"
110
+ key = "classifai_registration"
96
111
className = { ( { isActive } ) =>
97
112
isActive
98
113
? 'active-tab classifai-tabs-item'
99
114
: 'classifai-tabs-item'
100
115
}
101
116
>
102
- { services [ service ] }
117
+ { __ ( 'ClassifAI Registration' , 'classifai' ) }
103
118
</ 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
+ </ >
117
121
) ;
118
122
} ;
119
123
@@ -194,10 +198,6 @@ export const ClassifAISettings = () => {
194
198
path = ":service/:feature"
195
199
element = { < FeatureSettingsWrapper /> }
196
200
/>
197
- < Route
198
- path = "classifai_setup"
199
- element = { < ClassifAIOnboarding /> }
200
- />
201
201
< Route
202
202
path = "classifai_registration"
203
203
element = { < ClassifAIRegistration /> }
0 commit comments