Refactor settlement UI: fix filename typos and apply money localization
- Rename files: calandar-* to calendar-* (fix typo)
- calandar-amount-row.tsx → calendar-amount-row.tsx
- calandar-wrap.tsx → calendar-wrap.tsx
- Apply t('home.money') localization to all amount displays
- calendar-amount-row.tsx
- calendar-settlement-item.tsx
- list-summary-extend-settlement.tsx (5 amount fields)
- list-summary-extend-transaction.tsx (6 amount fields)
- Apply date localization to calendar-wrap.tsx (ko: YYYY년 MM월, en: YYYY MMM)
- Remove NumericFormat dependency from settlement components
- Update all import statements
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
@@ -1,4 +1,3 @@
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { SettlementStatus } from '../model/types';
|
||||
|
||||
@@ -39,12 +38,7 @@ export const CalendarAmountRow = ({
|
||||
<div className="amount-row">
|
||||
<div className="amount-label">{t('settlement.settlementShort')} { makeTitle() } {t('filter.amount')}</div>
|
||||
<div className="amount-value">
|
||||
<NumericFormat
|
||||
value={ amount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={t('common.currencyUnit')}
|
||||
></NumericFormat>
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amount) })}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
@@ -1,5 +1,4 @@
|
||||
import moment from 'moment';
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
@@ -66,12 +65,7 @@ export const CalendarSettlementItem = ({
|
||||
{ moment(value?.settlementDate).format('MM.DD(ddd)') }
|
||||
</div>
|
||||
<div className="settlement-amount">
|
||||
<NumericFormat
|
||||
value={ getAmount(value?.scheduledAmount, value?.completedAmount) }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix={t('common.currencyUnit')}
|
||||
></NumericFormat>
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(getAmount(value?.scheduledAmount, value?.completedAmount)) })}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
|
||||
@@ -3,7 +3,7 @@ import { ChangeEvent, useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { useSettlementsCalendarMutation } from '../api/use-settlements-calendar-mutation';
|
||||
import { CalendarAmountRow } from './calandar-amount-row';
|
||||
import { CalendarAmountRow } from './calendar-amount-row';
|
||||
import { CalendarSettlementItem } from './calendar-settlement-item';
|
||||
import { CalendarGrid } from './calendar-grid';
|
||||
import {
|
||||
@@ -150,7 +150,7 @@ export const CalendarWrap = () => {
|
||||
alt={t('settlement.previous')}
|
||||
/>
|
||||
</button>
|
||||
<div className="month-title">{ moment(yearMonth).format('YYYY년 MM월') }</div>
|
||||
<div className="month-title">{ moment(yearMonth).format(i18n.language === 'ko' ? 'YYYY년 MM월' : 'YYYY MMM') }</div>
|
||||
<button
|
||||
className={ `month-btn ${(lastMonth || !onActionCalendar)? 'disabled': ''}` }
|
||||
aria-label={t('settlement.nextMonth')}
|
||||
@@ -1,4 +1,3 @@
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { SettlementsHistorySummaryResponse } from '../model/types';
|
||||
|
||||
@@ -21,51 +20,31 @@ export const ListSummaryExtendSettlement = ({
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">{t('settlement.transactionAmount')}</span>
|
||||
<span className="value">
|
||||
<NumericFormat
|
||||
value={ transactionAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(transactionAmount) })}
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">{t('settlement.totalPgFee')}</span>
|
||||
<span className="value minus">
|
||||
<NumericFormat
|
||||
value={ pgFeeAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(pgFeeAmount) })}
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">{t('settlement.hold')}</span>
|
||||
<span className="value">
|
||||
<NumericFormat
|
||||
value={ holdAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(holdAmount) })}
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">{t('settlement.release')}</span>
|
||||
<span className="value link">
|
||||
<NumericFormat
|
||||
value={ releaseAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(releaseAmount) })}
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">{t('settlement.offset')}</span>
|
||||
<span className="value minus">
|
||||
<NumericFormat
|
||||
value={ offsetAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(offsetAmount) })}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { SettlementsTransactionSummaryResponse } from '../model/types';
|
||||
|
||||
@@ -22,61 +21,37 @@ export const ListSummaryExtendTransaction = ({
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">{t('settlement.transactionAmount')}</span>
|
||||
<span className="value">
|
||||
<NumericFormat
|
||||
value={ transactionAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(transactionAmount || 0) })}
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">{t('settlement.paymentFee')}</span>
|
||||
<span className="value minus">
|
||||
<NumericFormat
|
||||
value={ paymentFeeAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(paymentFeeAmount || 0) })}
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">{t('settlement.escrowFee')}</span>
|
||||
<span className="value">
|
||||
<NumericFormat
|
||||
value={ escrowFeeAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(escrowFeeAmount || 0) })}
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">{t('settlement.authFee')}</span>
|
||||
<span className="value link">
|
||||
<NumericFormat
|
||||
value={ authFeeAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(authFeeAmount || 0) })}
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">VAT</span>
|
||||
<span className="value minus">
|
||||
<NumericFormat
|
||||
value={ vatAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(vatAmount || 0) })}
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">{t('settlement.preSettlementCancelOffset')}</span>
|
||||
<span className="value minus">
|
||||
<NumericFormat
|
||||
value={ preSettlementCancelOffset }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(preSettlementCancelOffset || 0) })}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useState } from 'react';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { SettlementTab } from '@/entities/settlement/ui/settlement-tab';
|
||||
import { CalendarWrap } from '@/entities/settlement/ui/calandar-wrap';
|
||||
import { CalendarWrap } from '@/entities/settlement/ui/calendar-wrap';
|
||||
import { SettlementTabKeys } from '@/entities/settlement/model/types';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
|
||||
Reference in New Issue
Block a user