오류 수정
This commit is contained in:
focp212@naver.com
@@ -25,6 +25,7 @@ import { snackBar } from '@/shared/lib';
|
|||||||
import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
|
import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
|
||||||
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
|
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
|
||||||
import { checkGrant } from '@/shared/lib/check-grant';
|
import { checkGrant } from '@/shared/lib/check-grant';
|
||||||
|
import { showAlert } from '@/widgets/show-alert';
|
||||||
|
|
||||||
export interface CashReceiptDetailProps {
|
export interface CashReceiptDetailProps {
|
||||||
detailOn: boolean;
|
detailOn: boolean;
|
||||||
|
|||||||
@@ -1,175 +0,0 @@
|
|||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { useLocation } from 'react-router';
|
|
||||||
import { PATHS } from '@/shared/constants/paths';
|
|
||||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
||||||
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 {
|
|
||||||
AmountInfo,
|
|
||||||
InfoWrapKeys,
|
|
||||||
SettlementInfo,
|
|
||||||
SettlementPeriodType,
|
|
||||||
SettlementsHistoryDetailParams,
|
|
||||||
SettlementsHistoryDetailResponse,
|
|
||||||
SettlementsTransactionDetailParams,
|
|
||||||
SettlementsTransactionDetailResponse,
|
|
||||||
TransactionInfo
|
|
||||||
} from '@/entities/settlement/model/types';
|
|
||||||
import {
|
|
||||||
useSetOnBack,
|
|
||||||
useSetHeaderTitle,
|
|
||||||
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';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
export const DetailPage = () => {
|
|
||||||
const { navigate } = useNavigate();
|
|
||||||
const { t, i18n } = useTranslation();
|
|
||||||
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 [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;
|
|
||||||
const tid = location.state.tid;
|
|
||||||
|
|
||||||
|
|
||||||
useSetHeaderTitle(t('settlement.detailTitle'));
|
|
||||||
useSetHeaderType(HeaderType.RightClose);
|
|
||||||
useSetOnBack(() => {
|
|
||||||
navigate(PATHS.settlement.list);
|
|
||||||
});
|
|
||||||
useSetFooterMode(false);
|
|
||||||
|
|
||||||
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 = {
|
|
||||||
tid: tid
|
|
||||||
};
|
|
||||||
|
|
||||||
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>
|
|
||||||
<div className="tab-content">
|
|
||||||
<div className="tab-pane sub active">
|
|
||||||
<div className="option-list">
|
|
||||||
<div className="txn-detail">
|
|
||||||
{ (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
|
|
||||||
<div className="txn-num-group">
|
|
||||||
<div className="txn-amount">
|
|
||||||
<div className="value">
|
|
||||||
{i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>}
|
|
||||||
<NumericFormat
|
|
||||||
value={ settlementAmount }
|
|
||||||
thousandSeparator
|
|
||||||
displayType="text"
|
|
||||||
></NumericFormat>
|
|
||||||
{i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="txn-date">{ moment(settlementDate).format('YYYY.MM.DD') }</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
{ (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
|
|
||||||
<div className="txn-num-group">
|
|
||||||
<div className="txn-amount">
|
|
||||||
<div className="value">
|
|
||||||
{i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>}
|
|
||||||
<NumericFormat
|
|
||||||
value={ transactionAmount }
|
|
||||||
thousandSeparator
|
|
||||||
displayType="text"
|
|
||||||
></NumericFormat>
|
|
||||||
{i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="txn-date">{ merchantName }</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
<div className="txn-divider minus"></div>
|
|
||||||
|
|
||||||
<AmountInfoWrap
|
|
||||||
periodType={ periodType }
|
|
||||||
amountInfo={ amountInfo }
|
|
||||||
settlementAmount={ settlementAmount }
|
|
||||||
></AmountInfoWrap>
|
|
||||||
<div className="txn-divider"></div>
|
|
||||||
{ (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
|
|
||||||
<SettlementInfoWrap
|
|
||||||
settlementInfo={ settlementInfo }
|
|
||||||
isOpen={ showSettlement }
|
|
||||||
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
|
|
||||||
></SettlementInfoWrap>
|
|
||||||
}
|
|
||||||
{ (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
|
|
||||||
<TransactionInfoWrap
|
|
||||||
transactionInfo={ transactionInfo }
|
|
||||||
isOpen={ showTransaction }
|
|
||||||
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
|
|
||||||
></TransactionInfoWrap>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user