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 11:10:33 +09:00
parent 2556cc084a
commit 7d158c8a6e
11 changed files with 273 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/entities/settlement/ui/detail/settlement-detail.tsx
View File

@@ -132,64 +132,62 @@ export const SettlementDetail = ({
></FullMenuClose> ></FullMenuClose>
</div> </div>
</div> </div>
<div className="tab-pane sub active"> <div className="option-list">
<div className="option-list"> <div className="txn-detail">
<div className="txn-detail"> { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
{ (periodType === SettlementPeriodType.SETTLEMENT_DATE) && <div className="txn-num-group">
<div className="txn-num-group"> <div className="txn-amount">
<div className="txn-amount"> <div className="value">
<div className="value"> {i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>}
{i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>} <NumericFormat
<NumericFormat value={ settlementAmount }
value={ settlementAmount } thousandSeparator
thousandSeparator displayType="text"
displayType="text" ></NumericFormat>
></NumericFormat> {i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
{i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
</div>
</div> </div>
<div className="txn-date">{ moment(settlementDate).format('YYYY.MM.DD') }</div>
</div> </div>
} <div className="txn-date">{ moment(settlementDate).format('YYYY.MM.DD') }</div>
{ (periodType === SettlementPeriodType.TRANSACTION_DATE) && </div>
<div className="txn-num-group"> }
<div className="txn-amount"> { (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
<div className="value"> <div className="txn-num-group">
{i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>} <div className="txn-amount">
<NumericFormat <div className="value">
value={ transactionAmount } {i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>}
thousandSeparator <NumericFormat
displayType="text" value={ transactionAmount }
></NumericFormat> thousandSeparator
{i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>} displayType="text"
</div> ></NumericFormat>
{i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
</div> </div>
<div className="txn-date">{ merchantName }</div>
</div> </div>
} <div className="txn-date">{ merchantName }</div>
<div className="txn-divider minus"></div> </div>
}
<div className="txn-divider minus"></div>
<AmountInfoWrap <AmountInfoWrap
periodType={ periodType } periodType={ periodType }
amountInfo={ amountInfo } amountInfo={ amountInfo }
settlementAmount={ settlementAmount } settlementAmount={ settlementAmount }
></AmountInfoWrap> ></AmountInfoWrap>
<div className="txn-divider"></div> <div className="txn-divider"></div>
{ (periodType === SettlementPeriodType.SETTLEMENT_DATE) && { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
<SettlementInfoWrap <SettlementInfoWrap
settlementInfo={ settlementInfo } settlementInfo={ settlementInfo }
isOpen={ showSettlement } isOpen={ showSettlement }
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) } onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
></SettlementInfoWrap> ></SettlementInfoWrap>
} }
{ (periodType === SettlementPeriodType.TRANSACTION_DATE) && { (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
<TransactionInfoWrap <TransactionInfoWrap
transactionInfo={ transactionInfo } transactionInfo={ transactionInfo }
isOpen={ showTransaction } isOpen={ showTransaction }
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) } onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
></TransactionInfoWrap> ></TransactionInfoWrap>
} }
</div>
</div> </div>
</div> </div>
</div> </div>

10
src/entities/support/ui/detail/faq-detail.tsx
View File

@@ -56,12 +56,10 @@ export const FaqDetail = ({
></FullMenuClose> ></FullMenuClose>
</div> </div>
</div> </div>
<div className="tab-pane sub active"> <div className="faq-detail">
<div className="faq-detail"> <div className="faq-detail__title">{ title }</div>
<div className="faq-detail__title">{ title }</div> <div className="faq-detail__divider"></div>
<div className="faq-detail__divider"></div> <div className="faq-detail__body" dangerouslySetInnerHTML={{ __html: contents || '' }}></div>
<div className="faq-detail__body" dangerouslySetInnerHTML={{ __html: contents || '' }}></div>
</div>
</div> </div>
</div> </div>
} }

14
src/entities/support/ui/detail/notice-detail.tsx
View File

@@ -62,14 +62,12 @@ export const NoticeDetail = ({
></FullMenuClose> ></FullMenuClose>
</div> </div>
</div> </div>
<div className="tab-pane sub active"> <div className="option-list">
<div className="option-list"> <div className="notice-detail">
<div className="notice-detail"> <div className="notice-detail__title">{ result.title }</div>
<div className="notice-detail__title">{ result.title }</div> <div className="notice-detail__meta">{ result.regDt? moment(result.regDt).format('YYYY.MM.DD'): '' } | { t(`support.notice.categories.${result.informCl}`) }</div>
<div className="notice-detail__meta">{ result.regDt? moment(result.regDt).format('YYYY.MM.DD'): '' } | { t(`support.notice.categories.${result.informCl}`) }</div> <div className="notice-detail__divider"></div>
<div className="notice-detail__divider"></div> <div className="notice-detail__body" dangerouslySetInnerHTML={{ __html: result.contents || '' }}></div>
<div className="notice-detail__body" dangerouslySetInnerHTML={{ __html: result.contents || '' }}></div>
</div>
</div> </div>
</div> </div>
</div> </div>

50
src/entities/support/ui/detail/qna-detail.tsx
View File

@@ -63,35 +63,33 @@ export const QnaDetail = ({
></FullMenuClose> ></FullMenuClose>
</div> </div>
</div> </div>
<div className="tab-pane active"> <div className="inq-detail">
<div className="inq-detail"> <div className="inq-detail__head">
<div className="inq-detail__head"> <div className="inq-detail__row">
<div className="inq-detail__row"> <span className="inq-badge">{t('support.qna.detailLabels.title')}</span>
<span className="inq-badge">{t('support.qna.detailLabels.title')}</span> <span className="inq-head-text bold">{ result?.title }</span>
<span className="inq-head-text bold">{ result?.title }</span>
</div>
<div className="inq-detail__row">
<span className="inq-badge">{t('support.qna.detailLabels.type')}</span>
<span className="inq-head-text">{ result?.requestType? t(`support.qna.categories.${result?.requestType}`): '' }</span>
</div>
<div className="inq-detail__row">
<span className="inq-badge">{t('support.qna.detailLabels.registrationDate')}</span>
<span className="inq-head-text">{ result?.requestDate? moment(result?.requestDate).format('YYYY.MM.DD'): '' }</span>
</div>
<div className="inq-detail__row">
<span className="inq-badge">{t('support.qna.detailLabels.answerDate')}</span>
<span className="inq-head-text">{ result?.answerDate? moment(result?.answerDate).format('YYYY.MM.DD'): '' }</span>
</div>
</div> </div>
<div className="inq-detail__divider"></div> <div className="inq-detail__row">
<div className="inq-detail__section"> <span className="inq-badge">{t('support.qna.detailLabels.type')}</span>
<div className="inq-detail__section-title">{t('support.qna.detailLabels.inquiryAnswer')}</div> <span className="inq-head-text">{ result?.requestType? t(`support.qna.categories.${result?.requestType}`): '' }</span>
<div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: result?.answer || '' }}></div>
</div> </div>
<div className="inq-detail__section"> <div className="inq-detail__row">
<div className="inq-detail__section-title">{t('support.qna.detailLabels.inquiryContents')}</div> <span className="inq-badge">{t('support.qna.detailLabels.registrationDate')}</span>
<div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: result?.contents || '' }}></div> <span className="inq-head-text">{ result?.requestDate? moment(result?.requestDate).format('YYYY.MM.DD'): '' }</span>
</div> </div>
<div className="inq-detail__row">
<span className="inq-badge">{t('support.qna.detailLabels.answerDate')}</span>
<span className="inq-head-text">{ result?.answerDate? moment(result?.answerDate).format('YYYY.MM.DD'): '' }</span>
</div>
</div>
<div className="inq-detail__divider"></div>
<div className="inq-detail__section">
<div className="inq-detail__section-title">{t('support.qna.detailLabels.inquiryAnswer')}</div>
<div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: result?.answer || '' }}></div>
</div>
<div className="inq-detail__section">
<div className="inq-detail__section-title">{t('support.qna.detailLabels.inquiryContents')}</div>
<div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: result?.contents || '' }}></div>
</div> </div>
</div> </div>
</div> </div>

131
src/entities/transaction/ui/detail/all-transaction-detail.tsx
View File

@@ -157,72 +157,71 @@ export const AllTransactionDetail = ({
></FullMenuClose> ></FullMenuClose>
</div> </div>
</div> </div>
<div className="tab-pane sub active">
<div className="option-list pb-86"> <div className="option-list pb-86">
<div className="txn-detail"> <div className="txn-detail">
<AmountInfoSection <AmountInfoSection
transactionCategory={ TransactionCategory.AllTransaction } transactionCategory={ TransactionCategory.AllTransaction }
amountInfo={ amountInfo } amountInfo={ amountInfo }
isOpen={ showAmountInfo } isOpen={ showAmountInfo }
tid={ tid } tid={ tid }
serviceCode={ serviceCode } serviceCode={ serviceCode }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) } onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></AmountInfoSection> ></AmountInfoSection>
<div className="txn-divider minus"></div> <div className="txn-divider minus"></div>
<ImportantInfoSection <ImportantInfoSection
transactionCategory={ TransactionCategory.AllTransaction } transactionCategory={ TransactionCategory.AllTransaction }
importantInfo={ importantInfo } importantInfo={ importantInfo }
serviceCode={ serviceCode } serviceCode={ serviceCode }
></ImportantInfoSection> ></ImportantInfoSection>
{ !!paymentInfo && { !!paymentInfo &&
<> <>
<div className="txn-divider"></div> <div className="txn-divider"></div>
<PaymentInfoSection <PaymentInfoSection
transactionCategory={ TransactionCategory.AllTransaction } transactionCategory={ TransactionCategory.AllTransaction }
paymentInfo={ paymentInfo } paymentInfo={ paymentInfo }
serviceCode={ serviceCode } serviceCode={ serviceCode }
isOpen={ showPaymentInfo } isOpen={ showPaymentInfo }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) } onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></PaymentInfoSection> ></PaymentInfoSection>
</> </>
} }
{ !!transactionInfo && { !!transactionInfo &&
<> <>
<div className="txn-divider"></div> <div className="txn-divider"></div>
<TransactionInfoSection <TransactionInfoSection
transactionCategory={ TransactionCategory.AllTransaction } transactionCategory={ TransactionCategory.AllTransaction }
transactionInfo={ transactionInfo } transactionInfo={ transactionInfo }
serviceCode={ serviceCode } serviceCode={ serviceCode }
isOpen={ showTransactionInfo } isOpen={ showTransactionInfo }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) } onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></TransactionInfoSection> ></TransactionInfoSection>
</> </>
} }
{ !!settlementInfo && { !!settlementInfo &&
<> <>
<div className="txn-divider"></div> <div className="txn-divider"></div>
<SettlementInfoSection <SettlementInfoSection
transactionCategory={ TransactionCategory.AllTransaction } transactionCategory={ TransactionCategory.AllTransaction }
settlementInfo={ settlementInfo } settlementInfo={ settlementInfo }
serviceCode={ serviceCode } serviceCode={ serviceCode }
isOpen={ showSettlementInfo } isOpen={ showSettlementInfo }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) } onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></SettlementInfoSection> ></SettlementInfoSection>
</> </>
} }
{ !!partCancelInfo && { !!partCancelInfo &&
<> <>
<div className="txn-divider"></div> <div className="txn-divider"></div>
<PartCancelInfoSection <PartCancelInfoSection
transactionCategory={ TransactionCategory.AllTransaction } transactionCategory={ TransactionCategory.AllTransaction }
partCancelInfo={ partCancelInfo } partCancelInfo={ partCancelInfo }
serviceCode={ serviceCode } serviceCode={ serviceCode }
isOpen={ showPartCancelInfo } isOpen={ showPartCancelInfo }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) } onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></PartCancelInfoSection> ></PartCancelInfoSection>
</> </>
} }
</div>
</div> </div>
</div> </div>
</div> </div>

42
src/entities/transaction/ui/detail/billing-detail.tsx
View File

@@ -73,31 +73,29 @@ export const BillingDetail = ({
></FullMenuClose> ></FullMenuClose>
</div> </div>
</div> </div>
<div className="tab-pane sub active"> <div className="option-list">
<div className="option-list"> <div className="txn-detail">
<div className="txn-detail"> <div className="txn-num-group">
<div className="txn-num-group"> <div className="txn-amount">
<div className="txn-amount"> <div className="value">
<div className="value"> { i18n.language === 'en' && <span className="unit">{ t('home.currencySymbol') }</span> }
{ i18n.language === 'en' && <span className="unit">{ t('home.currencySymbol') }</span> } <NumericFormat
<NumericFormat value={ amountInfo?.transactionAmount }
value={ amountInfo?.transactionAmount } thousandSeparator
thousandSeparator displayType="text"
displayType="text" ></NumericFormat>
></NumericFormat> { i18n.language !== 'en' && <span className="unit">{ t('home.currencyWon') }</span> }
{ i18n.language !== 'en' && <span className="unit">{ t('home.currencyWon') }</span> }
</div>
</div> </div>
<div className="txn-mid">
<span className="value">{ amountInfo?.buyerName }</span>
</div>
<div className="txn-doc"></div>
</div> </div>
<div className="txn-divider"></div> <div className="txn-mid">
<BillingInfoSection <span className="value">{ amountInfo?.buyerName }</span>
billingInfo={ billingInfo } </div>
></BillingInfoSection> <div className="txn-doc"></div>
</div> </div>
<div className="txn-divider"></div>
<BillingInfoSection
billingInfo={ billingInfo }
></BillingInfoSection>
</div> </div>
</div> </div>
</div> </div>

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

@@ -128,44 +128,42 @@ export const CashReceiptDetail = ({
></FullMenuClose> ></FullMenuClose>
</div> </div>
</div> </div>
<div className="tab-pane sub active"> <div className={ `option-list ${(detailInfo?.canDownloadReceipt)? 'pb-86': ''}` }>
<div className={ `option-list ${(detailInfo?.canDownloadReceipt)? 'pb-86': ''}` }> <div className="txn-detail">
<div className="txn-detail"> <AmountInfoSection
<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 } transactionCategory={ TransactionCategory.CashReceipt }
amountInfo={ amountInfo } detailInfo={ detailInfo }
isOpen={ showAmountInfo } isOpen={ showDetailInfo }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) } onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
purposeType={ purposeType } ></DetailInfoSection>
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> </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>
{ (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> </motion.div>
<CashReceitPurposeUpdateBottomSheet <CashReceitPurposeUpdateBottomSheet

100
src/entities/transaction/ui/detail/escrow-detail.tsx
View File

@@ -152,57 +152,55 @@ export const EscrowDetail = ({
></FullMenuClose> ></FullMenuClose>
</div> </div>
</div> </div>
<div className="tab-pane sub active"> <div className="option-list">
<div className="option-list"> <div className="txn-detail">
<div className="txn-detail"> <AmountInfoSection
<AmountInfoSection transactionCategory={ TransactionCategory.Escrow }
transactionCategory={ TransactionCategory.Escrow } amountInfo={ amountInfo }
amountInfo={ amountInfo } isOpen={ showAmountInfo }
isOpen={ showAmountInfo } tid={ tid }
tid={ tid } serviceCode={ serviceCode }
serviceCode={ serviceCode } onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) } ></AmountInfoSection>
></AmountInfoSection> <div className="txn-divider minus"></div>
<div className="txn-divider minus"></div> <ImportantInfoSection
<ImportantInfoSection transactionCategory={ TransactionCategory.Escrow }
transactionCategory={ TransactionCategory.Escrow } importantInfo={ importantInfo }
importantInfo={ importantInfo } ></ImportantInfoSection>
></ImportantInfoSection> <div className="txn-divider minus"></div>
<div className="txn-divider minus"></div> <EscrowInfoSection
<EscrowInfoSection escrowInfo={ escrowInfo }
escrowInfo={ escrowInfo } isOpen={ showEscroInfo }
isOpen={ showEscroInfo } onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) } ></EscrowInfoSection>
></EscrowInfoSection> <div className="txn-divider minus"></div>
<div className="txn-divider minus"></div> <PaymentInfoSection
<PaymentInfoSection transactionCategory={ TransactionCategory.Escrow }
transactionCategory={ TransactionCategory.Escrow } paymentInfo={ paymentInfo }
paymentInfo={ paymentInfo } isOpen={ showPaymentInfo }
isOpen={ showPaymentInfo } serviceCode={ serviceCode }
serviceCode={ serviceCode } onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) } ></PaymentInfoSection>
></PaymentInfoSection> <div className="txn-divider"></div>
<div className="txn-divider"></div> <TransactionInfoSection
<TransactionInfoSection transactionCategory={ TransactionCategory.Escrow }
transactionCategory={ TransactionCategory.Escrow } transactionInfo={ transactionInfo }
transactionInfo={ transactionInfo } isOpen={ showTransactionInfo }
isOpen={ showTransactionInfo } onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) } ></TransactionInfoSection>
></TransactionInfoSection> <div className="txn-divider"></div>
<div className="txn-divider"></div> <SettlementInfoSection
<SettlementInfoSection transactionCategory={ TransactionCategory.Escrow }
transactionCategory={ TransactionCategory.Escrow } settlementInfo={ settlementInfo }
settlementInfo={ settlementInfo } isOpen={ showSettlementInfo }
isOpen={ showSettlementInfo } onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) } ></SettlementInfoSection>
></SettlementInfoSection> <div className="txn-divider"></div>
<div className="txn-divider"></div> <MerchantInfoSection
<MerchantInfoSection merchantInfo={ merchantInfo }
merchantInfo={ merchantInfo } isOpen={ showMerchantInfo }
isOpen={ showMerchantInfo } onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) } ></MerchantInfoSection>
></MerchantInfoSection>
</div>
</div> </div>
</div> </div>
</div> </div>

36
src/entities/vat-return/ui/detail/tax-invoice-detail.tsx
View File

@@ -117,25 +117,23 @@ export const TaxInvoiceDetail = ({
></FullMenuClose> ></FullMenuClose>
</div> </div>
</div> </div>
<div className="tab-pane sub active"> <div className="option-list">
<div className="option-list"> <div className="txn-detail">
<div className="txn-detail"> <AmountSection
<AmountSection detail={ detail }
detail={ detail } ></AmountSection>
></AmountSection> <div className="txn-divider minus"></div>
<div className="txn-divider minus"></div> <IssueSection
<IssueSection detail={ detail }
detail={ detail } ></IssueSection>
></IssueSection> <div className="txn-divider minus"></div>
<div className="txn-divider minus"></div> <ReceiverSection
<ReceiverSection detail={ detail }
detail={ detail } ></ReceiverSection>
></ReceiverSection> <div className="txn-divider"></div>
<div className="txn-divider"></div> <SupplierSection
<SupplierSection detail={ detail }
detail={ detail } ></SupplierSection>
></SupplierSection>
</div>
</div> </div>
</div> </div>
</div> </div>

213
src/pages/transaction/all-transaction/detail-page.tsx
View File

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

4
src/pages/transaction/all-transaction/list-page.tsx
View File

@@ -33,7 +33,11 @@ import useIntersectionObserver from '@/widgets/intersection-observer';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { AllTransactionDetail } from '@/entities/transaction/ui/detail/all-transaction-detail'; import { AllTransactionDetail } from '@/entities/transaction/ui/detail/all-transaction-detail';
/* 거래내역조회 31 */
export const AllTransactionListPage = () => { export const AllTransactionListPage = () => {
const menuGrantsByKey = useStore.getState().UserStore.menuGrantsByKey;
const myGrants = menuGrantsByKey['31'];
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t, i18n } = useTranslation(); const { t, i18n } = useTranslation();
const userMid = useStore.getState().UserStore.mid; const userMid = useStore.getState().UserStore.mid;