update UI as per figma

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

@@ -8,13 +8,14 @@ import {
 	HashRouter,
 	useParams,
 	NavLink,
+	useNavigate,
 } from 'react-router-dom';
 
 /**
  * WordPress dependencies
  */
 import { useDispatch } from '@wordpress/data';
-import { SlotFillProvider } from '@wordpress/components';
+import { SlotFillProvider, Button, Icon } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
@@ -62,13 +63,20 @@ const DefaultFeatureSettings = () => {
 const FeatureSettingsWrapper = () => {
 	const { service, feature } = useParams();
 	const serviceFeatures = Object.keys( features[ service ] || {} );
+	const navigate = useNavigate();
 
 	if ( ! serviceFeatures.includes( feature ) ) {
 		return <Navigate to={ serviceFeatures[ 0 ] } replace />;
 	}
 
 	return (
 		<FeatureContext.Provider value={ { featureName: feature } }>
+			<Button
+				icon={ <Icon icon="arrow-left-alt2" /> }
+				onClick={ () => navigate( -1 ) }
+			>
+				{ __( 'Back to dashboard', 'classifai' ) }
+			</Button>
 			<FeatureSettings />
 		</FeatureContext.Provider>
 	);
@@ -199,16 +207,11 @@ export const ClassifAISettings = () => {
 						<Route
 							path=":service"
 							element={ <ServiceSettingsWrapper /> }
-						>
-							<Route
-								index
-								element={ <DefaultFeatureSettings /> }
-							/>
-							<Route
-								path=":feature"
-								element={ <FeatureSettingsWrapper /> }
-							/>
-						</Route>
+						/>
+						<Route
+							path=":service/:feature"
+							element={ <FeatureSettingsWrapper /> }
+						/>
 						<Route
 							path="classifai_setup"
 							element={ <ClassifAIOnboarding /> }

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

@@ -1,14 +1,24 @@
 /**
  * External dependencies
  */
-import { NavLink, Outlet, useParams } from 'react-router-dom';
+import { NavLink, useParams } from 'react-router-dom';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Flex,
+	FlexItem,
+	FlexBlock,
+	ToggleControl,
+	Button,
+	Panel,
+	PanelBody,
+} from '@wordpress/components';
+import { useEffect, useRef } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Internal dependencies
@@ -22,34 +32,105 @@ const { features } = window.classifAISettings;
  * @return {Object} The ServiceSettings component.
  */
 export const ServiceSettings = () => {
-	const { setCurrentService } = useDispatch( STORE_NAME );
+	const {
+		setCurrentService,
+		setIsSaving,
+		setSettings
+	} = useDispatch( STORE_NAME );
+
 	const { service } = useParams();
+	const isInitialPageLoad = useRef( true );
+
+	const { settings, getFeatureSettings } = useSelect( ( select ) => {
+		const store = select( STORE_NAME );
+
+		return {
+			settings: store.getSettings(),
+			getFeatureSettings: ( key, featureName ) => store.getFeatureSettings( key, featureName ),
+		}
+	} );
+
 	useEffect( () => {
 		setCurrentService( service );
 	}, [ service, setCurrentService ] );
 
 	const serviceFeatures = features[ service ] || {};
+
+	const saveSettings = () => {
+		setIsSaving( true );
+		apiFetch( {
+			path: '/classifai/v1/settings/',
+			method: 'POST',
+			data: {
+				settings,
+				is_setup: true,
+				step: 'enable_features',
+			},
+		} ).then( ( res ) => {
+			if ( res.errors && res.errors.length ) {
+				res.errors.forEach( ( error ) => {
+					createErrorNotice( error.message, {
+						id: `error-${ featureName }`,
+					} );
+				} );
+				setSettings( res.settings );
+				setIsSaving( false );
+				return;
+			}
+
+			setSettings( res.settings );
+			setIsSaving( false );
+		} )
+	};
+
+	const statuses = Object.keys( settings ).map( ( key ) => settings[ key ].status ).join( '' );
+
+	useEffect( () => {
+		if ( isInitialPageLoad.current ) {
+			isInitialPageLoad.current = false;
+			return;
+		}
+		saveSettings()
+	}, [ statuses ] );
+
 	return (
-		<div className="service-settings-wrapper">
-			<div className="classifai-tabs" aria-orientation="vertical">
-				{ Object.keys( serviceFeatures ).map( ( feature ) => (
-					<NavLink
-						to={ feature }
-						key={ feature }
-						className={ ( { isActive } ) =>
-							isActive
-								? 'active-tab classifai-tabs-item'
-								: 'classifai-tabs-item'
-						}
-					>
-						{ serviceFeatures[ feature ]?.label ||
-							__( 'Feature', 'classifai' ) }
-					</NavLink>
-				) ) }
-			</div>
-			<div className="feature-settings-wrapper">
-				<Outlet />
-			</div>
+		<div className="classifai-settings-dashboard">
+			{ Object.keys( serviceFeatures ).map( ( feature ) => (
+				<Panel>
+					<PanelBody>
+						<Flex gap={ 8 } align='top'>
+							<FlexItem style={ { marginTop: '4px' } }>
+								<Flex gap={ 2 }>
+									<ToggleControl
+										className="classifai-feature-status"
+										checked={ '1' === getFeatureSettings( 'status', feature ) }
+										onChange={ ( value ) => wp.data.dispatch( STORE_NAME ).setFeatureSettings( { status: value ? '1' : '0' }, feature ) }
+									/>
+								</Flex>
+							</FlexItem>
+							<FlexBlock>
+								<strong>{ serviceFeatures[ feature ]?.label }</strong>
+								<div dangerouslySetInnerHTML={ { __html: serviceFeatures[ feature ]?.enable_description } } />
+							</FlexBlock>
+							<FlexItem>
+								<NavLink
+									to={ feature }
+									key={ feature }
+								>
+									<Button
+										variant="secondary"
+										size="small"
+										disabled={ '0' === getFeatureSettings( 'status', feature ) }
+									>
+										{ __( 'Edit', 'classifai' ) }
+									</Button>
+								</NavLink>
+							</FlexItem>
+						</Flex>
+						<h1></h1>
+					</PanelBody>
+				</Panel>
+			) ) }
 		</div>
 	);
 };

src/scss/settings.scss

@@ -572,3 +572,16 @@
 	margin: 0 auto;
 	top: 1rem;
 }
+
+.classifai-settings-dashboard {
+	margin-top: 36px;
+	max-width: 700px;
+}
+
+.classifai-feature-status {
+	margin-bottom: 0 !important;
+
+	.components-flex {
+		gap: 0 !important;
+	}
+}