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 deleted file mode 100644 index c6d8d6f81..000000000 --- a/src/apps/wallet-admin/src/home/tabs/payments-methods/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-admin/src/home/tabs/payments-methods/PaymentsTab.tsx b/src/apps/wallet-admin/src/home/tabs/payments-methods/PaymentsTab.tsx deleted file mode 100644 index ef426d99c..000000000 --- a/src/apps/wallet-admin/src/home/tabs/payments-methods/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-admin/src/home/tabs/payments-methods/index.ts b/src/apps/wallet-admin/src/home/tabs/payments-methods/index.ts deleted file mode 100644 index 8dc41bc69..000000000 --- a/src/apps/wallet-admin/src/home/tabs/payments-methods/index.ts +++ /dev/null @@ -1 +0,0 @@ -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 deleted file mode 100644 index 3917b7e01..000000000 --- a/src/apps/wallet-admin/src/home/tabs/payments-methods/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-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 deleted file mode 100644 index cdb6df8be..000000000 --- a/src/apps/wallet-admin/src/home/tabs/payments-methods/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) => ( - - -