From 11098896cdcba89076e2b987c3d939ae5ad17396 Mon Sep 17 00:00:00 2001 From: Clemen Date: Thu, 23 May 2024 07:14:01 +0100 Subject: [PATCH] A4A: Settings page - Allow more tabs and load the tab content + tab validation (#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 --- .../components/layout/nav.tsx | 21 +++++++- .../sections/settings/constants.ts | 1 + .../sections/settings/controller.tsx | 11 +++- .../sections/settings/index.tsx | 5 +- .../sections/settings/settings.tsx | 53 +++++++++++++------ 5 files changed, 70 insertions(+), 21 deletions(-) create mode 100644 client/a8c-for-agencies/sections/settings/constants.ts diff --git a/client/a8c-for-agencies/components/layout/nav.tsx b/client/a8c-for-agencies/components/layout/nav.tsx index 279ef560afad8..4bb82f688110d 100644 --- a/client/a8c-for-agencies/components/layout/nav.tsx +++ b/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, diff --git a/client/a8c-for-agencies/sections/settings/constants.ts b/client/a8c-for-agencies/sections/settings/constants.ts new file mode 100644 index 0000000000000..c7574727e3658 --- /dev/null +++ b/client/a8c-for-agencies/sections/settings/constants.ts @@ -0,0 +1 @@ +export const SETTINGS_AGENCY_PROFILE_TAB = 'agency-profile'; diff --git a/client/a8c-for-agencies/sections/settings/controller.tsx b/client/a8c-for-agencies/sections/settings/controller.tsx index 88d8c8d2a9f90..da7a47abeae44 100644 --- a/client/a8c-for-agencies/sections/settings/controller.tsx +++ b/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 = ; context.primary = ( <> - + ); diff --git a/client/a8c-for-agencies/sections/settings/index.tsx b/client/a8c-for-agencies/sections/settings/index.tsx index 5931c652c01d4..2308b23ecba22 100644 --- a/client/a8c-for-agencies/sections/settings/index.tsx +++ b/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, diff --git a/client/a8c-for-agencies/sections/settings/settings.tsx b/client/a8c-for-agencies/sections/settings/settings.tsx index 2dc208c9e7282..bc1de018424c4 100644 --- a/client/a8c-for-agencies/sections/settings/settings.tsx +++ b/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 = ; + break; + } + return ( }> @@ -48,10 +70,7 @@ export default function Settings() { - -

This is the Settings section with tabs (WIP)

- - + { tabContent } ); }