+
{section.label}
-
- {#each section.children ?? [] as group}
-
- {#if group.label}
-
- {group.label}
-
- {/if}
-
-
- {#each group.children ?? [] as navItem}
-
- {#if navItem.type !== 'cta'}
-
-
-{:else if popupIsVisible}
- popupIsVisible = false}>
-
+ {#if !$isMobile}
+
+
+ {:else if popupIsVisible}
+ popupIsVisible = false}>
+
+ {/if}
{/if}
diff --git a/src/lib/config/hosts.ts b/src/lib/config/hosts.ts
index 8ebdae49..072e7630 100644
--- a/src/lib/config/hosts.ts
+++ b/src/lib/config/hosts.ts
@@ -36,3 +36,21 @@ export const ACCOUNT_SETTINGS_HOST: string = `https://account-settings.${TC_DOMA
export const WALLETAPP_HOST: string = `https://wallet.${TC_DOMAIN}`;
export const COPILOT_PORTAL_HOST: string = `https://copilots.${TC_DOMAIN}`;
export const ENGAGEMENT_PORTAL_HOST: string = `https://engagements.${TC_DOMAIN}`;
+
+// App drawer (tool selector) hosts
+export const ARCHIVE_HOST: string = `https://archive.${TC_DOMAIN}`;
+export const FORUMS_HOST: string = `https://forums.${TC_DOMAIN}`;
+export const WORK_APP_HOST: string = `https://work.${TC_DOMAIN}`;
+export const WALLET_ADMIN_HOST: string = `https://wallet-admin.${TC_DOMAIN}`;
+export const CUSTOMER_PORTAL_HOST: string = `https://customer.${TC_DOMAIN}`;
+export const SALES_HOST: string = `https://sales.${TC_DOMAIN}`;
+export const PROCUREMENT_HOST: string = `https://procurement.${TC_DOMAIN}`;
+export const ANALYTICS_HOST: string = `https://analytics.${TC_DOMAIN}`;
+export const REPORTS_HOST: string = `https://reports.${TC_DOMAIN}`;
+export const SUPPORT_HOST: string = `https://support.${TC_DOMAIN}`;
+export const PAYLOAD_CMS_HOST: string = `https://cms.${TC_DOMAIN}`;
+export const CONTACT_HOST: string = `https://contact.${TC_DOMAIN}`;
+export const CAMPUS_HOST: string = `https://campus.${TC_DOMAIN}`;
+export const CALENDAR_HOST: string = `https://calendar.${TC_DOMAIN}`;
+export const SYSTEM_ADMIN_HOST: string = `https://system-admin.${TC_DOMAIN}`;
+export const SALESFORCE_URL: string = 'https://topcoder.my.salesforce.com';
diff --git a/src/lib/config/nav-menu/all-nav-items.config.ts b/src/lib/config/nav-menu/all-nav-items.config.ts
index aa550bd3..efab905e 100644
--- a/src/lib/config/nav-menu/all-nav-items.config.ts
+++ b/src/lib/config/nav-menu/all-nav-items.config.ts
@@ -4,16 +4,29 @@ import type { NavMenuItem } from "../../functions/nav-menu-item.model";
import {
CHALLENGE_HOST,
COMMUNITY_HOST,
- CONNECT_HOST,
COPILOT_PORTAL_HOST,
REVIEW_APP_HOST,
- TALENT_SEARCH_HOST,
TCACADEMY_HOST,
PLATFORM_APP_HOST,
WALLETAPP_HOST,
- WORK_MANAGER_HOST,
AUTH0_AUTHENTICATOR_URL,
ENGAGEMENT_PORTAL_HOST,
+ ARCHIVE_HOST,
+ FORUMS_HOST,
+ WORK_APP_HOST,
+ WALLET_ADMIN_HOST,
+ CUSTOMER_PORTAL_HOST,
+ SALES_HOST,
+ PROCUREMENT_HOST,
+ ANALYTICS_HOST,
+ REPORTS_HOST,
+ SUPPORT_HOST,
+ PAYLOAD_CMS_HOST,
+ CONTACT_HOST,
+ CAMPUS_HOST,
+ CALENDAR_HOST,
+ SYSTEM_ADMIN_HOST,
+ SALESFORCE_URL,
} from '..';
export const allNavItems: {[key: string]: NavMenuItem} = {
@@ -42,21 +55,21 @@ export const allNavItems: {[key: string]: NavMenuItem} = {
mmTournament: {
label: 'Marathon Match Tournament',
icon: 'mm-tournament',
- description: 'Join the Excitement',
+ description: 'Compete for the MM championship',
marketingPathname: '/marathon-match-tournament',
url: getMarketingUrl('/marathon-match-tournament'),
},
aiHub: {
label: 'AI Hub',
icon: 'ai-hub',
- description: 'Collaborate, Compete, Create',
+ description: 'Build and compete with AI',
marketingPathname: '/ai-hub',
url: getMarketingUrl('/ai-hub'),
},
copilotPortal: {
label: 'Copilot Portal',
icon: 'copilot-portal',
- description: 'Copilot Opportunities',
+ description: 'Copilot opportunities',
url: COPILOT_PORTAL_HOST,
},
howItWorks: {
@@ -93,9 +106,15 @@ export const allNavItems: {[key: string]: NavMenuItem} = {
articles: {
label: 'Articles',
icon: 'articles',
- description: 'Get insights and tips about Topcoder',
+ description: 'Tutorials and how-tos',
url: `${COMMUNITY_HOST}/thrive`,
},
+ archive: {
+ label: 'Archive',
+ icon: 'archive',
+ description: 'Past problems & TCO history',
+ url: ARCHIVE_HOST,
+ },
blog: {
label: 'Blog',
url: getMarketingUrl('/blog'),
@@ -124,6 +143,12 @@ export const allNavItems: {[key: string]: NavMenuItem} = {
icon: 'discord',
description: 'Chat live with members',
},
+ publicForums: {
+ label: 'Public Forums',
+ url: FORUMS_HOST,
+ icon: 'forums',
+ description: 'Q&A and discussions',
+ },
home: {
label: 'Home',
marketingPathname: '/',
@@ -141,30 +166,12 @@ export const allNavItems: {[key: string]: NavMenuItem} = {
icon: 'payments',
description: 'Get paid',
},
- practice: {
- label: 'Practice',
- icon: 'practice',
- url: `${CHALLENGE_HOST}/challenges?search=practice&tracks%5BDS%5D=true&tracks%5BDes%5D=true&tracks%5BDev%5D=true&tracks%5BQA%5D=true&types%5B%5D=CH&types%5B%5D=F2F&types%5B%5D=TSK`,
- description: 'Learn to compete',
- },
review: {
- label: 'Review',
+ label: 'Review App',
url: REVIEW_APP_HOST,
icon: 'review',
description: 'Review submissions',
},
- communityHome: {
- label: 'Community Home',
- description: 'Recent challenges and news.',
- icon: 'topcrowd',
- url: `${COMMUNITY_HOST}/home`,
- },
- talentSearchApp: {
- label: 'Meet our Talent',
- icon: 'talent-search',
- description: 'Find skilled talent for your next project',
- url: TALENT_SEARCH_HOST,
- },
talkToAnExpert: {
label: 'Talk to an Expert',
description: 'Speak with a Topcoder expert to get started.',
@@ -177,17 +184,89 @@ export const allNavItems: {[key: string]: NavMenuItem} = {
icon: 'tcacademy',
description: 'Learn new skills',
},
- workManager: {
- label: 'Work Manager',
- icon: 'work-manager',
- description: 'Work Manager App',
- url: `${WORK_MANAGER_HOST}`,
- },
- staffConnect: {
- label: 'Connect',
- icon: 'connect',
- description: 'Connect App',
- url: `${CONNECT_HOST}`,
+ workApp: {
+ label: 'Work App',
+ icon: 'work-app',
+ description: 'Launch and manage work',
+ url: WORK_APP_HOST,
+ },
+ walletAdmin: {
+ label: 'Wallet Admin',
+ icon: 'wallet-admin',
+ description: 'Manage member payouts',
+ url: WALLET_ADMIN_HOST,
+ },
+ customerPortal: {
+ label: 'Customer Portal',
+ icon: 'customer-portal',
+ description: 'Talent, stats & showcases',
+ url: CUSTOMER_PORTAL_HOST,
+ },
+ salesforce: {
+ label: 'Salesforce',
+ icon: 'salesforce',
+ description: 'Manage accounts & leads',
+ url: SALESFORCE_URL,
+ },
+ salesPipeline: {
+ label: 'Sales Pipeline',
+ icon: 'sales-pipeline',
+ description: 'Track deals by stage',
+ url: SALES_HOST,
+ },
+ procurement: {
+ label: 'Procurement',
+ icon: 'procurement',
+ description: 'Vendors and purchasing',
+ url: PROCUREMENT_HOST,
+ },
+ analytics: {
+ label: 'Analytics',
+ icon: 'analytics',
+ description: 'Platform and member data',
+ url: ANALYTICS_HOST,
+ },
+ reports: {
+ label: 'Reports',
+ icon: 'reports',
+ description: 'Pull data on demand',
+ url: REPORTS_HOST,
+ },
+ supportApp: {
+ label: 'Support',
+ icon: 'support',
+ description: 'Handle member tickets',
+ url: SUPPORT_HOST,
+ },
+ payloadCms: {
+ label: 'Payload CMS',
+ icon: 'payload-cms',
+ description: 'Edit site content',
+ url: `${PAYLOAD_CMS_HOST}/admin`,
+ },
+ massEmail: {
+ label: 'Mass Email',
+ icon: 'mass-email',
+ description: 'Email members at scale',
+ url: CONTACT_HOST,
+ },
+ campus: {
+ label: 'Campus',
+ icon: 'campus',
+ description: 'University programs',
+ url: CAMPUS_HOST,
+ },
+ leaveTracker: {
+ label: 'Leave Tracker',
+ icon: 'leave-tracker',
+ description: 'Plan and track time off',
+ url: CALENDAR_HOST,
+ },
+ systemAdmin: {
+ label: 'System Admin',
+ icon: 'system-admin',
+ description: 'Platform-wide admin tools',
+ url: SYSTEM_ADMIN_HOST,
},
bugHunt: {
label: 'Bug Hunt',
diff --git a/src/lib/config/nav-menu/tool-selector-nav-items.ts b/src/lib/config/nav-menu/tool-selector-nav-items.ts
index 9aceab55..59be6ec4 100644
--- a/src/lib/config/nav-menu/tool-selector-nav-items.ts
+++ b/src/lib/config/nav-menu/tool-selector-nav-items.ts
@@ -1,86 +1,120 @@
import type { NavMenuItem } from "../../functions/nav-menu-item.model";
-import { CUSTOMER_ROUTE_GUARD, STAFF_ROUTE_GUARD, TALENT_ROUTE_GUARD } from "../auth"
+import { STAFF_ROUTE_GUARD, TALENT_ROUTE_GUARD } from "../auth"
import { allNavItems } from "./all-nav-items.config"
+/**
+ * App drawer (tool selector) menu.
+ *
+ * Structure: section (role guarded) -> columns -> groups -> nav items.
+ * Each section renders its columns side by side on desktop and stacked on mobile,
+ * so the groups listed in a column are displayed top to bottom in that column.
+ */
export const toolSelectorNavItems: NavMenuItem = {
children: [
{
- label: "Customer",
+ label: "Talent",
children: [
{
children: [
- allNavItems.talentSearchApp,
+ {
+ label: "Earn",
+ children: [
+ allNavItems.challengesApp,
+ allNavItems.engagementsApp,
+ allNavItems.copilotPortal,
+ allNavItems.review,
+ allNavItems.payments,
+ ]
+ },
+ {
+ label: "Compete",
+ children: [
+ allNavItems.marathonMatchesApp,
+ allNavItems.mmTournament,
+ ]
+ },
]
},
{
children: [
- allNavItems.talkToAnExpert,
- allNavItems.bookADemo,
+ {
+ label: "AI",
+ children: [
+ allNavItems.aiHub,
+ ]
+ },
+ {
+ label: "Learn",
+ children: [
+ allNavItems.topcoderAcademyApp,
+ {
+ ...allNavItems.articles,
+ url: `${allNavItems.articles.url}?navTool=tool`
+ },
+ allNavItems.archive,
+ ]
+ },
+ {
+ label: "Connect",
+ children: [
+ allNavItems.publicForums,
+ allNavItems.discordApp,
+ ]
+ },
]
- }
+ },
],
- ...CUSTOMER_ROUTE_GUARD,
+ ...TALENT_ROUTE_GUARD,
},
{
- label: "Talent",
+ label: "Staff",
children: [
{
- label: "Learn",
- groupOrder: 1,
- children: [
- allNavItems.communityHome,
- allNavItems.topcoderAcademyApp,
- allNavItems.practice,
- ]
- },
- {
- label: "Earn",
- groupOrder: 2,
- children: [
- allNavItems.challengesApp,
- allNavItems.engagementsApp,
- allNavItems.review,
- allNavItems.payments,
- allNavItems.copilotPortal,
- ]
- },
- {
- label: "AI",
- groupOrder: 3,
- children: [
- allNavItems.aiHub,
- ]
- },
- {
- label: "Compete",
- groupOrder: 3,
children: [
- allNavItems.marathonMatchesApp,
- allNavItems.mmTournament,
+ {
+ label: "Delivery & Payments",
+ children: [
+ allNavItems.workApp,
+ allNavItems.walletAdmin,
+ ]
+ },
+ {
+ label: "Sales & Customers",
+ children: [
+ allNavItems.customerPortal,
+ allNavItems.salesforce,
+ allNavItems.salesPipeline,
+ allNavItems.procurement,
+ ]
+ },
+ {
+ label: "Insights",
+ children: [
+ allNavItems.analytics,
+ allNavItems.reports,
+ ]
+ },
]
},
{
- label: "Connect",
- groupOrder: 4,
children: [
{
- ...allNavItems.articles,
- url: `${allNavItems.articles.url}?navTool=tool`
+ label: "Community & Content",
+ children: [
+ allNavItems.supportApp,
+ allNavItems.payloadCms,
+ allNavItems.massEmail,
+ allNavItems.campus,
+ ]
+ },
+ {
+ label: "Team & Platform",
+ children: [
+ allNavItems.leaveTracker,
+ allNavItems.systemAdmin,
+ ]
},
- allNavItems.discordApp,
- ]
- }
- ],
- ...TALENT_ROUTE_GUARD,
- },
- {
- label: "Staff",
- children: [
- {
- children: [
- allNavItems.workManager,
- allNavItems.staffConnect,
]
},
],
diff --git a/tests/tool-selector-nav-items.test.mjs b/tests/tool-selector-nav-items.test.mjs
new file mode 100644
index 00000000..4b1bc7c6
--- /dev/null
+++ b/tests/tool-selector-nav-items.test.mjs
@@ -0,0 +1,136 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import { after, before, test } from 'node:test';
+import { fileURLToPath } from 'node:url';
+import { createServer } from 'vite';
+
+const root = fileURLToPath(new URL('..', import.meta.url));
+
+// expected app drawer (PM-6555 design): section -> columns -> groups -> tool labels
+const TALENT = ['Talent', [
+ [
+ ['Earn', ['Opportunities', 'Engagement Portal', 'Copilot Portal', 'Review App', 'Wallet']],
+ ['Compete', ['Marathon Matches', 'Marathon Match Tournament']],
+ ],
+ [
+ ['AI', ['AI Hub']],
+ ['Learn', ['Topcoder Academy', 'Articles', 'Archive']],
+ ['Connect', ['Public Forums', 'Discord']],
+ ],
+]];
+const STAFF = ['Staff', [
+ [
+ ['Delivery & Payments', ['Work App', 'Wallet Admin']],
+ ['Sales & Customers', ['Customer Portal', 'Salesforce', 'Sales Pipeline', 'Procurement']],
+ ['Insights', ['Analytics', 'Reports']],
+ ],
+ [
+ ['Community & Content', ['Support', 'Payload CMS', 'Mass Email', 'Campus']],
+ ['Team & Platform', ['Leave Tracker', 'System Admin']],
+ ],
+]];
+
+let server;
+let getToolSelectorItems;
+
+before(async () => {
+ process.env.VITE_APP_HOST_ENV = 'prod';
+ server = await createServer({
+ root,
+ configFile: false,
+ logLevel: 'silent',
+ appType: 'custom',
+ resolve: { alias: { lib: `${root}src/lib` } },
+ server: { middlewareMode: true, hmr: false, watch: null },
+ });
+ ({ getToolSelectorItems } = await server.ssrLoadModule('/src/lib/functions/tool-selector-menu.provider.ts'));
+});
+
+after(() => server?.close());
+
+/**
+ * Stubs the browser globals read by the jwt helpers with a `tcjwt` cookie holding the given roles.
+ * @param {string[]} roles JWT roles of the signed in user
+ */
+function signIn(roles) {
+ const payload = Buffer.from(JSON.stringify({ 'https://topcoder.com/roles': roles })).toString('base64url');
+ globalThis.window = { atob: globalThis.atob };
+ globalThis.document = { cookie: `tcjwt=e30.${payload}.signature` };
+}
+
+/** Reduces the drawer menu to [section, [column[[group, labels]]]] for comparison with the design. */
+const toLayout = (sections) => sections.map((section) => [
+ section.label,
+ section.children.map((column) => column.children.map((group) => [
+ group.label,
+ group.children.map((item) => item.label),
+ ])),
+]);
+
+const toItems = (sections) => sections.flatMap((section) => section.children
+ .flatMap((column) => column.children.flatMap((group) => group.children)));
+
+test('staff see the Talent and Staff sections laid out as in the design', () => {
+ signIn(['Topcoder User', 'Topcoder Staff']);
+ assert.deepEqual(toLayout(getToolSelectorItems()), [TALENT, STAFF]);
+});
+
+test('members only see the Talent section', () => {
+ for (const roles of [['Topcoder User'], ['Topcoder User', 'Topcoder Talent']]) {
+ signIn(roles);
+ assert.deepEqual(toLayout(getToolSelectorItems()), [TALENT]);
+ }
+});
+
+test('customers without talent or staff roles get no drawer items', () => {
+ signIn(['Topcoder Customer']);
+ assert.deepEqual(getToolSelectorItems(), []);
+});
+
+test('every drawer tool has a description, a sprite icon and its production url', async () => {
+ const sprite = await readFile(`${root}public/assets/tools/sprite.svg`, 'utf8');
+ signIn(['Topcoder Staff']);
+ const items = toItems(getToolSelectorItems());
+
+ for (const item of items) {
+ assert.ok(item.description, `${item.label} has a description`);
+ assert.ok(sprite.includes(`id="${item.icon}"`), `${item.label} icon "${item.icon}" is in the sprite`);
+ }
+
+ const urls = Object.fromEntries(items.map((item) => [item.label, item.url]));
+ assert.deepEqual({
+ 'Archive': urls['Archive'],
+ 'Public Forums': urls['Public Forums'],
+ 'Work App': urls['Work App'],
+ 'Wallet Admin': urls['Wallet Admin'],
+ 'Customer Portal': urls['Customer Portal'],
+ 'Salesforce': urls['Salesforce'],
+ 'Sales Pipeline': urls['Sales Pipeline'],
+ 'Procurement': urls['Procurement'],
+ 'Analytics': urls['Analytics'],
+ 'Reports': urls['Reports'],
+ 'Support': urls['Support'],
+ 'Payload CMS': urls['Payload CMS'],
+ 'Mass Email': urls['Mass Email'],
+ 'Campus': urls['Campus'],
+ 'Leave Tracker': urls['Leave Tracker'],
+ 'System Admin': urls['System Admin'],
+ }, {
+ 'Archive': 'https://archive.topcoder.com',
+ 'Public Forums': 'https://forums.topcoder.com',
+ 'Work App': 'https://work.topcoder.com',
+ 'Wallet Admin': 'https://wallet-admin.topcoder.com',
+ 'Customer Portal': 'https://customer.topcoder.com',
+ 'Salesforce': 'https://topcoder.my.salesforce.com',
+ 'Sales Pipeline': 'https://sales.topcoder.com',
+ 'Procurement': 'https://procurement.topcoder.com',
+ 'Analytics': 'https://analytics.topcoder.com',
+ 'Reports': 'https://reports.topcoder.com',
+ 'Support': 'https://support.topcoder.com',
+ 'Payload CMS': 'https://cms.topcoder.com/admin',
+ 'Mass Email': 'https://contact.topcoder.com',
+ 'Campus': 'https://campus.topcoder.com',
+ 'Leave Tracker': 'https://calendar.topcoder.com',
+ 'System Admin': 'https://system-admin.topcoder.com',
+ });
+});
diff --git a/types/src/lib/config/hosts.d.ts b/types/src/lib/config/hosts.d.ts
index 0c5526f8..503bf21e 100644
--- a/types/src/lib/config/hosts.d.ts
+++ b/types/src/lib/config/hosts.d.ts
@@ -19,3 +19,19 @@ export declare const ACCOUNT_SETTINGS_HOST: string;
export declare const WALLETAPP_HOST: string;
export declare const COPILOT_PORTAL_HOST: string;
export declare const ENGAGEMENT_PORTAL_HOST: string;
+export declare const ARCHIVE_HOST: string;
+export declare const FORUMS_HOST: string;
+export declare const WORK_APP_HOST: string;
+export declare const WALLET_ADMIN_HOST: string;
+export declare const CUSTOMER_PORTAL_HOST: string;
+export declare const SALES_HOST: string;
+export declare const PROCUREMENT_HOST: string;
+export declare const ANALYTICS_HOST: string;
+export declare const REPORTS_HOST: string;
+export declare const SUPPORT_HOST: string;
+export declare const PAYLOAD_CMS_HOST: string;
+export declare const CONTACT_HOST: string;
+export declare const CAMPUS_HOST: string;
+export declare const CALENDAR_HOST: string;
+export declare const SYSTEM_ADMIN_HOST: string;
+export declare const SALESFORCE_URL: string;
diff --git a/types/src/lib/config/nav-menu/tool-selector-nav-items.d.ts b/types/src/lib/config/nav-menu/tool-selector-nav-items.d.ts
index 6b23ef7e..db1ca51e 100644
--- a/types/src/lib/config/nav-menu/tool-selector-nav-items.d.ts
+++ b/types/src/lib/config/nav-menu/tool-selector-nav-items.d.ts
@@ -1,2 +1,9 @@
import type { NavMenuItem } from "../../functions/nav-menu-item.model";
+/**
+ * App drawer (tool selector) menu.
+ *
+ * Structure: section (role guarded) -> columns -> groups -> nav items.
+ * Each section renders its columns side by side on desktop and stacked on mobile,
+ * so the groups listed in a column are displayed top to bottom in that column.
+ */
export declare const toolSelectorNavItems: NavMenuItem;
- {#if navItem.icon}
-
- {:else}
- 
- {/if}
-
- {/if}
-
- {#if !!navItem.label}
- {navItem.label}
- {/if}
- {#if navItem.type !== 'cta' && navItem.description}
-
- {navItem.description}
-
- {/if}
+
diff --git a/src/lib/components/tool-selector/ToolSelector.svelte b/src/lib/components/tool-selector/ToolSelector.svelte
index f71c55ad..50d5a5c4 100644
--- a/src/lib/components/tool-selector/ToolSelector.svelte
+++ b/src/lib/components/tool-selector/ToolSelector.svelte
@@ -1,6 +1,7 @@
-
+ {#each section.children ?? [] as column}
+
{/each}
+ {#each column.children ?? [] as group}
+
+ {/each}
+ {#if group.label}
+
+ {/if}
+
+
+ {group.label}
-
- {/each}
-
+ {#each group.children ?? [] as navItem}
+
+
+
+ {#if navItem.icon}
+
+ {:else}
+
+ {/if}
+
+
+ {#if !!navItem.label}
+ {navItem.label}
+ {/if}
+ {#if navItem.description}
+
+ {navItem.description}
+
+ {/if}
+
+
+ {/each}
+ popupIsVisible = true}
- on:keydown={() => {}}
->
-
-
- 
-
-
+{#if hasToolMenuItems}
+
-
- popupIsVisible = true}
+ on:keydown={() => {}}
+ >
+
+
+
+
+
-{#if !$isMobile}
-
+
+