PROD-1558 add account settings page #time 15m

Author: brooketopcoder

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  rootDir: "src",
+  rootDir: "src-ts",
   transform: {
     "^.+\\.(j|t)sx?$": "babel-jest",
   },

package.json

@@ -10,19 +10,27 @@
     "format": "prettier --write \"./**\"",
     "test": "cross-env BABEL_ENV=test jest",
     "watch-tests": "cross-env BABEL_ENV=test jest --watch",
-    "coverage": "cross-env BABEL_ENV=test jest --coverage"
+    "coverage": "cross-env BABEL_ENV=test jest --coverage",
+    "bsouza": "sh start-bsouza.sh",
+    "tslint": "tslint 'src-ts/**/*.{ts,tsx}'",
+    "tslint:fix": "tslint 'src-ts/**/*.{ts,tsx}' --fix"
   },
   "devDependencies": {
     "@babel/core": "^7.7.5",
     "@babel/plugin-transform-runtime": "^7.8.3",
     "@babel/preset-env": "^7.7.6",
     "@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",
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/react": "^9.4.0",
-    "@types/jest": "^25.2.1",
+    "@types/jest": "^25.2.3",
+    "@types/node": "^17.0.24",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.1",
+    "@types/react-redux-toastr": "^7.6.2",
     "@types/systemjs": "^6.1.0",
     "autoprefixer": "^9.8.6",
     "babel-eslint": "^11.0.0-beta.2",
@@ -57,10 +65,13 @@
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
+    "@datadog/browser-logs": "^4.7.1",
+    "@heroicons/react": "^1.0.6",
     "@reach/router": "^1.3.4",
     "apexcharts": "^3.32.1",
     "axios": "^0.21.0",
     "body-parser": "^1.19.0",
+    "browser-cookies": "^1.2.0",
     "classnames": "^2.2.6",
     "config": "^3.3.6",
     "cors": "^2.8.5",
@@ -79,17 +90,20 @@
     "react-dropzone": "^11.4.2",
     "react-gtm-module": "^2.0.11",
     "react-redux": "^7.2.2",
-    "react-redux-toastr": "^7.6.5",
+    "react-redux-toastr": "^7.6.8",
     "react-responsive-modal": "^6.2.0",
+    "react-router-dom": "^6.3.0",
     "react-select": "^4.0.2",
     "react-spinners": "^0.11.0",
+    "react-toastify": "^8.2.0",
     "react-tooltip": "^4.2.21",
     "reactjs-heap": "^1.0.3",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-promise-middleware": "^6.1.2",
     "redux-thunk": "^2.3.0",
     "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.4",
+    "typescript": "^4.6.3",
     "uuid": "^8.3.2"
   },
   "browserslist": [

src-ts/config/constants.ts

@@ -0,0 +1,5 @@
+export enum ToolTitle {
+    designLib = 'Design Library',
+    settings = 'Profile Settings',
+    work = 'Work',
+}

src-ts/config/environments/app-host-environment.enum.ts

@@ -0,0 +1,6 @@
+export enum AppHostEnvironment {
+    bsouza = 'bsouza',
+    default = 'default',
+    dev = 'dev',
+    prod = 'prod',
+}

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

@@ -0,0 +1,9 @@
+import { GlobalConfig } from '../../lib'
+
+import { AppHostEnvironment } from './app-host-environment.enum'
+import { EnvironmentConfigDefault } from './environment.default.config'
+
+export const EnvironmentConfigBsouza: GlobalConfig = {
+    ...EnvironmentConfigDefault,
+    ENV: AppHostEnvironment.bsouza,
+}

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

@@ -0,0 +1,34 @@
+import { GlobalConfig } from '../../lib'
+
+import { AppHostEnvironment } from './app-host-environment.enum'
+import { EnvironmentConfigBsouza } from './environment.bsouza.config'
+import { EnvironmentConfigDefault } from './environment.default.config'
+import { EnvironmentConfigDev } from './environment.dev.config'
+import { EnvironmentConfigProd } from './environment.prod.config'
+
+function getEnvironmentConfig(): GlobalConfig {
+
+    switch (process.env.REACT_APP_HOST_ENV) {
+
+        case AppHostEnvironment.bsouza:
+            return EnvironmentConfigBsouza
+
+        case AppHostEnvironment.default:
+            return EnvironmentConfigDefault
+
+        case AppHostEnvironment.dev:
+            return EnvironmentConfigDev
+
+        case AppHostEnvironment.prod:
+            return EnvironmentConfigProd
+
+        default:
+            return EnvironmentConfigDefault
+    }
+}
+
+const enviromentConfig: GlobalConfig = {
+    ...getEnvironmentConfig(),
+}
+
+export default enviromentConfig

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

@@ -0,0 +1,20 @@
+import { GlobalConfig } from '../../lib'
+
+import { AppHostEnvironment } from './app-host-environment.enum'
+
+export const EnvironmentConfigDefault: GlobalConfig = {
+    API: {
+        V3: 'https://api.topcoder-dev.com/v3',
+        V5: 'https://api.topcoder-dev.com/v5',
+    },
+    ENV: AppHostEnvironment.default,
+    LOGGING: {
+        PUBLIC_TOKEN: 'puba0825671e469d16f940c5a30dc738f11',
+        SERVICE: 'platform-ui',
+    },
+    REAUTH_OFFSET: 55,
+    TAG_MANAGER_ID: undefined,
+    URL: {
+        ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder-dev.com',
+    },
+}

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

@@ -0,0 +1,14 @@
+import { GlobalConfig } from '../../lib'
+import { ToolTitle } from '../constants'
+
+import { AppHostEnvironment } from './app-host-environment.enum'
+import { EnvironmentConfigDefault } from './environment.default.config'
+
+export const EnvironmentConfigDev: GlobalConfig = {
+    ...EnvironmentConfigDefault,
+    DISABLED_TOOLS: [
+        ToolTitle.designLib,
+    ],
+    ENV: AppHostEnvironment.dev,
+    TAG_MANAGER_ID: 'GTM-W7B537Z',
+}

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

@@ -0,0 +1,21 @@
+import { GlobalConfig } from '../../lib'
+import { ToolTitle } from '../constants'
+
+import { AppHostEnvironment } from './app-host-environment.enum'
+import { EnvironmentConfigDefault } from './environment.default.config'
+
+export const EnvironmentConfigProd: GlobalConfig = {
+    ...EnvironmentConfigDefault,
+    API: {
+        V3: 'https://api.topcoder.com/v3',
+        V5: 'https://api.topcoder.com/v5',
+    },
+    DISABLED_TOOLS: [
+        ToolTitle.designLib,
+    ],
+    ENV: AppHostEnvironment.prod,
+    TAG_MANAGER_ID: 'GTM-MXXQHG8',
+    URL: {
+        ACCOUNTS_APP_CONNECTOR: 'https://accounts-auth0.topcoder.com',
+    },
+}

src-ts/config/environments/index.ts

@@ -0,0 +1 @@
+export { default as EnvironmentConfig } from './environment.config'

src-ts/config/index.ts

@@ -0,0 +1,2 @@
+export * from './constants'
+export * from './environments'

src-ts/declarations.d.ts

@@ -0,0 +1,15 @@
+declare module '*.html' {
+    const htmlFile: string
+    export = htmlFile
+}
+
+declare module '*.scss' {
+    const scssFile: { [style: string]: any }
+    export = scssFile
+}
+
+declare module 'tc-auth-lib'
+
+declare module '@topcoder/micro-frontends-navbar-app'
+
+declare module 'react-redux-toastr'

src-ts/lib/button/Button.test.tsx

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('<Button />', () => {
+
+    test('it should render the content', () => { })
+})

src-ts/lib/button/Button.tsx

@@ -0,0 +1,85 @@
+import classNames from 'classnames'
+import { FC } from 'react'
+import { Link } from 'react-router-dom'
+
+import '../styles/index.scss'
+import { IconOutline } from '../svgs'
+
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl'
+export type ButtonStyle = 'link' | 'primary' | 'secondary' | 'tertiary' | 'text'
+export type ButtonType = 'button' | 'submit'
+
+export interface ButtonProps {
+    readonly buttonStyle?: ButtonStyle
+    readonly className?: string
+    readonly disable?: boolean
+    readonly label: string
+    readonly onClick?: (event?: any) => void
+    readonly route?: string
+    readonly size?: ButtonSize
+    readonly tabIndex: number
+    readonly type?: ButtonType
+    readonly url?: string
+}
+
+const Button: FC<ButtonProps> = (props: ButtonProps) => {
+
+    const classes: string = getButtonClasses(props)
+    const clickHandler: (event?: any) => void = getClickHandler(props)
+
+    // if there is a url, this is a link button
+    if (!!props.url) {
+        return (
+            <a
+                className={classes}
+                href={props.url}
+                onClick={clickHandler}
+                tabIndex={props.tabIndex}
+            >
+                {props.label}
+            </a>
+        )
+    }
+
+    if (!!props.route) {
+        return (
+            <Link
+                className={classes}
+                onClick={clickHandler}
+                tabIndex={props.tabIndex}
+                to={props.route}
+            >
+                {props.label}
+            </Link>
+        )
+    }
+
+    return (
+        <button
+            className={classes}
+            onClick={clickHandler}
+            tabIndex={props.tabIndex}
+            type={props.type || 'button'}
+        >
+            {props.label}
+            {props.buttonStyle === 'link' && <IconOutline.ArrowRightIcon />}
+        </button>
+    )
+}
+
+function getButtonClasses(props: ButtonProps): string {
+    const classes: string = classNames(
+        'button',
+        props.className,
+        props.buttonStyle || 'primary',
+        `button-${props.size || 'md'}`,
+        !!props.disable ? 'disabled' : undefined
+    )
+    return classes
+}
+
+function getClickHandler(props: ButtonProps): (event?: any) => void {
+    return props.onClick || (() => undefined)
+}
+
+export default Button

src-ts/lib/button/index.ts

@@ -0,0 +1,10 @@
+export { default as Button } from './Button'
+export
+// tslint:disable-next-line: no-unused-expression
+type { ButtonSize } from './Button'
+export
+// tslint:disable-next-line: no-unused-expression
+type { ButtonStyle } from './Button'
+export
+// tslint:disable-next-line: no-unused-expression
+type { ButtonType } from './Button'

src-ts/lib/card/Card.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames'
+import { FC, ReactNode, SVGProps } from 'react'
+
+import { ButtonStyle } from '../button'
+import '../styles/index.scss'
+
+export interface CardProps {
+    buttonStyle?: ButtonStyle
+    children: ReactNode
+    icon?: FC<SVGProps<SVGSVGElement>>
+    onClick?: () => void
+    title: string
+}
+
+const Card: FC<CardProps> = (props: CardProps) => {
+
+    const Icon: FC<SVGProps<SVGSVGElement>> | undefined = props.icon
+
+    return (
+        <div
+            className={classNames('card', !!props.onClick ? 'clickable' : undefined, props.buttonStyle)}
+            onClick={props.onClick}
+        >
+
+            <div className='card-title'>
+                <h3 className='body-medium-bold'>
+                    {props.title}
+                </h3>
+                {!!Icon && <Icon />}
+            </div>
+
+            {props.children}
+
+        </div>
+    )
+}
+
+export default Card

src-ts/lib/card/index.ts

@@ -0,0 +1 @@
+export { default as Card } from './Card'

src-ts/lib/content-layout/ContentLayout.module.scss

@@ -0,0 +1,38 @@
+@import '../styles/';
+
+.content {
+    @include content-height;
+    padding: 0 $pad-xxxxl;
+    display: grid;
+    grid-template-columns: 1fr;
+    justify-content: center;
+
+    @include md {
+        padding: 0 $pad-xxl;
+    }
+
+    @include ltesm {
+        padding: 0;
+    }
+
+    .content-outer {
+        display: flex;
+        justify-content: center;
+
+        .content-inner {
+            flex: 1;
+            max-width: $xxl-min;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+
+            .page-header {
+
+                h1 {
+                    border-bottom: $border solid $black-5;
+                    color: $black-100;
+                }
+            }
+        }
+    }
+}