부분취소 화면 깨짐 현상 수정
This commit is contained in:
focp212@naver.com
@@ -191,21 +191,27 @@ export const AllTransactionPartCancel = ({
|
||||
></NumericFormat>
|
||||
</span>
|
||||
</li>
|
||||
<li className="amount-item">
|
||||
<span className="label">· {t('transaction.fields.totalCancelAmount')}</span>
|
||||
<span className="value">
|
||||
<NumericFormat
|
||||
value={ totalCancelAmount }
|
||||
displayType="input"
|
||||
allowNegative={ false }
|
||||
max={ remainAmount }
|
||||
readOnly={ cancelTotalCancelAmountReadonly }
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeToTotalCancelAmount(parseInt(e.target.value)) }
|
||||
></NumericFormat>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className="form-section"
|
||||
style={{marginTop: '10px'}}
|
||||
>
|
||||
<div className="form-group">
|
||||
<label className="form-label">{t('transaction.fields.totalCancelAmount')}</label>
|
||||
<div className="input-wrapper wid-100 error">
|
||||
<NumericFormat
|
||||
className="wid-100 align-right"
|
||||
value={ totalCancelAmount }
|
||||
displayType="input"
|
||||
allowNegative={ false }
|
||||
max={ remainAmount }
|
||||
readOnly={ cancelTotalCancelAmountReadonly }
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeToTotalCancelAmount(parseInt(e.target.value)) }
|
||||
></NumericFormat>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{ !!isCompoundTax &&
|
||||
<div className="tb_both">
|
||||
<table className="partial-cancel-table">
|
||||
@@ -306,7 +312,10 @@ export const AllTransactionPartCancel = ({
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
<div className="form-section">
|
||||
<div
|
||||
className="form-section"
|
||||
style={{ marginTop: (!!isCompoundTax)? '30px': '0px' }}
|
||||
>
|
||||
<AllTransactionCancelSectionPasswordGroup
|
||||
cancelPassword={ cancelPassword }
|
||||
setCancelPassword={ setCancelPassword }
|
||||
|
||||
@@ -1,272 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useLocation } from 'react-router';
|
||||
import { AllTransactionAllCancel } from '@/entities/transaction/ui/all-transaction-all-cancel'
|
||||
import { AllTransactionPartCancel } from '@/entities/transaction/ui/all-transaction-part-cancel'
|
||||
import { useAllTransactioCancleMutation } from '@/entities/transaction/api/use-all-transaction-cancel-mutation';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
AllTransactionCancelInfoParams,
|
||||
AllTransactionCancelInfoResponse,
|
||||
AllTransactionCancelParams,
|
||||
AllTransactionCancelResponse,
|
||||
CancelTabKeys,
|
||||
DebtPreventionCancelDisplayInfo,
|
||||
DebtPreventionCancelRequestInfo
|
||||
} from '@/entities/transaction/model/types';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { useAllTransactioCancleInfoMutation } from '@/entities/transaction/api/use-all-transaction-cancel-info-mutation';
|
||||
import { useStore } from '@/shared/model/store';
|
||||
import { AllTransactionCancelPreventBond } from '@/entities/transaction/ui/all-transaction-cancel-prevent-bond';
|
||||
import { snackBar } from '@/shared/lib';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { showAlert } from '@/widgets/show-alert';
|
||||
|
||||
export const AllTransactionCancelPage = () => {
|
||||
const { t } = useTranslation();
|
||||
const location = useLocation();
|
||||
const userInfo = useStore.getState().UserStore.userInfo;
|
||||
const userMid = useStore.getState().UserStore.mid;
|
||||
const tid = location.state.tid;
|
||||
const serviceCode = location.state.serviceCode;
|
||||
|
||||
useSetHeaderTitle(t('transaction.cancelTitle'));
|
||||
useSetHeaderType(HeaderType.RightClose);
|
||||
useSetFooterMode(false);
|
||||
|
||||
// all or part
|
||||
const [tabAction, setTabAction] = useState<CancelTabKeys>(CancelTabKeys.All);
|
||||
const [debtPreventionCancelDisplayInfo, setDebtPreventionCancelDisplayInfo] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(null);
|
||||
const [debtPreventionCancelRequestInfo, setDebtPreventionCancelRequestInfo] = useState<DebtPreventionCancelRequestInfo | null | undefined>(null);
|
||||
const [goodsVat, setGoodsVat] = 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 [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 [cancelSupplyAmount, setCancelSupplyAmount] = useState<number>(0);
|
||||
const [cancelGoodsVat, setCancelGoodsVat] = useState<number>(0);
|
||||
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();
|
||||
|
||||
const callCancelInfo = () => {
|
||||
let params: AllTransactionCancelInfoParams = {
|
||||
serviceCode: serviceCode,
|
||||
tid: tid,
|
||||
mid: userMid
|
||||
};
|
||||
allTransactionCancelInfo(params).then((rs: AllTransactionCancelInfoResponse) => {
|
||||
if(rs.debtPreventionCancelDisplayInfo !== null){
|
||||
setCancelPreventBondOn(true);
|
||||
}
|
||||
else{
|
||||
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 => 입금 후 취소 페이지 노출
|
||||
// [취소신청]버튼 클릭시
|
||||
// debtPreventionCancelDisplayInfo.isCancel == true => 취소api호출
|
||||
// debtPreventionCancelRequestInfo 이 값 통쨰로 변조없이 그대로 api에 전달
|
||||
// debtPreventionCancelDisplayInfo.isCancel == false => 얼럿만 띄우고 취소요청하면안됨
|
||||
|
||||
|
||||
}).catch((e: any) => {
|
||||
if(e.response?.data?.error?.message){
|
||||
snackBar(e.response?.data?.error?.message);
|
||||
return;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const callTransactionCancel = () => {
|
||||
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);
|
||||
if(e.response?.data?.error?.message){
|
||||
snackBar(e.response?.data?.error?.message);
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
useEffect(() => {
|
||||
callCancelInfo();
|
||||
}, []);
|
||||
|
||||
const onClickToChangeTab = (tab: CancelTabKeys) => {
|
||||
setTabAction(tab);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane pt-46 active">
|
||||
<div className="subTab">
|
||||
<button
|
||||
className={ `subtab-btn ${(tabAction === CancelTabKeys.All)? 'active': ''}` }
|
||||
onClick={ () => onClickToChangeTab(CancelTabKeys.All) }
|
||||
>{t('transaction.fullCancel')}</button>
|
||||
{ !!partCancelCl &&
|
||||
<button
|
||||
className={ `subtab-btn ${(tabAction === CancelTabKeys.Part)? 'active': ''}` }
|
||||
onClick={ () => onClickToChangeTab(CancelTabKeys.Part) }
|
||||
>{t('transaction.partialCancel')}</button>
|
||||
}
|
||||
</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"
|
||||
onClick={ () => callTransactionCancel() }
|
||||
>{t('transaction.submit')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{ !!cancelPreventBondOn &&
|
||||
<AllTransactionCancelPreventBond
|
||||
cancelPreventBondOn={ cancelPreventBondOn }
|
||||
setCancelPreventBondOn={ setCancelPreventBondOn }
|
||||
debtPreventionCancelDisplayInfo={ debtPreventionCancelDisplayInfo }
|
||||
serviceCode={ serviceCode}
|
||||
tid={ tid }
|
||||
></AllTransactionCancelPreventBond>
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user