Prod 3245 Integrate Self-Service Challenges, Support, Settings, Footer -> TCA-3115_uni-nav

src-ts/config/constants.ts

@@ -2,8 +2,9 @@ export enum ToolTitle {
     dev = 'Dev Center',
     game = 'Gamification Admin',
     settings = 'Account Settings',
+    support = 'Support',
     tca = 'Topcoder Academy',
-    work = 'Self-Service',
+    work = 'Self-Service Challenges',
 }
 
 export const PageSubheaderPortalId: string = 'page-subheader-portal-el'

src-ts/lib/functions/authentication-functions/authentication.functions.ts

@@ -26,7 +26,7 @@ export function getRegistrationSource(
     activeTool: PlatformRoute | undefined,
 ): AuthenticationRegistrationSource | undefined {
 
-    switch (activeTool?.title) {
+    switch (activeTool?.id) {
 
         // currently, there is no reg source for members
         case ToolTitle.tca:

src-ts/lib/page-footer/PageFooter.tsx

@@ -1,93 +1,21 @@
-import { Dispatch, FC, MouseEvent, SetStateAction, useState } from 'react'
+import { FC } from 'react'
 
-import { ContactSupportModal, OrderContractModal, PrivacyPolicyModal, TermsModal } from '../modals'
-import { ProfileProvider } from '../profile-provider'
-import { Facebook, Instagram, LinkedIn, Twitter, Youtube } from '../social-links'
-
-import styles from './PageFooter.module.scss'
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare let tcUniNav: any
 
 const PageFooter: FC<{}> = () => {
 
-    const [isContactSupportModalOpen, setIsContactSupportModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
-    const [isOrderContractModalOpen, setIsOrderContractModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
-    const [isPrivacyModalOpen, setIsPrivacyModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
-    const [isTermsModalOpen, setIsTermsModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
-
-    function handleClick(event: MouseEvent<HTMLAnchorElement>, setter: Dispatch<SetStateAction<boolean>>): void {
-        event.preventDefault()
-        setter(true)
-    }
-
-    return (
-        <div className={styles['footer-wrap']}>
-
-            <ProfileProvider>
-                <ContactSupportModal
-                    isOpen={isContactSupportModalOpen}
-                    onClose={() => setIsContactSupportModalOpen(false)}
-                />
-            </ProfileProvider>
+    const navElementId: string = 'footer-nav-el'
 
-            <OrderContractModal
-                isOpen={isOrderContractModalOpen}
-                onClose={() => setIsOrderContractModalOpen(false)}
-            />
-
-            <PrivacyPolicyModal
-                isOpen={isPrivacyModalOpen}
-                onClose={() => setIsPrivacyModalOpen(false)}
-            />
-
-            <TermsModal
-                isOpen={isTermsModalOpen}
-                onClose={() => setIsTermsModalOpen(false)}
-            />
-
-            <div className={styles['footer-inner']}>
-                <div className={styles.utils}>
-                    <div>
-                        <span>
-                            ©
-                            {(new Date())
-                                .getFullYear()}
-                            {' '}
-                            Topcoder
-                        </span>
-                        <a
-                            href={window.location.href}
-                            onClick={e => handleClick(e, setIsContactSupportModalOpen)}
-                        >
-                            Support
-                        </a>
-                        {/* TODO: add Report a bug functionality to send to zendesk
-                        https://topcoder.atlassian.net/browse/PROD-1864
-                        <a href='#'>See a Bug?</a> */}
-                    </div>
-                    <div>
-                        <a
-                            href={window.location.href}
-                            onClick={e => handleClick(e, setIsTermsModalOpen)}
-                        >
-                            Terms
-                        </a>
-                        <a
-                            href={window.location.href}
-                            onClick={e => handleClick(e, setIsPrivacyModalOpen)}
-                        >
-                            Privacy Policy
-                        </a>
-                    </div>
-                </div>
-                <div className={styles.social}>
-                    <Facebook />
-                    <Youtube />
-                    <LinkedIn />
-                    <Twitter />
-                    <Instagram />
-                </div>
-            </div>
-        </div>
+    tcUniNav(
+        'init',
+        navElementId,
+        {
+            type: 'footer',
+        },
     )
+
+    return <div id={navElementId} />
 }
 
 export default PageFooter

src-ts/lib/route-provider/platform-route.model.ts

@@ -2,11 +2,10 @@ export interface PlatformRoute {
     alternativePaths?: Array<string>
     authRequired?: boolean
     children?: Array<PlatformRoute>
-    customerOnly?: boolean
     disabled?: boolean
     element: JSX.Element
     hidden?: boolean
-    memberOnly?: boolean
+    id?: string
     rolesRequired?: Array<string>
     route: string
     title?: string

src-ts/lib/route-provider/route-context-data.model.ts

@@ -8,7 +8,6 @@ export interface RouteContextData {
     allRoutes: Array<PlatformRoute>
     getChildren: (parent: string) => Array<PlatformRoute>
     getChildRoutes: (parent: string) => Array<ReactElement>
-    getPath: (routeTitle: string) => string
     getPathFromRoute: (route: PlatformRoute) => string
     getRouteElement: (route: PlatformRoute) => JSX.Element
     getSignupUrl: (currentLocation: string, toolRoutes: Array<PlatformRoute>, returnUrl?: string) => string
@@ -17,6 +16,5 @@ export interface RouteContextData {
     rootLoggedInRoute: string
     rootLoggedOutFC: FC<{}>
     toolsRoutes: Array<PlatformRoute>
-    toolsRoutesForNav: Array<PlatformRoute>
     utilsRoutes: Array<PlatformRoute>
 }

src-ts/lib/route-provider/route-functions/index.ts

@@ -1,4 +1,4 @@
 export {
+    getActive as routeGetActive,
     getSignupUrl as routeGetSignupUrl,
-    isActiveTool as routeIsActiveTool,
 } from './route.functions'

src-ts/lib/route-provider/route-functions/route.functions.ts

@@ -5,6 +5,10 @@ import {
 } from '../../functions'
 import { PlatformRoute } from '../platform-route.model'
 
+export function getActive(currentLocation: string, toolRoutes: Array<PlatformRoute>): PlatformRoute | undefined {
+    return toolRoutes.find(tool => isActiveTool(currentLocation, tool))
+}
+
 // NOTE: this function ties together routes and auth,
 // so one could make an argument that it should be
 // part of the auth functions and be provided by the
@@ -18,14 +22,14 @@ export function getSignupUrl(
 ): string {
 
     // figure out the current tool so we can assign the correct reg source
-    const activeTool: PlatformRoute | undefined = toolRoutes.find(tool => isActiveTool(currentLocation, tool))
+    const activeTool: PlatformRoute | undefined = getActive(currentLocation, toolRoutes)
     const regSource: AuthenticationRegistrationSource | undefined
         = authGetRegistrationSource(activeTool)
 
     return authUrlSignup(returnUrl, regSource)
 }
 
-export function isActiveTool(activePath: string, toolRoute: PlatformRoute): boolean {
+function isActiveTool(activePath: string, toolRoute: PlatformRoute): boolean {
     return !!activePath.startsWith(toolRoute.route)
         || !!toolRoute.alternativePaths?.some(path => activePath.startsWith(path))
 }

src-ts/lib/route-provider/route.context.tsx

@@ -4,9 +4,8 @@ import { RouteContextData } from './route-context-data.model'
 
 export const defaultRouteContextData: RouteContextData = {
     allRoutes: [],
-    getChildRoutes: () => [],
     getChildren: () => [],
-    getPath: () => '',
+    getChildRoutes: () => [],
     getPathFromRoute: () => '',
     getRouteElement: () => <></>,
     getSignupUrl: () => '',
@@ -15,7 +14,6 @@ export const defaultRouteContextData: RouteContextData = {
     rootLoggedInRoute: '',
     rootLoggedOutFC: () => <></>,
     toolsRoutes: [],
-    toolsRoutesForNav: [],
     utilsRoutes: [],
 }
 

src-ts/lib/route-provider/route.provider.tsx

@@ -18,7 +18,7 @@ import { profileContext, ProfileContextData } from '../profile-provider'
 import { PlatformRoute } from './platform-route.model'
 import { RequireAuthProvider } from './require-auth-provider'
 import { RouteContextData } from './route-context-data.model'
-import { routeGetSignupUrl, routeIsActiveTool } from './route-functions'
+import { routeGetActive, routeGetSignupUrl } from './route-functions'
 import { default as routeContext, defaultRouteContextData } from './route.context'
 
 interface RouteProviderProps {
@@ -47,39 +47,14 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
         // TODO: try to make these prop names configurable instead of hard-codded
         const toolsRoutes: Array<PlatformRoute> = props.toolsRoutes.filter(route => !route.disabled)
 
-        // display a tool in the nav if the following conditions are met:
-        // 1. the tool has a title
-        // 2. the tool isn't hidden (if the tool is hidden, it should never appear in the nav)
-        // AND
-        // 3. the tool is one of the following:
-        //    a. for customers and the user is a customer
-        //    b. for members and the user is a member
-        //    c. the active tool in the app (in case someone deep-links to it)
-        let activeRoute: PlatformRoute | undefined
-        const toolsRoutesForNav: Array<PlatformRoute> = toolsRoutes
-            .filter(route => {
-
-                const isActive: boolean = routeIsActiveTool(location.pathname, route)
-                if (isActive) {
-                    activeRoute = route
-                }
-
-                return !!route.title
-                    && !route.hidden
-                    && (
-                        (
-                            (!route.customerOnly || !!profile?.isCustomer)
-                            && (!route.memberOnly || !!profile?.isMember)
-                        )
-                        || isActive
-                    )
-            })
-
         const utilsRoutes: Array<PlatformRoute> = props.utilsRoutes.filter(route => !route.disabled)
         allRoutes = [
             ...toolsRoutes,
             ...utilsRoutes,
         ]
+
+        const activeRoute: PlatformRoute | undefined = routeGetActive(location.pathname, allRoutes)
+
         // TODO: support additional roles and landing pages
         const loggedInRoot: string = !profile
             ? ''
@@ -88,12 +63,11 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
                 : props.rootMember
 
         const contextData: RouteContextData = {
-            activeToolName: activeRoute?.title,
+            activeToolName: activeRoute?.title || activeRoute?.id,
             activeToolRoute: !!activeRoute ? `https://${window.location.hostname}${activeRoute.route}` : undefined,
             allRoutes,
             getChildren,
             getChildRoutes,
-            getPath,
             getPathFromRoute,
             getRouteElement,
             getSignupUrl: routeGetSignupUrl,
@@ -102,15 +76,14 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
             rootLoggedInRoute: loggedInRoot,
             rootLoggedOutFC: props.rootLoggedOutFC,
             toolsRoutes,
-            toolsRoutesForNav,
             utilsRoutes,
         }
         setRouteContextData(contextData)
     }
 
     function getChildren(parent: string): Array<PlatformRoute> {
         return allRoutes
-            .find(route => route.title === parent)
+            .find(route => route.id === parent)
             ?.children
             || []
     }
@@ -120,12 +93,6 @@ export const RouteProvider: FC<RouteProviderProps> = (props: RouteProviderProps)
             .map(route => getRouteElement(route))
     }
 
-    function getPath(routeTitle: string): string {
-        const platformRoute: PlatformRoute = allRoutes.find(route => route.title === routeTitle) as PlatformRoute
-        // if the path has a trailing asterisk, remove it
-        return getPathFromRoute(platformRoute)
-    }
-
     function getPathFromRoute(route: PlatformRoute): string {
         return route.route.replace('/*', '')
     }