Merge pull request #554 from topcoder-platform/dev

3.0 TCA Certifications - 2023-03-01 -> master

Author: testflyjets

README.md

@@ -153,6 +153,12 @@ By overriding the app to use <b>port 443</b>, you can use the authorized URL and
 
 >**NOTE:** Mac users will require running the app with elevated permissions in order to use a port lower than 500.
 
+Easy way to overcome elevated permissions is to make use of:
+
+```
+sudo setcap 'cap_net_bind_service=+ep' `which node`
+```
+
 For easier development, it is recommended that you add this certificate to your trusted root authorities and as a trused cert in your browser. Google your browser and OS for more info on how to trust cert authorities.
 
 Otherwise, you will need to override the exception each time you load the site. Firefox users may need to user an incognito browser in order to override the exception.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topcoder-platform/platform-ui",
-    "version": "2.0.7",
+    "version": "3.0.0",
     "private": true,
     "scripts": {
         "dev": "yarn react-app-rewired start",
@@ -42,6 +42,7 @@
         "moment": "^2.29.4",
         "moment-timezone": "^0.5.37",
         "prop-types": "^15.8.1",
+        "qrcode.react": "^3.1.0",
         "qs": "^6.11.0",
         "rc-checkbox": "^2.3.2",
         "react": "^18.2.0",

src-ts/.eslintrc.js

@@ -73,7 +73,7 @@ module.exports = {
         ],
         'complexity': [
             'error',
-            11
+            14
         ],
         'import/extensions': 'off',
         'import/no-named-default':  'off',

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 { routeContext, RouteContextData } from './lib'
+import { routeContext, RouteContextData, useViewportUnitsFix } from './lib'
 
 const App: FC<{}> = () => {
 
@@ -12,6 +12,8 @@ const App: FC<{}> = () => {
     const routeElements: Array<ReactElement> = allRoutes
         .map(route => getRouteElement(route))
 
+    useViewportUnitsFix()
+
     return (
         <>
             <Header />

src-ts/config/environments/environment.default.config.ts

@@ -2,6 +2,7 @@
 import { EnvironmentConfigModel } from './environment-config.model'
 
 const COMMUNITY_WEBSITE: string = 'https://www.topcoder-dev.com'
+const TCA_WEBSITE: string = 'https://platform-ui.topcoder-dev.com'
 
 export const EnvironmentConfigDefault: EnvironmentConfigModel = {
     ANALYTICS: {
@@ -36,11 +37,13 @@ export const EnvironmentConfigDefault: EnvironmentConfigModel = {
             'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIl0sImlzcyI6Imh0dHBzOi8vYXBpLnRvcGNvZGVyLWRldi5jb20iLCJoYW5kbGUiOiJ0ZXN0MSIsImV4cCI6MjU2MzA3NjY4OSwidXNlcklkIjoiNDAwNTEzMzMiLCJpYXQiOjE0NjMwNzYwODksImVtYWlsIjoidGVzdEB0b3Bjb2Rlci5jb20iLCJqdGkiOiJiMzNiNzdjZC1iNTJlLTQwZmUtODM3ZS1iZWI4ZTBhZTZhNGEifQ.jl6Lp_friVNwEP8nfsfmL-vrQFzOFp2IfM_HC7AwGcg',
     },
     TOPCODER_URLS: {
+        ACCOUNT_PROFILE: `${COMMUNITY_WEBSITE}/settings/profile`,
         ACCOUNT_SETTINGS: `${COMMUNITY_WEBSITE}/settings/account`,
         API_BASE: `${COMMUNITY_WEBSITE}/api`,
         BLOG_PAGE: `${COMMUNITY_WEBSITE}/blog`,
         CHALLENGES_PAGE: `${COMMUNITY_WEBSITE}/challenges`,
         GIGS_PAGE: `${COMMUNITY_WEBSITE}/gigs`,
+        TCA: `${TCA_WEBSITE}`,
         THRIVE_PAGE: `${COMMUNITY_WEBSITE}/thrive`,
         USER_PROFILE: `${COMMUNITY_WEBSITE}/members`,
         WP_CONTENT: `${COMMUNITY_WEBSITE}/wp-content`,

src-ts/config/environments/environment.prod.config.ts

@@ -3,6 +3,7 @@ import { EnvironmentConfigModel } from './environment-config.model'
 import { EnvironmentConfigDefault } from './environment.default.config'
 
 const COMMUNITY_WEBSITE: string = 'https://www.topcoder.com'
+const TCA_WEBSITE: string = 'https://platform-ui.topcoder.com'
 
 export const EnvironmentConfigProd: EnvironmentConfigModel = {
     ...EnvironmentConfigDefault,
@@ -34,11 +35,13 @@ export const EnvironmentConfigProd: EnvironmentConfigModel = {
             'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIl0sImlzcyI6Imh0dHBzOi8vYXBpLnRvcGNvZGVyLWRldi5jb20iLCJoYW5kbGUiOiJ0ZXN0MSIsImV4cCI6MjU2MzA3NjY4OSwidXNlcklkIjoiNDAwNTEzMzMiLCJpYXQiOjE0NjMwNzYwODksImVtYWlsIjoidGVzdEB0b3Bjb2Rlci5jb20iLCJqdGkiOiJiMzNiNzdjZC1iNTJlLTQwZmUtODM3ZS1iZWI4ZTBhZTZhNGEifQ.jl6Lp_friVNwEP8nfsfmL-vrQFzOFp2IfM_HC7AwGcg',
     },
     TOPCODER_URLS: {
+        ACCOUNT_PROFILE: `${COMMUNITY_WEBSITE}/settings/profile`,
         ACCOUNT_SETTINGS: `${COMMUNITY_WEBSITE}/settings/account`,
         API_BASE: `${COMMUNITY_WEBSITE}/api`,
         BLOG_PAGE: `${COMMUNITY_WEBSITE}/blog`,
         CHALLENGES_PAGE: `${COMMUNITY_WEBSITE}/challenges`,
         GIGS_PAGE: `${COMMUNITY_WEBSITE}/gigs`,
+        TCA: `${TCA_WEBSITE}`,
         THRIVE_PAGE: `${COMMUNITY_WEBSITE}/thrive`,
         USER_PROFILE: `${COMMUNITY_WEBSITE}/members`,
         WP_CONTENT: `${COMMUNITY_WEBSITE}/wp-content`,

src-ts/header/Header.tsx

@@ -145,7 +145,6 @@ const Header: FC = () => {
 
     return (
         <>
-            <div id={navElementId} />
             <div
                 id={PageSubheaderPortalId}
                 className={classNames('full-width-relative', !ready && 'hidden')}

src-ts/lib/breadcrumb/Breadcrumb.module.scss

@@ -38,7 +38,12 @@
             display: inline-flex;
             align-items: center;
             padding: 0;
-
+            @include ltesm {
+                flex: 0 1 auto;
+                &:first-child {
+                    flex: 1 0 auto;
+                }
+            }
             a {
                 @extend .overline;
                 display: block;

src-ts/lib/button/Button.tsx

@@ -8,7 +8,7 @@ import { IconOutline } from '../svgs'
 import '../styles/index.scss'
 
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-export type ButtonStyle = 'icon' | 'icon-bordered' | 'link' | 'primary' | 'secondary' | 'tertiary' | 'text'
+export type ButtonStyle = 'icon' | 'icon-bordered' | 'link' | 'primary' | 'secondary' | 'tertiary' | 'text' | 'outline'
 export type ButtonType = 'button' | 'submit'
 
 export interface ButtonProps {

src-ts/lib/default-member-icon/DefaultMemberIcon.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable max-len */
+import { FC } from 'react'
+
+const DefaultMemberIcon: FC = () => (
+    <svg
+        xmlns='http://www.w3.org/2000/svg'
+        xmlnsXlink='http://www.w3.org/1999/xlink'
+        width='141'
+        height='141'
+        viewBox='0 0 141 141'
+    >
+        <defs>
+            <rect
+                id='path-1'
+                width='140'
+                height='140'
+                x='0.8'
+                y='0.5'
+                rx='306'
+            />
+        </defs>
+        <g fill='none' fillRule='evenodd' stroke='none' strokeWidth='1'>
+            <g transform='translate(-205 -203) translate(205 203)'>
+                <mask id='mask-2' fill='#fff'>
+                    <use xlinkHref='#path-1' />
+                </mask>
+                <use fill='#F0F0F0' xlinkHref='#path-1' />
+                <path
+                    fill='#A3A3AE'
+                    stroke='#A3A3AE'
+                    strokeWidth='3'
+                    d='M118 137.143c0 4.345-3.501 7.857-7.833 7.857H31.833C27.51 145 24 141.488 24 137.143c0-15.714 15.142-30.376 30.62-36.174-8.937-5.54-14.953-15.377-14.953-26.683v-7.857C39.667 49.072 53.697 35 71 35c17.304 0 31.333 14.072 31.333 31.429v7.857c0 11.306-6.016 21.143-14.946 26.683 15.471 5.798 30.613 20.46 30.613 36.174h0z'
+                    mask='url(#mask-2)'
+                    opacity='0.2'
+                />
+            </g>
+        </g>
+    </svg>
+)
+
+export default DefaultMemberIcon