nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply t('home.money') localization to transaction amount-info-section

Browse Source 
- Remove NumericFormat import dependency
- Replace 23 NumericFormat instances with t('home.money') pattern
- Remove hardcoded currency unit (원) - now included in locale
- Add null safety with || 0 for all amount values
- Applied to all transaction categories:
  - AllTransaction (various service codes)
  - CashReceipt (supplyAmount, vat, serviceAmount, taxFreeAmount)
  - Escrow (cardAmount, pointAmount, couponAmount, escrowFee)
  - Simple payment services (Kakao, Naver, Toss, Payco)
  - Billing

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
2025-11-04 17:30:43 +09:00
parent 6716329582
commit 249461389e
1 changed files with 24 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/entities/transaction/ui/section/amount-info-section.tsx
View File

@@ -1,6 +1,5 @@
import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { NumericFormat } from 'react-number-format';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { useDownloadConfirmationMutation } from '../../api/use-download-confirmation-mutation';
import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
@@ -119,11 +118,7 @@ export const AmountInfoSection = ({
}
}
rs.push(
<NumericFormat
value={ value }
thousandSeparator
displayType="text"
></NumericFormat>
t('home.money', { value: new Intl.NumberFormat('en-US').format(value || 0) })
)
}
return rs;
@@ -202,43 +197,22 @@ export const AmountInfoSection = ({
<div className="value">
{ (transactionCategory === TransactionCategory.AllTransaction) &&
(serviceCode === '01' || serviceCode === '02' || serviceCode === '03' || serviceCode === '26') &&
<NumericFormat
value={ amountInfo?.transactionRequestAmount }
thousandSeparator
displayType="text"
></NumericFormat>
t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.transactionRequestAmount || 0) })
}
{ (transactionCategory === TransactionCategory.AllTransaction) &&
(serviceCode === '05' || serviceCode === '14' || serviceCode === '21'
(serviceCode === '05' || serviceCode === '14' || serviceCode === '21'
|| serviceCode === '24' || serviceCode === '31') &&
<NumericFormat
value={ amountInfo?.transactionAmount}
thousandSeparator
displayType="text"
></NumericFormat>
t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.transactionAmount || 0) })
}
{ (transactionCategory === TransactionCategory.CashReceipt) &&
<NumericFormat
value={ amountInfo?.amount }
thousandSeparator
displayType="text"
></NumericFormat>
t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.amount || 0) })
}
{ (transactionCategory === TransactionCategory.Escrow) &&
<NumericFormat
value={ amountInfo?.approvalRequestAmount }
thousandSeparator
displayType="text"
></NumericFormat>
t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.approvalRequestAmount || 0) })
}
{ (transactionCategory === TransactionCategory.Billing) &&
<NumericFormat
value={ amountInfo?.transactionAmount }
thousandSeparator
displayType="text"
></NumericFormat>
t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.transactionAmount || 0) })
}
<span className="unit">원</span>
</div>
<button
className="chip-btn"
@@ -261,41 +235,25 @@ export const AmountInfoSection = ({
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.supplyAmount')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.supplyAmount || 0 }
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.supplyAmount || 0) })}
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.vat')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.vat || 0 }
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.vat || 0) })}
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.serviceAmount')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.serviceAmount || 0 }
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.serviceAmount || 0) })}
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.taxFreeAmount')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.taxFreeAmount || 0 }
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.taxFreeAmount || 0) })}
</span>
</li>
</>
@@ -306,11 +264,7 @@ export const AmountInfoSection = ({
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.transactionAmount')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.transactionAmount || 0 }
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.transactionAmount || 0) })}
</span>
</li>
}
@@ -319,31 +273,19 @@ export const AmountInfoSection = ({
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.cardAmount')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.cardAmount || 0}
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.cardAmount || 0) })}
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.pointAmount')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.pointAmount || 0 }
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.pointAmount || 0) })}
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.couponAmount')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.couponAmount || 0 }
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.couponAmount || 0) })}
</span>
</li>
</>
@@ -352,11 +294,7 @@ export const AmountInfoSection = ({
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.escrowFee')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.escrowFee || 0 }
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.escrowFee || 0) })}
</span>
</li>
}
@@ -367,31 +305,19 @@ export const AmountInfoSection = ({
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.kakaoMoneyAmount')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.multiPointAmount || 0 }
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.multiPointAmount || 0) })}
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.kakaoPointAmount')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.multiCouponAmount || 0 }
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.multiCouponAmount || 0) })}
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.kakaoDiscountAmount')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.kakaoDiscountAmount || 0 }
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.kakaoDiscountAmount || 0) })}
</span>
</li>
</>
@@ -400,11 +326,7 @@ export const AmountInfoSection = ({
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.naverPointAmount')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.multiPointAmount || 0 }
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.multiPointAmount || 0) })}
</span>
</li>
}
@@ -413,21 +335,13 @@ export const AmountInfoSection = ({
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.tossMoneyAmount')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.multiPointAmount || 0 }
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.multiPointAmount || 0) })}
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.tossDiscountAmount')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.tossDiscountAmount || 0 }
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.tossDiscountAmount || 0) })}
</span>
</li>
</>
@@ -437,21 +351,13 @@ export const AmountInfoSection = ({
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.paycoPointAmount')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.multiPointAmount || 0 }
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.multiPointAmount || 0) })}
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('transaction.fields.paycoCouponAmount')}</span>
<span className="value">
<NumericFormat
value={ amountInfo?.multiCouponAmount || 0 }
thousandSeparator
displayType="text"
></NumericFormat>
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.multiCouponAmount || 0) })}
</span>
</li>
</>