nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

오류 수정

Browse Source
This commit is contained in:
focp212@naver.com
2025-11-05 15:49:04 +09:00
parent fb889a9f2c
commit 9b0e218553
2 changed files with 1 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/entities/transaction/ui/detail/cash-receit-detail.tsx
View File

@@ -25,6 +25,7 @@ import { snackBar } from '@/shared/lib';
import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
import { checkGrant } from '@/shared/lib/check-grant';
import { showAlert } from '@/widgets/show-alert';
export interface CashReceiptDetailProps {
detailOn: boolean;

175
src/pages/settlement/list/detail-page.tsx
View File

@@ -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>
</>
);
};