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-26 15:15:51 +09:00
parent ddd900d311
commit a6f31b9f3a
6 changed files with 252 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -534,10 +534,14 @@ export interface AllTransactionCancelParams{
bankCode: string;
accountNo: string;
accountHolder: string;
supplyAmount: number;
goodsVatAmount: number;
taxFreeAmount: number;
serviceAmount: number;
supplyAmount: number | null;
goodsVatAmount: number | null;
taxFreeAmount: number | null;
serviceAmount: number | null;
clientIp?: string;
partCancelCl: boolean;
isNpg: boolean;
serviceCode: string;
};
export interface AllTransactionCancelResponse {
@@ -547,15 +551,20 @@ export interface AllTransactionCancelInfoParams {
tid: string;
};
export interface AllTransactionCancelInfoResponse {
remainAmount: number;
partCancelCl: boolean;
isCompoundTax: boolean;
supplyAmount: number | null;
debtPreventionCancelDisplayInfo?: DebtPreventionCancelDisplayInfo | null;
debtPreventionCancelRequestInfo?: DebtPreventionCancelRequestInfo | null;
goodsVat: number | null;
taxFreeAmount: number | null;
isCompoundTax: boolean;
isConditionalVatAutoCalcMerchant: boolean;
isNpg: boolean;
isVatAutoCalcMerchant: boolean;
isVatDisplayed: boolean;
partCancelCl: boolean;
remainAmount: number;
serviceAmount: number | null;
debtPreventionCancelDisplayInfo: DebtPreventionCancelDisplayInfo | null;
debtPreventionCancelRequestInfo: DebtPreventionCancelRequestInfo | null;
supplyAmount: number | null;
taxFreeAmount: number | null;
vatAutoCalcSummary: number;
};
export interface DebtPreventionCancelDisplayInfo {
isCancel: boolean;

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

@@ -5,27 +5,57 @@ import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-
export interface AllTransactionAllCancelProps extends AllTransactionCancelInfoResponse {
serviceCode: string;
cancelPassword: string;
setCancelPassword: (cancelPassword: string) => void;
bankCode?: string;
setBankCode?: (BankCode: string) => void;
accountNo?: string;
setAccountNo?: (accountNo: string) => void;
accountHolder?: string;
setAccountHolder?: (accountHolder: string) => void;
};
export const AllTransactionAllCancel = ({
serviceCode,
remainAmount,
partCancelCl,
isCompoundTax,
supplyAmount,
goodsVat,
taxFreeAmount,
serviceAmount,
debtPreventionCancelDisplayInfo,
debtPreventionCancelRequestInfo
debtPreventionCancelRequestInfo,
goodsVat,
isCompoundTax,
isConditionalVatAutoCalcMerchant,
isNpg,
isVatAutoCalcMerchant,
isVatDisplayed,
partCancelCl,
remainAmount,
serviceAmount,
supplyAmount,
taxFreeAmount,
vatAutoCalcSummary,
cancelPassword,
setCancelPassword,
bankCode,
setBankCode,
accountNo,
setAccountNo,
accountHolder,
setAccountHolder
}: AllTransactionAllCancelProps) => {
console.log(serviceCode)
return (
<>
<div className="form-section">
<AllTransactionCancelSectionPasswordGroup></AllTransactionCancelSectionPasswordGroup>
<AllTransactionCancelSectionPasswordGroup
cancelPassword={ cancelPassword }
setCancelPassword={ setCancelPassword }
></AllTransactionCancelSectionPasswordGroup>
{ serviceCode === '03' &&
<AllTransactionCancelSectionBankGroup></AllTransactionCancelSectionBankGroup>
<AllTransactionCancelSectionBankGroup
bankCode={ bankCode }
setBankCode={ setBankCode }
accountNo={ accountNo }
setAccountNo={ setAccountNo }
accountHolder={ accountHolder }
setAccountHolder={ setAccountHolder }
></AllTransactionCancelSectionBankGroup>
}
</div>
</>

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

@@ -3,22 +3,44 @@ 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';
export interface AllTransactionPartCancelProps extends AllTransactionCancelInfoResponse {
serviceCode: string;
cancelPassword: string;
setCancelPassword: (cancelPassword: string) => void;
bankCode?: string;
setBankCode?: (BankCode: string) => void;
accountNo?: string;
setAccountNo?: (accountNo: string) => void;
accountHolder?: string;
setAccountHolder?: (accountHolder: string) => void;
};
export const AllTransactionPartCancel = ({
serviceCode,
remainAmount,
partCancelCl,
isCompoundTax,
supplyAmount,
goodsVat,
taxFreeAmount,
serviceAmount,
debtPreventionCancelDisplayInfo,
debtPreventionCancelRequestInfo
debtPreventionCancelRequestInfo,
goodsVat,
isCompoundTax,
isConditionalVatAutoCalcMerchant,
isNpg,
isVatAutoCalcMerchant,
isVatDisplayed,
partCancelCl,
remainAmount,
serviceAmount,
supplyAmount,
taxFreeAmount,
vatAutoCalcSummary,
cancelPassword,
setCancelPassword,
bankCode,
setBankCode,
accountNo,
setAccountNo,
accountHolder,
setAccountHolder
}: AllTransactionPartCancelProps) => {
@@ -114,9 +136,19 @@ export const AllTransactionPartCancel = ({
}
<div className="form-section">
<AllTransactionCancelSectionPasswordGroup></AllTransactionCancelSectionPasswordGroup>
<AllTransactionCancelSectionPasswordGroup
cancelPassword={ cancelPassword }
setCancelPassword={ setCancelPassword }
></AllTransactionCancelSectionPasswordGroup>
{ serviceCode === '03' &&
<AllTransactionCancelSectionBankGroup></AllTransactionCancelSectionBankGroup>
<AllTransactionCancelSectionBankGroup
bankCode={ bankCode }
setBankCode={ setBankCode }
accountNo={ accountNo }
setAccountNo={ setAccountNo }
accountHolder={ accountHolder }
setAccountHolder={ setAccountHolder }
></AllTransactionCancelSectionBankGroup>
}
</div>
</>

47
src/entities/transaction/ui/section/all-transaction-cancel-section-bank-group.tsx
View File

@@ -1,12 +1,47 @@
export const AllTransactionCancelSectionBankGroup = () => {
import { ChangeEvent, useState } from "react";
export interface AllTransactionCancelSectionBankGroupProps {
bankCode?: string;
setBankCode?: (BankCode: string) => void;
accountNo?: string;
setAccountNo?: (accountNo: string) => void;
accountHolder?: string;
setAccountHolder?: (accountHolder: string) => void;
};
export const AllTransactionCancelSectionBankGroup = ({
bankCode,
setBankCode,
accountNo,
setAccountNo,
accountHolder,
setAccountHolder
}: AllTransactionCancelSectionBankGroupProps ) => {
const [newBankCode, setNewBankCode] = useState<string | undefined>(bankCode);
const [newAccountNo, setNewAccountNo] = useState<string | undefined>(accountNo);
const [newAccountHolder, setNewAccountHolder] = useState<string | undefined>(accountHolder);
const onChangeNewBankCode = (value: string) => {
setNewBankCode(value);
};
const onChangeNewAccountNo = (value: string) => {
setNewAccountNo(value);
};
const onChangeNewAccountHolder = (value: string) => {
setNewAccountHolder(value);
};
return (
<>
<div className="form-group">
<label className="form-label">은행</label>
<div className="input-wrapper wid-100">
<select className="wid-100 align-right">
<option>선택</option>
<select
className="wid-100 align-right"
value={ bankCode }
onChange={ (e: ChangeEvent<HTMLSelectElement>) => onChangeNewBankCode(e.target.value) }
>
<option value="">선택</option>
<option>KB국민은행</option>
<option>22323213123</option>
</select>
@@ -19,7 +54,8 @@ export const AllTransactionCancelSectionBankGroup = () => {
<input
className="form-input wid-100"
type="text"
placeholder=""
value={ newAccountNo }
onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewAccountNo(e.target.value) }
/>
</div>
</div>
@@ -30,7 +66,8 @@ export const AllTransactionCancelSectionBankGroup = () => {
<input
className="form-input wid-100"
type="text"
placeholder=""
value={ newAccountHolder }
onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewAccountHolder(e.target.value) }
/>
</div>
</div>

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

@@ -1,5 +1,20 @@
export const AllTransactionCancelSectionPasswordGroup = () => {
import { ChangeEvent, useState } from "react";
export interface AllTransactionCancelSectionPasswordGroupProps {
cancelPassword: string;
setCancelPassword: (cancelPassword: string) => void;
};
export const AllTransactionCancelSectionPasswordGroup = ({
cancelPassword,
setCancelPassword
}: AllTransactionCancelSectionPasswordGroupProps) => {
const [newCancelPassword, setNewCancelPassword] = useState<string>(cancelPassword);
const onChangeNewCancelPassword = (value: string) => {
setCancelPassword(value);
};
return (
<>
<div className="form-group">
@@ -8,11 +23,14 @@ export const AllTransactionCancelSectionPasswordGroup = () => {
<input
className="wid-100 align-right"
type="password"
value="2736356352"
value={ newCancelPassword }
onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewCancelPassword(e.target.value) }
/>
</div>
</div>
{/*
<div className="error-msg">비밀번호 불일치</div>
*/}
</>
);
}

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

@@ -20,9 +20,11 @@ import {
} from '@/widgets/sub-layout/use-sub-layout';
import { useAllTransactioCancleInfoMutation } from '@/entities/transaction/api/use-all-transaction-cancel-info-mutation';
import { NumericFormat } from 'react-number-format';
import { useStore } from '@/shared/model/store';
export const AllTransactionCancelPage = () => {
const location = useLocation();
const userInfo = useStore.getState().UserStore.userInfo;
const tid = location.state.tid;
const serviceCode = location.state.serviceCode;
@@ -32,16 +34,26 @@ export const AllTransactionCancelPage = () => {
// all or part
const [tabAction, setTabAction] = useState<CancelTabKeys>(CancelTabKeys.All);
const [remainAmount, setRemainAmount] = useState<number>(0);
const [totalCancelAmount, setTotalCancelAmount] = useState<number>(0);
const [partCancelCl, setPartCancelCl] = useState<boolean>(false);
const [isCompoundTax, setIsCompoundTax] = useState<boolean>(false);
const [supplyAmount, setSupplyAmount] = useState<number | null>(null);
const [debtPreventionCancelDisplayInfo, setDebtPreventionCancelDisplayInfo] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(null);
const [debtPreventionCancelRequestInfo, setDebtPreventionCancelRequestInfo] = useState<DebtPreventionCancelRequestInfo | null | undefined>(null);
const [goodsVat, setGoodsVat] = useState<number | null>(null);
const [taxFreeAmount, setTaxFreeAmount] = useState<number | null>(null);
const [isCompoundTax, setIsCompoundTax] = useState<boolean>(false);
const [isConditionalVatAutoCalcMerchant, setIsConditionalVatAutoCalcMerchant] = useState<boolean>(false);
const [isNpg, setIsNpg] = useState<boolean>(false);
const [isVatAutoCalcMerchant, setIsVatAutoCalcMerchant] = useState<boolean>(false);
const [isVatDisplayed, setIsVatDisplayed] = useState<boolean>(false);
const [partCancelCl, setPartCancelCl] = useState<boolean>(false);
const [remainAmount, setRemainAmount] = useState<number>(0);
const [serviceAmount, setServiceAmount] = useState<number | null>(null);
const [debtPreventionCancelDisplayInfo, setDebtPreventionCancelDisplayInfo] = useState<DebtPreventionCancelDisplayInfo | null>(null);
const [debtPreventionCancelRequestInfo, setDebtPreventionCancelRequestInfo] = useState<DebtPreventionCancelRequestInfo | null>(null);
const [supplyAmount, setSupplyAmount] = useState<number | null>(null);
const [taxFreeAmount, setTaxFreeAmount] = useState<number | null>(null);
const [vatAutoCalcSummary, setVatAutoCalcSummary] = useState<number>(0);
const [totalCancelAmount, setTotalCancelAmount] = useState<number>(0);
const [cancelPassword, setCancelPassword] = useState<string>('');
const [bankCode, setBankCode] = useState<string>('');
const [accountNo, setAccountNo] = useState<string>('');
const [accountHolder, setAccountHolder] = useState<string>('');
const { mutateAsync: transactionCancel } = useAllTransactioCancleMutation();
const { mutateAsync: allTransactionCancelInfo } = useAllTransactioCancleInfoMutation();
@@ -52,16 +64,21 @@ export const AllTransactionCancelPage = () => {
tid: tid
};
allTransactionCancelInfo(params).then((rs: AllTransactionCancelInfoResponse) => {
setRemainAmount(rs.remainAmount);
setPartCancelCl(rs.partCancelCl);
setIsCompoundTax(rs.isCompoundTax);
setSupplyAmount(rs.supplyAmount);
setGoodsVat(rs.goodsVat);
setTaxFreeAmount(rs.taxFreeAmount);
setServiceAmount(rs.serviceAmount);
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);
}
@@ -82,16 +99,20 @@ export const AllTransactionCancelPage = () => {
const callTransactionCancel = () => {
let transactionCancelParams: AllTransactionCancelParams = {
tid: location?.state.tid,
cancelAmount: 0,
cancelPassword: "string",
bankCode: "string",
accountNo: "string",
accountHolder: "string",
supplyAmount: 0,
goodsVatAmount: 0,
taxFreeAmount: 0,
serviceAmount: 0
tid: tid,
cancelAmount: totalCancelAmount,
cancelPassword: cancelPassword,
bankCode: bankCode,
accountNo: accountNo,
accountHolder: accountHolder,
supplyAmount: supplyAmount,
goodsVatAmount: goodsVat,
taxFreeAmount: taxFreeAmount,
serviceAmount: serviceAmount,
clientIp: userInfo.clientAddressIP,
partCancelCl: partCancelCl,
isNpg: isNpg,
serviceCode: serviceCode
};
transactionCancel(transactionCancelParams).then((rs: AllTransactionCancelResponse) => {
console.log(rs);
@@ -150,29 +171,55 @@ export const AllTransactionCancelPage = () => {
{ (tabAction === CancelTabKeys.All) &&
<AllTransactionAllCancel
serviceCode={ serviceCode }
remainAmount={ remainAmount }
partCancelCl={ partCancelCl }
isCompoundTax={ isCompoundTax }
supplyAmount={ supplyAmount }
goodsVat={ goodsVat }
taxFreeAmount={ taxFreeAmount }
serviceAmount={ serviceAmount }
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 }
remainAmount={ remainAmount }
partCancelCl={ partCancelCl }
isCompoundTax={ isCompoundTax }
supplyAmount={ supplyAmount }
goodsVat={ goodsVat }
taxFreeAmount={ taxFreeAmount }
serviceAmount={ serviceAmount }
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 }
></AllTransactionPartCancel>
}
</div>