86 lines
2.8 KiB
TypeScript
86 lines
2.8 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';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
export const ListItem = ({
|
|
periodType,
|
|
settlementId,
|
|
settlementDate,
|
|
merchantName,
|
|
mid,
|
|
tid,
|
|
settlementAmount,
|
|
approvalNumber,
|
|
approvalDate,
|
|
transactionAmount
|
|
}: ListItemProps) => {
|
|
const { navigate } = useNavigate();
|
|
const { t, i18n } = useTranslation();
|
|
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,
|
|
}
|
|
});
|
|
};
|
|
|
|
const getDotClass = () => {
|
|
let rs = 'gray';
|
|
if(periodType === SettlementPeriodType.SETTLEMENT_DATE && settlementAmount){
|
|
if(settlementAmount > 0) rs = 'blue';
|
|
}
|
|
else if(periodType === SettlementPeriodType.TRANSACTION_DATE && transactionAmount){
|
|
if(transactionAmount > 0) rs = 'blue';
|
|
}
|
|
|
|
return rs;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={ `transaction-item approved` }
|
|
onClick={ () => onClickToNavigate() }
|
|
>
|
|
<div className="transaction-status">
|
|
<div className={ `status-dot ${getDotClass()}`}></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)? t('settlement.settled'): (!!approvalDate)? t('settlement.approved') : '' }</span>
|
|
<span className="separator">|</span>
|
|
<span>{t('settlement.settlementShort')} { moment(settlementDate).format('MM.DD') }</span>
|
|
<span className="separator">|</span>
|
|
<span>{t('settlement.approvalShort')} { moment(approvalDate).format('MM.DD') }</span>
|
|
</div>
|
|
</>
|
|
}
|
|
</div>
|
|
<div className="transaction-amount">
|
|
{t('home.money', { value: new Intl.NumberFormat('en-US').format(settlementAmount || transactionAmount || 0) })}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|