상세 태그 수정
This commit is contained in:
focp212@naver.com
@@ -1,213 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useLocation } from 'react-router';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { Dialog } from '@/shared/ui/dialogs/dialog';
|
||||
import { overlay } from 'overlay-kit';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { useAllTransactionDetailMutation } from '@/entities/transaction/api/use-all-transaction-detail-mutation';
|
||||
import { AmountInfoSection } from '@/entities/transaction/ui/section/amount-info-section';
|
||||
import { ImportantInfoSection } from '@/entities/transaction/ui/section/important-info-section';
|
||||
import { PaymentInfoSection } from '@/entities/transaction/ui/section/payment-info-section';
|
||||
import { TransactionInfoSection } from '@/entities/transaction/ui/section/transaction-info-section';
|
||||
import { SettlementInfoSection } from '@/entities/transaction/ui/section/settlement-info-section';
|
||||
import { PartCancelInfoSection } from '@/entities/transaction/ui/section/part-cancel-info-section';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
TransactionCategory,
|
||||
AllTransactionDetailParams,
|
||||
DetailResponse,
|
||||
AmountInfo,
|
||||
ImportantInfo,
|
||||
PaymentInfo,
|
||||
TransactionInfo,
|
||||
SettlementInfo,
|
||||
PartCancelInfo,
|
||||
InfoSectionKeys
|
||||
} from '@/entities/transaction/model/types';
|
||||
import {
|
||||
useSetOnBack,
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export const AllTransactionDetailPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
const location = useLocation();
|
||||
const tid = location.state.tid;
|
||||
const serviceCode = location.state.serviceCode;
|
||||
|
||||
const [amountInfo, setAmountInfo] = useState<AmountInfo>();
|
||||
const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
|
||||
const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
|
||||
const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
|
||||
const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
|
||||
const [partCancelInfo, setPartCancelInfo] = useState<PartCancelInfo>();
|
||||
const [showAmountInfo, setShowAmountInfo] = useState<boolean>(false);
|
||||
const [showPaymentInfo, setShowPaymentInfo] = useState<boolean>(false);
|
||||
const [showTransactionInfo, setShowTransactionInfo] = useState<boolean>(false);
|
||||
const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
|
||||
const [showPartCancelInfo, setShowPartCancelInfo] = useState<boolean>(false);
|
||||
|
||||
useSetHeaderTitle(t('transaction.detailTitle'));
|
||||
useSetHeaderType(HeaderType.RightClose);
|
||||
useSetOnBack(() => {
|
||||
navigate(PATHS.transaction.allTransaction.list);
|
||||
});
|
||||
useSetFooterMode(false);
|
||||
|
||||
const { mutateAsync: allTransactionDetail } = useAllTransactionDetailMutation();
|
||||
|
||||
const callDetail = () => {
|
||||
let allTransactionDetailParams: AllTransactionDetailParams = {
|
||||
serviceCode: serviceCode,
|
||||
tid: tid
|
||||
};
|
||||
allTransactionDetail(allTransactionDetailParams).then((rs: DetailResponse) => {
|
||||
setAmountInfo(rs.amountInfo);
|
||||
setImportantInfo(rs.importantInfo);
|
||||
setPaymentInfo(rs.paymentInfo);
|
||||
setTransactionInfo(rs.transactionInfo);
|
||||
setSettlementInfo(rs.settlementInfo);
|
||||
setPartCancelInfo(rs.partCancelInfo);
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
callDetail();
|
||||
}, []);
|
||||
|
||||
const onClickToNavigate = (path: string) => {
|
||||
let timeout = setTimeout(() => {
|
||||
clearTimeout(timeout);
|
||||
navigate(PATHS.transaction.allTransaction.cancel, {
|
||||
state: {
|
||||
serviceCode: serviceCode,
|
||||
tid: tid
|
||||
}
|
||||
});
|
||||
}, 10)
|
||||
};
|
||||
|
||||
const onClickToCancel = () => {
|
||||
let msg = t('transaction.confirmCancel');
|
||||
|
||||
overlay.open(({
|
||||
isOpen,
|
||||
close,
|
||||
unmount
|
||||
}) => {
|
||||
return (
|
||||
<Dialog
|
||||
afterLeave={ unmount }
|
||||
open={ isOpen }
|
||||
onClose={ close }
|
||||
onConfirmClick={ () => onClickToNavigate(PATHS.transaction.allTransaction.cancel) }
|
||||
// onConfirmClick={ () => callCancelInfo() }
|
||||
message={ msg }
|
||||
buttonLabel={[t('common.cancel'), t('common.confirm')]}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const onClickToOpenInfo = (infoSectionKey: InfoSectionKeys) => {
|
||||
if(infoSectionKey === InfoSectionKeys.Amount){
|
||||
setShowAmountInfo(!showAmountInfo);
|
||||
}
|
||||
else if(infoSectionKey === InfoSectionKeys.Payment){
|
||||
setShowPaymentInfo(!showPaymentInfo);
|
||||
}
|
||||
else if(infoSectionKey === InfoSectionKeys.Transaction){
|
||||
setShowTransactionInfo(!showTransactionInfo);
|
||||
}
|
||||
else if(infoSectionKey === InfoSectionKeys.Settlement){
|
||||
setShowSettlementInfo(!showSettlementInfo);
|
||||
}
|
||||
else if(infoSectionKey === InfoSectionKeys.PartCancel){
|
||||
setShowPartCancelInfo(!showPartCancelInfo);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<div className="option-list pb-86">
|
||||
<div className="txn-detail">
|
||||
<AmountInfoSection
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
amountInfo={ amountInfo }
|
||||
isOpen={ showAmountInfo }
|
||||
tid={ tid }
|
||||
serviceCode={ serviceCode }
|
||||
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
|
||||
></AmountInfoSection>
|
||||
<div className="txn-divider"></div>
|
||||
<ImportantInfoSection
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
importantInfo={ importantInfo }
|
||||
serviceCode={ serviceCode }
|
||||
></ImportantInfoSection>
|
||||
<div className="txn-divider"></div>
|
||||
{ !!paymentInfo &&
|
||||
<>
|
||||
<PaymentInfoSection
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
paymentInfo={ paymentInfo }
|
||||
serviceCode={ serviceCode }
|
||||
isOpen={ showPaymentInfo }
|
||||
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
|
||||
></PaymentInfoSection>
|
||||
<div className="txn-divider"></div>
|
||||
</>
|
||||
}
|
||||
{ !!transactionInfo &&
|
||||
<>
|
||||
<TransactionInfoSection
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
transactionInfo={ transactionInfo }
|
||||
serviceCode={ serviceCode }
|
||||
isOpen={ showTransactionInfo }
|
||||
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
|
||||
></TransactionInfoSection>
|
||||
<div className="txn-divider"></div>
|
||||
</>
|
||||
}
|
||||
{ !!settlementInfo &&
|
||||
<>
|
||||
<SettlementInfoSection
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
settlementInfo={ settlementInfo }
|
||||
serviceCode={ serviceCode }
|
||||
isOpen={ showSettlementInfo }
|
||||
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
|
||||
></SettlementInfoSection>
|
||||
<div className="txn-divider"></div>
|
||||
</>
|
||||
}
|
||||
{ !!partCancelInfo &&
|
||||
<PartCancelInfoSection
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
partCancelInfo={ partCancelInfo }
|
||||
serviceCode={ serviceCode }
|
||||
isOpen={ showPartCancelInfo }
|
||||
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
|
||||
></PartCancelInfoSection>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ () => onClickToCancel() }
|
||||
>{t('transaction.cancelTransaction')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -33,7 +33,11 @@ import useIntersectionObserver from '@/widgets/intersection-observer';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { AllTransactionDetail } from '@/entities/transaction/ui/detail/all-transaction-detail';
|
||||
|
||||
/* 거래내역조회 31 */
|
||||
export const AllTransactionListPage = () => {
|
||||
const menuGrantsByKey = useStore.getState().UserStore.menuGrantsByKey;
|
||||
const myGrants = menuGrantsByKey['31'];
|
||||
|
||||
const { navigate } = useNavigate();
|
||||
const { t, i18n } = useTranslation();
|
||||
const userMid = useStore.getState().UserStore.mid;
|
||||
|
||||
Reference in New Issue
Block a user