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

Merge qa into develop

Author: brooketopcoder

.nvmrc

@@ -1 +1 @@
-10.22.1
+16.15.0

package.json

@@ -23,11 +23,12 @@
     "@babel/preset-react": "^7.7.4",
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "^7.8.7",
-    "@stripe/react-stripe-js": "1.3.0",
-    "@stripe/stripe-js": "1.3.0",
+    "@stripe/react-stripe-js": "1.7.2",
+    "@stripe/stripe-js": "1.29.0",
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/react": "^9.4.0",
     "@types/jest": "^25.2.3",
+    "@types/lodash": "^4.14.182",
     "@types/node": "^17.0.24",
     "@types/reach__router": "^1.3.10",
     "@types/react": "^18.0.5",

src-ts/App.tsx

@@ -3,7 +3,7 @@ import { Routes } from 'react-router-dom'
 import { toast, ToastContainer } from 'react-toastify'
 
 import { Header } from './header'
-import { ProfileProvider, routeContext, RouteContextData } from './lib'
+import { routeContext, RouteContextData } from './lib'
 
 const App: FC<{}> = () => {
 
@@ -13,7 +13,7 @@ const App: FC<{}> = () => {
         .map(route => getRouteElement(route))
 
     return (
-        <ProfileProvider>
+        <>
             <Header />
             <Routes>
                 {routeElements}
@@ -29,7 +29,7 @@ const App: FC<{}> = () => {
                 draggable
                 pauseOnHover
             />
-        </ProfileProvider>
+        </>
     )
 }
 

src-ts/config/constants.ts

@@ -2,3 +2,11 @@ export enum ToolTitle {
     settings = 'Account Settings',
     work = 'Work',
 }
+
+export enum FooterSocialConfig {
+    facebook = 'https://www.facebook.com/topcoder',
+    youtube = 'https://www.youtube.com/channel/UCFv29ANLT2FQmtvS9DRixNA',
+    linkedin = 'https://www.linkedin.com/company/topcoder',
+    twitter = 'https://twitter.com/topcoder',
+    instagram = 'https://www.instagram.com/topcoder',
+}

src-ts/header/Header.module.scss

@@ -1,4 +1,4 @@
-@import '../lib/styles';
+@import '../lib/styles/includes';
 
 .header-wrap {
     display: block;
@@ -16,12 +16,12 @@
     grid-template-columns: 78px 1fr auto;
 
     @include ltemd {
-        height: $header-height-md;
         grid-template-columns: $header-height 1fr $header-height;
         align-items: center;
     }
+}
 
-    @include ltesm {
-        height: $header-height-sm;
-    }
-}
+.subheader {
+    width: 100%;
+    position: relative;
+}

src-ts/header/Header.tsx

@@ -14,6 +14,7 @@ const Header: FC<{}> = () => {
                 <ToolSelectors isWide={true} />
                 <UtilitySelectors />
             </header>
+            <div id='page-subheader-portal-el' className={styles.subheader}></div>
         </div>
     )
 }

src-ts/header/logo/Logo.module.scss

@@ -1,4 +1,4 @@
-@import '../../lib/styles';
+@import '../../lib/styles/includes';
 
 .logo-no-link,
 .logo-link {

src-ts/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.module.scss

@@ -1,4 +1,4 @@
-@import '../../../lib/styles';
+@import '../../../lib/styles/includes';
 
 .tool-selectors-narrow {
     display: none;
@@ -22,17 +22,10 @@
         top: $header-height;
         left: 0;
         bottom: 0;
+        height: $content-height;
         width: calc(100% - calc(2 * $pad-xxl));
         z-index: 100;
         background-color: $black-100;
         padding: $pad-xxl;
-
-        @include ltemd {
-            top: $header-height-md;
-        }
-
-        @include ltesm {
-            top: $header-height-sm;
-        }
     }
 }

src-ts/header/tool-selectors/tool-selectors-narrow/tool-selector-narrow/ToolSelectorNarrow.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../lib/styles';
+@import '../../../../lib/styles/includes';
 
 .tool-selector-narrow {
 
@@ -13,7 +13,7 @@
         border-top: 1px solid $black-60;
         padding: $pad-lg 0;
         color: $tc-white;
-        @include font-weight-medium;
+        font-weight: $font-weight-medium;
         background-color: $black-100;
 
         svg {

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

@@ -1,33 +1,36 @@
 import classNames from 'classnames'
-import { FC } from 'react'
+import { FC, useContext } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
-import { IconOutline, PlatformRoute, routeIsActive } from '../../../../lib'
+import { IconOutline, PlatformRoute, routeContext, RouteContextData, routeIsActive } from '../../../../lib'
 
 import styles from './ToolSelectorNarrow.module.scss'
 
 interface ToolSelectorNarrowProps {
     route: PlatformRoute
 }
 
+const isParamRoute: (route: string) => boolean = (route: string) => !!route.match(/^:[^/]+$/)
+
 const ToolSelectorNarrow: FC<ToolSelectorNarrowProps> = (props: ToolSelectorNarrowProps) => {
 
-    const route: PlatformRoute = props.route
-    const path: string = props.route.route
+    const { getPathFromRoute }: 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, path)
+    const isActive: boolean = routeIsActive(useLocation().pathname, toolPath)
     const activeIndicaterClass: string = `${baseClass}-${isActive ? '' : 'in'}active`
-    const hasChildren: boolean = !!route.children.some(child => !!child.route)
+    const hasChildren: boolean = !!toolRoute.children.some(child => !!child.route && !isParamRoute(child.route))
 
     return (
         <div className={styles[baseClass]}>
             <Link
                 className={classNames(styles[`${baseClass}-link`], styles[activeIndicaterClass])}
-                key={path}
-                to={path}
+                key={toolPath}
+                to={toolPath}
             >
-                {route.title}
+                {toolRoute.title}
                 {hasChildren && <IconOutline.ChevronRightIcon />}
             </Link>
         </div>

src-ts/header/tool-selectors/tool-selectors-wide/ToolSelectorsWide.module.scss

@@ -1,4 +1,4 @@
-@import '../../../lib/styles/';
+@import '../../../lib/styles/includes';
 
 .tool-selectors-wide {
     display: flex;

src-ts/header/tool-selectors/tool-selectors-wide/tool-selector-wide/ToolSelectorWide.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../lib/styles/';
+@import '../../../../lib/styles/includes';
 
 .tool-selector-wide {
     padding-right: 0;

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

@@ -2,8 +2,13 @@ import classNames from 'classnames'
 import { FC, useContext } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 
-import { ToolTitle } from '../../../../config'
-import { PlatformRoute, routeContext, RouteContextData, routeIsActive, routeIsHome } from '../../../../lib'
+import {
+    PlatformRoute,
+    routeContext,
+    RouteContextData,
+    routeIsActive,
+    routeIsHome,
+} from '../../../../lib'
 import '../../../../lib/styles/index.scss'
 
 import styles from './ToolSelectorWide.module.scss'
@@ -14,15 +19,17 @@ interface ToolSelectorWideProps {
 
 const ToolSelectorWide: FC<ToolSelectorWideProps> = (props: ToolSelectorWideProps) => {
 
-    const { getPath, getPathFromRoute }: RouteContextData = useContext(routeContext)
-    const currentPath: string = useLocation().pathname
+    const { getPathFromRoute }: RouteContextData = useContext(routeContext)
+    const activePath: string = useLocation().pathname
+    const toolRoute: PlatformRoute = props.route
+    const toolPath: string = getPathFromRoute(toolRoute)
+
+    const isActive: boolean = routeIsActive(activePath, toolPath)
 
-    // for now, the work tool should be active for all pages except the account
-    const isActive: boolean = !routeIsActive(currentPath, getPath(ToolTitle.settings))
     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(currentPath)
+    const isLink: boolean = isActive && !routeIsHome(activePath)
 
     return (
         <div className={classNames(
@@ -33,9 +40,9 @@ const ToolSelectorWide: FC<ToolSelectorWideProps> = (props: ToolSelectorWideProp
             <Link
                 className='large-tab'
                 tabIndex={-1}
-                to={getPathFromRoute(props.route)}
+                to={toolPath}
             >
-                {props.route.title}
+                {toolRoute.title}
             </Link>
             <div className={styles['active-indicator']}></div>
         </div>

src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../lib/styles';
+@import '../../../../lib/styles/includes';
 
 .profile-selector {
     display: flex;

src-ts/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../../lib/styles';
+@import '../../../../../lib/styles/includes';
 
 $overlaySquare: $pad-xxxxl;
 

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

@@ -1,4 +1,5 @@
-@import '../../../../../../lib/styles';
+@use '../../../../../../lib/styles/typography';
+@import '../../../../../../lib/styles/includes';
 
 $arrowTipIconHeight: 9px;
 

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

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
-import { FC, MutableRefObject, useContext } from 'react'
-import { Link, NavigateFunction, useNavigate } from 'react-router-dom'
+import { FC, useContext } from 'react'
+import { NavigateFunction, useNavigate } from 'react-router-dom'
 
 import {
     authUrlLogout,
@@ -37,9 +37,7 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
     const name: string = `${profile.firstName} ${profile.lastName?.substring(0, 1)}${!!profile.lastName ? '.' : undefined}`
 
     return (
-        <div
-            className={styles['profile-panel']}
-        >
+        <div className={styles['profile-panel']}>
             <div className={styles['arrow-tip']}>
                 <TooltipArrowIcon />
             </div>

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

@@ -1,4 +1,4 @@
-@import '../../../../../lib/styles';
+@import '../../../../../lib/styles/includes';
 
 @include ltemd {
     .login,

src-ts/header/utility-selectors/UtilitySelectors.module.scss

@@ -1,4 +1,4 @@
-@import '../../lib/styles';
+@import '../../lib/styles/includes';
 
 .utility-selectors {
     display: flex;

src-ts/index.ts

@@ -1,5 +1,19 @@
 export { default as AppNextGen } from './App'
 export { EnvironmentConfig } from './config'
-export { logInitialize, ProfileProvider, RouteProvider } from './lib'
+export {
+     Breadcrumb,
+     ChallengeMetadataName,
+     ContactSupportModal,
+     logInitialize,
+     OrderContractModal,
+     PageFooter,
+     PrivacyPolicyModal,
+     ProfileProvider,
+     RouteProvider,
+     TabsNavbar,
+     TermsModal,
+     workContext,
+     WorkStatusItem,
+} from './lib'
 export * from './utils'
 export * from './tools'

src-ts/lib/avatar/Avatar.module.scss

@@ -1,4 +1,5 @@
-@import '../../lib/styles';
+@use '../../lib/styles/typography';
+@import '../../lib/styles/includes';
 
 $avatar-size-sm: 32px;
 $border-size-sm: $border;
@@ -49,7 +50,7 @@ $border-size-xl: $pad-xs;
         align-items: center;
         color: $tc-white;
         background-color: $blue-100;
-        @include font-weight-medium;
+        font-weight: $font-weight-medium;
 
         &.sm {
             @extend .medium-subtitle;