79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import { NumericFormat } from 'react-number-format';
|
|
import { PATHS } from '@/shared/constants/paths';
|
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
import { ListItemProps, SettlementPeriodType } from '../model/types';
|
|
import moment from 'moment';
|
|
|
|
export const ListItem = ({
|
|
periodType,
|
|
settlementId,
|
|
settlementDate,
|
|
merchantName,
|
|
mid,
|
|
tid,
|
|
settlementAmount,
|
|
approvalNumber,
|
|
approvalDate,
|
|
transactionAmount
|
|
}: ListItemProps) => {
|
|
const { navigate } = useNavigate();
|
|
const onClickToNavigate = () => {
|
|
let detailId;
|
|
if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
|
|
detailId = settlementId;
|
|
}
|
|
else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
|
|
detailId = approvalNumber;
|
|
}
|
|
|
|
navigate(PATHS.settlement.detail + detailId, {
|
|
state: {
|
|
periodType: periodType,
|
|
settlementId: settlementId,
|
|
approvalNumber: approvalNumber,
|
|
tid: tid,
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={ `transaction-item approved` }
|
|
onClick={ () => onClickToNavigate() }
|
|
>
|
|
<div className="transaction-status">
|
|
<div className={ `status-dot blue`}></div>
|
|
</div>
|
|
<div className="transaction-content">
|
|
{ (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
|
|
<div className="transaction-title">{ `${merchantName}(${mid})` }</div>
|
|
}
|
|
{ (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
|
|
<>
|
|
<div className="transaction-title">{ `${approvalNumber}(${mid})` }</div>
|
|
<div className="transaction-details">
|
|
<span>{ (!!settlementDate)? '정산': (!!approvalDate)? '승인' : '' }</span>
|
|
<span className="separator">|</span>
|
|
<span>정산 { moment(settlementDate).format('MM.DD') }</span>
|
|
<span className="separator">|</span>
|
|
<span>승인 { moment(approvalDate).format('MM.DD') }</span>
|
|
</div>
|
|
</>
|
|
}
|
|
</div>
|
|
<div className="transaction-amount">
|
|
{
|
|
<NumericFormat
|
|
value={ settlementAmount || transactionAmount }
|
|
thousandSeparator
|
|
displayType="text"
|
|
suffix='원'
|
|
></NumericFormat>
|
|
}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|