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

메뉴 권한 및 ui 수정

Browse Source
This commit is contained in:
focp212@naver.com
2025-11-05 14:03:50 +09:00
parent 7d158c8a6e
commit a4807c4013
13 changed files with 53 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
src/pages/transaction/escrow/detail-page.tsx
View File

@@ -1,209 +0,0 @@
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useEscrowDetailMutation } from '@/entities/transaction/api/use-escrow-detail-mutation';
import { ImportantInfoSection } from '@/entities/transaction/ui/section/important-info-section';
import { EscrowInfoSection } from '@/entities/transaction/ui/section/escrow-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 { HeaderType } from '@/entities/common/model/types';
import {
TransactionCategory,
EscrowDetailParams,
DetailResponse,
ImportantInfo,
EscrowInfo,
PaymentInfo,
TransactionInfo,
SettlementInfo,
InfoSectionKeys,
MerchantInfo,
AmountInfo
} from '@/entities/transaction/model/types';
import {
useSetOnBack,
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { EscrowMailResendBottomSheet } from '@/entities/transaction/ui/escrow-mail-resend-bottom-sheet';
import { useEscrowMailResendMutation } from '@/entities/transaction/api/use-escrow-mail-resend-mutation';
import { MerchantInfoSection } from '@/entities/transaction/ui/section/merchant-info-section';
import { AmountInfoSection } from '@/entities/transaction/ui/section/amount-info-section';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
export const EscrowDetailPage = () => {
const { navigate } = useNavigate();
const { t } = useTranslation();
const location = useLocation();
const paramTid = location?.state.tid;
const serviceCode = location?.state.serviceCode;
const [amountInfo, setAmountInfo] = useState<AmountInfo>();
const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
const [escrowInfo, setEscrowInfo] = useState<EscrowInfo>();
const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
const [merchantInfo, setMerchantInfo] = useState<MerchantInfo>();
const [showAmountInfo, setShowAmountInfo] = useState<boolean>(false);
const [showImportantInfo, setShowImportantInfo] = useState<boolean>(false);
const [showEscroInfo, setShowEscroInfo] = useState<boolean>(false);
const [showPaymentInfo, setShowPaymentInfo] = useState<boolean>(false);
const [showTransactionInfo, setShowTransactionInfo] = useState<boolean>(false);
const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
const [showMerchantInfo, setShowMerchantInfo] = useState<boolean>(false);
const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
const [orderNumber, setOrderNumber] = useState<string>();
const [tid, setTid] = useState<string | undefined>(paramTid);
useSetHeaderTitle(t('escrow.detailTitle'));
useSetHeaderType(HeaderType.RightClose);
useSetOnBack(() => {
navigate(PATHS.transaction.escrow.list);
});
useSetFooterMode(false);
const { mutateAsync: escrowDetail } = useEscrowDetailMutation();
const { mutateAsync: escrowMailResend } = useEscrowMailResendMutation()
const callDetail = () => {
let escroDetailParams: EscrowDetailParams = {
tid: tid || paramTid,
};
escrowDetail(escroDetailParams).then((rs: DetailResponse) => {
setAmountInfo(rs.paymentInfo || {});
setImportantInfo(rs.importantInfo || {});
setEscrowInfo(rs.escrowInfo || {});
setPaymentInfo(rs.paymentInfo || {});
setTransactionInfo(rs.transactionInfo || {});
setSettlementInfo(rs.settlementInfo || {});
setMerchantInfo(rs.merchantInfo || {});
setOrderNumber(rs.importantInfo?.orderNumber);
setTid(rs.importantInfo?.tid);
});
};
useEffect(() => {
callDetail();
}, []);
const onClickToShowMailResend = () => {
setBottomSheetOn(true);
};
const callMailResend = () => {
let params = {
orderNumber: orderNumber,
tid: tid,
};
escrowMailResend(params).then((rs: any) => {
console.log(rs);
});
};
const onClickToOpenInfo = (infoSectionKey: InfoSectionKeys) => {
if(infoSectionKey === InfoSectionKeys.Amount){
setShowAmountInfo(!showAmountInfo);
}
else if(infoSectionKey === InfoSectionKeys.Important){
setShowImportantInfo(!showImportantInfo);
}
else if(infoSectionKey === InfoSectionKeys.Escrow){
setShowEscroInfo(!showEscroInfo);
}
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.Merchant){
setShowMerchantInfo(!showMerchantInfo);
}
};
return (
<>
<main>
<div className="tab-content pb-86">
<div className="tab-pane sub active">
<div className="option-list">
<div className="txn-detail">
<AmountInfoSection
transactionCategory={ TransactionCategory.Escrow }
amountInfo={ amountInfo }
isOpen={ showAmountInfo }
tid={ tid }
serviceCode={ serviceCode }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></AmountInfoSection>
<div className="txn-divider minus"></div>
<ImportantInfoSection
transactionCategory={ TransactionCategory.Escrow }
importantInfo={ importantInfo }
></ImportantInfoSection>
<div className="txn-divider minus"></div>
<EscrowInfoSection
escrowInfo={ escrowInfo }
isOpen={ showEscroInfo }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></EscrowInfoSection>
<div className="txn-divider minus"></div>
<PaymentInfoSection
transactionCategory={ TransactionCategory.Escrow }
paymentInfo={ paymentInfo }
isOpen={ showPaymentInfo }
serviceCode={ serviceCode }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></PaymentInfoSection>
<div className="txn-divider"></div>
<TransactionInfoSection
transactionCategory={ TransactionCategory.Escrow }
transactionInfo={ transactionInfo }
isOpen={ showTransactionInfo }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></TransactionInfoSection>
<div className="txn-divider"></div>
<SettlementInfoSection
transactionCategory={ TransactionCategory.Escrow }
settlementInfo={ settlementInfo }
isOpen={ showSettlementInfo }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></SettlementInfoSection>
<div className="txn-divider"></div>
<MerchantInfoSection
merchantInfo={ merchantInfo }
isOpen={ showMerchantInfo }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></MerchantInfoSection>
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToShowMailResend() }
>메일 재발송</button>
</div>
</div>
</div>
</main>
<EmailBottomSheet
setBottomSheetOn={ setBottomSheetOn }
bottomSheetOn={ bottomSheetOn }
imageSave={ false }
sendEmail={ true }
sendRequest={ callMailResend }
></EmailBottomSheet>
</>
);
};