정산조회 - 정산내역 리스트 및 상세
This commit is contained in:
focp212@naver.com
@@ -1,15 +1,21 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useLocation } from 'react-router';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { DetailAmountInfo } from '@/entities/settlement/ui/detail-amount-info';
|
||||
import { DetailSettlementInfo } from '@/entities/settlement/ui/detail-settlement-info';
|
||||
import { AmountInfoWrap } from '@/entities/settlement/ui/info-wrap/amount-info-wrap';
|
||||
import { SettlementInfoWrap } from '@/entities/settlement/ui/info-wrap/settlement-info-wrap';
|
||||
import { TransactionInfoWrap } from '@/entities/settlement/ui/info-wrap/transaction-info-wrap'
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
SettlementDetailParams,
|
||||
DetailResponse,
|
||||
DetailAmountInfoProps,
|
||||
DetailSettlementInfoProps,
|
||||
AmountInfo,
|
||||
InfoWrapKeys,
|
||||
SettlementInfo,
|
||||
SettlementPeriodType,
|
||||
SettlementsHistoryDetailParams,
|
||||
SettlementsHistoryDetailResponse,
|
||||
SettlementsTransactionDetailParams,
|
||||
SettlementsTransactionDetailResponse,
|
||||
TransactionInfo
|
||||
} from '@/entities/settlement/model/types';
|
||||
import {
|
||||
useSetOnBack,
|
||||
@@ -17,15 +23,33 @@ import {
|
||||
useSetHeaderType,
|
||||
useSetFooterMode
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { useSettlementsHistoryDetailMutation } from '@/entities/settlement/api/use-settlements-history-detail-mutation';
|
||||
import { useSettlementsTransactionDetailMutation } from '@/entities/settlement/api/use-settlements-transaction-detail-mutation';
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import moment from 'moment';
|
||||
|
||||
export const DetailPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const { tid } = useParams();
|
||||
const location = useLocation();
|
||||
|
||||
const [amountInfo, setAmountInfo] = useState<AmountInfo>();
|
||||
const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
|
||||
const [settlementAmount, setSettlementAmount] = useState<number>();
|
||||
const [settlementDate, setSettlementDate] = useState<string>();
|
||||
const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
|
||||
const [transactionAmount, setTransactionAmount] = useState<number>();
|
||||
const [merchantName, setMerchantName] = useState<string>();
|
||||
|
||||
const [amountInfo, setAmountInfo] = useState<DetailAmountInfoProps>();
|
||||
const [settlementInfo, setSettlementInfo] = useState<DetailSettlementInfoProps>();
|
||||
const [showAmount, setShowAmount] = useState<boolean>(false);
|
||||
const [showSettlement, setShowSettlement] = useState<boolean>(false);
|
||||
const [showTransaction, setShowTransaction] = useState<boolean>(false);
|
||||
|
||||
const { mutateAsync: settlementsHistoryDetail } = useSettlementsHistoryDetailMutation();
|
||||
const { mutateAsync: settlementsTransactionDetail } = useSettlementsTransactionDetailMutation();
|
||||
|
||||
const settlementId = location.state.settlementId;
|
||||
const approvalNumber = location.state.approvalNumber;
|
||||
const periodType = location.state.periodType;
|
||||
|
||||
|
||||
useSetHeaderTitle('정산내역 상세');
|
||||
useSetHeaderType(HeaderType.RightClose);
|
||||
@@ -34,15 +58,49 @@ export const DetailPage = () => {
|
||||
});
|
||||
useSetFooterMode(false);
|
||||
|
||||
const onClickToShowInfo = (info: string) => {
|
||||
if(info === 'amount'){
|
||||
setShowAmount(!showAmount);
|
||||
}
|
||||
else if(info === 'settlement'){
|
||||
const callSettlementDetail = () => {
|
||||
let params: SettlementsHistoryDetailParams = {
|
||||
settlementId: settlementId
|
||||
};
|
||||
|
||||
settlementsHistoryDetail(params).then((rs: SettlementsHistoryDetailResponse) => {
|
||||
setAmountInfo(rs.amountInfo);
|
||||
setSettlementInfo(rs.settlementInfo);
|
||||
setSettlementAmount(rs.settlementAmount);
|
||||
setSettlementDate(rs.settlementDate);
|
||||
});
|
||||
};
|
||||
const callTransactionDetail = () => {
|
||||
let params: SettlementsTransactionDetailParams = {
|
||||
approvalNumber: approvalNumber
|
||||
};
|
||||
|
||||
settlementsTransactionDetail(params).then((rs: SettlementsTransactionDetailResponse) => {
|
||||
setAmountInfo(rs.amountInfo);
|
||||
setTransactionInfo(rs.transactionInfo);
|
||||
setTransactionAmount(rs.transactionAmount);
|
||||
setMerchantName(rs.merchantName);
|
||||
});
|
||||
};
|
||||
|
||||
const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
|
||||
if(infoWrapKey === InfoWrapKeys.Settlement){
|
||||
setShowSettlement(!showSettlement);
|
||||
}
|
||||
else if(infoWrapKey === InfoWrapKeys.Transaction){
|
||||
setShowTransaction(!showTransaction);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
|
||||
callSettlementDetail();
|
||||
}
|
||||
else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
|
||||
callTransactionDetail();
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
@@ -50,33 +108,57 @@ export const DetailPage = () => {
|
||||
<div className="tab-pane sub active">
|
||||
<div className="option-list">
|
||||
<div className="txn-detail">
|
||||
<div className="txn-num-group">
|
||||
<div className="txn-amount">
|
||||
<div className="value">63,736,320<span className="unit">원</span></div>
|
||||
{/*
|
||||
<button className="chip-btn" type="button">금액상세 <img src="../images/select_arrow.svg" alt="펼치기"/></button>
|
||||
*/}
|
||||
{ (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
|
||||
<div className="txn-num-group">
|
||||
<div className="txn-amount">
|
||||
<div className="value">
|
||||
<NumericFormat
|
||||
value={ settlementAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat><span className="unit">원</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="txn-date">{ moment(settlementDate).format('YYYY.MM.DD') }</div>
|
||||
</div>
|
||||
<div className="txn-date">2025.06.08</div>
|
||||
</div>
|
||||
}
|
||||
{ (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
|
||||
<div className="txn-num-group">
|
||||
<div className="txn-amount">
|
||||
<div className="value">
|
||||
<NumericFormat
|
||||
value={ transactionAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat><span className="unit">원</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="txn-date">{ merchantName }</div>
|
||||
</div>
|
||||
}
|
||||
<div className="txn-divider minus"></div>
|
||||
<DetailAmountInfo
|
||||
|
||||
<AmountInfoWrap
|
||||
periodType={ periodType }
|
||||
amountInfo={ amountInfo }
|
||||
show={ showAmount }
|
||||
tid={ tid }
|
||||
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
|
||||
></DetailAmountInfo>
|
||||
></AmountInfoWrap>
|
||||
<div className="txn-divider"></div>
|
||||
<DetailSettlementInfo
|
||||
settlementInfo={ settlementInfo }
|
||||
show={ showSettlement }
|
||||
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
|
||||
></DetailSettlementInfo>
|
||||
{ (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
|
||||
<SettlementInfoWrap
|
||||
settlementInfo={ settlementInfo }
|
||||
show={ showSettlement }
|
||||
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
|
||||
></SettlementInfoWrap>
|
||||
}
|
||||
{ (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
|
||||
<TransactionInfoWrap
|
||||
transactionInfo={ transactionInfo }
|
||||
show={ showTransaction }
|
||||
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
|
||||
></TransactionInfoWrap>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button className="btn-50 btn-blue flex-1">거래 취소</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user