feat(wallet-admin): add dashboard & payment listing

Author: Rakib Ansary

.circleci/config.yml

@@ -257,7 +257,7 @@ workflows:
                       branches:
                           only:
                               - dev
-                              - TSJR-314_skill-manager_landing-page
+                              - feat/wallet-admin
 
             - deployQa:
                   context: org-global

craco.config.js

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

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

@@ -11,6 +11,7 @@ import { accountsRoutes } from '~/apps/accounts'
 import { onboardingRoutes } from '~/apps/onboarding'
 import { adminRoutes } from '~/apps/admin'
 import { walletRoutes } from '~/apps/wallet'
+import { walletAdminRoutes } from '~/apps/wallet-admin'
 
 const Home: LazyLoadedComponent = lazyLoad(
     () => import('./routes/home'),
@@ -38,6 +39,7 @@ export const platformRoutes: Array<PlatformRoute> = [
     ...talentSearchRoutes,
     ...profilesRoutes,
     ...walletRoutes,
+    ...walletAdminRoutes,
     ...accountsRoutes,
     ...adminRoutes,
     ...homeRoutes,

src/apps/wallet-admin/.prettierrc

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

src/apps/wallet-admin/README.md

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

src/apps/wallet-admin/index.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-admin.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-admin/src/WalletAdminApp.tsx

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

src/apps/wallet-admin/src/home/WalletAdminHomePage.tsx

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

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

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

src/apps/wallet-admin/src/home/page-layout/WalletAdminLayout.module.scss

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

src/apps/wallet-admin/src/home/page-layout/WalletAdminLayout.tsx

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

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

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

src/apps/wallet-admin/src/home/tabs/WalletAdminTabs.module.scss

@@ -0,0 +1,51 @@
+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, WalletAdminTabsConfig, WalletAdminTabViews } from './config'
+import { PaymentsTab } from './payments'
+import { HomeTab } from './home'
+import styles from './WalletAdminTabs.module.scss'
+
+interface WalletHomeProps {
+    profile: UserProfile
+}
+
+const WalletAdminTabs: 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={WalletAdminTabsConfig} />
+
+            <PageTitle>
+                {[
+                    WalletAdminTabsConfig.find((tab: TabsNavItem) => tab.id === activeTab)?.title,
+                    'Wallet',
+                    'Topcoder',
+                ].join(' | ')}
+            </PageTitle>
+
+            {activeTab === WalletAdminTabViews.home && <HomeTab profile={props.profile} />}
+
+            {activeTab === WalletAdminTabViews.payments && <PaymentsTab profile={props.profile} />}
+        </div>
+    )
+}
+
+export default WalletAdminTabs

src/apps/wallet-admin/src/home/tabs/WalletAdminTabs.tsx

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

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

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

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

@@ -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;
+}

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

@@ -0,0 +1,28 @@
+/* eslint-disable react/jsx-wrap-multilines */
+import { FC, useEffect, useState } from 'react'
+
+import { UserProfile } from '~/libs/core'
+import { IconOutline, LinkButton, LoadingCircles } from '~/libs/ui'
+
+import { Balance, WalletDetails } from '../../../lib/models/WalletDetails'
+import { getWalletDetails } from '../../../lib/services/wallet'
+import { InfoRow } from '../../../lib'
+import { BannerImage, BannerText } from '../../../lib/assets/home'
+import Chip from '../../../lib/components/chip/Chip'
+
+import styles from './Home.module.scss'
+
+interface HomeTabProps {
+    profile: UserProfile
+}
+
+const HomeTab: FC<HomeTabProps> = () => (
+    <div className={styles.container}>
+        <div className={styles.banner}>
+            <BannerText />
+            <BannerImage />
+        </div>
+    </div>
+)
+
+export default HomeTab

src/apps/wallet-admin/src/home/tabs/home/HomeTab.tsx

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

src/apps/wallet-admin/src/home/tabs/home/index.ts

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