수기발행 / 현금영수증 용도변경

2025-09-11 16:38:49 +09:00
parent 1b4af7a82f
commit 48a3bd1ed4
15 changed files with 424 additions and 96 deletions
--- a/src/pages/transaction/billing/detail-page.tsx
+++ b/src/pages/transaction/billing/detail-page.tsx
@@ -17,6 +17,7 @@ import {
  useSetHeaderType,
  useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
+import { NumericFormat } from 'react-number-format';

 export const BillingDetailPage = () => {
  const { navigate } = useNavigate();
@@ -52,8 +53,24 @@ export const BillingDetailPage = () => {
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="txn-detail">
+                <div className="txn-num-group">
+                  <div className="txn-amount">
+                    <div className="value">
+                      <NumericFormat
+                        value={ 100000000 } 
+                        thousandSeparator
+                        displayType="text"
+                      ></NumericFormat>
+                      <span className="unit">원</span>
+                    </div>
+                    <div className="txn-mid">
+                      <span className="value">{ 'nitnitni' }</span>
+                    </div>
+                  </div>
+
+                </div>
+                <div className="txn-divider"></div>
                <BillingInfoWrap
-                  transactionCategory={ TransactionCategory.Billing }
                  billingInfo={ billingInfo }
                ></BillingInfoWrap>
              </div>
--- a/src/pages/transaction/billing/list-page.tsx
+++ b/src/pages/transaction/billing/list-page.tsx
@@ -35,8 +35,8 @@ export const BillingListPage = () => {
 	const [listItems, setListItems] = useState({});
 	const [filterOn, setFilterOn] = useState<boolean>(false);
 	const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
-	const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
+	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
+	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
 		
 	useSetHeaderTitle('빌링');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -57,7 +57,7 @@ export const BillingListPage = () => {
    let listParams = {
      mid: 'nictest001m',
      searchType: 'ALL',
-			searchKeyword: 'P14633723',
+			searchKeyword: '',
      startDate: startDate,
      endDate: endDate,
      requestStatus: 'ALL',
--- a/src/pages/transaction/cash-receipt/detail-page.tsx
+++ b/src/pages/transaction/cash-receipt/detail-page.tsx
@@ -12,7 +12,8 @@ import {
  DetailResponse,
  IssueInfo,
  DetailInfo,
-  InfoWrapKeys
+  InfoWrapKeys,
+  CashReceiptPurpose
 } from '@/entities/transaction/model/types';
 import {
  useSetOnBack, 
@@ -20,6 +21,8 @@ import {
  useSetHeaderType,
  useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
+import { BottomSheetCashReceitPurposeUpdate } from '@/entities/transaction/ui/bottom-sheet-cash-receit-purpose-update';
+import { useCashReceiptPurposeUpdateMutation } from '@/entities/transaction/api/use-cash-receipt-purpose-update';

 export const CashReceiptDetailPage = () => {
  const { navigate } = useNavigate();
@@ -28,6 +31,8 @@ export const CashReceiptDetailPage = () => {
  const [issueInfo, setIssueInfo] = useState<IssueInfo>();
  const [detailInfo, setDetailInfo] = useState<DetailInfo>();
  const [showDetailInfo, setShowDetailInfo] = useState<boolean>(false);
+  const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
+  const [purpose, setPurpose] = useState<CashReceiptPurpose>();
  
  useSetHeaderTitle('현금영수증 상세');
  useSetHeaderType(HeaderType.RightClose);
@@ -36,15 +41,35 @@ export const CashReceiptDetailPage = () => {
  });
  useSetFooterMode(false);

-  const { mutateAsync: escroDetail } = useCashReceiptDetailMutation();
-    
+  const issueNumber = location?.state.issueNumber
+
+  const { mutateAsync: cashReceiptDetail } = useCashReceiptDetailMutation();
+  const { mutateAsync: cashReceiptPurposeUpdate } = useCashReceiptPurposeUpdateMutation();
+  
+  const callPurposeUpdate = () => {
+    let newPurpose = (purpose === CashReceiptPurpose.EXPENSE_PROOF)
+      ? CashReceiptPurpose.INCOME_DEDUCTION: CashReceiptPurpose.EXPENSE_PROOF;
+    let params = {
+      issueNumber: issueNumber,
+      newPurpose: newPurpose
+    };
+    cashReceiptPurposeUpdate(params).then((rs) => {
+      setPurpose(rs.afterPurposeType);
+      setBottomSheetOn(false);
+      alert('toast : 용도 변경을 성공하였습니다.')
+    });  
+  };
+
  const callDetail = () => {
    let cashReceitDetailParams: CashReceiptDetailParams = {
-      issueNumber: location?.state.issueNumber
+      issueNumber: issueNumber
    };
-    escroDetail(cashReceitDetailParams).then((rs: DetailResponse) => {
+    cashReceiptDetail(cashReceitDetailParams).then((rs: DetailResponse) => {
      setIssueInfo(rs.issueInfo);
      setDetailInfo(rs.detailInfo);
+      if(rs.issueInfo){
+        setPurpose(rs.issueInfo.purpose);
+      }
    });
  };
  useEffect(() => {
@@ -57,6 +82,10 @@ export const CashReceiptDetailPage = () => {
    }
  };

+  const onClickToPurposeUpdate = () => {
+    setBottomSheetOn(true);
+  };
+
  return (
    <>
      <main>
@@ -67,6 +96,7 @@ export const CashReceiptDetailPage = () => {
                <IssueInfoWrap
                  transactionCategory={ TransactionCategory.CashReceipt }
                  issueInfo={ issueInfo }
+                  purpose={ purpose }
                ></IssueInfoWrap>
                <div className="txn-divider minus"></div>
                <DetailInfoWrap
@@ -77,9 +107,20 @@ export const CashReceiptDetailPage = () => {
                ></DetailInfoWrap>
              </div>
            </div>
+            <div className="apply-row">
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToPurposeUpdate() }
+              >용도 변경</button>
+            </div>
          </div>
        </div>
      </main>
+      <BottomSheetCashReceitPurposeUpdate
+        setBottomSheetOn={ setBottomSheetOn }
+        bottomSheetOn={ bottomSheetOn }
+        callPurposeUpdate={ callPurposeUpdate }
+      ></BottomSheetCashReceitPurposeUpdate>
    </>
  );
 };
--- a/src/pages/transaction/cash-receipt/hand-written-issuance-page.tsx
+++ b/src/pages/transaction/cash-receipt/hand-written-issuance-page.tsx
@@ -1,30 +1,66 @@
-import {useState} from 'react';
-import {PATHS} from '@/shared/constants/paths';
-import {useNavigate} from '@/shared/lib/hooks/use-navigate';
-import {CashReceiptHandWrittenIssuanceStep1} from '@/entities/transaction/ui/cash-receipt-hand-written-issuance-step1';
-import {CashReceiptHandWrittenIssuanceStep2} from '@/entities/transaction/ui/cash-receipt-hand-written-issuance-step2';
-import {ProcessStep} from '@/entities/transaction/model/types';
-import {HeaderType} from '@/entities/common/model/types';
-import {useSetFooterMode, useSetHeaderTitle, useSetHeaderType} from '@/widgets/sub-layout/use-sub-layout';
+import { useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { CashReceiptHandWrittenIssuanceStep1 } from '@/entities/transaction/ui/cash-receipt-hand-written-issuance-step1';
+import { CashReceiptHandWrittenIssuanceStep2 } from '@/entities/transaction/ui/cash-receipt-hand-written-issuance-step2';
+import { CashReceiptPurpose, ProcessStep } from '@/entities/transaction/model/types';
+import { HeaderType} from '@/entities/common/model/types';
+import { useSetFooterMode, useSetHeaderTitle, useSetHeaderType } from '@/widgets/sub-layout/use-sub-layout';
+import { useCashReceiptManualIssueMutation } from '@/entities/transaction/api/use-cash-receipt-manual-issue';

 export const CashReceitHandWrittenIssuancePage = () => {
  const { navigate } = useNavigate();

  // 1 or 2
  const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
+  const [businessNumber, setBusinessNumber] = useState<string>('5459577852');
+  const [purpose, setPurpose] = useState<CashReceiptPurpose>(CashReceiptPurpose.INCOME_DEDUCTION);
+  const [productName, setProductName] = useState<string>('상품명');
+  const [buyerName, setBuyerName] = useState<string>('구매자명');
+  const [issueNumber, setIssueNumber] = useState<string>('01012341234');
+  const [email, setEmail] = useState<string>('test123@nicepay.com');
+  const [phoneNumber, setPhoneNumber] = useState<string>('01012341234');
+  const [supplyAmount, setSupplyAmount] = useState<number | string>(9091);
+  const [vatAmount, setVatAmount] = useState<number | string>(909);
+  const [taxFreeAmount, setTaxFreeAmount] = useState<number | string>(0);
+  const [serviceCharge, setServiceCharge] = useState<number | string>(0);

  useSetHeaderTitle('수기 발행');
  useSetHeaderType(HeaderType.RightClose);
  useSetFooterMode(false);
+
+  const { mutateAsync: cashReceiptManualIssue } = useCashReceiptManualIssueMutation();
  
+  const callManualIssue = () => {
+    let params = {
+      businessNumber: businessNumber,
+      purpose: purpose,
+      productName: productName,
+      buyerName: buyerName,
+      issueNumber: issueNumber,
+      email: email,
+      phoneNumber: phoneNumber,
+      supplyAmount: 9091,
+      vatAmount: 909,
+      taxFreeAmount: 0,
+      serviceCharge: 0
+    };
+    cashReceiptManualIssue(params).then((rs) => {
+      console.log(rs);
+      alert('완료');
+      navigate(PATHS.transaction.cashReceipt.list);
+    });
+  };
+
  const onClickToChangeTab = () => {
    if(processStep === ProcessStep.One){
      setProcessStep(ProcessStep.Two);
    }
    else if(processStep === ProcessStep.Two){
+      callManualIssue();
      // 완료시?
-      alert('완료');
-      navigate(PATHS.transaction.cashReceipt.list);
+      //alert('완료');
+      // navigate(PATHS.transaction.cashReceipt.list);
    }
  };

@@ -36,34 +72,60 @@ export const CashReceitHandWrittenIssuancePage = () => {
            <div className="option-list">
              <div className="issue-progress">
                <div className="bar">
-                    {(processStep === ProcessStep.One) &&
-                        <div
-                            className="fill"
-                            style={{ width: '50%' }}
-                        ></div>
-                    }
-                    {(processStep === ProcessStep.Two) &&
-                        <div
-                            className="fill"
-                            style={{ width: '100%' }}
-                            ></div>
-                    }
+                  {(processStep === ProcessStep.One) &&
+                    <div
+                      className="fill"
+                      style={{ width: '50%' }}
+                    ></div>
+                  }
+                  {(processStep === ProcessStep.Two) &&
+                    <div
+                      className="fill"
+                      style={{ width: '100%' }}
+                    ></div>
+                  }
                </div>
-                { (processStep === ProcessStep.One) &&
-                  <CashReceiptHandWrittenIssuanceStep1></CashReceiptHandWrittenIssuanceStep1>
-                }
-                { (processStep === ProcessStep.Two) &&
-                  <CashReceiptHandWrittenIssuanceStep2
-                    setProcessStep={ setProcessStep }
-                  ></CashReceiptHandWrittenIssuanceStep2>
-                }
              </div>
+              { (processStep === ProcessStep.One) &&
+                <CashReceiptHandWrittenIssuanceStep1
+                  businessNumber={ businessNumber }
+                  purpose={ purpose }
+                  productName={ productName }
+                  buyerName={ buyerName }
+                  issueNumber={ issueNumber }
+                  email={ email }
+                  phoneNumber={ phoneNumber }
+                  setBusinessNumber={ setBusinessNumber }
+                  setPurpose={ setPurpose }
+                  setProductName={ setProductName }
+                  setBuyerName={ setBuyerName }
+                  setIssueNumber={ setIssueNumber }
+                  setEmail={ setEmail }
+                  setPhoneNumber={ setPhoneNumber }
+                ></CashReceiptHandWrittenIssuanceStep1>
+              }
+              { (processStep === ProcessStep.Two) &&
+                <CashReceiptHandWrittenIssuanceStep2
+                  setProcessStep={ setProcessStep }
+                  supplyAmount={ supplyAmount }
+                  vatAmount={ vatAmount }
+                  taxFreeAmount={ taxFreeAmount }
+                  serviceCharge={ serviceCharge }
+                  setSupplyAmount={ setSupplyAmount }
+                  setVatAmount={ setVatAmount }
+                  setTaxFreeAmount={ setTaxFreeAmount }
+                  setServiceCharge={ setServiceCharge }
+                ></CashReceiptHandWrittenIssuanceStep2>
+              }
            </div>
            <div className="apply-row">
              <button 
                className="btn-50 btn-blue flex-1"
                onClick={ () => onClickToChangeTab() }
-              >다음</button>
+              >
+                { (processStep === ProcessStep.One) && '다음' }
+                { (processStep === ProcessStep.Two) && '발행' }
+              </button>
            </div>
          </div>
        </div>
--- a/src/pages/transaction/escrow/detail-page.tsx
+++ b/src/pages/transaction/escrow/detail-page.tsx
@@ -33,11 +33,13 @@ export const EscrowDetailPage = () => {
  const { navigate } = useNavigate();
  const location = useLocation();
  
+  const [amountInfo, setAmountInfo] = useState<ImportantInfo>();
  const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
  const [escrowInfo, setEscrowInfo] = useState<EscrowInfo>();
  const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
  const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
  const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
+  const [showAmountInfo, setShowAmountInfo] = useState<boolean>(false);
  const [showImportantInfo, setShowImportantInfo] = useState<boolean>(false);
  const [showEscroInfo, setShowEscroInfo] = useState<boolean>(false);
  const [showPaymentInfo, setShowPaymentInfo] = useState<boolean>(false);
@@ -71,7 +73,10 @@ export const EscrowDetailPage = () => {
  }, []);
  
  const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
-    if(infoWrapKey === InfoWrapKeys.Important){
+    if(infoWrapKey === InfoWrapKeys.Amount){
+      setShowAmountInfo(!showAmountInfo);
+    }
+    else if(infoWrapKey === InfoWrapKeys.Important){
      setShowImportantInfo(!showImportantInfo);
    }
    else if(infoWrapKey === InfoWrapKeys.Escrow){
@@ -98,8 +103,7 @@ export const EscrowDetailPage = () => {
                <ImportantInfoWrap
                  transactionCategory={ TransactionCategory.Escrow }
                  importantInfo={ importantInfo }
-                  show={ showImportantInfo }
-                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                  
                ></ImportantInfoWrap>
                <div className="txn-divider minus"></div>
                <EscrowInfoWrap