통합거래조회 UI api
This commit is contained in:
focp212@naver.com
@@ -1,28 +1,15 @@
|
||||
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 { useBillingDetailMutation } from '@/entities/transaction/api/use-billing-detail-mutation';
|
||||
import { AmountInfoWrap } from '@/entities/transaction/ui/info-wrap/amount-info-wrap';
|
||||
import { ImportantInfoWrap } from '@/entities/transaction/ui/info-wrap/important-info-wrap';
|
||||
import { PaymentInfoWrap } from '@/entities/transaction/ui/info-wrap/payment-info-wrap';
|
||||
import { TransactionInfoWrap } from '@/entities/transaction/ui/info-wrap/transaction-info-wrap';
|
||||
import { SettlementInfoWrap } from '@/entities/transaction/ui/info-wrap/settlement-info-wrap';
|
||||
import { PartCancelInfoWrap } from '@/entities/transaction/ui/info-wrap/part-cancel-info-wrap';
|
||||
import { BillingInfoWrap } from '@/entities/transaction/ui/info-wrap/billing-info-wrap';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
TransactionCategory,
|
||||
BillingDetailParams,
|
||||
DetailResponse,
|
||||
AmountInfo,
|
||||
ImportantInfo,
|
||||
PaymentInfo,
|
||||
TransactionInfo,
|
||||
SettlementInfo,
|
||||
PartCancelInfo,
|
||||
InfoWrapKeys
|
||||
BillingDetailResponse,
|
||||
BillingInfo
|
||||
} from '@/entities/transaction/model/types';
|
||||
import {
|
||||
useSetOnBack,
|
||||
@@ -34,19 +21,9 @@ import {
|
||||
export const BillingDetailPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const [billingInfo, setBillingInfo] = useState<BillingInfo>();
|
||||
|
||||
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 [showAmount, setShowAmount] = useState<boolean>(false);
|
||||
const [showPayment, setShowPayment] = useState<boolean>(false);
|
||||
const [showTransaction, setShowTransaction] = useState<boolean>(false);
|
||||
const [showSettlement, setShowSettlement] = useState<boolean>(false);
|
||||
const [showPartCancel, setShowPartCancel] = useState<boolean>(false);
|
||||
|
||||
useSetHeaderTitle('빌링 상세');
|
||||
useSetHeaderType(HeaderType.RightClose);
|
||||
useSetOnBack(() => {
|
||||
@@ -60,37 +37,14 @@ export const BillingDetailPage = () => {
|
||||
let billingDetailParams: BillingDetailParams = {
|
||||
billKey: location?.state.billKey
|
||||
};
|
||||
billingDetail(billingDetailParams).then((rs: DetailResponse) => {
|
||||
setAmountInfo(rs.amountInfo);
|
||||
setImportantInfo(rs.importantInfo);
|
||||
setPaymentInfo(rs.paymentInfo);
|
||||
setTransactionInfo(rs.transactionInfo);
|
||||
setSettlementInfo(rs.settlementInfo);
|
||||
setPartCancelInfo(rs.partCancelInfo);
|
||||
billingDetail(billingDetailParams).then((rs: BillingDetailResponse) => {
|
||||
setBillingInfo(rs);
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
callDetail();
|
||||
}, []);
|
||||
|
||||
const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
|
||||
if(infoWrapKey === InfoWrapKeys.Amount){
|
||||
setShowAmount(!showAmount);
|
||||
}
|
||||
else if(infoWrapKey === InfoWrapKeys.Payment){
|
||||
setShowPayment(!showPayment);
|
||||
}
|
||||
else if(infoWrapKey === InfoWrapKeys.Transaction){
|
||||
setShowTransaction(!showTransaction);
|
||||
}
|
||||
else if(infoWrapKey === InfoWrapKeys.Settlement){
|
||||
setShowSettlement(!showSettlement);
|
||||
}
|
||||
else if(infoWrapKey === InfoWrapKeys.PartCancel){
|
||||
setShowPartCancel(!showPartCancel);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
@@ -98,48 +52,12 @@ export const BillingDetailPage = () => {
|
||||
<div className="tab-pane sub active">
|
||||
<div className="option-list">
|
||||
<div className="txn-detail">
|
||||
<AmountInfoWrap
|
||||
<BillingInfoWrap
|
||||
transactionCategory={ TransactionCategory.Billing }
|
||||
amountInfo={ amountInfo }
|
||||
show={ showAmount }
|
||||
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
|
||||
></AmountInfoWrap>
|
||||
<div className="txn-divider minus"></div>
|
||||
<ImportantInfoWrap
|
||||
transactionCategory={ TransactionCategory.Billing }
|
||||
importantInfo={ importantInfo }
|
||||
></ImportantInfoWrap>
|
||||
<div className="txn-divider minus"></div>
|
||||
<PaymentInfoWrap
|
||||
transactionCategory={ TransactionCategory.Billing }
|
||||
paymentInfo={ paymentInfo }
|
||||
show={ showPayment }
|
||||
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
|
||||
></PaymentInfoWrap>
|
||||
<div className="txn-divider"></div>
|
||||
<TransactionInfoWrap
|
||||
transactionCategory={ TransactionCategory.Billing }
|
||||
transactionInfo={ transactionInfo }
|
||||
show={ showTransaction }
|
||||
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
|
||||
></TransactionInfoWrap>
|
||||
<div className="txn-divider"></div>
|
||||
<SettlementInfoWrap
|
||||
transactionCategory={ TransactionCategory.Billing }
|
||||
settlementInfo={ settlementInfo }
|
||||
show={ showSettlement }
|
||||
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
|
||||
></SettlementInfoWrap>
|
||||
<div className="txn-divider"></div>
|
||||
<PartCancelInfoWrap
|
||||
transactionCategory={ TransactionCategory.Billing }
|
||||
partCancelInfo={ partCancelInfo }
|
||||
show={ showPartCancel }
|
||||
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
|
||||
></PartCancelInfoWrap>
|
||||
billingInfo={ billingInfo }
|
||||
></BillingInfoWrap>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import moment from 'moment';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useStore } from '@/shared/model/store';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { BillingList } from '@/entities/transaction/ui/billing-list';
|
||||
import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
|
||||
import { BillingListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
|
||||
import { useBillingListMutation } from '@/entities/transaction/api/use-billing-list-mutation';
|
||||
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
|
||||
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
|
||||
@@ -27,6 +28,7 @@ const serviceCodes = [
|
||||
|
||||
export const BillingListPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const userInfo = useStore((state) => state.UserStore.UserInfo);
|
||||
|
||||
const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
|
||||
const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
|
||||
@@ -69,12 +71,11 @@ export const BillingListPage = () => {
|
||||
});
|
||||
}
|
||||
|
||||
const assembleData = (content: Array<ListItem>) => {
|
||||
const assembleData = (content: Array<BillingListItem>) => {
|
||||
let data: any = {};
|
||||
if(content && content.length > 0){
|
||||
for(let i=0;i<content?.length;i++){
|
||||
let stateDate = content[i]?.stateDate;
|
||||
let groupDate = stateDate?.substring(0, 8);
|
||||
let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
|
||||
if(!!groupDate && !data.hasOwnProperty(groupDate)){
|
||||
data[groupDate] = [];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user