A4A: Settings page - Allow more tabs and load the tab content + tab v…

…alidation (#91001)

* Define the Agency Profile tab constant

* Create the :tab param for the route

* Add the buildNavItems helper function

* Update the Setting main page to build the navItems with buildNavItems() and render the tabContent

* Update the controller to validate the settings/:tab route

* tab => selectedTab

client/a8c-for-agencies/components/layout/nav.tsx

@@ -12,7 +12,8 @@ type LayoutNavigationProps = {
 	selectedCount?: number;
 };
 
-type LayoutNavigationItemProps = {
+export type LayoutNavigationItemProps = {
+	key?: string;
 	label: string;
 	compactCount?: boolean;
 	onClick?: () => void;
@@ -27,6 +28,24 @@ type LayoutNavigationTabsProps = {
 	items: LayoutNavigationItemProps[];
 };
 
+export const buildNavItems = ( {
+	items,
+	selectedKey,
+	onItemClick,
+	basePath,
+}: {
+	items: LayoutNavigationItemProps[];
+	selectedKey: string;
+	onItemClick?: () => void;
+	basePath?: string;
+} ): LayoutNavigationItemProps[] =>
+	items.map( ( navItem ) => ( {
+		...navItem,
+		selected: selectedKey === navItem.key,
+		path: `${ basePath }/${ navItem.key }`,
+		onClick: onItemClick,
+	} ) );
+
 export function LayoutNavigationTabs( {
 	selectedText,
 	selectedCount,

client/a8c-for-agencies/sections/settings/constants.ts

@@ -0,0 +1 @@
+export const SETTINGS_AGENCY_PROFILE_TAB = 'agency-profile';

client/a8c-for-agencies/sections/settings/controller.tsx

@@ -1,14 +1,23 @@
 import { type Callback } from '@automattic/calypso-router';
+import page from '@automattic/calypso-router';
+import { A4A_SETTINGS_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
 import MainSidebar from '../../components/sidebar-menu/main';
+import { SETTINGS_AGENCY_PROFILE_TAB } from './constants';
 import Settings from './settings';
 
 export const settingsContext: Callback = ( context, next ) => {
+	const validTabs = [ SETTINGS_AGENCY_PROFILE_TAB ];
+	if ( ! validTabs.includes( context.params.tab ) ) {
+		page.redirect( A4A_SETTINGS_LINK );
+		return;
+	}
+
 	context.secondary = <MainSidebar path={ context.path } />;
 	context.primary = (
 		<>
 			<PageViewTracker title="Settings" path={ context.path } />
-			<Settings />
+			<Settings selectedTab={ context.params.tab } />
 		</>
 	);
 

client/a8c-for-agencies/sections/settings/index.tsx

@@ -2,16 +2,17 @@ import page from '@automattic/calypso-router';
 import { A4A_SETTINGS_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import { requireAccessContext } from 'calypso/a8c-for-agencies/controller';
 import { makeLayout, render as clientRender } from 'calypso/controller';
+import { SETTINGS_AGENCY_PROFILE_TAB } from './constants';
 import { settingsContext } from './controller';
 
 export default function () {
 	// todo: we have only one tab, this redirect /settings to /settings/agency-profile
 	page( A4A_SETTINGS_LINK, () => {
-		page.redirect( `${ A4A_SETTINGS_LINK }/agency-profile` );
+		page.redirect( `${ A4A_SETTINGS_LINK }/${ SETTINGS_AGENCY_PROFILE_TAB }` );
 	} );
 
 	page(
-		`${ A4A_SETTINGS_LINK }/agency-profile`,
+		`${ A4A_SETTINGS_LINK }/:tab`,
 		requireAccessContext,
 		settingsContext,
 		makeLayout,

client/a8c-for-agencies/sections/settings/settings.tsx

@@ -5,6 +5,8 @@ import LayoutHeader, {
 	LayoutHeaderTitle as Title,
 } from 'calypso/a8c-for-agencies/components/layout/header';
 import LayoutNavigation, {
+	buildNavItems,
+	LayoutNavigationItemProps,
 	LayoutNavigationTabs,
 } from 'calypso/a8c-for-agencies/components/layout/nav';
 import LayoutTop from 'calypso/a8c-for-agencies/components/layout/top';
@@ -13,31 +15,51 @@ import { A4A_SETTINGS_LINK } from 'calypso/a8c-for-agencies/components/sidebar-m
 import { useDispatch } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import AgencyProfile from './agency-profile';
+import { SETTINGS_AGENCY_PROFILE_TAB } from './constants';
 
-export default function Settings() {
+type Props = {
+	selectedTab: string;
+};
+
+export default function Settings( { selectedTab }: Props ) {
 	const translate = useTranslate();
 	const dispatch = useDispatch();
 	const title = translate( 'Settings' );
 
-	const navItems = [
-		{
-			key: 'agency_profile',
+	// Define here all the Settings tabs
+	const settingsTabs: { [ key: string ]: LayoutNavigationItemProps } = {
+		[ SETTINGS_AGENCY_PROFILE_TAB ]: {
+			key: SETTINGS_AGENCY_PROFILE_TAB,
 			label: translate( 'Agency Profile' ),
 		},
-	].map( ( navItem ) => ( {
-		...navItem,
-		selected: true,
-		path: `${ A4A_SETTINGS_LINK }/agency-profile`,
-		onClick: () => {
-			dispatch( recordTracksEvent( 'calypso_a4a_settings_agency_profile_click' ) );
+	};
+
+	// Build all the navigation items
+	const navItems = buildNavItems( {
+		items: Object.values( settingsTabs ),
+		selectedKey: selectedTab,
+		basePath: A4A_SETTINGS_LINK,
+		onItemClick: () => {
+			dispatch(
+				recordTracksEvent( 'calypso_a4a_settings_click', {
+					status: selectedTab,
+				} )
+			);
 		},
-	} ) );
+	} );
 
-	const selectedItem = navItems.find( ( i ) => i.selected ) || navItems[ 0 ];
 	const selectedItemProps = {
-		selectedText: selectedItem.label,
+		selectedText: settingsTabs[ selectedTab ].label,
 	};
 
+	// Content tab switch
+	let tabContent = null;
+	switch ( selectedTab ) {
+		case SETTINGS_AGENCY_PROFILE_TAB:
+			tabContent = <AgencyProfile />;
+			break;
+	}
+
 	return (
 		<Layout title={ title } wide sidebarNavigation={ <MobileSidebarNavigation /> }>
 			<LayoutTop>
@@ -48,10 +70,7 @@ export default function Settings() {
 					<LayoutNavigationTabs { ...selectedItemProps } items={ navItems } />
 				</LayoutNavigation>
 			</LayoutTop>
-			<LayoutBody>
-				<h1>This is the Settings section with tabs (WIP)</h1>
-				<AgencyProfile />
-			</LayoutBody>
+			<LayoutBody>{ tabContent }</LayoutBody>
 		</Layout>
 	);
 }