57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import { PATHS } from '@/shared/constants/paths';
|
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
|
|
interface LinkPaymentPendingItemProps {
|
|
transactionId: string;
|
|
customerName: string;
|
|
status: string;
|
|
channel: string;
|
|
amount: number;
|
|
}
|
|
|
|
export const LinkPaymentPendingItem = ({
|
|
transactionId,
|
|
customerName,
|
|
status,
|
|
channel,
|
|
amount
|
|
}: LinkPaymentPendingItemProps) => {
|
|
const { navigate } = useNavigate();
|
|
|
|
const onClickToNavigate = () => {
|
|
navigate(PATHS.additionalService.linkPayment.pendingDetail, {
|
|
state: {
|
|
transactionId: transactionId
|
|
}
|
|
});
|
|
};
|
|
|
|
const getStatusDotClass = () => {
|
|
if (status === '발송요청') {
|
|
return 'status-dot blue';
|
|
}
|
|
return 'status-dot gray';
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="transaction-item approved"
|
|
onClick={() => onClickToNavigate()}
|
|
>
|
|
<div className="transaction-status">
|
|
<div className={getStatusDotClass()}></div>
|
|
</div>
|
|
<div className="transaction-content">
|
|
<div className="transaction-title">{customerName}</div>
|
|
<div className="transaction-details">
|
|
<span>{status}</span>
|
|
<span className="separator">ㅣ</span>
|
|
<span>{channel}</span>
|
|
</div>
|
|
</div>
|
|
<div className="transaction-amount">{amount.toLocaleString()}원</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}; |