82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import { NumericFormat } from 'react-number-format';
|
|
import {
|
|
InfoWrapKeys,
|
|
AmountInfoWrapProps,
|
|
SettlementPeriodType
|
|
} from '@/entities/settlement/model/types';
|
|
|
|
export const AmountInfoWrap = ({
|
|
periodType,
|
|
amountInfo,
|
|
}: AmountInfoWrapProps) => {
|
|
|
|
return (
|
|
<>
|
|
<div className="txn-section">
|
|
<div className="section-title">금액 정보</div>
|
|
{ (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
|
|
<ul className="kv-list">
|
|
<li className="kv-row">
|
|
<span className="k">거래금액 합계</span>
|
|
<span className="v">6,017,600 (269건)</span>
|
|
<ul className="txn-amount-detail">
|
|
<li>
|
|
<span>· 신용카드</span>
|
|
<span>6,017,000 (260건)</span>
|
|
</li>
|
|
<li>
|
|
<span>· 계좌이체</span>
|
|
<span>600 (9건)</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li className="kv-row">
|
|
<span className="k">PG 수수료 합계</span>
|
|
<span className="v">205,255</span>
|
|
<ul className="txn-amount-detail">
|
|
<li>
|
|
<span>· 결제수수료</span>
|
|
<span>165,384</span>
|
|
</li>
|
|
<li>
|
|
<span>· 에스크로 수수료</span>
|
|
<span>0</span>
|
|
</li>
|
|
<li>
|
|
<span>· 인증 수수료</span>
|
|
<span>21,300</span>
|
|
</li>
|
|
<li>
|
|
<span>· VAT</span>
|
|
<span>18,571</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li className="kv-row">
|
|
<span className="k">보류</span>
|
|
<span className="v">0</span>
|
|
</li>
|
|
<li className="kv-row">
|
|
<span className="k">해제</span>
|
|
<span className="v">0</span>
|
|
</li>
|
|
<li className="kv-row">
|
|
<span className="k">상계</span>
|
|
<span className="v">- 80,603</span>
|
|
</li>
|
|
<li className="kv-row bolder">
|
|
<span className="k">정산금액</span>
|
|
<span className="v">5,731,742</span>
|
|
</li>
|
|
</ul>
|
|
}
|
|
{ (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
|
|
<ul className="kv-list">
|
|
|
|
|
|
</ul>
|
|
}
|
|
</div>
|
|
</>
|
|
);
|
|
}; |