상세 수정
This commit is contained in:
focp212@naver.com
@@ -28,12 +28,7 @@ export const AllTransactionCancelPreventBond = ({
|
||||
const { navigate } = useNavigate();
|
||||
const [item, setItem] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(debtPreventionCancelDisplayInfo);
|
||||
const onClickToClose = () => {
|
||||
navigate(PATHS.transaction.allTransaction.detail, {
|
||||
state: {
|
||||
serviceCode: serviceCode,
|
||||
tid: tid
|
||||
}
|
||||
});
|
||||
setCancelPreventBondOn(false);
|
||||
};
|
||||
const callTransactionCancel = () => {
|
||||
|
||||
|
||||
@@ -3,7 +3,8 @@ import { ListDateGroup } from './list-date-group';
|
||||
|
||||
export const AllTransactionList = ({
|
||||
transactionCategory,
|
||||
listItems
|
||||
listItems,
|
||||
setDetailData
|
||||
}: AllTransactionListProps) => {
|
||||
const getListDateGroup = () => {
|
||||
let rs = [];
|
||||
@@ -26,6 +27,7 @@ export const AllTransactionList = ({
|
||||
key={ date + '-' + i }
|
||||
date={ date }
|
||||
items={ list }
|
||||
setDetailData={ setDetailData }
|
||||
></ListDateGroup>
|
||||
);
|
||||
}
|
||||
@@ -43,6 +45,7 @@ export const AllTransactionList = ({
|
||||
key={ date + '-last' }
|
||||
date={ date }
|
||||
items={ list }
|
||||
setDetailData={ setDetailData }
|
||||
></ListDateGroup>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,10 +6,9 @@ import { useTranslation } from 'react-i18next';
|
||||
|
||||
export const BillingList = ({
|
||||
transactionCategory,
|
||||
listItems
|
||||
listItems,
|
||||
setDetailData
|
||||
}: BillingListProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const getListDateGroup = () => {
|
||||
let rs = [];
|
||||
@@ -31,6 +30,7 @@ export const BillingList = ({
|
||||
key={ date + '-' + i }
|
||||
date={ date }
|
||||
items={ list }
|
||||
setDetailData={ setDetailData }
|
||||
></ListDateGroup>
|
||||
);
|
||||
}
|
||||
@@ -48,27 +48,20 @@ export const BillingList = ({
|
||||
key={ date + '-last' }
|
||||
date={ date }
|
||||
items={ list }
|
||||
setDetailData={ setDetailData }
|
||||
></ListDateGroup>
|
||||
);
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
|
||||
const onClickToNavigate = () => {
|
||||
navigate(PATHS.transaction.billing.charge);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="transaction-list">
|
||||
{ getListDateGroup() }
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ () => onClickToNavigate() }
|
||||
>{ t('transaction.list.paymentRequest') }</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -6,7 +6,8 @@ import { useTranslation } from 'react-i18next';
|
||||
|
||||
export const CashReceiptList = ({
|
||||
transactionCategory,
|
||||
listItems
|
||||
listItems,
|
||||
setDetailData
|
||||
}: CashReceiptListProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
@@ -31,6 +32,7 @@ export const CashReceiptList = ({
|
||||
key={ date + '-' + i }
|
||||
date={ date }
|
||||
items={ list }
|
||||
setDetailData={ setDetailData }
|
||||
></ListDateGroup>
|
||||
);
|
||||
}
|
||||
@@ -48,27 +50,19 @@ export const CashReceiptList = ({
|
||||
key={ date + '-last' }
|
||||
date={ date }
|
||||
items={ list }
|
||||
setDetailData={ setDetailData }
|
||||
></ListDateGroup>
|
||||
);
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
|
||||
const onClickToNavigate = () => {
|
||||
navigate(PATHS.transaction.cashReceipt.handWrittenIssuance);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="transaction-list">
|
||||
{ getListDateGroup() }
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ () => onClickToNavigate() }
|
||||
>{ t('transaction.list.manualIssuance') }</button>
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
238
src/entities/transaction/ui/detail/all-transaction-detail.tsx
Normal file
238
src/entities/transaction/ui/detail/all-transaction-detail.tsx
Normal file
@@ -0,0 +1,238 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
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 {
|
||||
TransactionCategory,
|
||||
AllTransactionDetailParams,
|
||||
DetailResponse,
|
||||
AmountInfo,
|
||||
ImportantInfo,
|
||||
PaymentInfo,
|
||||
TransactionInfo,
|
||||
SettlementInfo,
|
||||
PartCancelInfo,
|
||||
InfoSectionKeys
|
||||
} from '@/entities/transaction/model/types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
DetailMotionDuration,
|
||||
DetailMotionStyle,
|
||||
DetailMotionVariants
|
||||
} from '@/entities/common/model/constant';
|
||||
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
|
||||
|
||||
export interface AllTransactionDetailProps {
|
||||
detailOn: boolean;
|
||||
setDetailOn: (detailOn: boolean) => void;
|
||||
tid: string;
|
||||
serviceCode: string;
|
||||
};
|
||||
|
||||
export const AllTransactionDetail = ({
|
||||
detailOn,
|
||||
setDetailOn,
|
||||
tid,
|
||||
serviceCode
|
||||
}: AllTransactionDetailProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
|
||||
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);
|
||||
|
||||
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(() => {
|
||||
if(!!detailOn && serviceCode && tid){
|
||||
callDetail();
|
||||
}
|
||||
}, [detailOn]);
|
||||
|
||||
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 onClickToClose = () => {
|
||||
setDetailOn(false);
|
||||
};
|
||||
|
||||
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 (
|
||||
<>
|
||||
<motion.div
|
||||
className="full-menu-modal"
|
||||
initial="hidden"
|
||||
animate={ (detailOn)? 'visible': 'hidden' }
|
||||
variants={ DetailMotionVariants }
|
||||
transition={ DetailMotionDuration }
|
||||
style={ DetailMotionStyle }
|
||||
>
|
||||
<div className="full-menu-container pdw-16">
|
||||
<div className="full-menu-header">
|
||||
<div className="full-menu-title center">{ t('transaction.detailTitle') }</div>
|
||||
<div className="full-menu-actions">
|
||||
<FullMenuClose
|
||||
addClass="full-menu-close"
|
||||
onClickToCallback={ onClickToClose }
|
||||
></FullMenuClose>
|
||||
</div>
|
||||
</div>
|
||||
<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 minus"></div>
|
||||
<ImportantInfoSection
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
importantInfo={ importantInfo }
|
||||
serviceCode={ serviceCode }
|
||||
></ImportantInfoSection>
|
||||
{ !!paymentInfo &&
|
||||
<>
|
||||
<div className="txn-divider"></div>
|
||||
<PaymentInfoSection
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
paymentInfo={ paymentInfo }
|
||||
serviceCode={ serviceCode }
|
||||
isOpen={ showPaymentInfo }
|
||||
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
|
||||
></PaymentInfoSection>
|
||||
</>
|
||||
}
|
||||
{ !!transactionInfo &&
|
||||
<>
|
||||
<div className="txn-divider"></div>
|
||||
<TransactionInfoSection
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
transactionInfo={ transactionInfo }
|
||||
serviceCode={ serviceCode }
|
||||
isOpen={ showTransactionInfo }
|
||||
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
|
||||
></TransactionInfoSection>
|
||||
</>
|
||||
}
|
||||
{ !!settlementInfo &&
|
||||
<>
|
||||
<div className="txn-divider"></div>
|
||||
<SettlementInfoSection
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
settlementInfo={ settlementInfo }
|
||||
serviceCode={ serviceCode }
|
||||
isOpen={ showSettlementInfo }
|
||||
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
|
||||
></SettlementInfoSection>
|
||||
</>
|
||||
}
|
||||
{ !!partCancelInfo &&
|
||||
<>
|
||||
<div className="txn-divider"></div>
|
||||
<PartCancelInfoSection
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
partCancelInfo={ partCancelInfo }
|
||||
serviceCode={ serviceCode }
|
||||
isOpen={ showPartCancelInfo }
|
||||
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
|
||||
></PartCancelInfoSection>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ () => onClickToCancel() }
|
||||
>{t('transaction.cancelTransaction')}</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
107
src/entities/transaction/ui/detail/billing-detail.tsx
Normal file
107
src/entities/transaction/ui/detail/billing-detail.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useBillingDetailMutation } from '@/entities/transaction/api/use-billing-detail-mutation';
|
||||
import { BillingInfoSection } from '@/entities/transaction/ui/section/billing-info-section';
|
||||
import {
|
||||
TransactionCategory,
|
||||
BillingDetailParams,
|
||||
BillingDetailResponse,
|
||||
BillingInfo,
|
||||
AmountInfo
|
||||
} from '@/entities/transaction/model/types';
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
|
||||
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
|
||||
|
||||
export interface BillingDetailProps {
|
||||
detailOn: boolean;
|
||||
setDetailOn: (detailOn: boolean) => void;
|
||||
tid: string;
|
||||
};
|
||||
|
||||
export const BillingDetail = ({
|
||||
detailOn,
|
||||
setDetailOn,
|
||||
tid
|
||||
}: BillingDetailProps) => {
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
const [billingInfo, setBillingInfo] = useState<BillingInfo>();
|
||||
const [amountInfo, setAmountInfo] = useState<AmountInfo>();
|
||||
|
||||
const { mutateAsync: billingDetail } = useBillingDetailMutation();
|
||||
|
||||
const callDetail = () => {
|
||||
let billingDetailParams: BillingDetailParams = {
|
||||
tid: tid
|
||||
};
|
||||
billingDetail(billingDetailParams).then((rs: BillingDetailResponse) => {
|
||||
setBillingInfo(rs);
|
||||
setAmountInfo({
|
||||
transactionAmount: rs.transactionAmount,
|
||||
buyerName: rs.buyerName
|
||||
})
|
||||
});
|
||||
};
|
||||
const onClickToClose = () => {
|
||||
setDetailOn(false);
|
||||
};
|
||||
useEffect(() => {
|
||||
if(!!detailOn && tid){
|
||||
callDetail();
|
||||
}
|
||||
}, [detailOn]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
className="full-menu-modal"
|
||||
initial="hidden"
|
||||
animate={ (detailOn)? 'visible': 'hidden' }
|
||||
variants={ DetailMotionVariants }
|
||||
transition={ DetailMotionDuration }
|
||||
style={ DetailMotionStyle }
|
||||
>
|
||||
<div className="full-menu-container pdw-16">
|
||||
<div className="full-menu-header">
|
||||
<div className="full-menu-title center">{ t('billing.detailTitle') }</div>
|
||||
<div className="full-menu-actions">
|
||||
<FullMenuClose
|
||||
addClass="full-menu-close"
|
||||
onClickToCallback={ onClickToClose }
|
||||
></FullMenuClose>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tab-pane sub active">
|
||||
<div className="option-list">
|
||||
<div className="txn-detail">
|
||||
<div className="txn-num-group">
|
||||
<div className="txn-amount">
|
||||
<div className="value">
|
||||
{ i18n.language === 'en' && <span className="unit">{ t('home.currencySymbol') }</span> }
|
||||
<NumericFormat
|
||||
value={ amountInfo?.transactionAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
{ i18n.language !== 'en' && <span className="unit">{ t('home.currencyWon') }</span> }
|
||||
</div>
|
||||
</div>
|
||||
<div className="txn-mid">
|
||||
<span className="value">{ amountInfo?.buyerName }</span>
|
||||
</div>
|
||||
<div className="txn-doc"></div>
|
||||
</div>
|
||||
<div className="txn-divider"></div>
|
||||
<BillingInfoSection
|
||||
billingInfo={ billingInfo }
|
||||
></BillingInfoSection>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
178
src/entities/transaction/ui/detail/cash-receit-detail.tsx
Normal file
178
src/entities/transaction/ui/detail/cash-receit-detail.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useLocation } from 'react-router';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { useCashReceiptDetailMutation } from '@/entities/transaction/api/use-cash-receipt-detail-mutation';
|
||||
import { IssueInfoSection } from '@/entities/transaction/ui/section/issue-info-section';
|
||||
import { DetailInfoSection } from '@/entities/transaction/ui/section/detail-info-section';
|
||||
import {
|
||||
TransactionCategory,
|
||||
CashReceiptDetailParams,
|
||||
DetailResponse,
|
||||
IssueInfo,
|
||||
DetailInfo,
|
||||
InfoSectionKeys,
|
||||
CashReceiptPurposeType,
|
||||
AmountInfo,
|
||||
CashReceiptPurposeUpdateParams,
|
||||
CashReceiptTransactionType
|
||||
} from '@/entities/transaction/model/types';
|
||||
import { CashReceitPurposeUpdateBottomSheet } from '@/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet';
|
||||
import { useCashReceiptPurposeUpdateMutation } from '@/entities/transaction/api/use-cash-receipt-purpose-update-mutation';
|
||||
import { AmountInfoSection } from '@/entities/transaction/ui/section/amount-info-section';
|
||||
import { snackBar } from '@/shared/lib';
|
||||
import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
|
||||
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
|
||||
|
||||
export interface CashReceiptDetailProps {
|
||||
detailOn: boolean;
|
||||
setDetailOn: (detailOn: boolean) => void;
|
||||
tid: string;
|
||||
};
|
||||
|
||||
export const CashReceiptDetail = ({
|
||||
detailOn,
|
||||
setDetailOn,
|
||||
tid
|
||||
}: CashReceiptDetailProps) => {
|
||||
const { navigate, reload } = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
const location = useLocation();
|
||||
|
||||
const [amountInfo, setAmountInfo] = useState<AmountInfo>();
|
||||
const [issueInfo, setIssueInfo] = useState<IssueInfo>();
|
||||
const [detailInfo, setDetailInfo] = useState<DetailInfo>();
|
||||
const [showAmountInfo, setShowAmountInfo] = useState<boolean>(false);
|
||||
const [showDetailInfo, setShowDetailInfo] = useState<boolean>(false);
|
||||
const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
|
||||
const [purposeType, setPurposeType] = useState<string>();
|
||||
const [canDownloadReceipt, setCanDownloadReceipt] = useState<boolean>(false);
|
||||
|
||||
const { mutateAsync: cashReceiptDetail } = useCashReceiptDetailMutation();
|
||||
const { mutateAsync: cashReceiptPurposeUpdate } = useCashReceiptPurposeUpdateMutation();
|
||||
|
||||
const callPurposeUpdate = () => {
|
||||
let newPurpose = (purposeType === CashReceiptPurposeType.EXPENSE_PROOF)
|
||||
? CashReceiptPurposeType.INCOME_DEDUCTION: CashReceiptPurposeType.EXPENSE_PROOF;
|
||||
let params: CashReceiptPurposeUpdateParams = {
|
||||
tid: tid,
|
||||
newPurpose: newPurpose
|
||||
};
|
||||
cashReceiptPurposeUpdate(params).then((rs) => {
|
||||
setPurposeType(rs.afterPurposeType);
|
||||
setBottomSheetOn(false);
|
||||
snackBar('용도 변경을 성공하였습니다.', function(){
|
||||
reload();
|
||||
}, 2000);
|
||||
});
|
||||
};
|
||||
|
||||
const callDetail = () => {
|
||||
let cashReceitDetailParams: CashReceiptDetailParams = {
|
||||
tid: tid
|
||||
};
|
||||
cashReceiptDetail(cashReceitDetailParams).then((rs: DetailResponse) => {
|
||||
if(rs.amountDetail){
|
||||
rs.amountDetail.customerName = rs.customerName;
|
||||
}
|
||||
setAmountInfo(rs.amountDetail || {});
|
||||
setIssueInfo(rs.issueInfo || {});
|
||||
setDetailInfo(rs.detailInfo || {});
|
||||
setCanDownloadReceipt(rs.detailInfo?.canDownloadReceipt || false);
|
||||
if(rs.issueInfo){
|
||||
setPurposeType(rs.issueInfo.purpose);
|
||||
}
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
if(!!detailOn && tid){
|
||||
callDetail();
|
||||
}
|
||||
}, [tid]);
|
||||
|
||||
const onClickToOpenInfo = (infoSectionKey: InfoSectionKeys) => {
|
||||
if(infoSectionKey === InfoSectionKeys.Amount){
|
||||
setShowAmountInfo(!showAmountInfo);
|
||||
}
|
||||
else if(infoSectionKey === InfoSectionKeys.Detail){
|
||||
setShowDetailInfo(!showDetailInfo);
|
||||
}
|
||||
};
|
||||
|
||||
const onClickToClose = () => {
|
||||
setDetailOn(false);
|
||||
};
|
||||
|
||||
const onClickToPurposeUpdate = () => {
|
||||
setBottomSheetOn(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
className="full-menu-modal"
|
||||
initial="hidden"
|
||||
animate={ (detailOn)? 'visible': 'hidden' }
|
||||
variants={ DetailMotionVariants }
|
||||
transition={ DetailMotionDuration }
|
||||
style={ DetailMotionStyle }
|
||||
>
|
||||
<div className="full-menu-container pdw-16">
|
||||
<div className="full-menu-header">
|
||||
<div className="full-menu-title center">{ t('cashReceipt.detailTitle') }</div>
|
||||
<div className="full-menu-actions">
|
||||
<FullMenuClose
|
||||
addClass="full-menu-close"
|
||||
onClickToCallback={ onClickToClose }
|
||||
></FullMenuClose>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tab-pane sub active">
|
||||
<div className={ `option-list ${(detailInfo?.canDownloadReceipt)? 'pb-86': ''}` }>
|
||||
<div className="txn-detail">
|
||||
<AmountInfoSection
|
||||
transactionCategory={ TransactionCategory.CashReceipt }
|
||||
amountInfo={ amountInfo }
|
||||
isOpen={ showAmountInfo }
|
||||
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
|
||||
purposeType={ purposeType }
|
||||
canDownloadReceipt={ canDownloadReceipt }
|
||||
></AmountInfoSection>
|
||||
<div className="txn-divider"></div>
|
||||
<IssueInfoSection
|
||||
transactionCategory={ TransactionCategory.CashReceipt }
|
||||
issueInfo={ issueInfo }
|
||||
purposeType={ purposeType }
|
||||
></IssueInfoSection>
|
||||
<div className="txn-divider minus"></div>
|
||||
{ !!detailInfo &&
|
||||
<DetailInfoSection
|
||||
transactionCategory={ TransactionCategory.CashReceipt }
|
||||
detailInfo={ detailInfo }
|
||||
isOpen={ showDetailInfo }
|
||||
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
|
||||
></DetailInfoSection>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{ (issueInfo?.transactionType === CashReceiptTransactionType.APPROVAL) &&
|
||||
(issueInfo?.processResult === '발급완료') &&
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ () => onClickToPurposeUpdate() }
|
||||
>{ t('cashReceipt.changePurpose') }</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
<CashReceitPurposeUpdateBottomSheet
|
||||
setBottomSheetOn={ setBottomSheetOn }
|
||||
bottomSheetOn={ bottomSheetOn }
|
||||
callPurposeUpdate={ callPurposeUpdate }
|
||||
></CashReceitPurposeUpdateBottomSheet>
|
||||
</>
|
||||
);
|
||||
};
|
||||
225
src/entities/transaction/ui/detail/escrow-detail.tsx
Normal file
225
src/entities/transaction/ui/detail/escrow-detail.tsx
Normal file
@@ -0,0 +1,225 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { motion } from 'framer-motion';
|
||||
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 {
|
||||
TransactionCategory,
|
||||
EscrowDetailParams,
|
||||
DetailResponse,
|
||||
ImportantInfo,
|
||||
EscrowInfo,
|
||||
PaymentInfo,
|
||||
TransactionInfo,
|
||||
SettlementInfo,
|
||||
InfoSectionKeys,
|
||||
MerchantInfo,
|
||||
AmountInfo
|
||||
} from '@/entities/transaction/model/types';
|
||||
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';
|
||||
import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
|
||||
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
|
||||
|
||||
export interface EscrowDetailProps {
|
||||
detailOn: boolean;
|
||||
setDetailOn: (detailOn: boolean) => void;
|
||||
tid: string;
|
||||
serviceCode: string;
|
||||
};
|
||||
|
||||
export const EscrowDetail = ({
|
||||
detailOn,
|
||||
setDetailOn,
|
||||
tid,
|
||||
serviceCode
|
||||
}: EscrowDetailProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
|
||||
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 { mutateAsync: escrowDetail } = useEscrowDetailMutation();
|
||||
const { mutateAsync: escrowMailResend } = useEscrowMailResendMutation()
|
||||
|
||||
const callDetail = () => {
|
||||
let escroDetailParams: EscrowDetailParams = {
|
||||
tid: tid,
|
||||
};
|
||||
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);
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
if(!!detailOn && serviceCode && tid){
|
||||
callDetail();
|
||||
}
|
||||
}, [detailOn]);
|
||||
|
||||
|
||||
const onClickToShowMailResend = () => {
|
||||
setBottomSheetOn(true);
|
||||
};
|
||||
|
||||
const callMailResend = () => {
|
||||
let params = {
|
||||
orderNumber: orderNumber,
|
||||
tid: tid,
|
||||
};
|
||||
escrowMailResend(params).then((rs: any) => {
|
||||
console.log(rs);
|
||||
});
|
||||
};
|
||||
|
||||
const onClickToClose = () => {
|
||||
setDetailOn(false);
|
||||
};
|
||||
|
||||
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 (
|
||||
<>
|
||||
<motion.div
|
||||
className="full-menu-modal"
|
||||
initial="hidden"
|
||||
animate={ (detailOn)? 'visible': 'hidden' }
|
||||
variants={ DetailMotionVariants }
|
||||
transition={ DetailMotionDuration }
|
||||
style={ DetailMotionStyle }
|
||||
>
|
||||
<div className="full-menu-container pdw-16">
|
||||
<div className="full-menu-header">
|
||||
<div className="full-menu-title center">{ t('escrow.detailTitle') }</div>
|
||||
<div className="full-menu-actions">
|
||||
<FullMenuClose
|
||||
addClass="full-menu-close"
|
||||
onClickToCallback={ onClickToClose }
|
||||
></FullMenuClose>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ () => onClickToShowMailResend() }
|
||||
>메일 재발송</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
<EmailBottomSheet
|
||||
setBottomSheetOn={ setBottomSheetOn }
|
||||
bottomSheetOn={ bottomSheetOn }
|
||||
imageSave={ false }
|
||||
sendEmail={ true }
|
||||
sendRequest={ callMailResend }
|
||||
></EmailBottomSheet>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -3,7 +3,8 @@ import { ListDateGroup } from './list-date-group';
|
||||
|
||||
export const EscrowList = ({
|
||||
transactionCategory,
|
||||
listItems
|
||||
listItems,
|
||||
setDetailData
|
||||
}: EscrowListProps) => {
|
||||
|
||||
const getListDateGroup = () => {
|
||||
@@ -26,6 +27,7 @@ export const EscrowList = ({
|
||||
key={ date + '-' + i }
|
||||
date={ date }
|
||||
items={ list }
|
||||
setDetailData={ setDetailData }
|
||||
></ListDateGroup>
|
||||
);
|
||||
}
|
||||
@@ -43,6 +45,7 @@ export const EscrowList = ({
|
||||
key={ date + '-last' }
|
||||
date={ date }
|
||||
items={ list }
|
||||
setDetailData={ setDetailData }
|
||||
></ListDateGroup>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,7 +9,8 @@ import { useTranslation } from 'react-i18next';
|
||||
export const ListDateGroup = ({
|
||||
transactionCategory,
|
||||
date,
|
||||
items
|
||||
items,
|
||||
setDetailData
|
||||
}: ListDateGroupProps) => {
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
@@ -93,6 +94,8 @@ export const ListDateGroup = ({
|
||||
|
||||
billKey={ items[i]?.billKey }
|
||||
orderNumber={ items[i]?.orderNumber }
|
||||
|
||||
setDetailData={ setDetailData }
|
||||
></ListItem>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { BillingRequestStatus, CashReceiptTransactionType, EscrowDeliveryStatus, ListItemProps, TransactionCategory } from '../model/types';
|
||||
import moment from 'moment';
|
||||
import { useStore } from '@/shared/model/store';
|
||||
import { getAllTransactionStatusCode, getPaymentMethodName } from '../model/contant';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
@@ -16,9 +13,9 @@ export const ListItem = ({
|
||||
paymentMethod, processResult, transactionType,
|
||||
transactionDateTime, transactionAmount,
|
||||
deliveryStatus, settlementStatus,
|
||||
cancelStatus, billKey, orderNumber, requestStatus
|
||||
cancelStatus, billKey, orderNumber, requestStatus,
|
||||
setDetailData
|
||||
}: ListItemProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
const getItemClass = () => {
|
||||
let rs = '';
|
||||
@@ -88,34 +85,38 @@ export const ListItem = ({
|
||||
|
||||
const onClickToNavigate = () => {
|
||||
if(transactionCategory === TransactionCategory.AllTransaction){
|
||||
navigate(PATHS.transaction.allTransaction.detail, {
|
||||
state: {
|
||||
if(setDetailData && tid){
|
||||
setDetailData({
|
||||
tid: tid,
|
||||
serviceCode: serviceCode
|
||||
}
|
||||
});
|
||||
serviceCode: serviceCode,
|
||||
detailOn: true
|
||||
});
|
||||
}
|
||||
}
|
||||
else if(transactionCategory === TransactionCategory.CashReceipt){
|
||||
navigate(PATHS.transaction.cashReceipt.detail, {
|
||||
state: {
|
||||
tid: tid
|
||||
}
|
||||
});
|
||||
if(setDetailData && tid){
|
||||
setDetailData({
|
||||
tid: tid,
|
||||
detailOn: true
|
||||
});
|
||||
}
|
||||
}
|
||||
else if(transactionCategory === TransactionCategory.Escrow){
|
||||
navigate(PATHS.transaction.escrow.detail, {
|
||||
state: {
|
||||
tid: tid,
|
||||
serviceCode: serviceCode
|
||||
}
|
||||
});
|
||||
if(setDetailData && tid){
|
||||
setDetailData({
|
||||
tid: tid,
|
||||
serviceCode: serviceCode,
|
||||
detailOn: true
|
||||
});
|
||||
}
|
||||
}
|
||||
else if(transactionCategory === TransactionCategory.Billing){
|
||||
navigate(PATHS.transaction.billing.detail, {
|
||||
state: {
|
||||
if(setDetailData && tid){
|
||||
setDetailData({
|
||||
tid: tid,
|
||||
}
|
||||
});
|
||||
detailOn: true
|
||||
});
|
||||
}
|
||||
}
|
||||
else{
|
||||
alert(t('common.error'));
|
||||
|
||||
Reference in New Issue
Block a user