From 5d4aace9ebd2aff1538f5493b99e58d2fad01db7 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Wed, 23 Apr 2025 17:07:26 +0300 Subject: [PATCH] PM-1097 - remove wallet tabs --- src/apps/wallet/src/home/tabs/WalletTabs.tsx | 6 - .../home/tabs/config/wallet-tabs-config.ts | 18 - .../wallet/src/home/tabs/home/HomeTab.tsx | 6 +- .../tabs/payments/PaymentsTab.module.scss | 125 ------- .../src/home/tabs/payments/PaymentsTab.tsx | 338 ------------------ .../wallet/src/home/tabs/payments/index.ts | 1 - .../PaymentInfoModal.module.scss | 13 - .../payment-info-modal/PaymentInfoModal.tsx | 85 ----- .../tabs/payments/payment-info-modal/index.ts | 1 - .../tabs/tax-forms/TaxFormsTab.module.scss | 55 --- .../src/home/tabs/tax-forms/TaxFormsTab.tsx | 314 ---------------- .../wallet/src/home/tabs/tax-forms/index.ts | 1 - .../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 - .../wallet/src/lib/assets/payments/index.ts | 5 +- .../lib/assets/tax-forms/ic-check-circle.svg | 3 - .../src/lib/assets/tax-forms/ic-earth.svg | 30 -- .../wallet/src/lib/assets/tax-forms/ic-us.svg | 25 -- .../wallet/src/lib/assets/tax-forms/index.ts | 5 - .../action-bar-item/ActionBarItem.tsx | 56 --- .../lib/components/action-bar-item/index.ts | 1 - .../PaymentProviderCard.module.scss | 90 ----- .../PaymentProviderCard.tsx | 173 --------- .../components/payment-provider-card/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 - .../wallet/src/lib/models/PaymentProvider.ts | 9 - src/apps/wallet/src/lib/models/TaxForm.ts | 18 - .../wallet/src/lib/models/WalletDetails.ts | 1 + src/apps/wallet/src/lib/services/wallet.ts | 119 +----- 37 files changed, 7 insertions(+), 1909 deletions(-) delete mode 100644 src/apps/wallet/src/home/tabs/payments/PaymentsTab.module.scss delete mode 100644 src/apps/wallet/src/home/tabs/payments/PaymentsTab.tsx delete mode 100644 src/apps/wallet/src/home/tabs/payments/index.ts delete mode 100644 src/apps/wallet/src/home/tabs/payments/payment-info-modal/PaymentInfoModal.module.scss delete mode 100644 src/apps/wallet/src/home/tabs/payments/payment-info-modal/PaymentInfoModal.tsx delete mode 100644 src/apps/wallet/src/home/tabs/payments/payment-info-modal/index.ts delete mode 100644 src/apps/wallet/src/home/tabs/tax-forms/TaxFormsTab.module.scss delete mode 100644 src/apps/wallet/src/home/tabs/tax-forms/TaxFormsTab.tsx delete mode 100644 src/apps/wallet/src/home/tabs/tax-forms/index.ts delete mode 100644 src/apps/wallet/src/lib/assets/payments/PayPal_logo_gray.svg delete mode 100644 src/apps/wallet/src/lib/assets/payments/Payoneer_log_gray.svg delete mode 100644 src/apps/wallet/src/lib/assets/payments/Payoneer_logo_color.svg delete mode 100644 src/apps/wallet/src/lib/assets/payments/Paypal_logo_color.svg delete mode 100644 src/apps/wallet/src/lib/assets/payments/Western_Union_Logo_gray.svg delete mode 100644 src/apps/wallet/src/lib/assets/tax-forms/ic-check-circle.svg delete mode 100644 src/apps/wallet/src/lib/assets/tax-forms/ic-earth.svg delete mode 100644 src/apps/wallet/src/lib/assets/tax-forms/ic-us.svg delete mode 100644 src/apps/wallet/src/lib/assets/tax-forms/index.ts delete mode 100644 src/apps/wallet/src/lib/components/action-bar-item/ActionBarItem.tsx delete mode 100644 src/apps/wallet/src/lib/components/action-bar-item/index.ts delete mode 100644 src/apps/wallet/src/lib/components/payment-provider-card/PaymentProviderCard.module.scss delete mode 100644 src/apps/wallet/src/lib/components/payment-provider-card/PaymentProviderCard.tsx delete mode 100644 src/apps/wallet/src/lib/components/payment-provider-card/index.ts delete mode 100644 src/apps/wallet/src/lib/components/tax-form-card/TaxFormCard.module.scss delete mode 100644 src/apps/wallet/src/lib/components/tax-form-card/TaxFormCard.tsx delete mode 100644 src/apps/wallet/src/lib/components/tax-form-card/index.ts delete mode 100644 src/apps/wallet/src/lib/components/tax-form-detail/TaxFormDetail.module.scss delete mode 100644 src/apps/wallet/src/lib/components/tax-form-detail/TaxFormDetail.tsx delete mode 100644 src/apps/wallet/src/lib/components/tax-form-detail/index.ts delete mode 100644 src/apps/wallet/src/lib/models/PaymentProvider.ts delete mode 100644 src/apps/wallet/src/lib/models/TaxForm.ts diff --git a/src/apps/wallet/src/home/tabs/WalletTabs.tsx b/src/apps/wallet/src/home/tabs/WalletTabs.tsx index 17b0db0bb..e754cdd7b 100644 --- a/src/apps/wallet/src/home/tabs/WalletTabs.tsx +++ b/src/apps/wallet/src/home/tabs/WalletTabs.tsx @@ -5,10 +5,8 @@ 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 { @@ -41,13 +39,9 @@ const WalletTabs: FC = (props: WalletHomeProps) => { )} - {activeTab === WalletTabViews.withdrawalmethods && } - {activeTab === WalletTabViews.winnings && } {activeTab === WalletTabViews.home && } - - {activeTab === WalletTabViews.taxforms && } ) } diff --git a/src/apps/wallet/src/home/tabs/config/wallet-tabs-config.ts b/src/apps/wallet/src/home/tabs/config/wallet-tabs-config.ts index 4a31f3f23..231b14521 100644 --- a/src/apps/wallet/src/home/tabs/config/wallet-tabs-config.ts +++ b/src/apps/wallet/src/home/tabs/config/wallet-tabs-config.ts @@ -3,8 +3,6 @@ import { TabsNavItem } from '~/libs/ui' export enum WalletTabViews { home = '0', winnings = '1', - taxforms = '2', - withdrawalmethods = '3', } export const WalletTabsConfig: TabsNavItem[] = [ @@ -16,14 +14,6 @@ export const WalletTabsConfig: TabsNavItem[] = [ id: WalletTabViews.winnings, title: 'Winnings', }, - { - id: WalletTabViews.withdrawalmethods, - title: 'Withdrawal Methods', - }, - { - id: WalletTabViews.taxforms, - title: 'Tax Forms', - }, ] export function getHashFromTabId(tabId: string): string { @@ -32,10 +22,6 @@ export function getHashFromTabId(tabId: string): string { return '#home' case WalletTabViews.winnings: return '#winnings' - case WalletTabViews.taxforms: - return '#tax-forms' - case WalletTabViews.withdrawalmethods: - return '#withdrawal-methods' default: return '#home' } @@ -45,10 +31,6 @@ 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 } diff --git a/src/apps/wallet/src/home/tabs/home/HomeTab.tsx b/src/apps/wallet/src/home/tabs/home/HomeTab.tsx index e37eefb93..fdeb508e7 100644 --- a/src/apps/wallet/src/home/tabs/home/HomeTab.tsx +++ b/src/apps/wallet/src/home/tabs/home/HomeTab.tsx @@ -74,6 +74,8 @@ const HomeTab: FC = () => { /> } /> + + {/* TODO: check trolley integration? */} {!walletDetails?.withdrawalMethod.isSetupComplete && ( = () => { /> )} - {!walletDetails?.taxForm.isSetupComplete && ( + {/* {!walletDetails?.taxForm.isSetupComplete && ( } @@ -112,7 +114,7 @@ const HomeTab: FC = () => { /> } /> - )} + )} */} )} diff --git a/src/apps/wallet/src/home/tabs/payments/PaymentsTab.module.scss b/src/apps/wallet/src/home/tabs/payments/PaymentsTab.module.scss deleted file mode 100644 index c6d8d6f81..000000000 --- a/src/apps/wallet/src/home/tabs/payments/PaymentsTab.module.scss +++ /dev/null @@ -1,125 +0,0 @@ -@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/src/home/tabs/payments/PaymentsTab.tsx b/src/apps/wallet/src/home/tabs/payments/PaymentsTab.tsx deleted file mode 100644 index ef426d99c..000000000 --- a/src/apps/wallet/src/home/tabs/payments/PaymentsTab.tsx +++ /dev/null @@ -1,338 +0,0 @@ -/* 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/src/home/tabs/payments/index.ts b/src/apps/wallet/src/home/tabs/payments/index.ts deleted file mode 100644 index 8dc41bc69..000000000 --- a/src/apps/wallet/src/home/tabs/payments/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as PaymentsTab } from './PaymentsTab' diff --git a/src/apps/wallet/src/home/tabs/payments/payment-info-modal/PaymentInfoModal.module.scss b/src/apps/wallet/src/home/tabs/payments/payment-info-modal/PaymentInfoModal.module.scss deleted file mode 100644 index 3917b7e01..000000000 --- a/src/apps/wallet/src/home/tabs/payments/payment-info-modal/PaymentInfoModal.module.scss +++ /dev/null @@ -1,13 +0,0 @@ -@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/src/home/tabs/payments/payment-info-modal/PaymentInfoModal.tsx b/src/apps/wallet/src/home/tabs/payments/payment-info-modal/PaymentInfoModal.tsx deleted file mode 100644 index cdb6df8be..000000000 --- a/src/apps/wallet/src/home/tabs/payments/payment-info-modal/PaymentInfoModal.tsx +++ /dev/null @@ -1,85 +0,0 @@ -/* 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) => ( - - -