에스크로 거래취소

src/entities/transaction/ui/all-transaction-part-cancel.tsx

@@ -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