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

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>
     </>
   );
 };

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>