에스크로 거래취소

2025-10-28 17:32:35 +09:00
parent 52516f2427
commit 7fa26cce00
15 changed files with 684 additions and 341 deletions
--- a/src/pages/transaction/all-transaction/cancel-page.tsx
+++ b/src/pages/transaction/all-transaction/cancel-page.tsx
@@ -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>
+      }
    </>
  );
 };
--- a/src/pages/transaction/all-transaction/detail-page.tsx
+++ b/src/pages/transaction/all-transaction/detail-page.tsx
@@ -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">
--- a/src/pages/transaction/cash-receipt/detail-page.tsx
+++ b/src/pages/transaction/cash-receipt/detail-page.tsx
@@ -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) &&