diff --git a/apps/frontend/src/components/ui/dashboard/WithdrawFeeBreakdown.vue b/apps/frontend/src/components/ui/dashboard/WithdrawFeeBreakdown.vue index c6b3337912..13c2c994cf 100644 --- a/apps/frontend/src/components/ui/dashboard/WithdrawFeeBreakdown.vue +++ b/apps/frontend/src/components/ui/dashboard/WithdrawFeeBreakdown.vue @@ -12,14 +12,14 @@
{{ formatMessage(messages.feeBreakdownGiftCardValue) }} {{ formatMoney(amount || 0) }} ({{ formattedLocalCurrency }}){{ formatMoney(amountInUsd) }} ({{ formattedLocalCurrencyAmount }})
@@ -29,7 +29,7 @@ - + @@ -79,9 +79,23 @@ const props = withDefaults( const { formatMessage } = useVIntl() +const amountInUsd = computed(() => { + if (props.isGiftCard && shouldShowExchangeRate.value) { + return (props.amount || 0) / (props.exchangeRate || 1) + } + return props.amount || 0 +}) + +const feeInUsd = computed(() => { + if (props.isGiftCard && shouldShowExchangeRate.value) { + return (props.fee || 0) / (props.exchangeRate || 1) + } + return props.fee || 0 +}) + const netAmount = computed(() => { - const amount = props.amount || 0 - const fee = props.fee || 0 + const amount = amountInUsd.value + const fee = feeInUsd.value return Math.max(0, amount - fee) }) @@ -96,6 +110,11 @@ const netAmountInLocalCurrency = computed(() => { return netAmount.value * (props.exchangeRate || 0) }) +const localCurrencyAmount = computed(() => { + if (!shouldShowExchangeRate.value) return null + return props.amount || 0 +}) + const formattedLocalCurrency = computed(() => { if (!shouldShowExchangeRate.value || !netAmountInLocalCurrency.value || !props.localCurrency) return '' @@ -112,6 +131,21 @@ const formattedLocalCurrency = computed(() => { } }) +const formattedLocalCurrencyAmount = computed(() => { + if (!shouldShowExchangeRate.value || !localCurrencyAmount.value || !props.localCurrency) return '' + + try { + return new Intl.NumberFormat('en-US', { + style: 'currency', + currency: props.localCurrency, + minimumFractionDigits: 2, + maximumFractionDigits: 2, + }).format(localCurrencyAmount.value) + } catch { + return `${props.localCurrency} ${localCurrencyAmount.value.toFixed(2)}` + } +}) + const messages = defineMessages({ feeBreakdownAmount: { id: 'dashboard.creator-withdraw-modal.fee-breakdown-amount', diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue index 9ba5355775..7835c7cdb4 100644 --- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue +++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue @@ -90,7 +90,14 @@ - {{ formatMoney(fixedDenominationMin ?? effectiveMinAmount) + {{ + formatMoney( + selectedMethodCurrencyCode && + selectedMethodCurrencyCode !== 'USD' && + selectedMethodExchangeRate + ? (fixedDenominationMin ?? effectiveMinAmount) / selectedMethodExchangeRate + : (fixedDenominationMin ?? effectiveMinAmount), + ) }}