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/profiles/src/components/tc-achievements/MemberStatsBlock/MemberStatsBlock.tsx

@@ -6,7 +6,7 @@ import { getRatingColor, MemberStats, UserProfile } from '~/libs/core'
 import { IconOutline } from '~/libs/ui'
 
 import { useFetchActiveTracks } from '../../../hooks'
-import { WinnerIcon } from '../../../lib'
+import { formatPlural, WinnerIcon } from '../../../lib'
 import { MemberProfileContextValue, useMemberProfileContext } from '../../../member-profile/MemberProfile.context'
 
 import styles from './MemberStatsBlock.module.scss'
@@ -45,30 +45,25 @@ const MemberStatsBlock: FC<MemberStatsBlockProps> = props => {
                                 <div className={styles.trackDetails}>
                                     {!track.isDSTrack && ((track.submissions || track.wins) > 0) && (
                                         <>
-                                            <WinnerIcon className='icon-xxxl' />
+                                            {track.wins > 0 && (
+                                                <WinnerIcon className='icon-xxxl' />
+                                            )}
                                             <span className={styles.trackStats}>
                                                 <span className={styles.count}>
                                                     {track.wins || track.submissions}
                                                 </span>
                                                 <span className={styles.label}>
-                                                    {track.wins > 0 ? 'Wins' : 'Submissions'}
+                                                    {formatPlural(
+                                                        track.wins || track.submissions || 0,
+                                                        track.wins > 0 ? 'Win' : 'Submission',
+                                                    )}
                                                 </span>
                                             </span>
                                         </>
                                     )}
                                     {/* competitive programming only */}
                                     {track.isDSTrack && (
-                                        (track.percentile as number) >= 50 ? (
-                                            <span className={styles.trackStats}>
-                                                <span className={styles.count}>
-                                                    {track.percentile}
-                                                    %
-                                                </span>
-                                                <span className={styles.label}>
-                                                    Percentile
-                                                </span>
-                                            </span>
-                                        ) : (
+                                        (track.isCPTrack || (track.percentile as number) < 50) ? (
                                             <>
                                                 <span
                                                     className={styles.icon}
@@ -83,6 +78,16 @@ const MemberStatsBlock: FC<MemberStatsBlockProps> = props => {
                                                     </span>
                                                 </span>
                                             </>
+                                        ) : (
+                                            <span className={styles.trackStats}>
+                                                <span className={styles.count}>
+                                                    {track.percentile}
+                                                    %
+                                                </span>
+                                                <span className={styles.label}>
+                                                    Percentile
+                                                </span>
+                                            </span>
                                         )
                                     )}
                                     <IconOutline.ChevronRightIcon

src/apps/profiles/src/components/tc-achievements/StatsSummaryBlock/StatsSummaryBlock.tsx

@@ -4,7 +4,7 @@ import { find, get } from 'lodash'
 
 import { getRatingColor } from '~/libs/core'
 
-import { numberToFixed } from '../../../lib'
+import { formatPlural, numberToFixed } from '../../../lib'
 import { TracksSummaryStats } from '../../../config'
 
 import styles from './StatsSummaryBlock.module.scss'
@@ -49,7 +49,10 @@ const StatsSummaryBlock: FC<StatsSummaryBlockProps> = props => {
                         </span>
                         <span className={styles.summaryItemLabel}>
                             <span className='body-small'>
-                                {props.trackTitle === 'Single Round Match' ? 'Competitions' : 'Challenges'}
+                                {formatPlural(
+                                    props.challenges || 0,
+                                    props.trackTitle === 'Single Round Match' ? 'Competition' : 'Challenge',
+                                )}
                             </span>
                         </span>
                     </div>
@@ -61,7 +64,7 @@ const StatsSummaryBlock: FC<StatsSummaryBlockProps> = props => {
                         </span>
                         <span className={styles.summaryItemLabel}>
                             <span className='body-small'>
-                                Wins
+                                {formatPlural(props.wins || 0, 'Win')}
                             </span>
                         </span>
                     </div>
@@ -73,7 +76,7 @@ const StatsSummaryBlock: FC<StatsSummaryBlockProps> = props => {
                         </span>
                         <span className={styles.summaryItemLabel}>
                             <span className='body-small'>
-                                Submissions
+                                {formatPlural(props.submissions || 0, 'Submission')}
                             </span>
                         </span>
                     </div>

src/apps/profiles/src/components/tc-achievements/SubTrackSummaryCard/SubTrackSummaryCard.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames'
 
 import { IconSolid } from '~/libs/ui'
 
-import { subTrackLabelToHumanName, WinnerIcon } from '../../../lib'
+import { formatPlural, subTrackLabelToHumanName, WinnerIcon } from '../../../lib'
 
 import styles from './SubTrackSummaryCard.module.scss'
 
@@ -29,7 +29,9 @@ const SubTrackSummaryCard: FC<SubTrackSummaryCardProps> = props => (
                             {props.wins}
                         </span>
                         <span className={styles.statsItemLabel}>
-                            <span className='label'>wins</span>
+                            <span className='label'>
+                                {formatPlural(props.wins || 0, 'Win')}
+                            </span>
                         </span>
                     </div>
                 )}
@@ -38,7 +40,9 @@ const SubTrackSummaryCard: FC<SubTrackSummaryCardProps> = props => (
                         {props.submissions}
                     </span>
                     <span className={styles.statsItemLabel}>
-                        <span className='label'>submissions</span>
+                        <span className='label'>
+                            {formatPlural(props.submissions || 0, 'Submission')}
+                        </span>
                     </span>
                 </div>
             </div>

src/apps/profiles/src/hooks/useFetchActiveTracks.tsx

@@ -21,6 +21,7 @@ export interface MemberStatsTrack {
     wins: number,
     order?: number
     isDSTrack?: boolean
+    isCPTrack?: boolean
 }
 
 /**
@@ -206,6 +207,7 @@ export const useFetchActiveTracks = (userHandle: string): MemberStatsTrack[] =>
         return {
             challenges: dataScienceSubTracks.SRM?.challenges ?? 0,
             isActive: (dataScienceSubTracks.SRM?.challenges ?? 0) > 0,
+            isCPTrack: true,
             isDSTrack: true,
             name: 'Competitive Programming',
             order: -2,

src/apps/profiles/src/lib/helpers.ts

@@ -113,3 +113,15 @@ export function isValidURL(urlToValidate: string): boolean {
 
     return true
 }
+
+/**
+ * Creates the string with the number of items and the word describing the item
+ * possibly in plural form.
+ *
+ * @param {number} count - The number of entities
+ * @param {string} baseWord - The base word that describes the entity
+ * @returns {string}
+ */
+export function formatPlural(count: number, baseWord: string): string {
+    return `${baseWord}${count === 1 ? '' : 's'}`
+}

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'