Skip to content

Pm 959 tc finance integration #1098

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 9, 2025
Merged

Pm 959 tc finance integration #1098

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c77bb01
PM-1278 - split payment fees & tax
vas3a May 28, 2025
002fa80
PM-1278 - update payment confirmation modal
vas3a Jun 6, 2025
5bbc704
lint fix
vas3a Jun 6, 2025
96a77c4
Merge pull request #1090 from topcoder-platform/PM-1278_fees-display
kkartunov Jun 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 19 additions & 5 deletions src/apps/wallet/src/home/tabs/home/HomeTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,26 @@ const HomeTab: FC<HomeTabProps> = props => {
/>

<PayoutGuard profile={props.profile}>
{walletDetails.withdrawalMethod.isSetupComplete
&& walletDetails.taxForm.isSetupComplete && (
{walletDetails.withdrawalMethod.isSetupComplete && (
<InfoRow
title='Est. Payment Fees and Tax Withholding %'
// eslint-disable-next-line max-len
value={`Fee: ${nullToZero(walletDetails.estimatedFees)} USD / Tax Withholding: ${nullToZero(walletDetails.taxWithholdingPercentage)}%`}
title='Est. Payment Fees'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider removing the redundant 'USD' from the value string since the dollar sign '$' already indicates the currency.

value={`$${nullToZero(walletDetails.estimatedFees)} USD`}
action={
<LinkButton
label='ADJUST YOUR PAYOUT SETTINGS'
iconToRight
icon={IconOutline.ArrowRightIcon}
size='md'
link
to='#payout'
/>
}
/>
)}
{walletDetails.taxForm.isSetupComplete && (
<InfoRow
title='Est. Tax Withholding %'
value={`${nullToZero(walletDetails.taxWithholdingPercentage)}%`}
action={
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that the percentage sign '%' is correctly formatted and displayed in all locales. Consider using a localization library if necessary.

<LinkButton
label='ADJUST YOUR PAYOUT SETTINGS'
Expand Down
56 changes: 56 additions & 0 deletions src/apps/wallet/src/home/tabs/winnings/Winnings.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,59 @@
margin-top: 20px;
}
}

.processing {
border-radius: $sp-2;
background: $black-5;
border-left: 4px solid $purple-100;
padding: $sp-4;
}

.breakdown {
margin-top: $sp-8;
}

.breakdownList {
margin-top: $sp-4;
display: flex;
flex-direction: column;
gap: $sp-2;

li {
display: flex;
justify-content: space-between;
align-items: center;
color: $black-100;


Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove the extra blank line for consistency with the rest of the code.

@include ltelg {
flex-direction: column;
align-items: flex-start;
}
}
}

.summary {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: $sp-4;

@include ltelg {
flex-direction: column;
align-items: flex-start;
}
}

.alert {
margin-top: $sp-6;
background: $orange-25;
border-radius: $sp-2;
padding: $sp-3;
color: $gold-3;
}

.taxesFooterRow {
margin-top: $sp-6;

}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding some styling properties to .taxesFooterRow to ensure it has the intended appearance, as it currently only has a margin-top property.

88 changes: 60 additions & 28 deletions src/apps/wallet/src/home/tabs/winnings/WinningsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,53 +193,83 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {

function handlePayMeClick(
paymentIds: { [paymentId: string]: Winning },
totalAmount: string,
totalAmountStr: string,
): void {
const totalAmount = parseFloat(totalAmountStr)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding error handling for parseFloat(totalAmountStr) to ensure it doesn't result in NaN if totalAmountStr is not a valid number.

const taxWithholdAmount = (parseFloat(nullToZero(walletDetails?.taxWithholdingPercentage ?? '0')) * totalAmount) / 100
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The calculation for taxWithholdAmount assumes walletDetails?.taxWithholdingPercentage is a valid number. Consider adding validation or defaulting to a safe value if it's not a valid number.

const feesAmount = parseFloat(nullToZero(walletDetails?.estimatedFees ?? '0'))
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The feesAmount calculation uses nullToZero(walletDetails?.estimatedFees ?? '0'). Ensure nullToZero handles non-numeric strings appropriately to avoid unexpected results.

const netAmount = totalAmount - taxWithholdAmount - feesAmount

setConfirmFlow({
action: 'Yes',
action: 'Confirm Payment',
callback: () => processPayouts(Object.keys(paymentIds)),
content: (
<>
You are about to process payments for a total of USD
{' '}
{totalAmount}
.
<br />
<br />
<div className={`${styles.processing} body-medium-normal`}>
Processing Payment: $
{totalAmountStr}
{' '}
USD
</div>
{walletDetails && (
<>
<div className={styles.taxes}>
Est. Payment Fees:
{' '}
{nullToZero(walletDetails.estimatedFees)}
{' '}
USD and Tax Withholding:
{' '}
{`${nullToZero(walletDetails.taxWithholdingPercentage)}%`}
{' '}
will be applied on the payment.
</div>
<div className={styles.taxes}>
{walletDetails.primaryCurrency && (
<>
You will receive the payment in
<div className={styles.breakdown}>
<h4>Payment Breakdown:</h4>
<ul className={`${styles.breakdownList} body-main`}>
<li>
<span>Base amount:</span>
<span>
$
{totalAmountStr}
</span>
</li>
<li>
<span>
Tax Witholding (
{nullToZero(walletDetails.taxWithholdingPercentage)}
%):
</span>
<span>
$
{taxWithholdAmount.toFixed(2)}
</span>
</li>
<li>
<span>Processing fee:</span>
<span>
$
{feesAmount.toFixed(2)}
</span>
</li>
</ul>
<hr />
<div className={`${styles.summary} body-main-bold`}>
<span>Net amount after fees:</span>
<span>{netAmount.toFixed(2)}</span>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider formatting the netAmount with a currency symbol for consistency with other amounts displayed.

</div>
{walletDetails?.primaryCurrency && walletDetails.primaryCurrency !== 'USD' && (
<div className={`${styles.alert} body-main-medium`}>
Net amount will be converted to
{' '}
{walletDetails.primaryCurrency}
{' '}
currency after 2% conversion fees applied.
</>
with 2% conversion fee applied.
</div>
)}
</div>
<div className={`${styles.taxes} ${styles.mt}`}>
You can adjust your payout settings to customize your estimated payment fee and tax withholding percentage in
<div className={`${styles.taxesFooterRow} body-main`}>
You can adjust your payout settings to customize your estimated payment fee
and tax withholding percentage in the
{' '}
<Link to='#payout'>Payout</Link>
{' '}
section.
</div>
</>
)}
</>
),
title: 'Are you sure?',
title: 'Payment Confirmation',
})
}

Expand Down Expand Up @@ -430,6 +460,8 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
</div>
{confirmFlow && (
<ConfirmModal
size='lg'
maxWidth='610px'
title={confirmFlow.title}
action={confirmFlow.action}
onClose={function onClose() {
Expand Down
1 change: 1 addition & 0 deletions src/apps/wallet/src/lib/models/WalletDetails.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export interface WalletDetails {
account: AccountDetails
withdrawalMethod: {
isSetupComplete: boolean
type: 'paypal' | 'bank'
}
// TOOD: remove
taxForm: {
Expand Down