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-10-28 17:32:35 +09:00
parent 52516f2427
commit 7fa26cce00
15 changed files with 684 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/providers/app-provider.tsx
View File

@@ -17,7 +17,7 @@ export const AppProvider = ({
return (
<GlobalErrorBoundary>
<RecoilRoot>
<QueryClientProvider client={getGlobalQueryClient()}>
<QueryClientProvider client={ getGlobalQueryClient() }>
<Suspense fallback={<Splash />}>
<CookiesProvider>{children}</CookiesProvider>
{/* <ReactQueryDevtools /> */}

49
src/entities/transaction/model/types.ts
View File

@@ -342,6 +342,25 @@ export interface AmountInfo {
vat?: number;
serviceAmount?: number;
taxFreeAmount?: number;
approvalNo?: string;
candNo?: string;
installmentMonth?: string;
authentication?: string;
purchaseCompany?: string;
approvalVAN?: string;
approvalPurchase?: string | null;
approvalRejectCount?: string;
approvalRepurchaseCount?: string;
cancelPurchase?: string | null;
cancelRejectCount?: string;
cancelRepurchaseCount?: string;
purchaseVan?: string;
approvalRequestAmount?: number;
cardAmount?: number;
discountType?: string | null;
discountAmount?: number;
simplePaymentServiceCode?: string;
};
export interface ImportantInfo {
moid?: string;
@@ -351,12 +370,15 @@ export interface ImportantInfo {
serviceCode?: string;
serviceName?: string;
approvalDate?: string;
approvalTime?: string;
transactionDate?: string;
requestDate?: string;
cancelDate?: string;
goodsName?: string;
orderNumber?: string;
paymentMethod?: string;
productName?: string;
};
export interface PaymentInfo {
approvalAcquire?: string;
@@ -393,10 +415,37 @@ export interface PaymentInfo {
culturelandId?: string;
paymentAmount?: number;
approvalNo?: string;
cardNo?: string;
installmentMonth?: string;
purchaseCompany?: string;
approvalPurchase?: string | null;
approvalRejectCount?: string;
approvalRepurchaseCount?: string;
cancelPurchase?: string | null;
cancelRejectCount?: string;
cancelRepurchaseCount?: string;
purchaseVan?: string;
approvalRequestAmount?: number;
cardAmount?: number;
discountType?: string | null;
discountAmount?: number;
simplePaymentServiceCode?: string;
joinType?: string;
accountNo?: string;
escrowFee?: number;
virtualAccountNo?: string;
refundAccountNo?: string;
transactionRequestAmount?: number;
transactionAmount?: number;
};
export interface TransactionInfo {
buyerName?: string;
email?: string;
buyerEmail?: string;
buyerTel?: string;
phoneNumber?: string;
cancelReason?: string;
cancelRequestor?: string;

32
src/entities/transaction/ui/all-transaction-all-cancel.tsx
View File

@@ -2,6 +2,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
import { AllTransactionCancelInfoResponse } from '../model/types';
import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group';
import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group';
import { NumericFormat } from 'react-number-format';
export interface AllTransactionAllCancelProps extends AllTransactionCancelInfoResponse {
serviceCode: string;
@@ -13,6 +14,8 @@ export interface AllTransactionAllCancelProps extends AllTransactionCancelInfoRe
setAccountNo?: (accountNo: string) => void;
accountHolder?: string;
setAccountHolder?: (accountHolder: string) => void;
requestSuccess: boolean;
totalCancelAmount: number;
};
export const AllTransactionAllCancel = ({
@@ -38,14 +41,41 @@ export const AllTransactionAllCancel = ({
accountNo,
setAccountNo,
accountHolder,
setAccountHolder
setAccountHolder,
requestSuccess,
totalCancelAmount
}: AllTransactionAllCancelProps) => {
return (
<>
<div className="amount-info">
<ul className="amount-list">
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;총 잔액</span>
<span className="value">
<NumericFormat
value={ remainAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;총 취소금액</span>
<span className="value">
<NumericFormat
value={ totalCancelAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
</ul>
</div>
<div className="form-section">
<AllTransactionCancelSectionPasswordGroup
cancelPassword={ cancelPassword }
setCancelPassword={ setCancelPassword }
requestSuccess={ requestSuccess }
></AllTransactionCancelSectionPasswordGroup>
{ serviceCode === '03' &&
<AllTransactionCancelSectionBankGroup

79
src/entities/transaction/ui/all-transaction-cancel-prevent-bond.tsx
View File

@@ -1,20 +1,51 @@
import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion';
import { DebtPreventionCancelDisplayInfo } from '../model/types';
import { useState } from 'react';
import moment from 'moment';
import { NumericFormat } from 'react-number-format';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
import { useNavigate } from '@/shared/lib/hooks';
import { PATHS } from '@/shared/constants/paths';
export interface AllTransactionCancelPreventBondProps {
cancelPreventBondOn: boolean;
setCancelPreventBondOn: (cancelPreventBondOn: boolean) => void;
debtPreventionCancelDisplayInfo?: DebtPreventionCancelDisplayInfo | null;
serviceCode: string;
tid: string;
};
export const AllTransactionCancelPreventBond = ({
cancelPreventBondOn,
setCancelPreventBondOn
setCancelPreventBondOn,
debtPreventionCancelDisplayInfo,
serviceCode,
tid
}: AllTransactionCancelPreventBondProps) => {
const { navigate } = useNavigate();
const [item, setItem] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(debtPreventionCancelDisplayInfo);
const onClickToClose = () => {
setCancelPreventBondOn(false);
navigate(PATHS.transaction.allTransaction.detail, {
state: {
serviceCode: serviceCode,
tid: tid
}
});
};
const callTransactionCancel = () => {
};
return (
<>
<motion.div>
<motion.div
className="full-menu-modal"
initial="hidden"
animate={ (cancelPreventBondOn)? 'visible': 'hidden' }
variants={ FilterMotionVariants }
transition={ FilterMotionDuration }
style={ FilterMotionStyle }
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title center">거래취소(입금 후 취소)</div>
@@ -26,7 +57,7 @@ export const AllTransactionCancelPreventBond = ({
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기"
onClick={ () => onClickToClose() }
onClick={ onClickToClose }
/>
</button>
</div>
@@ -39,23 +70,41 @@ export const AllTransactionCancelPreventBond = ({
<ul className="kv-list">
<li className="kv-row">
<div className="k">· 승인일</div>
<div className="v">2025/10/10</div>
<div className="v">{ item?.approvalDate? moment(item?.approvalDate).format('YYYY.MM.DD'): '' }</div>
</li>
<li className="kv-row">
<div className="k">· 승인번호</div>
<div className="v">00259163</div>
<div className="v">{ item?.approvalNo }</div>
</li>
<li className="kv-row">
<div className="k">· 승인금액</div>
<div className="v">1,004</div>
<div className="v">
<NumericFormat
value={ item?.amount }
thousandSeparator
displayType="text"
></NumericFormat>
</div>
</li>
<li className="kv-row">
<div className="k">· 총 취소금액</div>
<div className="v">204</div>
<div className="v">
<NumericFormat
value={ item?.totalCancelAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</div>
</li>
<li className="kv-row">
<div className="k red">· 입금요청금액 :</div>
<div className="v red">200</div>
<div className="v red">
<NumericFormat
value={ item?.depositRequestAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</div>
</li>
</ul>
</div>
@@ -65,15 +114,15 @@ export const AllTransactionCancelPreventBond = ({
<ul className="kv-list">
<li className="kv-row">
<div className="k">· 은행</div>
<div className="v">신한은행</div>
<div className="v">{ item?.bankName }</div>
</li>
<li className="kv-row">
<div className="k">· 계좌번호</div>
<div className="v">140-012-733704</div>
<div className="v">{ item?.accountNo }</div>
</li>
<li className="kv-row">
<div className="k">· 예금주</div>
<div className="v">나이스정보통신(주)</div>
<div className="v">{ item?.accountName }</div>
</li>
</ul>
</div>
@@ -86,8 +135,14 @@ export const AllTransactionCancelPreventBond = ({
<div className="desc dot">입금 후 취소 프로세스 :<br />가맹점의 취소요청 -&gt; 가맹점의입금 -&gt; 입금 확인 -&gt; 취소 처리</div>
<div className="desc dot">정산받지 않은 거래인 경우 <span className="link-blue">service@nicepay.co.kr</span>로 거래내역을 발송바랍니다. (단. 정산예정일이 2일 이상 남은 거래에 한함)</div>
</div>
</div>
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => callTransactionCancel() }
>신청</button>
</div>
</motion.div>
</>

166
src/entities/transaction/ui/all-transaction-part-cancel.tsx
View File

@@ -1,10 +1,8 @@
import { IMAGE_ROOT } from '@/shared/constants/common';
import { ChangeEvent, useEffect, useState } from 'react';
import { AllTransactionCancelInfoResponse } from '../model/types';
import { NumericFormat } from 'react-number-format';
import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group';
import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group';
import { BankCode } from '@/shared/@types/banking-code';
import { ChangeEvent, useEffect, useState } from 'react';
export interface AllTransactionPartCancelProps extends AllTransactionCancelInfoResponse {
serviceCode: string;
@@ -24,6 +22,9 @@ export interface AllTransactionPartCancelProps extends AllTransactionCancelInfoR
setCancelTaxFreeAmount: (cancelTaxFreeAmount: number) => void;
cancelServiceAmount: number;
setCancelServiceAmount: (cancelServiceAmount: number) => void;
requestSuccess: boolean;
totalCancelAmount: number;
setTotalCancelAmount: (totalCancelAmount: number) => void;
};
export const AllTransactionPartCancel = ({
@@ -57,12 +58,153 @@ export const AllTransactionPartCancel = ({
cancelTaxFreeAmount,
setCancelTaxFreeAmount,
cancelServiceAmount,
setCancelServiceAmount
setCancelServiceAmount,
requestSuccess,
totalCancelAmount,
setTotalCancelAmount
}: AllTransactionPartCancelProps) => {
const [cancelTotalCancelAmountReadonly, setCancelTotalCancelAmountReadonly] = useState<boolean>(true);
const [cancelSupplyAmountDisabled, setCancelSupplyAmountDisabled] = useState<boolean>(false);
const [cancelGoodsVatDisabled, setCancelGoodsVatDisabled] = useState<boolean>(false);
const [cancelTaxFreeAmountDisabled, setCancelTaxFreeAmountDisabled] = useState<boolean>(false);
const [cancelServiceAmountDisabled, setCancelServiceAmountDisabled] = useState<boolean>(false);
const init = () => {
if((isConditionalVatAutoCalcMerchant || isVatAutoCalcMerchant) && vatAutoCalcSummary === 0){
setCancelTotalCancelAmountReadonly(false);
}
if(remainAmount === 0){
setCancelSupplyAmountDisabled(true);
}
else{
if(isConditionalVatAutoCalcMerchant){
setCancelSupplyAmountDisabled(true);
}
else{
setCancelSupplyAmountDisabled(false);
}
}
if(goodsVat === 0){
setCancelGoodsVatDisabled(true);
}
else{
if(isConditionalVatAutoCalcMerchant){
setCancelGoodsVatDisabled(true);
}
else{
setCancelGoodsVatDisabled(false);
}
}
if(taxFreeAmount === 0){
setCancelTaxFreeAmountDisabled(true);
}
else{
if(isConditionalVatAutoCalcMerchant){
setCancelTaxFreeAmountDisabled(true);
}
else{
setCancelTaxFreeAmountDisabled(false);
}
}
if(serviceAmount === 0){
setCancelServiceAmountDisabled(true);
}
else{
if(isConditionalVatAutoCalcMerchant){
setCancelServiceAmountDisabled(true);
}
else{
setCancelServiceAmountDisabled(false);
}
}
};
const onChangeToTotalCancelAmount = (val: number) => {
setTotalCancelAmount(val);
if(isVatAutoCalcMerchant){
if(isVatDisplayed){
let cancelSupplyAmountVal = val;
let cancelGoodsVatVal = 0;
setCancelSupplyAmount(cancelSupplyAmountVal);
setCancelGoodsVat(cancelGoodsVatVal);
}
else{
let cancelSupplyAmountVal = Math.round(val / 1.1);
let cancelGoodsVatVal = val - cancelSupplyAmountVal;
setCancelSupplyAmount(cancelSupplyAmountVal);
setCancelGoodsVat(cancelGoodsVatVal);
}
}
else{
let cancelSupplyAmountVal = Math.round(val / 1.1);
let cancelGoodsVatVal = val - cancelSupplyAmountVal;
setCancelSupplyAmount(cancelSupplyAmountVal);
setCancelGoodsVat(cancelGoodsVatVal);
}
};
const onChangeCancelSupplyAmount = (val: number) => {
setCancelSupplyAmount(val);
if((isConditionalVatAutoCalcMerchant || isVatAutoCalcMerchant) && vatAutoCalcSummary === 0){
setTotalCancelAmount(val + cancelGoodsVat + cancelTaxFreeAmount + cancelServiceAmount);
}
};
const onChangeCancelGoodsVat = (val: number) => {
setCancelGoodsVat(val);
if((isConditionalVatAutoCalcMerchant || isVatAutoCalcMerchant) && vatAutoCalcSummary === 0){
setTotalCancelAmount(cancelSupplyAmount + val + cancelTaxFreeAmount + cancelServiceAmount);
}
};
const onChangeCancelTaxFreeAmount = (val: number) => {
setCancelTaxFreeAmount(val);
if((isConditionalVatAutoCalcMerchant || isVatAutoCalcMerchant) && vatAutoCalcSummary === 0){
setTotalCancelAmount(cancelSupplyAmount + cancelGoodsVat + val + cancelServiceAmount);
}
};
const onChangeCancelServiceAmount = (val: number) => {
setCancelServiceAmount(val);
if((isConditionalVatAutoCalcMerchant || isVatAutoCalcMerchant) && vatAutoCalcSummary === 0){
setTotalCancelAmount(cancelSupplyAmount + cancelGoodsVat + cancelTaxFreeAmount + val);
}
};
useEffect(() => {
init();
});
return (
<>
<div className="amount-info">
<ul className="amount-list">
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;총 잔액</span>
<span className="value">
<NumericFormat
value={ remainAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;총 취소금액</span>
<span className="value">
<NumericFormat
value={ totalCancelAmount }
thousandSeparator
displayType="input"
allowNegative={ false }
max={ remainAmount }
readOnly={ cancelTotalCancelAmountReadonly }
onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeToTotalCancelAmount(parseInt(e.target.value)) }
></NumericFormat>
</span>
</li>
</ul>
</div>
{ !!isCompoundTax &&
<div className="tb_both">
<table className="partial-cancel-table">
@@ -94,7 +236,8 @@ export const AllTransactionPartCancel = ({
value={ cancelSupplyAmount }
allowNegative={ false }
displayType="input"
onChange={(e: ChangeEvent<HTMLInputElement>) => setCancelServiceAmount(parseInt(e.target.value)) }
disabled={ cancelSupplyAmountDisabled }
onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeCancelSupplyAmount(parseInt(e.target.value)) }
></NumericFormat>
</td>
</tr>
@@ -113,7 +256,8 @@ export const AllTransactionPartCancel = ({
value={ cancelGoodsVat }
allowNegative={ false }
displayType="input"
onChange={(e: ChangeEvent<HTMLInputElement>) => setCancelGoodsVat(parseInt(e.target.value)) }
disabled={ cancelGoodsVatDisabled }
onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeCancelGoodsVat(parseInt(e.target.value)) }
></NumericFormat>
</td>
</tr>
@@ -132,7 +276,8 @@ export const AllTransactionPartCancel = ({
value={ cancelTaxFreeAmount }
allowNegative={ false }
displayType="input"
onChange={(e: ChangeEvent<HTMLInputElement>) => setCancelTaxFreeAmount(parseInt(e.target.value)) }
disabled={ cancelTaxFreeAmountDisabled }
onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeCancelTaxFreeAmount(parseInt(e.target.value)) }
></NumericFormat>
</td>
</tr>
@@ -151,7 +296,8 @@ export const AllTransactionPartCancel = ({
value={ cancelServiceAmount }
allowNegative={ false }
displayType="input"
onChange={(e: ChangeEvent<HTMLInputElement>) => setCancelServiceAmount(parseInt(e.target.value)) }
disabled={ cancelServiceAmountDisabled }
onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeCancelServiceAmount(parseInt(e.target.value)) }
></NumericFormat>
</td>
</tr>
@@ -159,11 +305,11 @@ export const AllTransactionPartCancel = ({
</table>
</div>
}
<div className="form-section">
<AllTransactionCancelSectionPasswordGroup
cancelPassword={ cancelPassword }
setCancelPassword={ setCancelPassword }
requestSuccess={ requestSuccess }
></AllTransactionCancelSectionPasswordGroup>
{ serviceCode === '03' &&
<AllTransactionCancelSectionBankGroup

13
src/entities/transaction/ui/section/all-transaction-cancel-section-password-group.tsx
View File

@@ -3,17 +3,20 @@ import { ChangeEvent, useState } from "react";
export interface AllTransactionCancelSectionPasswordGroupProps {
cancelPassword: string;
setCancelPassword: (cancelPassword: string) => void;
requestSuccess: boolean;
};
export const AllTransactionCancelSectionPasswordGroup = ({
cancelPassword,
setCancelPassword
setCancelPassword,
requestSuccess
}: AllTransactionCancelSectionPasswordGroupProps) => {
const [newCancelPassword, setNewCancelPassword] = useState<string>(cancelPassword);
const onChangeNewCancelPassword = (value: string) => {
setCancelPassword(value);
setNewCancelPassword(value);
};
return (
<>
@@ -28,9 +31,9 @@ export const AllTransactionCancelSectionPasswordGroup = ({
/>
</div>
</div>
{/*
<div className="error-msg">비밀번호 불일치</div>
*/}
{ !requestSuccess &&
<div className="error-msg">비밀번호 불일치</div>
}
</>
);
}

187
src/entities/transaction/ui/section/amount-info-section.tsx
View File

@@ -17,7 +17,6 @@ export const AmountInfoSection = ({
}: InfoSectionProps) => {
const { mutateAsync: downloadConfirmation } = useDownloadConfirmationMutation();
let newAmountInfo: Record<string, any> | undefined = amountInfo;
const subItems: Record<string, Record<string, string>> = {
mid: {name: 'MID', type: 'string'},
transactionRequestAmount: {name: '거래요청금액', type: 'number'},
@@ -279,7 +278,7 @@ export const AmountInfoSection = ({
<span className="label">·&nbsp;&nbsp;거래금액</span>
<span className="value">
<NumericFormat
value={ amountInfo?.supplyAmount }
value={ amountInfo?.transactionAmount }
thousandSeparator
displayType="text"
></NumericFormat>
@@ -292,7 +291,7 @@ export const AmountInfoSection = ({
<span className="label">·&nbsp;&nbsp;신용카드금액</span>
<span className="value">
<NumericFormat
value={ amountInfo?.supplyAmount }
value={ amountInfo?.cardAmount }
thousandSeparator
displayType="text"
></NumericFormat>
@@ -302,7 +301,7 @@ export const AmountInfoSection = ({
<span className="label">·&nbsp;&nbsp;포인트금액</span>
<span className="value">
<NumericFormat
value={ amountInfo?.supplyAmount }
value={ amountInfo?.pointAmount }
thousandSeparator
displayType="text"
></NumericFormat>
@@ -312,7 +311,7 @@ export const AmountInfoSection = ({
<span className="label">·&nbsp;&nbsp;쿠폰금액</span>
<span className="value">
<NumericFormat
value={ amountInfo?.supplyAmount }
value={ amountInfo?.couponAmount }
thousandSeparator
displayType="text"
></NumericFormat>
@@ -320,12 +319,12 @@ export const AmountInfoSection = ({
</li>
</>
}
{ (serviceCode === '02' || serviceCode === '03') &&
{ (serviceCode === '01' || serviceCode === '02') &&
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;에스크로수수료</span>
<span className="value">
<NumericFormat
value={ amountInfo?.supplyAmount }
value={ amountInfo?.escrowFee }
thousandSeparator
displayType="text"
></NumericFormat>
@@ -334,86 +333,100 @@ export const AmountInfoSection = ({
}
{ (serviceCode === '01') &&
<>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;카카오머니</span>
<span className="value">
<NumericFormat
value={ amountInfo?.supplyAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;카카오포인트</span>
<span className="value">
<NumericFormat
value={ amountInfo?.supplyAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;카카오즉시할인</span>
<span className="value">
<NumericFormat
value={ amountInfo?.supplyAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;네이버포인트</span>
<span className="value">
<NumericFormat
value={ amountInfo?.supplyAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;토스머니</span>
<span className="value">
<NumericFormat
value={ amountInfo?.supplyAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;토스할인</span>
<span className="value">
<NumericFormat
value={ amountInfo?.supplyAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;페이코포인트</span>
<span className="value">
<NumericFormat
value={ amountInfo?.supplyAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;페이코쿠폰</span>
<span className="value">
<NumericFormat
value={ amountInfo?.supplyAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
{ (amountInfo?.simplePaymentServiceCode === 'E016') &&
<>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;카카오머니</span>
<span className="value">
<NumericFormat
value={ amountInfo?.multiPointAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;카카오포인트</span>
<span className="value">
<NumericFormat
value={ amountInfo?.multiCouponAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;카카오즉시할인</span>
<span className="value">
<NumericFormat
value={ amountInfo?.supplyAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
</>
}
{ (amountInfo?.simplePaymentServiceCode === 'E020') &&
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;네이버포인트</span>
<span className="value">
<NumericFormat
value={ amountInfo?.multiPointAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
}
{ (amountInfo?.simplePaymentServiceCode === 'E025') &&
<>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;토스머니</span>
<span className="value">
<NumericFormat
value={ amountInfo?.multiPointAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;토스할인</span>
<span className="value">
<NumericFormat
value={ amountInfo?.supplyAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
</>
}
{ (amountInfo?.simplePaymentServiceCode === 'E015') &&
<>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;페이코포인트</span>
<span className="value">
<NumericFormat
value={ amountInfo?.multiPointAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;페이코쿠폰</span>
<span className="value">
<NumericFormat
value={ amountInfo?.multiCouponAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
</>
}
</>
}
</>

8
src/entities/transaction/ui/section/escrow-info-section.tsx
View File

@@ -23,7 +23,7 @@ export const EscrowInfoSection = ({
className="section-title with-toggle"
onClick={ () => onClickToSetOpenInfo() }
>
정산 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
에스크로 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div>
<SlideDown className={'my-dropdown-slidedown'}>
{ !!isOpen &&
@@ -34,15 +34,15 @@ export const EscrowInfoSection = ({
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;배송등록</span>
<span className="v">{ moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD') }</span>
<span className="v">{ escrowInfo?.deliveryRegistrationDate? moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD'): '' }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;배송완료</span>
<span className="v">{ moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD') }</span>
<span className="v">{ escrowInfo?.deliveryCompleteDate? moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD'): '' }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;구매확인</span>
<span className="v">{ moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD') }</span>
<span className="v">{ escrowInfo?.purchaseConfirmDate? moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD'): '' }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;구매거절</span>

18
src/entities/transaction/ui/section/important-info-section.tsx
View File

@@ -156,45 +156,45 @@ export const ImportantInfoSection = ({
<>
<li className="kv-row">
<span className="k">주문번호</span>
<span className="v">{ }</span>
<span className="v">{ importantInfo?.orderNumber }</span>
</li>
<li className="kv-row">
<span className="k">TID</span>
<span className="v">{ }</span>
<span className="v">{ importantInfo?.tid }</span>
</li>
<li className="kv-row">
<span className="k">거래상태</span>
<span className="v">{ }</span>
<span className="v">{ importantInfo?.transactionStatus }</span>
</li>
<li className="kv-row">
<span className="k">거래수단</span>
<span className="v">{ }</span>
<span className="v">{ importantInfo?.paymentMethod }</span>
</li>
{ serviceCode === '01' &&
<li className="kv-row">
<span className="k">승인일</span>
<span className="v">{ }</span>
<span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
</li>
}
{ serviceCode === '02' &&
<li className="kv-row">
<span className="k">거래일</span>
<span className="v">{ }</span>
<span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
</li>
}
{ serviceCode === '03' &&
<li className="kv-row">
<span className="k">요청일</span>
<span className="v">{ }</span>
<span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
</li>
}
<li className="kv-row">
<span className="k">취소일</span>
<span className="v">{ }</span>
<span className="v">{ importantInfo?.cancelDate? moment(importantInfo?.cancelDate).format('YYYY-MM-DD'): '' }</span>
</li>
<li className="kv-row">
<span className="k">상품명</span>
<span className="v">{ }</span>
<span className="v">{ importantInfo?.productName }</span>
</li>
</>
}

80
src/entities/transaction/ui/section/payment-info-section.tsx
View File

@@ -155,56 +155,80 @@ export const PaymentInfoSection = ({
{ (serviceCode === '01') &&
<>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인매입</span>
<span className="v">{ }</span>
<span className="k">·&nbsp;&nbsp;승인매입일</span>
<span className="v">{ paymentInfo?.approvalPurchase? moment(paymentInfo?.approvalPurchase).format('YYYY-MM-DD'): '' }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인반송(횟수)</span>
<span className="v">{ }</span>
<span className="v">
<NumericFormat
value={ paymentInfo?.approvalRejectCount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인재매입(횟수)</span>
<span className="v">{ }</span>
<span className="v">
<NumericFormat
value={ paymentInfo?.approvalRepurchaseCount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인VAN</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.approvalVAN }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소매입</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.cancelPurchase? moment(paymentInfo?.cancelPurchase).format('YYYY-MM-DD'): '' }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소반송</span>
<span className="v">{ }</span>
<span className="k">·&nbsp;&nbsp;취소반송(횟수)</span>
<span className="v">
<NumericFormat
value={ paymentInfo?.cancelRejectCount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소재매입</span>
<span className="v">{ }</span>
<span className="k">·&nbsp;&nbsp;취소재매입(횟수)</span>
<span className="v">
<NumericFormat
value={ paymentInfo?.cancelRepurchaseCount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;매입VAN</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.purchaseVan }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;매입사(발급사)</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.purchaseCompany }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;카드번호</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.cardNo }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인번호</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.approvalNo }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;할부기간</span>
<span className="v">{ }</span>
<span className="v">{ (paymentInfo?.installmentMonth === '00')? '일시불': paymentInfo?.installmentMonth }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;인증</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.authentication }</span>
</li>
</>
}
@@ -212,7 +236,7 @@ export const PaymentInfoSection = ({
<>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;유형</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.joinType }</span>
</li>
</>
}
@@ -220,47 +244,43 @@ export const PaymentInfoSection = ({
<>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;은행명</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.bankName || paymentInfo?.depositBankName }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;계좌번호</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.accountNo || paymentInfo?.virtualAccountNo }</span>
</li>
</>
}
{ (serviceCode === '03') &&
<>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금금융기관명</span>
<span className="v">{ }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금자명</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.depositorName }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금기한</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.depositDeadline? moment(paymentInfo?.depositDeadline).format('YYYY-MM-DD'): '' }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금일</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.depositDate? moment(paymentInfo?.depositDate).format('YYYY-MM-DD'): '' }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;환불예정일</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.refundScheduleDate? moment(paymentInfo?.refundScheduleDate).format('YYYY-MM-DD'): '' }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;환불은행명</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.refundBankName }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;환불계좌번호</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.refundAccountNo }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;예금주</span>
<span className="v">{ }</span>
<span className="v">{ paymentInfo?.accountHolder }</span>
</li>
</>
}

14
src/entities/transaction/ui/section/transaction-info-section.tsx
View File

@@ -122,32 +122,32 @@ export const TransactionInfoSection = ({
<>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;구매자명</span>
<span className="v">{ }</span>
<span className="v">{ transactionInfo?.buyerName }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;이메일</span>
<span className="v">{ }</span>
<span className="v">{ transactionInfo?.buyerEmail }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;전화번호</span>
<span className="v">{ }</span>
<span className="v">{ transactionInfo?.buyerTel }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소사유</span>
<span className="v">{ }</span>
<span className="v">{ transactionInfo?.cancelReason }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소요청자</span>
<span className="v">{ }</span>
<span className="v">{ transactionInfo?.cancelRequestor }</span>
</li>
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;부분취소</span>
<span className="v">{ }</span>
<span className="v">{ transactionInfo?.partialCancel }</span>
</li>
{ (serviceCode === '02' || serviceCode === '03') &&
<li className="kv-row">
<span className="k">·&nbsp;&nbsp;현금영수증발행</span>
<span className="v">{ }</span>
<span className="v">{ transactionInfo?.cashReceiptIssue }</span>
</li>
}
</>

7
src/entities/vat-return/ui/list-wrap.tsx
View File

@@ -51,7 +51,7 @@ export const ListWrap = () => {
onIntersect
});
const callList = (type?: string) => {
const callList = async(type?: string) => {
setOnActionIntersect(false);
let params: VatReturnListParams = {
mid: mid,
@@ -64,7 +64,7 @@ export const ListWrap = () => {
...{ sortType: sortType }
}
};
vatReturnList(params).then((rs: VatReturnListResponse) => {
if(type === 'page'){
setListItems([
@@ -95,6 +95,9 @@ export const ListWrap = () => {
&& rs.nextCursor !== pageParam.cursor
&& rs.content.length === DEFAULT_PAGE_PARAM.size
);
}).catch((e: any) => {
console.log(e)
return;
});
};

280
src/pages/transaction/all-transaction/cancel-page.tsx
View File

@@ -21,6 +21,8 @@ import {
import { useAllTransactioCancleInfoMutation } from '@/entities/transaction/api/use-all-transaction-cancel-info-mutation';
import { NumericFormat } from 'react-number-format';
import { useStore } from '@/shared/model/store';
import { AllTransactionCancelPreventBond } from '@/entities/transaction/ui/all-transaction-cancel-prevent-bond';
import { snackBar } from '@/shared/lib';
export const AllTransactionCancelPage = () => {
const location = useLocation();
@@ -55,10 +57,14 @@ export const AllTransactionCancelPage = () => {
const [cancelTaxFreeAmount, setCancelTaxFreeAmount] = useState<number>(0);
const [cancelServiceAmount, setCancelServiceAmount] = useState<number>(0);
const [requestSuccess, setRequestSuccess] = useState<boolean>(true);
const [bankCode, setBankCode] = useState<string>('');
const [accountNo, setAccountNo] = useState<string>('');
const [accountHolder, setAccountHolder] = useState<string>('');
const [cancelPreventBondOn, setCancelPreventBondOn] = useState<boolean>(false);
const { mutateAsync: transactionCancel } = useAllTransactioCancleMutation();
const { mutateAsync: allTransactionCancelInfo } = useAllTransactioCancleInfoMutation();
@@ -68,27 +74,33 @@ export const AllTransactionCancelPage = () => {
tid: tid
};
allTransactionCancelInfo(params).then((rs: AllTransactionCancelInfoResponse) => {
setDebtPreventionCancelDisplayInfo(rs.debtPreventionCancelDisplayInfo);
setDebtPreventionCancelRequestInfo(rs.debtPreventionCancelRequestInfo);
setGoodsVat(rs.goodsVat);
setIsCompoundTax(rs.isCompoundTax);
setIsConditionalVatAutoCalcMerchant(rs.isConditionalVatAutoCalcMerchant);
setIsNpg(rs.isNpg);
setIsVatAutoCalcMerchant(rs.isVatAutoCalcMerchant);
setIsVatDisplayed(rs.isVatDisplayed);
setPartCancelCl(rs.partCancelCl);
setRemainAmount(rs.remainAmount);
setServiceAmount(rs.serviceAmount);
setSupplyAmount(rs.supplyAmount);
setTaxFreeAmount(rs.taxFreeAmount);
setVatAutoCalcSummary(rs.vatAutoCalcSummary);
if(!partCancelCl){
setTotalCancelAmount(rs.remainAmount);
if(rs.debtPreventionCancelDisplayInfo !== null){
setCancelPreventBondOn(true);
}
else{
setTotalCancelAmount(0);
setDebtPreventionCancelDisplayInfo(rs.debtPreventionCancelDisplayInfo);
setDebtPreventionCancelRequestInfo(rs.debtPreventionCancelRequestInfo);
setGoodsVat(rs.goodsVat);
setIsCompoundTax(rs.isCompoundTax);
setIsConditionalVatAutoCalcMerchant(rs.isConditionalVatAutoCalcMerchant);
setIsNpg(rs.isNpg);
setIsVatAutoCalcMerchant(rs.isVatAutoCalcMerchant);
setIsVatDisplayed(rs.isVatDisplayed);
setPartCancelCl(rs.partCancelCl);
setRemainAmount(rs.remainAmount);
setServiceAmount(rs.serviceAmount);
setSupplyAmount(rs.supplyAmount);
setTaxFreeAmount(rs.taxFreeAmount);
setVatAutoCalcSummary(rs.vatAutoCalcSummary);
if(!partCancelCl){
setTotalCancelAmount(rs.remainAmount);
}
else{
setTotalCancelAmount(0);
}
}
// partCancelCl == true ==> 부분취소 버튼 활성화
// isCompoundTax == true ==> 부분취소의 복합과세 노출
// debtPreventionCancelDisplayInfo != null => 입금 후 취소 페이지 노출
@@ -96,31 +108,40 @@ export const AllTransactionCancelPage = () => {
// debtPreventionCancelDisplayInfo.isCancel == true => 취소api호출
// debtPreventionCancelRequestInfo 이 값 통쨰로 변조없이 그대로 api에 전달
// debtPreventionCancelDisplayInfo.isCancel == false => 얼럿만 띄우고 취소요청하면안됨
});
};
const callTransactionCancel = () => {
let transactionCancelParams: AllTransactionCancelParams = {
tid: tid,
cancelAmount: totalCancelAmount,
cancelPassword: cancelPassword,
bankCode: bankCode,
accountNo: accountNo,
accountHolder: accountHolder,
supplyAmount: (!!partCancelCl)? cancelSupplyAmount: supplyAmount,
goodsVatAmount: (!!partCancelCl)? cancelGoodsVat: goodsVat,
taxFreeAmount: (!!partCancelCl)? cancelTaxFreeAmount: taxFreeAmount,
serviceAmount: (!!partCancelCl)? cancelServiceAmount: serviceAmount,
clientIp: userInfo.clientAddressIP,
partCancelCl: partCancelCl,
isNpg: isNpg,
serviceCode: serviceCode
};
transactionCancel(transactionCancelParams).then((rs: AllTransactionCancelResponse) => {
console.log(rs);
});
if(debtPreventionCancelDisplayInfo?.isCancel === false){
snackBar('취소요청이 불가능 합니다.');
}
else{
let transactionCancelParams: AllTransactionCancelParams = {
tid: tid,
cancelAmount: totalCancelAmount || 0,
cancelPassword: cancelPassword,
bankCode: bankCode,
accountNo: accountNo,
accountHolder: accountHolder,
supplyAmount: (!!partCancelCl)? cancelSupplyAmount: (supplyAmount || 0),
goodsVatAmount: (!!partCancelCl)? cancelGoodsVat: (goodsVat || 0),
taxFreeAmount: (!!partCancelCl)? cancelTaxFreeAmount: (taxFreeAmount || 0),
serviceAmount: (!!partCancelCl)? cancelServiceAmount: (serviceAmount || 0),
clientIp: userInfo.clientAddressIP,
partCancelCl: partCancelCl,
isNpg: isNpg,
serviceCode: serviceCode
};
transactionCancel(transactionCancelParams).then((rs: AllTransactionCancelResponse) => {
console.log(rs);
setRequestSuccess(true);
}).catch((e: any) => {
setRequestSuccess(false);
});
}
};
useEffect(() => {
callCancelInfo();
@@ -134,109 +155,87 @@ export const AllTransactionCancelPage = () => {
<main>
<div className="tab-content">
<div className="tab-pane pt-46 active">
<div className="option-list-nopadding">
<div className="subTab">
<button
className={ `subtab-btn ${(tabAction === CancelTabKeys.All)? 'active': ''}` }
onClick={ () => onClickToChangeTab(CancelTabKeys.All) }
>전체 취소</button>
{ !!partCancelCl &&
<div className="subTab">
<button
className={ `subtab-btn ${(tabAction === CancelTabKeys.All)? 'active': ''}` }
onClick={ () => onClickToChangeTab(CancelTabKeys.All) }
>전체 취소</button>
{ !!partCancelCl &&
<button
className={ `subtab-btn ${(tabAction === CancelTabKeys.Part)? 'active': ''}` }
onClick={ () => onClickToChangeTab(CancelTabKeys.Part) }
>부분 취소</button>
}
</div>
<div className="cancel-list pt-30">
<div className="amount-info">
<ul className="amount-list">
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;총 잔액</span>
<span className="value">
<NumericFormat
value={ remainAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;총 취소금액</span>
<span className="value">
<NumericFormat
value={ totalCancelAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
</li>
</ul>
</div>
{ (tabAction === CancelTabKeys.All) &&
<AllTransactionAllCancel
serviceCode={ serviceCode }
debtPreventionCancelDisplayInfo={ debtPreventionCancelDisplayInfo }
debtPreventionCancelRequestInfo={ debtPreventionCancelRequestInfo }
goodsVat={ goodsVat }
isCompoundTax={ isCompoundTax }
isConditionalVatAutoCalcMerchant={ isConditionalVatAutoCalcMerchant }
isNpg={ isNpg }
isVatAutoCalcMerchant={ isVatAutoCalcMerchant }
isVatDisplayed={ isVatDisplayed }
partCancelCl={ partCancelCl }
remainAmount={ remainAmount }
serviceAmount={ serviceAmount }
supplyAmount={ supplyAmount }
taxFreeAmount={ taxFreeAmount }
vatAutoCalcSummary={ vatAutoCalcSummary }
cancelPassword={ cancelPassword }
setCancelPassword={ setCancelPassword }
bankCode={ bankCode }
setBankCode={ setBankCode }
accountNo={ accountNo }
setAccountNo={ setAccountNo }
accountHolder={ accountHolder }
setAccountHolder={ setAccountHolder }
></AllTransactionAllCancel>
}
{ !!partCancelCl && (tabAction === CancelTabKeys.Part) &&
<AllTransactionPartCancel
serviceCode={ serviceCode }
debtPreventionCancelDisplayInfo={ debtPreventionCancelDisplayInfo }
debtPreventionCancelRequestInfo={ debtPreventionCancelRequestInfo }
goodsVat={ goodsVat }
isCompoundTax={ isCompoundTax }
isConditionalVatAutoCalcMerchant={ isConditionalVatAutoCalcMerchant }
isNpg={ isNpg }
isVatAutoCalcMerchant={ isVatAutoCalcMerchant }
isVatDisplayed={ isVatDisplayed }
partCancelCl={ partCancelCl }
remainAmount={ remainAmount }
serviceAmount={ serviceAmount }
supplyAmount={ supplyAmount }
taxFreeAmount={ taxFreeAmount }
vatAutoCalcSummary={ vatAutoCalcSummary }
cancelPassword={ cancelPassword }
setCancelPassword={ setCancelPassword }
bankCode={ bankCode }
setBankCode={ setBankCode }
accountNo={ accountNo }
setAccountNo={ setAccountNo }
accountHolder={ accountHolder }
setAccountHolder={ setAccountHolder }
cancelSupplyAmount={ cancelSupplyAmount }
setCancelSupplyAmount={ setCancelSupplyAmount }
cancelGoodsVat={ cancelGoodsVat }
setCancelGoodsVat={ setCancelGoodsVat }
cancelTaxFreeAmount={ cancelTaxFreeAmount}
setCancelTaxFreeAmount={ setCancelTaxFreeAmount }
cancelServiceAmount={ cancelServiceAmount }
setCancelServiceAmount={ setCancelServiceAmount }
></AllTransactionPartCancel>
}
</div>
}
</div>
<div className="cancel-list pt-30">
{ (tabAction === CancelTabKeys.All) &&
<AllTransactionAllCancel
serviceCode={ serviceCode }
debtPreventionCancelDisplayInfo={ debtPreventionCancelDisplayInfo }
debtPreventionCancelRequestInfo={ debtPreventionCancelRequestInfo }
goodsVat={ goodsVat }
isCompoundTax={ isCompoundTax }
isConditionalVatAutoCalcMerchant={ isConditionalVatAutoCalcMerchant }
isNpg={ isNpg }
isVatAutoCalcMerchant={ isVatAutoCalcMerchant }
isVatDisplayed={ isVatDisplayed }
partCancelCl={ partCancelCl }
remainAmount={ remainAmount }
serviceAmount={ serviceAmount }
supplyAmount={ supplyAmount }
taxFreeAmount={ taxFreeAmount }
vatAutoCalcSummary={ vatAutoCalcSummary }
cancelPassword={ cancelPassword }
setCancelPassword={ setCancelPassword }
bankCode={ bankCode }
setBankCode={ setBankCode }
accountNo={ accountNo }
setAccountNo={ setAccountNo }
accountHolder={ accountHolder }
setAccountHolder={ setAccountHolder }
requestSuccess={ requestSuccess }
totalCancelAmount={ totalCancelAmount }
></AllTransactionAllCancel>
}
{ !!partCancelCl && (tabAction === CancelTabKeys.Part) &&
<AllTransactionPartCancel
serviceCode={ serviceCode }
debtPreventionCancelDisplayInfo={ debtPreventionCancelDisplayInfo }
debtPreventionCancelRequestInfo={ debtPreventionCancelRequestInfo }
goodsVat={ goodsVat }
isCompoundTax={ isCompoundTax }
isConditionalVatAutoCalcMerchant={ isConditionalVatAutoCalcMerchant }
isNpg={ isNpg }
isVatAutoCalcMerchant={ isVatAutoCalcMerchant }
isVatDisplayed={ isVatDisplayed }
partCancelCl={ partCancelCl }
remainAmount={ remainAmount }
serviceAmount={ serviceAmount }
supplyAmount={ supplyAmount }
taxFreeAmount={ taxFreeAmount }
vatAutoCalcSummary={ vatAutoCalcSummary }
cancelPassword={ cancelPassword }
setCancelPassword={ setCancelPassword }
bankCode={ bankCode }
setBankCode={ setBankCode }
accountNo={ accountNo }
setAccountNo={ setAccountNo }
accountHolder={ accountHolder }
setAccountHolder={ setAccountHolder }
cancelSupplyAmount={ cancelSupplyAmount }
setCancelSupplyAmount={ setCancelSupplyAmount }
cancelGoodsVat={ cancelGoodsVat }
setCancelGoodsVat={ setCancelGoodsVat }
cancelTaxFreeAmount={ cancelTaxFreeAmount}
setCancelTaxFreeAmount={ setCancelTaxFreeAmount }
cancelServiceAmount={ cancelServiceAmount }
setCancelServiceAmount={ setCancelServiceAmount }
requestSuccess={ requestSuccess }
totalCancelAmount={ totalCancelAmount }
setTotalCancelAmount={ setTotalCancelAmount }
></AllTransactionPartCancel>
}
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
@@ -246,6 +245,15 @@ export const AllTransactionCancelPage = () => {
</div>
</div>
</main>
{ !!cancelPreventBondOn &&
<AllTransactionCancelPreventBond
cancelPreventBondOn={ cancelPreventBondOn }
setCancelPreventBondOn={ setCancelPreventBondOn }
debtPreventionCancelDisplayInfo={ debtPreventionCancelDisplayInfo }
serviceCode={ serviceCode}
tid={ tid }
></AllTransactionCancelPreventBond>
}
</>
);
};

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

@@ -150,37 +150,51 @@ export const AllTransactionDetailPage = () => {
serviceCode={ serviceCode }
></ImportantInfoSection>
<div className="txn-divider"></div>
<PaymentInfoSection
transactionCategory={ TransactionCategory.AllTransaction }
paymentInfo={ paymentInfo }
serviceCode={ serviceCode }
isOpen={ showPaymentInfo }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></PaymentInfoSection>
<div className="txn-divider"></div>
<TransactionInfoSection
transactionCategory={ TransactionCategory.AllTransaction }
transactionInfo={ transactionInfo }
serviceCode={ serviceCode }
isOpen={ showTransactionInfo }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></TransactionInfoSection>
<div className="txn-divider"></div>
<SettlementInfoSection
transactionCategory={ TransactionCategory.AllTransaction }
settlementInfo={ settlementInfo }
serviceCode={ serviceCode }
isOpen={ showSettlementInfo }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></SettlementInfoSection>
<div className="txn-divider"></div>
<PartCancelInfoSection
transactionCategory={ TransactionCategory.AllTransaction }
partCancelInfo={ partCancelInfo }
serviceCode={ serviceCode }
isOpen={ showPartCancelInfo }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></PartCancelInfoSection>
{ !!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">

14
src/pages/transaction/cash-receipt/detail-page.tsx
View File

@@ -127,12 +127,14 @@ export const CashReceiptDetailPage = () => {
purposeType={ purposeType }
></IssueInfoSection>
<div className="txn-divider minus"></div>
<DetailInfoSection
transactionCategory={ TransactionCategory.CashReceipt }
detailInfo={ detailInfo }
isOpen={ showDetailInfo }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></DetailInfoSection>
{ !!detailInfo &&
<DetailInfoSection
transactionCategory={ TransactionCategory.CashReceipt }
detailInfo={ detailInfo }
isOpen={ showDetailInfo }
onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
></DetailInfoSection>
}
</div>
</div>
{ (issueInfo?.transactionType === CashReceiptTransactionType.APPROVAL) &&