Merge pull request #419 from topcoder-platform/dev-qa

qa -> develop

Author: brooketopcoder

src-ts/header/logo/Logo.tsx

@@ -1,21 +1,26 @@
-import { FC } from 'react'
+import { FC, useContext } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
-import { LogoIcon, routeIsHome, routeRoot } from '../../lib'
+import { LogoIcon, routeContext, RouteContextData } from '../../lib'
 import '../../lib/styles/index.scss'
 
 import styles from './Logo.module.scss'
 
 const Logo: FC<{}> = () => {
 
+    const {
+        isRootRoute,
+        rootLoggedInRoute,
+    }: RouteContextData = useContext(routeContext)
+
     // the logo should be a link to the home page for all pages except the home page(
-    const isLink: boolean = !routeIsHome(useLocation().pathname)
+    const isLink: boolean = !isRootRoute(useLocation().pathname)
 
     return (
         <div className={styles[`logo-${!isLink ? 'no-' : ''}link`]}>
             <Link
                 tabIndex={-1}
-                to={routeRoot}
+                to={rootLoggedInRoute}
             >
                 <LogoIcon />
             </Link>

src-ts/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.tsx

@@ -8,10 +8,10 @@ import styles from './ToolSelectorsNarrow.module.scss'
 
 const ToolSelectorsNarrow: FC<{}> = () => {
 
-    const { toolsRoutes }: RouteContextData = useContext(routeContext)
+    const { toolsRoutesForNav }: RouteContextData = useContext(routeContext)
     const [isOpen, setIsOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
-    const toolSelectors: Array<JSX.Element> = toolsRoutes
+    const toolSelectors: Array<JSX.Element> = toolsRoutesForNav
         .map(route => (
             <ToolSelectorNarrow
                 key={route.title}

src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames'
 import { FC, useContext } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
-import { IconOutline, PlatformRoute, routeContext, RouteContextData, routeIsActive } from '../../../../lib'
+import { IconOutline, PlatformRoute, routeContext, RouteContextData } from '../../../../lib'
 
 import styles from './ToolSelectorNarrow.module.scss'
 
@@ -14,12 +14,15 @@ const isParamRoute: (route: string) => boolean = (route: string) => !!route.matc
 
 const ToolSelectorNarrow: FC<ToolSelectorNarrowProps> = (props: ToolSelectorNarrowProps) => {
 
-    const { getPathFromRoute }: RouteContextData = useContext(routeContext)
+    const {
+        getPathFromRoute,
+        isActiveRoute,
+    }: RouteContextData = useContext(routeContext)
     const toolRoute: PlatformRoute = props.route
     const toolPath: string = getPathFromRoute(toolRoute)
 
     const baseClass: string = 'tool-selector-narrow'
-    const isActive: boolean = routeIsActive(useLocation().pathname, toolPath)
+    const isActive: boolean = isActiveRoute(useLocation().pathname, toolPath)
     const activeIndicaterClass: string = `${baseClass}-${isActive ? '' : 'in'}active`
     const hasChildren: boolean = !!toolRoute.children.some(child => !!child.route && !isParamRoute(child.route))
 

src-ts/header/tool-selectors/tool-selectors-wide/ToolSelectorsWide.tsx

@@ -7,9 +7,9 @@ import styles from './ToolSelectorsWide.module.scss'
 
 const ToolSelectorsWide: FC<{}> = () => {
 
-    const { toolsRoutes }: RouteContextData = useContext(routeContext)
+    const { toolsRoutesForNav }: RouteContextData = useContext(routeContext)
 
-    const selectors: Array<JSX.Element> = toolsRoutes
+    const selectors: Array<JSX.Element> = toolsRoutesForNav
         .map(route => (
             <ToolSelectorWide
                 key={route.title}

src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.tsx

@@ -6,8 +6,6 @@ import {
     PlatformRoute,
     routeContext,
     RouteContextData,
-    routeIsActive,
-    routeIsHome,
 } from '../../../../lib'
 import '../../../../lib/styles/index.scss'
 
@@ -19,17 +17,21 @@ interface ToolSelectorWideProps {
 
 const ToolSelectorWide: FC<ToolSelectorWideProps> = (props: ToolSelectorWideProps) => {
 
-    const { getPathFromRoute }: RouteContextData = useContext(routeContext)
+    const {
+        getPathFromRoute,
+        isActiveRoute,
+        isRootRoute,
+    }: RouteContextData = useContext(routeContext)
     const activePath: string = useLocation().pathname
     const toolRoute: PlatformRoute = props.route
     const toolPath: string = getPathFromRoute(toolRoute)
 
-    const isActive: boolean = routeIsActive(activePath, toolPath)
+    const isActive: boolean = isActiveRoute(activePath, toolPath)
 
     const activeIndicatorClass: string = `tool-selector-wide-${isActive ? '' : 'in'}active`
 
     // the tool link should be usable for all active routes except the home page
-    const isLink: boolean = isActive && !routeIsHome(activePath)
+    const isLink: boolean = isActive && !isRootRoute(activePath)
 
     return (
         <div className={classNames(

src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx

@@ -21,7 +21,10 @@ interface ProfilePanelProps {
 const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
 
     const { profile }: ProfileContextData = useContext(profileContext)
-    const { getPath }: RouteContextData = useContext(routeContext)
+    const {
+        getPath,
+        rootLoggedOutRoute,
+    }: RouteContextData = useContext(routeContext)
 
     const navigate: NavigateFunction = useNavigate()
 
@@ -58,7 +61,7 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
                     </span>
                 </div>
                 <a
-                    href={authUrlLogout}
+                    href={authUrlLogout(rootLoggedOutRoute)}
                     className={classNames(styles.logout, styles['nav-item'])}
                 >
                     <span className={styles.icon}>

src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-not-logged-in/ProfileNotLoggedIn.tsx

@@ -1,12 +1,14 @@
-import { FC } from 'react'
+import { FC, useContext } from 'react'
 
-import { authUrlLogin, authUrlSignup, Button, routeRoot } from '../../../../../lib'
+import { authUrlLogin, authUrlSignup, Button, routeContext, RouteContextData } from '../../../../../lib'
 import '../../../../../lib/styles/index.scss'
 
 import styles from './ProfileNotLoggedIn.module.scss'
 
 const ProfileNotLoggedIn: FC<{}> = () => {
 
+    const { rootLoggedInRoute }: RouteContextData = useContext(routeContext)
+
     return (
         <>
             <Button
@@ -15,15 +17,15 @@ const ProfileNotLoggedIn: FC<{}> = () => {
                 label='Log In'
                 size='md'
                 tabIndex={-1}
-                url={authUrlLogin(routeRoot)}
+                url={authUrlLogin(rootLoggedInRoute)}
             />
             <Button
                 buttonStyle='tertiary'
                 className={styles.signup}
                 label='Sign Up'
                 size='md'
                 tabIndex={-1}
-                url={authUrlSignup(routeRoot)}
+                url={authUrlSignup(rootLoggedInRoute)}
             />
         </>
     )

src-ts/lib/modals/contact-support-modal/ContactSupportModal.module.scss renamed to src-ts/lib/contact-support-form/ContactSupportForm.module.scss

@@ -1,4 +1,4 @@
-@import '../../styles/includes';
+@import '../styles/includes';
 
 .contact-support-intro {
 

src-ts/lib/contact-support-form/ContactSupportForm.tsx

@@ -0,0 +1,75 @@
+import { FC, useContext } from 'react'
+
+import { Form, FormDefinition, formGetInputModel, FormInputModel } from '../form'
+import { profileContext, ProfileContextData } from '../profile-provider'
+
+import { ContactSupportFormField } from './contact-support-form.config'
+import { ContactSupportRequest } from './contact-support-functions'
+import { contactSupportSubmitRequestAsync } from './contact-support-functions/contact-support-store'
+import styles from './ContactSupportForm.module.scss'
+
+export interface ContactSupportFormProps {
+    formDef: FormDefinition
+    onSave: () => void
+    workId?: string
+}
+
+const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFormProps) => {
+
+    const { profile }: ProfileContextData = useContext(profileContext)
+
+    function generateRequest(inputs: ReadonlyArray<FormInputModel>): ContactSupportRequest {
+        const firstName: string = formGetInputModel(inputs, ContactSupportFormField.first).value as string
+        const lastName: string = formGetInputModel(inputs, ContactSupportFormField.last).value as string
+        const email: string = formGetInputModel(inputs, ContactSupportFormField.email).value as string
+        const question: string = formGetInputModel(inputs, ContactSupportFormField.question).value as string
+        return {
+            challengeId: props.workId,
+            email,
+            firstName,
+            isSelfService: true,
+            lastName,
+            question,
+        }
+    }
+
+    async function saveAsync(request: ContactSupportRequest): Promise<void> {
+        return contactSupportSubmitRequestAsync(request)
+            .then(() => {
+                props.onSave()
+            })
+    }
+
+    const emailElement: JSX.Element | undefined = !!profile?.email
+        ? (
+            <>
+                &nbsp;at <strong>{profile.email}</strong>
+            </>
+        )
+        : undefined
+
+    return (
+        <>
+            <div className={styles['contact-support-intro']}>
+                <p>
+                    Hi {profile?.firstName || 'there'}, we're here to help.
+                </p>
+                <p>
+                    Please describe what you'd like to discuss, and a
+                    Topcoder Solutions Expert will email you back
+                    {emailElement}
+                    &nbsp;within one business day.
+                </p>
+            </div>
+
+            <Form
+                formDef={props.formDef}
+                formValues={profile}
+                requestGenerator={generateRequest}
+                save={saveAsync}
+            />
+        </>
+    )
+}
+
+export default ContactSupportForm

src-ts/lib/modals/contact-support-modal/contact-support-form.config.ts renamed to src-ts/lib/contact-support-form/contact-support-form.config.ts

@@ -1,4 +1,4 @@
-import { FormDefinition, validatorEmail, validatorRequired } from '../../form'
+import { FormDefinition, validatorEmail, validatorRequired } from '../form'
 
 export enum ContactSupportFormField {
     email = 'email',

src-ts/lib/modals/contact-support-modal/contact-support-functions/contact-support-store/contact-support-request.model.ts renamed to src-ts/lib/contact-support-form/contact-support-functions/contact-support-store/contact-support-request.model.ts

@@ -1,5 +1,5 @@
-import { EnvironmentConfig } from '../../../../../config'
-import { xhrPostAsync } from '../../../../functions'
+import { EnvironmentConfig } from '../../../../config'
+import { xhrPostAsync } from '../../../functions'
 
 import { ContactSupportRequest } from './contact-support-request.model'
 

src-ts/lib/modals/contact-support-modal/contact-support-functions/contact-support-store/contact-support.store.ts renamed to src-ts/lib/contact-support-form/contact-support-functions/contact-support-store/contact-support.store.ts

@@ -0,0 +1,2 @@
+export { default as ContactSupportForm } from './ContactSupportForm'
+export { contactSupportFormDef } from './contact-support-form.config'

src-ts/lib/modals/contact-support-modal/contact-support-functions/contact-support-store/index.ts renamed to src-ts/lib/contact-support-form/contact-support-functions/contact-support-store/index.ts

@@ -1,13 +1,14 @@
 import { EnvironmentConfig } from '../../../config'
-import { routeSelfServiceRoot } from '../../route-provider'
 
 export const authentication: string = EnvironmentConfig.URL.ACCOUNTS_APP_CONNECTOR
 
 export function login(fallback: string): string {
     return `${authentication}?retUrl=${encodeURIComponent(window.location.href.match(/[^?]*/)?.[0] || fallback)}`
 }
 
-export const logout: string = `${authentication}?logout=true&retUrl=${encodeURIComponent('https://' + window.location.host)}${routeSelfServiceRoot}`
+export function logout(loggedOutRoute: string): string {
+    return `${authentication}?logout=true&retUrl=${encodeURIComponent('https://' + window.location.host)}${loggedOutRoute}`
+}
 
 export function signup(fallback: string): string {
     return `${login(fallback)}&regSource=tcBusiness&mode=signUp`

src-ts/lib/modals/contact-support-modal/contact-support-functions/contact-support.functions.ts renamed to src-ts/lib/contact-support-form/contact-support-functions/contact-support.functions.ts

@@ -2,6 +2,7 @@ export * from './avatar'
 export * from './breadcrumb'
 export * from './button'
 export * from './card'
+export * from './contact-support-form'
 export * from './content-layout'
 export * from './form'
 export * from './global-config.model'

src-ts/lib/modals/contact-support-modal/contact-support-functions/index.ts renamed to src-ts/lib/contact-support-form/contact-support-functions/index.ts

@@ -1,14 +1,9 @@
-import { Dispatch, FC, SetStateAction, useContext, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useState } from 'react'
 
-import { Form, FormDefinition, formGetInputModel, FormInputModel, formOnReset } from '../../form'
-import { profileContext, ProfileContextData } from '../../profile-provider'
+import { ContactSupportForm, contactSupportFormDef } from '../../contact-support-form'
+import { FormDefinition, formOnReset } from '../../form'
 import { BaseModal } from '../base-modal'
 
-import { contactSupportFormDef, ContactSupportFormField } from './contact-support-form.config'
-import { ContactSupportRequest } from './contact-support-functions'
-import { contactSupportSubmitRequestAsync } from './contact-support-functions/contact-support-store'
-import styles from './ContactSupportModal.module.scss'
-
 export interface ContactSupportModal {
     isOpen: boolean
     onClose: () => void
@@ -17,71 +12,25 @@ export interface ContactSupportModal {
 
 const ContactSupportModal: FC<ContactSupportModal> = (props: ContactSupportModal) => {
 
-    const { profile }: ProfileContextData = useContext(profileContext)
     const [formDef, setFormDef]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>] = useState<FormDefinition>({ ...contactSupportFormDef })
 
-    function generateRequest(inputs: ReadonlyArray<FormInputModel>): ContactSupportRequest {
-        const firstName: string = formGetInputModel(inputs, ContactSupportFormField.first).value as string
-        const lastName: string = formGetInputModel(inputs, ContactSupportFormField.last).value as string
-        const email: string = formGetInputModel(inputs, ContactSupportFormField.email).value as string
-        const question: string = formGetInputModel(inputs, ContactSupportFormField.question).value as string
-        return {
-            challengeId: props.workId,
-            email,
-            firstName,
-            isSelfService: true,
-            lastName,
-            question,
-        }
-    }
-
     function onClose(): void {
         const updatedForm: FormDefinition = { ...formDef }
         formOnReset(updatedForm.inputs)
         setFormDef(updatedForm)
         props.onClose()
     }
 
-    async function saveAsync(request: ContactSupportRequest): Promise<void> {
-        return contactSupportSubmitRequestAsync(request)
-            .then(() => {
-                onClose()
-            })
-    }
-
-    const emailElement: JSX.Element | undefined = !!profile?.email
-        ? (
-            <>
-                &nbsp;at <strong>{profile.email}</strong>
-            </>
-        )
-        : undefined
-
     return (
         <BaseModal
             onClose={onClose}
             open={props.isOpen}
             size='md'
             title={`We're Here to Help`}
         >
-            <div className={styles['contact-support-intro']}>
-                <p>
-                    Hi {profile?.firstName || 'there'}, we're here to help.
-                </p>
-
-                <p>
-                    Please describe what you'd like to discuss, and a
-                    Topcoder Solutions Expert will email you back
-                    {emailElement}
-                    &nbsp;within one business day.
-                </p>
-            </div>
-
-            <Form
+            <ContactSupportForm
                 formDef={formDef}
-                formValues={profile}
-                requestGenerator={generateRequest}
-                save={saveAsync}
+                onSave={onClose}
             />
         </BaseModal>
     )

src-ts/lib/contact-support-form/index.ts

@@ -25,7 +25,7 @@ const TermsModal: FC<TermsModal> = ({ isOpen, onClose }: TermsModal) => (
                         This User Agreement (the "<strong>Agreement</strong>") is a contract
                         between you (referred to herein as "User") and Topcoder LLC.
                         ("Topcoder") and applies to User's use and viewing of
-                        <a href='www.topcoder.com/' target='_blank'>
+                        <a href='https://www.topcoder.com/' target='_blank'>
                             {' '}
                             topcoder.com
                         </a>