feat: topcoder wallet app

.circleci/config.yml

@@ -257,7 +257,6 @@ workflows:
                       branches:
                           only:
                               - dev
-                              - MP-356_member-stats-and-history
 
             - deployQa:
                   context: org-global

.editorconfig

@@ -10,3 +10,4 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+quote_type = single

.prettierrc

@@ -0,0 +1,3 @@
+{
+    "semi": false
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "prettier.requireConfig": true,
+    "editor.formatOnSave": false
+}

craco.config.js

@@ -43,6 +43,7 @@ module.exports = {
             '@gamificationAdmin': resolve('src/apps/gamification-admin/src'),
             '@talentSearch': resolve('src/apps/talent-search/src'),
             '@profiles': resolve('src/apps/profiles/src'),
+            '@wallet': resolve('src/apps/wallet/src'),
 
             '@platform': resolve('src/apps/platform/src'),
             // aliases used in SCSS files

package.json

@@ -30,6 +30,7 @@
     "@storybook/react": "^7.0.5",
     "@stripe/react-stripe-js": "1.13.0",
     "@stripe/stripe-js": "1.41.0",
+    "@tanstack/react-table": "^8.11.7",
     "@types/testing-library__jest-dom": "^5.14.5",
     "apexcharts": "^3.36.0",
     "axios": "^1.1.2",
@@ -85,6 +86,7 @@
     "react-helmet": "^6.1.0",
     "react-html-parser": "^2.0.2",
     "react-markdown": "8.0.6",
+    "react-otp-input": "^3.1.1",
     "react-popper": "^2.3.0",
     "react-redux": "^8.0.4",
     "react-redux-toastr": "^7.6.10",

src/apps/platform/src/platform.routes.tsx

@@ -9,8 +9,12 @@ import { profilesRoutes } from '~/apps/profiles'
 import { talentSearchRoutes } from '~/apps/talent-search'
 import { accountsRoutes } from '~/apps/accounts'
 import { onboardingRoutes } from '~/apps/onboarding'
+import { walletRoutes } from '~/apps/wallet'
 
-const Home: LazyLoadedComponent = lazyLoad(() => import('./routes/home'), 'HomePage')
+const Home: LazyLoadedComponent = lazyLoad(
+    () => import('./routes/home'),
+    'HomePage',
+)
 
 const homeRoutes: ReadonlyArray<PlatformRoute> = [
     {
@@ -32,6 +36,7 @@ export const platformRoutes: Array<PlatformRoute> = [
     ...gamificationAdminRoutes,
     ...talentSearchRoutes,
     ...profilesRoutes,
+    ...walletRoutes,
     ...accountsRoutes,
     ...homeRoutes,
 ]

src/apps/wallet/.prettierrc

@@ -0,0 +1,7 @@
+{
+    "semi": false,
+    "trailingComma": "all",
+    "jsxSingleQuote": true,
+    "jsxBracketSameLine": true,
+    "printWidth": 120
+}

src/apps/wallet/index.tsx

@@ -0,0 +1 @@
+export * from './src'

src/apps/wallet/src/WalletApp.tsx

@@ -0,0 +1,20 @@
+import { FC, useContext } from 'react'
+import { Outlet, Routes } from 'react-router-dom'
+
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { toolTitle } from './wallet.routes'
+import { WalletSwr } from './lib'
+
+const AccountsApp: FC<{}> = () => {
+    const { getChildRoutes }: RouterContextData = useContext(routerContext)
+
+    return (
+        <WalletSwr>
+            <Outlet />
+            <Routes>{getChildRoutes(toolTitle)}</Routes>
+        </WalletSwr>
+    )
+}
+
+export default AccountsApp

src/apps/wallet/src/home/WalletHomePage.tsx

@@ -0,0 +1,19 @@
+import { FC, useContext } from 'react'
+
+import { profileContext, ProfileContextData } from '~/libs/core'
+import { LoadingSpinner } from '~/libs/ui'
+
+import { WalletLayout } from './page-layout'
+
+const AccountSettingsPage: FC<{}> = () => {
+    const { profile, initialized }: ProfileContextData = useContext(profileContext)
+
+    return (
+        <>
+            <LoadingSpinner hide={initialized} />
+            {initialized && profile && <WalletLayout profile={profile} />}
+        </>
+    )
+}
+
+export default AccountSettingsPage

src/apps/wallet/src/home/index.ts

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

src/apps/wallet/src/home/page-layout/WalletLayout.module.scss

@@ -0,0 +1,5 @@
+@import '@libs/ui/styles/includes';
+
+.contentLayoutOuter {
+    margin: $sp-8 auto !important;
+}

src/apps/wallet/src/home/page-layout/WalletLayout.tsx

@@ -0,0 +1,20 @@
+import { FC } from 'react'
+
+import { UserProfile } from '~/libs/core'
+import { ContentLayout } from '~/libs/ui'
+
+import { WalletTabs } from '../tabs'
+
+import styles from './WalletLayout.module.scss'
+
+interface WalletHomeLayoutProps {
+    profile: UserProfile
+}
+
+const WalletLayout: FC<WalletHomeLayoutProps> = (props: WalletHomeLayoutProps) => (
+    <ContentLayout outerClass={styles.contentLayoutOuter}>
+        <WalletTabs profile={props.profile} />
+    </ContentLayout>
+)
+
+export default WalletLayout

src/apps/wallet/src/home/page-layout/index.ts

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

src/apps/wallet/src/home/tabs/WalletTabs.module.scss

@@ -0,0 +1,11 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    form {
+        @include ltelg {
+            :global(.input-el) {
+                margin-bottom: $sp-4;
+            }
+        }
+    }
+}

src/apps/wallet/src/home/tabs/WalletTabs.tsx

@@ -0,0 +1,55 @@
+import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+
+import { UserProfile } from '~/libs/core'
+import { PageTitle, TabsNavbar, TabsNavItem } from '~/libs/ui'
+
+import { getHashFromTabId, getTabIdFromHash, WalletTabsConfig, WalletTabViews } from './config'
+import { PaymentsTab } from './payments'
+import { WinningsTab } from './winnings'
+import { HomeTab } from './home'
+import { TaxFormsTab } from './tax-forms'
+import styles from './WalletTabs.module.scss'
+
+interface WalletHomeProps {
+    profile: UserProfile
+}
+
+const WalletTabs: FC<WalletHomeProps> = (props: WalletHomeProps) => {
+    const { hash }: { hash: string } = useLocation()
+
+    const activeTabHash: string = useMemo<string>(() => getTabIdFromHash(hash), [hash])
+
+    const [activeTab, setActiveTab]: [string, Dispatch<SetStateAction<string>>] = useState<string>(activeTabHash)
+
+    useEffect(() => {
+        setActiveTab(activeTabHash)
+    }, [activeTabHash])
+
+    function handleTabChange(tabId: string): void {
+        setActiveTab(tabId)
+        window.location.hash = getHashFromTabId(tabId)
+    }
+
+    return (
+        <div className={styles.container}>
+            <TabsNavbar defaultActive={activeTab} onChange={handleTabChange} tabs={WalletTabsConfig} />
+
+            <PageTitle>
+                {[WalletTabsConfig.find((tab: TabsNavItem) => tab.id === activeTab)?.title, 'Wallet', 'Topcoder'].join(
+                    ' | ',
+                )}
+            </PageTitle>
+
+            {activeTab === WalletTabViews.withdrawalmethods && <PaymentsTab />}
+
+            {activeTab === WalletTabViews.winnings && <WinningsTab profile={props.profile} />}
+
+            {activeTab === WalletTabViews.home && <HomeTab profile={props.profile} />}
+
+            {activeTab === WalletTabViews.taxforms && <TaxFormsTab profile={props.profile} />}
+        </div>
+    )
+}
+
+export default WalletTabs

src/apps/wallet/src/home/tabs/config/index.ts

@@ -0,0 +1 @@
+export * from './wallet-tabs-config'

src/apps/wallet/src/home/tabs/config/wallet-tabs-config.ts

@@ -0,0 +1,55 @@
+import { TabsNavItem } from '~/libs/ui'
+
+export enum WalletTabViews {
+    home = '0',
+    winnings = '1',
+    taxforms = '2',
+    withdrawalmethods = '3',
+}
+
+export const WalletTabsConfig: TabsNavItem[] = [
+    {
+        id: WalletTabViews.home,
+        title: 'Wallet',
+    },
+    {
+        id: WalletTabViews.winnings,
+        title: 'Winnings',
+    },
+    {
+        id: WalletTabViews.withdrawalmethods,
+        title: 'Withdrawal Methods',
+    },
+    {
+        id: WalletTabViews.taxforms,
+        title: 'Tax Forms',
+    },
+]
+
+export function getHashFromTabId(tabId: string): string {
+    switch (tabId) {
+        case WalletTabViews.home:
+            return '#home'
+        case WalletTabViews.winnings:
+            return '#winnings'
+        case WalletTabViews.taxforms:
+            return '#tax-forms'
+        case WalletTabViews.withdrawalmethods:
+            return '#withdrawal-methods'
+        default:
+            return '#home'
+    }
+}
+
+export function getTabIdFromHash(hash: string): string {
+    switch (hash) {
+        case '#winnings':
+            return WalletTabViews.winnings
+        case '#tax-forms':
+            return WalletTabViews.taxforms
+        case '#withdrawal-methods':
+            return WalletTabViews.withdrawalmethods
+        default:
+            return WalletTabViews.home
+    }
+}

src/apps/wallet/src/home/tabs/home/Home.module.scss

@@ -0,0 +1,39 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    background-color: $black-5;
+    padding: 100px 32px;
+    margin: $sp-8 0;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 50px;
+    box-sizing: border-box;
+}
+
+.banner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    & > * {
+        flex: 1 1 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+@media (max-width: 768px) {
+    .banner {
+        flex-direction: column;
+    }
+}
+
+.info-row-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding-left: 50px;
+    padding-right: 50px;
+}