From 52f4e8f5808f398f8bcae79708b2b2e68253dc6f Mon Sep 17 00:00:00 2001 From: Rakib Ansary Date: Wed, 13 Mar 2024 16:41:37 +0600 Subject: [PATCH 1/2] feat(wallet-admin): add dashboard & payment listing --- .circleci/config.yml | 2 +- craco.config.js | 1 + src/apps/platform/src/platform.routes.tsx | 2 + src/apps/wallet-admin/.prettierrc | 7 + src/apps/wallet-admin/README.md | 0 src/apps/wallet-admin/index.tsx | 1 + src/apps/wallet-admin/src/WalletAdminApp.tsx | 20 + .../src/home/WalletAdminHomePage.tsx | 19 + src/apps/wallet-admin/src/home/index.ts | 1 + .../page-layout/WalletAdminLayout.module.scss | 5 + .../home/page-layout/WalletAdminLayout.tsx | 20 + .../src/home/page-layout/index.ts | 1 + .../src/home/tabs/WalletAdminTabs.module.scss | 11 + .../src/home/tabs/WalletAdminTabs.tsx | 51 +++ .../src/home/tabs/config/index.ts | 1 + .../home/tabs/config/wallet-tabs-config.ts | 55 +++ .../src/home/tabs/home/Home.module.scss | 39 ++ .../src/home/tabs/home/HomeTab.tsx | 28 ++ .../wallet-admin/src/home/tabs/home/index.ts | 1 + src/apps/wallet-admin/src/home/tabs/index.ts | 1 + .../payments-methods/PaymentsTab.module.scss | 125 ++++++ .../tabs/payments-methods/PaymentsTab.tsx | 338 ++++++++++++++++ .../src/home/tabs/payments-methods/index.ts | 1 + .../PaymentInfoModal.module.scss | 13 + .../payment-info-modal/PaymentInfoModal.tsx | 85 ++++ .../payment-info-modal/index.ts | 1 + .../home/tabs/payments/Payments.module.scss | 35 ++ .../src/home/tabs/payments/PaymentsTab.tsx | 367 ++++++++++++++++++ .../src/home/tabs/payments/index.ts | 1 + .../tabs/tax-forms/TaxFormsTab.module.scss | 55 +++ .../src/home/tabs/tax-forms/TaxFormsTab.tsx | 314 +++++++++++++++ .../src/home/tabs/tax-forms/index.ts | 1 + src/apps/wallet-admin/src/index.ts | 1 + .../src/lib/assets/home/banner-image.svg | 11 + .../src/lib/assets/home/banner-text.svg | 5 + .../wallet-admin/src/lib/assets/home/index.ts | 4 + src/apps/wallet-admin/src/lib/assets/index.ts | 5 + .../lib/assets/payments/PayPal_logo_gray.svg | 8 + .../lib/assets/payments/Payoneer_log_gray.svg | 4 + .../assets/payments/Payoneer_logo_color.svg | 15 + .../lib/assets/payments/Paypal_logo_color.svg | 14 + .../payments/Western_Union_Logo_gray.svg | 13 + .../src/lib/assets/payments/icon-dollar.svg | 3 + .../src/lib/assets/payments/icon-speed.svg | 3 + .../src/lib/assets/payments/icon-world.svg | 3 + .../src/lib/assets/payments/index.ts | 8 + .../src/lib/assets/preferences/email.svg | 4 + .../src/lib/assets/preferences/forum.svg | 4 + .../src/lib/assets/preferences/index.ts | 7 + .../src/lib/assets/security/apple-store.svg | 34 ++ .../src/lib/assets/security/credential.png | Bin 0 -> 47241 bytes .../src/lib/assets/security/dicelogo.png | Bin 0 -> 3067 bytes .../src/lib/assets/security/dicelogobig.png | Bin 0 -> 23747 bytes .../src/lib/assets/security/dicelogosmall.png | Bin 0 -> 6681 bytes .../src/lib/assets/security/google-play.png | Bin 0 -> 7000 bytes .../src/lib/assets/security/index.ts | 17 + .../src/lib/assets/security/mfa.svg | 4 + .../src/lib/assets/security/unsuccessful.svg | 3 + .../lib/assets/tax-forms/ic-check-circle.svg | 3 + .../src/lib/assets/tax-forms/ic-earth.svg | 30 ++ .../src/lib/assets/tax-forms/ic-us.svg | 25 ++ .../src/lib/assets/tax-forms/index.ts | 5 + .../src/lib/assets/tcandyou/data_science.svg | 11 + .../src/lib/assets/tcandyou/design.svg | 14 + .../src/lib/assets/tcandyou/develop.svg | 11 + .../src/lib/assets/tcandyou/ico-ethereum.png | Bin 0 -> 2649 bytes .../src/lib/assets/tcandyou/ico-ibmcloud.png | Bin 0 -> 3424 bytes .../src/lib/assets/tcandyou/ico-veteran.png | Bin 0 -> 16329 bytes .../src/lib/assets/tcandyou/index.ts | 15 + .../assets/tools/Financial Institution.svg | 6 + .../tools/Internet Service Provider.svg | 6 + .../src/lib/assets/tools/Mobile Carrier.svg | 6 + .../src/lib/assets/tools/Television.svg | 16 + .../src/lib/assets/tools/console.svg | 1 + .../src/lib/assets/tools/desktop.svg | 4 + .../src/lib/assets/tools/index.ts | 31 ++ .../src/lib/assets/tools/laptop.svg | 1 + .../src/lib/assets/tools/other_device.svg | 9 + .../assets/tools/other_service_provider.svg | 17 + .../src/lib/assets/tools/smartphone.svg | 4 + .../src/lib/assets/tools/software.svg | 8 + .../src/lib/assets/tools/subscription.svg | 3 + .../src/lib/assets/tools/tablet.svg | 1 + .../src/lib/assets/tools/wearable.svg | 1 + .../action-bar-item/ActionBarItem.tsx | 56 +++ .../lib/components/action-bar-item/index.ts | 1 + .../src/lib/components/chip/Chip.module.scss | 18 + .../src/lib/components/chip/Chip.tsx | 11 + .../src/lib/components/chip/index.ts | 1 + .../filter-bar/FilterBar.module.scss | 40 ++ .../lib/components/filter-bar/FilterBar.tsx | 122 ++++++ .../src/lib/components/filter-bar/index.ts | 1 + .../wallet-admin/src/lib/components/index.ts | 4 + .../components/info-row/InfoRow.module.scss | 38 ++ .../src/lib/components/info-row/InfoRow.tsx | 21 + .../src/lib/components/info-row/index.ts | 1 + .../components/otp-modal/OtpModal.module.scss | 87 +++++ .../src/lib/components/otp-modal/OtpModal.tsx | 140 +++++++ .../src/lib/components/otp-modal/index.ts | 1 + .../PaymentProviderCard.module.scss | 90 +++++ .../PaymentProviderCard.tsx | 173 +++++++++ .../components/payment-provider-card/index.ts | 1 + .../payments-table/PaymentTable.module.scss | 102 +++++ .../payments-table/PaymentTable.tsx | 125 ++++++ .../SettingSection.module.scss | 26 ++ .../setting-section/SettingSection.tsx | 30 ++ .../lib/components/setting-section/index.ts | 1 + .../tax-form-card/TaxFormCard.module.scss | 46 +++ .../components/tax-form-card/TaxFormCard.tsx | 83 ++++ .../src/lib/components/tax-form-card/index.ts | 1 + .../tax-form-detail/TaxFormDetail.module.scss | 92 +++++ .../tax-form-detail/TaxFormDetail.tsx | 140 +++++++ .../lib/components/tax-form-detail/index.ts | 1 + src/apps/wallet-admin/src/lib/index.ts | 3 + .../wallet-admin/src/lib/models/ApiError.ts | 4 + .../src/lib/models/ApiResponse.ts | 4 + .../src/lib/models/ConfirmFlowData.ts | 6 + .../src/lib/models/OtpVerificationResponse.ts | 3 + .../src/lib/models/PaginationInfo.ts | 6 + .../src/lib/models/PaymentProvider.ts | 9 + .../src/lib/models/ResendOtpResponse.ts | 3 + .../wallet-admin/src/lib/models/TaxForm.ts | 18 + .../src/lib/models/TransactionId.ts | 5 + .../src/lib/models/WalletDetails.ts | 19 + .../src/lib/models/WinningDetail.ts | 44 +++ .../wallet-admin/src/lib/services/wallet.ts | 243 ++++++++++++ .../src/lib/wallet-swr/WalletSwr.tsx | 23 ++ .../wallet-admin/src/lib/wallet-swr/index.ts | 1 + .../wallet-admin/src/wallet-admin.routes.tsx | 32 ++ src/config/constants.ts | 1 + ssl-local/local.topcoder-dev.com+2-key.pem | 28 ++ ssl-local/local.topcoder-dev.com+2.pem | 27 ++ start.sh | 4 +- tsconfig.paths.json | 3 + 134 files changed, 3936 insertions(+), 3 deletions(-) create mode 100644 src/apps/wallet-admin/.prettierrc create mode 100644 src/apps/wallet-admin/README.md create mode 100644 src/apps/wallet-admin/index.tsx create mode 100644 src/apps/wallet-admin/src/WalletAdminApp.tsx create mode 100644 src/apps/wallet-admin/src/home/WalletAdminHomePage.tsx create mode 100644 src/apps/wallet-admin/src/home/index.ts create mode 100644 src/apps/wallet-admin/src/home/page-layout/WalletAdminLayout.module.scss create mode 100644 src/apps/wallet-admin/src/home/page-layout/WalletAdminLayout.tsx create mode 100644 src/apps/wallet-admin/src/home/page-layout/index.ts create mode 100644 src/apps/wallet-admin/src/home/tabs/WalletAdminTabs.module.scss create mode 100644 src/apps/wallet-admin/src/home/tabs/WalletAdminTabs.tsx create mode 100644 src/apps/wallet-admin/src/home/tabs/config/index.ts create mode 100644 src/apps/wallet-admin/src/home/tabs/config/wallet-tabs-config.ts create mode 100644 src/apps/wallet-admin/src/home/tabs/home/Home.module.scss create mode 100644 src/apps/wallet-admin/src/home/tabs/home/HomeTab.tsx create mode 100644 src/apps/wallet-admin/src/home/tabs/home/index.ts create mode 100644 src/apps/wallet-admin/src/home/tabs/index.ts create mode 100644 src/apps/wallet-admin/src/home/tabs/payments-methods/PaymentsTab.module.scss create mode 100644 src/apps/wallet-admin/src/home/tabs/payments-methods/PaymentsTab.tsx create mode 100644 src/apps/wallet-admin/src/home/tabs/payments-methods/index.ts create mode 100644 src/apps/wallet-admin/src/home/tabs/payments-methods/payment-info-modal/PaymentInfoModal.module.scss create mode 100644 src/apps/wallet-admin/src/home/tabs/payments-methods/payment-info-modal/PaymentInfoModal.tsx create mode 100644 src/apps/wallet-admin/src/home/tabs/payments-methods/payment-info-modal/index.ts create mode 100644 src/apps/wallet-admin/src/home/tabs/payments/Payments.module.scss create mode 100644 src/apps/wallet-admin/src/home/tabs/payments/PaymentsTab.tsx create mode 100644 src/apps/wallet-admin/src/home/tabs/payments/index.ts create mode 100644 src/apps/wallet-admin/src/home/tabs/tax-forms/TaxFormsTab.module.scss create mode 100644 src/apps/wallet-admin/src/home/tabs/tax-forms/TaxFormsTab.tsx create mode 100644 src/apps/wallet-admin/src/home/tabs/tax-forms/index.ts create mode 100644 src/apps/wallet-admin/src/index.ts create mode 100644 src/apps/wallet-admin/src/lib/assets/home/banner-image.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/home/banner-text.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/home/index.ts create mode 100644 src/apps/wallet-admin/src/lib/assets/index.ts create mode 100644 src/apps/wallet-admin/src/lib/assets/payments/PayPal_logo_gray.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/payments/Payoneer_log_gray.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/payments/Payoneer_logo_color.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/payments/Paypal_logo_color.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/payments/Western_Union_Logo_gray.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/payments/icon-dollar.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/payments/icon-speed.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/payments/icon-world.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/payments/index.ts create mode 100755 src/apps/wallet-admin/src/lib/assets/preferences/email.svg create mode 100755 src/apps/wallet-admin/src/lib/assets/preferences/forum.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/preferences/index.ts create mode 100644 src/apps/wallet-admin/src/lib/assets/security/apple-store.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/security/credential.png create mode 100644 src/apps/wallet-admin/src/lib/assets/security/dicelogo.png create mode 100644 src/apps/wallet-admin/src/lib/assets/security/dicelogobig.png create mode 100644 src/apps/wallet-admin/src/lib/assets/security/dicelogosmall.png create mode 100644 src/apps/wallet-admin/src/lib/assets/security/google-play.png create mode 100644 src/apps/wallet-admin/src/lib/assets/security/index.ts create mode 100644 src/apps/wallet-admin/src/lib/assets/security/mfa.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/security/unsuccessful.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tax-forms/ic-check-circle.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tax-forms/ic-earth.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tax-forms/ic-us.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tax-forms/index.ts create mode 100644 src/apps/wallet-admin/src/lib/assets/tcandyou/data_science.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tcandyou/design.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tcandyou/develop.svg create mode 100755 src/apps/wallet-admin/src/lib/assets/tcandyou/ico-ethereum.png create mode 100755 src/apps/wallet-admin/src/lib/assets/tcandyou/ico-ibmcloud.png create mode 100644 src/apps/wallet-admin/src/lib/assets/tcandyou/ico-veteran.png create mode 100644 src/apps/wallet-admin/src/lib/assets/tcandyou/index.ts create mode 100644 src/apps/wallet-admin/src/lib/assets/tools/Financial Institution.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tools/Internet Service Provider.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tools/Mobile Carrier.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tools/Television.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tools/console.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tools/desktop.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tools/index.ts create mode 100644 src/apps/wallet-admin/src/lib/assets/tools/laptop.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tools/other_device.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tools/other_service_provider.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tools/smartphone.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tools/software.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tools/subscription.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tools/tablet.svg create mode 100644 src/apps/wallet-admin/src/lib/assets/tools/wearable.svg create mode 100644 src/apps/wallet-admin/src/lib/components/action-bar-item/ActionBarItem.tsx create mode 100644 src/apps/wallet-admin/src/lib/components/action-bar-item/index.ts create mode 100644 src/apps/wallet-admin/src/lib/components/chip/Chip.module.scss create mode 100644 src/apps/wallet-admin/src/lib/components/chip/Chip.tsx create mode 100644 src/apps/wallet-admin/src/lib/components/chip/index.ts create mode 100644 src/apps/wallet-admin/src/lib/components/filter-bar/FilterBar.module.scss create mode 100644 src/apps/wallet-admin/src/lib/components/filter-bar/FilterBar.tsx create mode 100644 src/apps/wallet-admin/src/lib/components/filter-bar/index.ts create mode 100644 src/apps/wallet-admin/src/lib/components/index.ts create mode 100644 src/apps/wallet-admin/src/lib/components/info-row/InfoRow.module.scss create mode 100644 src/apps/wallet-admin/src/lib/components/info-row/InfoRow.tsx create mode 100644 src/apps/wallet-admin/src/lib/components/info-row/index.ts create mode 100644 src/apps/wallet-admin/src/lib/components/otp-modal/OtpModal.module.scss create mode 100644 src/apps/wallet-admin/src/lib/components/otp-modal/OtpModal.tsx create mode 100644 src/apps/wallet-admin/src/lib/components/otp-modal/index.ts create mode 100644 src/apps/wallet-admin/src/lib/components/payment-provider-card/PaymentProviderCard.module.scss create mode 100644 src/apps/wallet-admin/src/lib/components/payment-provider-card/PaymentProviderCard.tsx create mode 100644 src/apps/wallet-admin/src/lib/components/payment-provider-card/index.ts create mode 100644 src/apps/wallet-admin/src/lib/components/payments-table/PaymentTable.module.scss create mode 100644 src/apps/wallet-admin/src/lib/components/payments-table/PaymentTable.tsx create mode 100644 src/apps/wallet-admin/src/lib/components/setting-section/SettingSection.module.scss create mode 100644 src/apps/wallet-admin/src/lib/components/setting-section/SettingSection.tsx create mode 100644 src/apps/wallet-admin/src/lib/components/setting-section/index.ts create mode 100644 src/apps/wallet-admin/src/lib/components/tax-form-card/TaxFormCard.module.scss create mode 100644 src/apps/wallet-admin/src/lib/components/tax-form-card/TaxFormCard.tsx create mode 100644 src/apps/wallet-admin/src/lib/components/tax-form-card/index.ts create mode 100644 src/apps/wallet-admin/src/lib/components/tax-form-detail/TaxFormDetail.module.scss create mode 100644 src/apps/wallet-admin/src/lib/components/tax-form-detail/TaxFormDetail.tsx create mode 100644 src/apps/wallet-admin/src/lib/components/tax-form-detail/index.ts create mode 100644 src/apps/wallet-admin/src/lib/index.ts create mode 100644 src/apps/wallet-admin/src/lib/models/ApiError.ts create mode 100644 src/apps/wallet-admin/src/lib/models/ApiResponse.ts create mode 100644 src/apps/wallet-admin/src/lib/models/ConfirmFlowData.ts create mode 100644 src/apps/wallet-admin/src/lib/models/OtpVerificationResponse.ts create mode 100644 src/apps/wallet-admin/src/lib/models/PaginationInfo.ts create mode 100644 src/apps/wallet-admin/src/lib/models/PaymentProvider.ts create mode 100644 src/apps/wallet-admin/src/lib/models/ResendOtpResponse.ts create mode 100644 src/apps/wallet-admin/src/lib/models/TaxForm.ts create mode 100644 src/apps/wallet-admin/src/lib/models/TransactionId.ts create mode 100644 src/apps/wallet-admin/src/lib/models/WalletDetails.ts create mode 100644 src/apps/wallet-admin/src/lib/models/WinningDetail.ts create mode 100644 src/apps/wallet-admin/src/lib/services/wallet.ts create mode 100644 src/apps/wallet-admin/src/lib/wallet-swr/WalletSwr.tsx create mode 100644 src/apps/wallet-admin/src/lib/wallet-swr/index.ts create mode 100644 src/apps/wallet-admin/src/wallet-admin.routes.tsx create mode 100644 ssl-local/local.topcoder-dev.com+2-key.pem create mode 100644 ssl-local/local.topcoder-dev.com+2.pem mode change 100644 => 100755 start.sh diff --git a/.circleci/config.yml b/.circleci/config.yml index 77ef2c169..eb97a7ce7 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -257,7 +257,7 @@ workflows: branches: only: - dev - - TSJR-314_skill-manager_landing-page + - feat/wallet-admin - deployQa: context: org-global diff --git a/craco.config.js b/craco.config.js index 1e2d52d01..ce20f52b2 100644 --- a/craco.config.js +++ b/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 diff --git a/src/apps/platform/src/platform.routes.tsx b/src/apps/platform/src/platform.routes.tsx index 6c15844fa..c59367c88 100644 --- a/src/apps/platform/src/platform.routes.tsx +++ b/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 = [ ...talentSearchRoutes, ...profilesRoutes, ...walletRoutes, + ...walletAdminRoutes, ...accountsRoutes, ...adminRoutes, ...homeRoutes, diff --git a/src/apps/wallet-admin/.prettierrc b/src/apps/wallet-admin/.prettierrc new file mode 100644 index 000000000..35288c5c7 --- /dev/null +++ b/src/apps/wallet-admin/.prettierrc @@ -0,0 +1,7 @@ +{ + "semi": false, + "trailingComma": "all", + "jsxSingleQuote": true, + "jsxBracketSameLine": true, + "printWidth": 120 +} diff --git a/src/apps/wallet-admin/README.md b/src/apps/wallet-admin/README.md new file mode 100644 index 000000000..e69de29bb diff --git a/src/apps/wallet-admin/index.tsx b/src/apps/wallet-admin/index.tsx new file mode 100644 index 000000000..6f39cd49b --- /dev/null +++ b/src/apps/wallet-admin/index.tsx @@ -0,0 +1 @@ +export * from './src' diff --git a/src/apps/wallet-admin/src/WalletAdminApp.tsx b/src/apps/wallet-admin/src/WalletAdminApp.tsx new file mode 100644 index 000000000..58764103d --- /dev/null +++ b/src/apps/wallet-admin/src/WalletAdminApp.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 ( + + + {getChildRoutes(toolTitle)} + + ) +} + +export default AccountsApp diff --git a/src/apps/wallet-admin/src/home/WalletAdminHomePage.tsx b/src/apps/wallet-admin/src/home/WalletAdminHomePage.tsx new file mode 100644 index 000000000..2cd2b28ca --- /dev/null +++ b/src/apps/wallet-admin/src/home/WalletAdminHomePage.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 ( + <> + + {initialized && profile && } + + ) +} + +export default AccountSettingsPage diff --git a/src/apps/wallet-admin/src/home/index.ts b/src/apps/wallet-admin/src/home/index.ts new file mode 100644 index 000000000..11655491d --- /dev/null +++ b/src/apps/wallet-admin/src/home/index.ts @@ -0,0 +1 @@ +export { default as WalletHomePage } from './WalletAdminHomePage' diff --git a/src/apps/wallet-admin/src/home/page-layout/WalletAdminLayout.module.scss b/src/apps/wallet-admin/src/home/page-layout/WalletAdminLayout.module.scss new file mode 100644 index 000000000..44f6c479b --- /dev/null +++ b/src/apps/wallet-admin/src/home/page-layout/WalletAdminLayout.module.scss @@ -0,0 +1,5 @@ +@import '@libs/ui/styles/includes'; + +.contentLayoutOuter { + margin: $sp-8 auto !important; +} diff --git a/src/apps/wallet-admin/src/home/page-layout/WalletAdminLayout.tsx b/src/apps/wallet-admin/src/home/page-layout/WalletAdminLayout.tsx new file mode 100644 index 000000000..b0f29ca5a --- /dev/null +++ b/src/apps/wallet-admin/src/home/page-layout/WalletAdminLayout.tsx @@ -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 = (props: WalletHomeLayoutProps) => ( + + + +) + +export default WalletAdminLayout diff --git a/src/apps/wallet-admin/src/home/page-layout/index.ts b/src/apps/wallet-admin/src/home/page-layout/index.ts new file mode 100644 index 000000000..b3597d13b --- /dev/null +++ b/src/apps/wallet-admin/src/home/page-layout/index.ts @@ -0,0 +1 @@ +export { default as WalletAdminLayout } from './WalletAdminLayout' diff --git a/src/apps/wallet-admin/src/home/tabs/WalletAdminTabs.module.scss b/src/apps/wallet-admin/src/home/tabs/WalletAdminTabs.module.scss new file mode 100644 index 000000000..30e3c9b0c --- /dev/null +++ b/src/apps/wallet-admin/src/home/tabs/WalletAdminTabs.module.scss @@ -0,0 +1,11 @@ +@import '@libs/ui/styles/includes'; + +.container { + form { + @include ltelg { + :global(.input-el) { + margin-bottom: $sp-4; + } + } + } +} diff --git a/src/apps/wallet-admin/src/home/tabs/WalletAdminTabs.tsx b/src/apps/wallet-admin/src/home/tabs/WalletAdminTabs.tsx new file mode 100644 index 000000000..a26d94225 --- /dev/null +++ b/src/apps/wallet-admin/src/home/tabs/WalletAdminTabs.tsx @@ -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 = (props: WalletHomeProps) => { + const { hash }: { hash: string } = useLocation() + + const activeTabHash: string = useMemo(() => getTabIdFromHash(hash), [hash]) + + const [activeTab, setActiveTab]: [string, Dispatch>] = useState(activeTabHash) + + useEffect(() => { + setActiveTab(activeTabHash) + }, [activeTabHash]) + + function handleTabChange(tabId: string): void { + setActiveTab(tabId) + window.location.hash = getHashFromTabId(tabId) + } + + return ( +
+ + + + {[ + WalletAdminTabsConfig.find((tab: TabsNavItem) => tab.id === activeTab)?.title, + 'Wallet', + 'Topcoder', + ].join(' | ')} + + + {activeTab === WalletAdminTabViews.home && } + + {activeTab === WalletAdminTabViews.payments && } +
+ ) +} + +export default WalletAdminTabs diff --git a/src/apps/wallet-admin/src/home/tabs/config/index.ts b/src/apps/wallet-admin/src/home/tabs/config/index.ts new file mode 100644 index 000000000..329aa026f --- /dev/null +++ b/src/apps/wallet-admin/src/home/tabs/config/index.ts @@ -0,0 +1 @@ +export * from './wallet-tabs-config' diff --git a/src/apps/wallet-admin/src/home/tabs/config/wallet-tabs-config.ts b/src/apps/wallet-admin/src/home/tabs/config/wallet-tabs-config.ts new file mode 100644 index 000000000..afeb83052 --- /dev/null +++ b/src/apps/wallet-admin/src/home/tabs/config/wallet-tabs-config.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 + } +} diff --git a/src/apps/wallet-admin/src/home/tabs/home/Home.module.scss b/src/apps/wallet-admin/src/home/tabs/home/Home.module.scss new file mode 100644 index 000000000..b58cd7ece --- /dev/null +++ b/src/apps/wallet-admin/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; +} diff --git a/src/apps/wallet-admin/src/home/tabs/home/HomeTab.tsx b/src/apps/wallet-admin/src/home/tabs/home/HomeTab.tsx new file mode 100644 index 000000000..1824364e4 --- /dev/null +++ b/src/apps/wallet-admin/src/home/tabs/home/HomeTab.tsx @@ -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 = () => ( +
+
+ + +
+
+) + +export default HomeTab diff --git a/src/apps/wallet-admin/src/home/tabs/home/index.ts b/src/apps/wallet-admin/src/home/tabs/home/index.ts new file mode 100644 index 000000000..fff571480 --- /dev/null +++ b/src/apps/wallet-admin/src/home/tabs/home/index.ts @@ -0,0 +1 @@ +export { default as HomeTab } from './HomeTab' diff --git a/src/apps/wallet-admin/src/home/tabs/index.ts b/src/apps/wallet-admin/src/home/tabs/index.ts new file mode 100644 index 000000000..c07831853 --- /dev/null +++ b/src/apps/wallet-admin/src/home/tabs/index.ts @@ -0,0 +1 @@ +export { default as WalletAdminTabs } from './WalletAdminTabs' diff --git a/src/apps/wallet-admin/src/home/tabs/payments-methods/PaymentsTab.module.scss b/src/apps/wallet-admin/src/home/tabs/payments-methods/PaymentsTab.module.scss new file mode 100644 index 000000000..c6d8d6f81 --- /dev/null +++ b/src/apps/wallet-admin/src/home/tabs/payments-methods/PaymentsTab.module.scss @@ -0,0 +1,125 @@ +@import '@libs/ui/styles/includes'; + +.container { + background-color: $black-5; + padding: $sp-6; + margin: $sp-8 0; + border-radius: 6px; + + @include ltelg { + padding: $sp-4; + } + + .paymentsHeader { + display: flex; + justify-content: flex-start; + gap: 5px; + align-items: center; + + @include ltelg { + flex-direction: column; + } + + .managePaymentsLink { + font-weight: $font-weight-bold; + color: $turq-160; + display: flex; + align-items: center; + + @include ltelg { + margin-top: $sp-4; + } + + svg { + margin-left: $sp-2; + max-width: 100%; + } + } + } + + .content { + background-color: $tc-white; + border-radius: 4px; + margin-top: $sp-8; + + .confirmSelectionReset { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: $sp-8; + + @include ltelg { + flex-direction: column; + align-items: flex-start; + + button { + margin-top: $sp-4; + } + } + } + + .providerContainer { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-top: $sp-8; + margin-bottom: $sp-4; + + .alternateProviderButton { + margin-top: $sp-4; + padding-left: 0px !important; + padding-right: 0px !important; + } + } + + .providersSingleRow { + margin-top: $sp-4; + display: grid; + grid-template-columns: repeat(1, 1fr); + width: 100%; + } + + .providersStacked { + display: grid; + gap: $sp-4; + grid-template-columns: repeat(1, 1fr); + margin-top: 24px; + + @media (min-width: '768px') { + grid-template-columns: repeat(2, 1fr); + grid-template-rows: auto auto; + } + } + + .providerSubmitted { + margin-top: $sp-8; + + @include ltelg { + flex-direction: column; + } + + .providerSubmittedIcon { + background: linear-gradient(264.69deg, #198807 2.17%, #017c6d 97.49%); + padding: $sp-4; + border-radius: 4px; + width: 64px; + height: 64px; + color: $tc-white; + margin-right: $sp-4; + + @include ltelg { + margin-bottom: $sp-4; + } + } + + button { + align-self: center; + + @include ltelg { + align-self: flex-start; + margin-top: $sp-4; + } + } + } + } +} diff --git a/src/apps/wallet-admin/src/home/tabs/payments-methods/PaymentsTab.tsx b/src/apps/wallet-admin/src/home/tabs/payments-methods/PaymentsTab.tsx new file mode 100644 index 000000000..ef426d99c --- /dev/null +++ b/src/apps/wallet-admin/src/home/tabs/payments-methods/PaymentsTab.tsx @@ -0,0 +1,338 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable react/jsx-no-bind */ +import { FC, useEffect, useState } from 'react' +import { toast } from 'react-toastify' + +import { Button, Collapsible, LoadingCircles } from '~/libs/ui' +import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/react/solid' + +import { Chip, IconDollar, IconSpeed, IconWorld, PayoneerLogo, PayPalLogo } from '../../../lib' +import { PaymentProvider } from '../../../lib/models/PaymentProvider' +import { PaymentProviderCard } from '../../../lib/components/payment-provider-card' +import { OtpModal } from '../../../lib/components/otp-modal' +import { TransactionResponse } from '../../../lib/models/TransactionId' +import { + confirmPaymentProvider, + getPaymentProviderRegistrationLink, + getUserPaymentProviders, removePaymentProvider, resendOtp, setPaymentProvider, +} from '../../../lib/services/wallet' + +import { PaymentInfoModal } from './payment-info-modal' +import styles from './PaymentsTab.module.scss' + +const PAYMENT_PROVIDER_DETAILS = { + Payoneer: { + details: [ + { + icon: , + label: 'FEES', + value: '$0-$3 + Currency Conversion Rates May Apply', + }, + { + icon: , + label: 'COUNTRIES', + value: 'Available in 150+ countries', + }, + { + icon: , + label: 'SPEED', + value: 'Up to 1 Business Day', + }, + ], + logo: , + }, + Paypal: { + details: [ + { + icon: , + label: 'FEES', + value: '3.49% + an international fee (non US) + a fixed fee depending upon currency', + }, + { + icon: , + label: 'COUNTRIES', + value: 'Available in 200+ countries', + }, + { + icon: , + label: 'SPEED', + value: 'Up to 1 Business Day', + }, + ], + logo: , + }, +} + +const PaymentsTab: FC = () => { + const [selectedPaymentProvider, setSelectedPaymentProvider] = useState(undefined) + const [setupRequired, setSetupRequired] = useState(false) + const [isLoading, setIsLoading] = useState(false) + const [showAlternateProvider, setShowAlternateProvider] = useState(false) + + const [paymentInfoModalFlow, setPaymentInfoModalFlow] = useState(undefined) + const [otpFlow, setOtpFlow] = useState(undefined) + + const fetchPaymentProviders = async (refresh: boolean = true) => { + setIsLoading(refresh) + + try { + const providers = await getUserPaymentProviders() + if (providers.length === 0) { + setSetupRequired(true) + } else { + setSetupRequired(false) + setSelectedPaymentProvider(providers[0]) + } + + } catch (apiError) { + setSelectedPaymentProvider(undefined) + } + + setIsLoading(false) + } + + useEffect(() => { + fetchPaymentProviders() + }, []) + + useEffect(() => { + if (selectedPaymentProvider?.status === 'OTP_VERIFIED') { + const queryParams = new URLSearchParams(window.location.search) + const code = queryParams.get('code') + + if (code) { + if (selectedPaymentProvider.type === 'Paypal' && selectedPaymentProvider.transactionId) { + confirmPaymentProvider('Paypal', code, selectedPaymentProvider.transactionId) + .then((response: any) => { + fetchPaymentProviders() + toast.success( + response.message ?? 'Payment provider added successfully.', + { position: toast.POSITION.BOTTOM_RIGHT }, + ) + }) + .catch((err: any) => { + toast.error( + err.message ?? 'Something went wrong. Please try again.', + { position: toast.POSITION.BOTTOM_RIGHT }, + ) + }) + } + } + } + }, [selectedPaymentProvider?.status, selectedPaymentProvider?.type, selectedPaymentProvider?.transactionId]) + + function renderProviders(): JSX.Element { + return ( +
+ + +
+ ) + } + + function renderConnectedProvider(): JSX.Element | undefined { + if (selectedPaymentProvider === undefined) return undefined + + return ( +
+

Chosen Payment Provider

+
+ +
+
+ ) + } + + return ( +
+
+

WITHDRAWAL METHODS

+ {!isLoading && setupRequired && } +
+ +
+ PAYMENT PROVIDER}> +

+ Topcoder is partnered with several payment providers to send payments to our community members. + Once a provider is set up, payments will be routed to your selected payment provider at the + completion of work. Currently, members can be paid through one of the following providers: + Payoneer® or PayPal®. +

+ + {isLoading && } + + {!isLoading && selectedPaymentProvider === undefined && renderProviders()} + {!isLoading && selectedPaymentProvider !== undefined && renderConnectedProvider()} + +

+ Provider details are based on the latest information from their official sites; we advise + confirming the current terms directly before finalizing your payment option. +

+ +
+ + {paymentInfoModalFlow && ( + { + setOtpFlow({ + ...response, + type: 'SETUP_PAYMENT_PROVIDER', + }) + fetchPaymentProviders(false) + }) + .catch((err: Error) => { + toast.error( + err.message ?? 'Something went wrong. Please try again.', + { position: toast.POSITION.BOTTOM_RIGHT }, + ) + }) + }} + /> + )} + {otpFlow && ( + + )} +
+ ) +} + +export default PaymentsTab diff --git a/src/apps/wallet-admin/src/home/tabs/payments-methods/index.ts b/src/apps/wallet-admin/src/home/tabs/payments-methods/index.ts new file mode 100644 index 000000000..8dc41bc69 --- /dev/null +++ b/src/apps/wallet-admin/src/home/tabs/payments-methods/index.ts @@ -0,0 +1 @@ +export { default as PaymentsTab } from './PaymentsTab' diff --git a/src/apps/wallet-admin/src/home/tabs/payments-methods/payment-info-modal/PaymentInfoModal.module.scss b/src/apps/wallet-admin/src/home/tabs/payments-methods/payment-info-modal/PaymentInfoModal.module.scss new file mode 100644 index 000000000..3917b7e01 --- /dev/null +++ b/src/apps/wallet-admin/src/home/tabs/payments-methods/payment-info-modal/PaymentInfoModal.module.scss @@ -0,0 +1,13 @@ +@import '@libs/ui/styles/includes'; + +.infoModal { + :global(.react-responsive-modal-closeButton) { + display: flex; + } + + .modalContent { + display: flex; + flex-direction: column; + gap: 25px; + } +} diff --git a/src/apps/wallet-admin/src/home/tabs/payments-methods/payment-info-modal/PaymentInfoModal.tsx b/src/apps/wallet-admin/src/home/tabs/payments-methods/payment-info-modal/PaymentInfoModal.tsx new file mode 100644 index 000000000..cdb6df8be --- /dev/null +++ b/src/apps/wallet-admin/src/home/tabs/payments-methods/payment-info-modal/PaymentInfoModal.tsx @@ -0,0 +1,85 @@ +/* eslint-disable react/jsx-wrap-multilines */ +/* eslint-disable react/jsx-no-bind */ +import { FC } from 'react' + +import { BaseModal, Button, IconOutline, LinkButton } from '~/libs/ui' + +import { PayoneerLogo, PayPalLogo } from '../../../../lib' + +import styles from './PaymentInfoModal.module.scss' + +interface PaymentInfoModalProps { + selectedPaymentProvider: string + handlePaymentSelection: (provider: string) => void + handleModalClose: () => void +} + +function renderPayoneer(): JSX.Element { + return ( + <> + +

+ You can elect to receive payments through Payoneer either to your Payoneer prepaid MasterCard or by + using their Global Bank Transfer service. The Payoneer Bank Transfer Service offers a local bank + transfer option (where available) and a wire transfer option. Certain fees may apply. +

+

+ You will be directed to Payoneer's website in a new tab to complete your connection. Please make + sure your account is fully verified to ensure withdrawal success. + + You can return here after finishing up on Payoneer's site. + +

+ + ) +} + +function renderPaypal(): JSX.Element { + return ( + <> + +

You can elect to receive payments deposited directly to your PayPal account. Certain fees may apply.

+

+ You will be directed to PayPal's website in a new tab to complete your connection. Please make + sure your account is fully verified to ensure withdrawal success. + {' '} + + You can return here after finishing up + on PayPal's site. + +

+ + ) +} + +const PaymentInfoModal: FC = (props: PaymentInfoModalProps) => ( + + +