Skip to content

PM-1278 - split payment fees & tax #1090

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 3 commits into from
Jun 9, 2025
Merged

PM-1278 - split payment fees & tax #1090

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 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
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'
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={
<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;


@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;

}
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)
const taxWithholdAmount = (parseFloat(nullToZero(walletDetails?.taxWithholdingPercentage ?? '0')) * totalAmount) / 100
const feesAmount = parseFloat(nullToZero(walletDetails?.estimatedFees ?? '0'))
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>
</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