Skip to content

Commit 96a77c4

Browse files
kkartunovkkartunov
authored
Merge pull request #1090 from topcoder-platform/PM-1278_fees-display
PM-1278 - split payment fees & tax
2 parents 2af4162 + 5bbc704 commit 96a77c4

File tree

4 files changed

+136
-33
lines changed

4 files changed

+136
-33
lines changed

‎src/apps/wallet/src/home/tabs/home/HomeTab.tsx‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,26 @@ const HomeTab: FC<HomeTabProps> = props => {
5959
/>
6060

6161
<PayoutGuard profile={props.profile}>
62-
{walletDetails.withdrawalMethod.isSetupComplete
63-
&& walletDetails.taxForm.isSetupComplete && (
62+
{walletDetails.withdrawalMethod.isSetupComplete && (
6463
<InfoRow
65-
title='Est. Payment Fees and Tax Withholding %'
66-
// eslint-disable-next-line max-len
67-
value={`Fee: ${nullToZero(walletDetails.estimatedFees)} USD / Tax Withholding: ${nullToZero(walletDetails.taxWithholdingPercentage)}%`}
64+
title='Est. Payment Fees'
65+
value={`$${nullToZero(walletDetails.estimatedFees)} USD`}
66+
action={
67+
<LinkButton
68+
label='ADJUST YOUR PAYOUT SETTINGS'
69+
iconToRight
70+
icon={IconOutline.ArrowRightIcon}
71+
size='md'
72+
link
73+
to='#payout'
74+
/>
75+
}
76+
/>
77+
)}
78+
{walletDetails.taxForm.isSetupComplete && (
79+
<InfoRow
80+
title='Est. Tax Withholding %'
81+
value={`${nullToZero(walletDetails.taxWithholdingPercentage)}%`}
6882
action={
6983
<LinkButton
7084
label='ADJUST YOUR PAYOUT SETTINGS'

‎src/apps/wallet/src/home/tabs/winnings/Winnings.module.scss‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,59 @@
4848
margin-top: 20px;
4949
}
5050
}
51+
52+
.processing {
53+
border-radius: $sp-2;
54+
background: $black-5;
55+
border-left: 4px solid $purple-100;
56+
padding: $sp-4;
57+
}
58+
59+
.breakdown {
60+
margin-top: $sp-8;
61+
}
62+
63+
.breakdownList {
64+
margin-top: $sp-4;
65+
display: flex;
66+
flex-direction: column;
67+
gap: $sp-2;
68+
69+
li {
70+
display: flex;
71+
justify-content: space-between;
72+
align-items: center;
73+
color: $black-100;
74+
75+
76+
@include ltelg {
77+
flex-direction: column;
78+
align-items: flex-start;
79+
}
80+
}
81+
}
82+
83+
.summary {
84+
display: flex;
85+
justify-content: space-between;
86+
align-items: center;
87+
margin-top: $sp-4;
88+
89+
@include ltelg {
90+
flex-direction: column;
91+
align-items: flex-start;
92+
}
93+
}
94+
95+
.alert {
96+
margin-top: $sp-6;
97+
background: $orange-25;
98+
border-radius: $sp-2;
99+
padding: $sp-3;
100+
color: $gold-3;
101+
}
102+
103+
.taxesFooterRow {
104+
margin-top: $sp-6;
105+
106+
}

‎src/apps/wallet/src/home/tabs/winnings/WinningsTab.tsx‎

Lines changed: 60 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -193,53 +193,83 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
193193

194194
function handlePayMeClick(
195195
paymentIds: { [paymentId: string]: Winning },
196-
totalAmount: string,
196+
totalAmountStr: string,
197197
): void {
198+
const totalAmount = parseFloat(totalAmountStr)
199+
const taxWithholdAmount = (parseFloat(nullToZero(walletDetails?.taxWithholdingPercentage ?? '0')) * totalAmount) / 100
200+
const feesAmount = parseFloat(nullToZero(walletDetails?.estimatedFees ?? '0'))
201+
const netAmount = totalAmount - taxWithholdAmount - feesAmount
202+
198203
setConfirmFlow({
199-
action: 'Yes',
204+
action: 'Confirm Payment',
200205
callback: () => processPayouts(Object.keys(paymentIds)),
201206
content: (
202207
<>
203-
You are about to process payments for a total of USD
204-
{' '}
205-
{totalAmount}
206-
.
207-
<br />
208-
<br />
208+
<div className={`${styles.processing} body-medium-normal`}>
209+
Processing Payment: $
210+
{totalAmountStr}
211+
{' '}
212+
USD
213+
</div>
209214
{walletDetails && (
210215
<>
211-
<div className={styles.taxes}>
212-
Est. Payment Fees:
213-
{' '}
214-
{nullToZero(walletDetails.estimatedFees)}
215-
{' '}
216-
USD and Tax Withholding:
217-
{' '}
218-
{`${nullToZero(walletDetails.taxWithholdingPercentage)}%`}
219-
{' '}
220-
will be applied on the payment.
221-
</div>
222-
<div className={styles.taxes}>
223-
{walletDetails.primaryCurrency && (
224-
<>
225-
You will receive the payment in
216+
<div className={styles.breakdown}>
217+
<h4>Payment Breakdown:</h4>
218+
<ul className={`${styles.breakdownList} body-main`}>
219+
<li>
220+
<span>Base amount:</span>
221+
<span>
222+
$
223+
{totalAmountStr}
224+
</span>
225+
</li>
226+
<li>
227+
<span>
228+
Tax Witholding (
229+
{nullToZero(walletDetails.taxWithholdingPercentage)}
230+
%):
231+
</span>
232+
<span>
233+
$
234+
{taxWithholdAmount.toFixed(2)}
235+
</span>
236+
</li>
237+
<li>
238+
<span>Processing fee:</span>
239+
<span>
240+
$
241+
{feesAmount.toFixed(2)}
242+
</span>
243+
</li>
244+
</ul>
245+
<hr />
246+
<div className={`${styles.summary} body-main-bold`}>
247+
<span>Net amount after fees:</span>
248+
<span>{netAmount.toFixed(2)}</span>
249+
</div>
250+
{walletDetails?.primaryCurrency && walletDetails.primaryCurrency !== 'USD' && (
251+
<div className={`${styles.alert} body-main-medium`}>
252+
Net amount will be converted to
226253
{' '}
227254
{walletDetails.primaryCurrency}
228255
{' '}
229-
currency after 2% conversion fees applied.
230-
</>
256+
with 2% conversion fee applied.
257+
</div>
231258
)}
232259
</div>
233-
<div className={`${styles.taxes} ${styles.mt}`}>
234-
You can adjust your payout settings to customize your estimated payment fee and tax withholding percentage in
260+
<div className={`${styles.taxesFooterRow} body-main`}>
261+
You can adjust your payout settings to customize your estimated payment fee
262+
and tax withholding percentage in the
235263
{' '}
236264
<Link to='#payout'>Payout</Link>
265+
{' '}
266+
section.
237267
</div>
238268
</>
239269
)}
240270
</>
241271
),
242-
title: 'Are you sure?',
272+
title: 'Payment Confirmation',
243273
})
244274
}
245275

@@ -430,6 +460,8 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
430460
</div>
431461
{confirmFlow && (
432462
<ConfirmModal
463+
size='lg'
464+
maxWidth='610px'
433465
title={confirmFlow.title}
434466
action={confirmFlow.action}
435467
onClose={function onClose() {

‎src/apps/wallet/src/lib/models/WalletDetails.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export interface WalletDetails {
1212
account: AccountDetails
1313
withdrawalMethod: {
1414
isSetupComplete: boolean
15+
type: 'paypal' | 'bank'
1516
}
1617
// TOOD: remove
1718
taxForm: {

0 commit comments

Comments
 (0)