현금영수증 완료

src/pages/transaction/cash-receipt/detail-page.tsx

@@ -14,7 +14,9 @@ import {
   DetailInfo,
   InfoSectionKeys,
   CashReceiptPurposeType,
-  AmountInfo
+  AmountInfo,
+  CashReceiptPurposeUpdateParams,
+  CashReceiptTransactionType
 } from '@/entities/transaction/model/types';
 import {
   useSetOnBack, 
@@ -25,17 +27,21 @@ import {
 import { CashReceitPurposeUpdateBottomSheet } from '@/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet';
 import { useCashReceiptPurposeUpdateMutation } from '@/entities/transaction/api/use-cash-receipt-purpose-update-mutation';
 import { AmountInfoSection } from '@/entities/transaction/ui/section/amount-info-section';
+import { snackBar } from '@/shared/lib';
 
 export const CashReceiptDetailPage = () => {
-  const { navigate } = useNavigate();
+  const { navigate, reload } = useNavigate();
   const location = useLocation();
   
   const [amountInfo, setAmountInfo] = useState<AmountInfo>();
   const [issueInfo, setIssueInfo] = useState<IssueInfo>();
   const [detailInfo, setDetailInfo] = useState<DetailInfo>();
+  const [showAmountInfo, setShowAmountInfo] = useState<boolean>(false);
   const [showDetailInfo, setShowDetailInfo] = useState<boolean>(false);
   const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
   const [purposeType, setPurposeType] = useState<string>();
+  const [canDownloadReceipt, setCanDownloadReceipt] = useState<boolean>(false);
+
   
   useSetHeaderTitle('현금영수증 상세');
   useSetHeaderType(HeaderType.RightClose);
@@ -44,7 +50,7 @@ export const CashReceiptDetailPage = () => {
   });
   useSetFooterMode(false);
 
-  const approvalNumber = location?.state.approvalNumber
+  const tid = location?.state.tid
 
   const { mutateAsync: cashReceiptDetail } = useCashReceiptDetailMutation();
   const { mutateAsync: cashReceiptPurposeUpdate } = useCashReceiptPurposeUpdateMutation();
@@ -52,25 +58,28 @@ export const CashReceiptDetailPage = () => {
   const callPurposeUpdate = () => {
     let newPurpose = (purposeType === CashReceiptPurposeType.EXPENSE_PROOF)
       ? CashReceiptPurposeType.INCOME_DEDUCTION: CashReceiptPurposeType.EXPENSE_PROOF;
-    let params = {
-      approvalNumber: approvalNumber,
+    let params: CashReceiptPurposeUpdateParams = {
+      tid: tid,
       newPurpose: newPurpose
     };
     cashReceiptPurposeUpdate(params).then((rs) => {
       setPurposeType(rs.afterPurposeType);
       setBottomSheetOn(false);
-      alert('toast : 용도 변경을 성공하였습니다.')
+      snackBar('용도 변경을 성공하였습니다.', function(){
+        reload();
+      }, 2000);
     });  
   };
 
   const callDetail = () => {
     let cashReceitDetailParams: CashReceiptDetailParams = {
-      approvalNumber: approvalNumber
+      tid: tid
     };
     cashReceiptDetail(cashReceitDetailParams).then((rs: DetailResponse) => {
-      setAmountInfo(rs.amountInfo || {});
+      setAmountInfo(rs.amountDetail || {});
       setIssueInfo(rs.issueInfo || {});
       setDetailInfo(rs.detailInfo || {});
+      setCanDownloadReceipt(rs.detailInfo?.canDownloadReceipt || false);
       if(rs.issueInfo){
         setPurposeType(rs.issueInfo.purpose);
       }
@@ -81,7 +90,10 @@ export const CashReceiptDetailPage = () => {
   }, []);
 
   const onClickToOpenInfo = (infoSectionKey: InfoSectionKeys) => {
-    if(infoSectionKey === InfoSectionKeys.Detail){
+    if(infoSectionKey === InfoSectionKeys.Amount){
+      setShowAmountInfo(!showAmountInfo);
+    }
+    else if(infoSectionKey === InfoSectionKeys.Detail){
       setShowDetailInfo(!showDetailInfo);
     }
   };
@@ -100,7 +112,10 @@ export const CashReceiptDetailPage = () => {
                 <AmountInfoSection
                   transactionCategory={ TransactionCategory.CashReceipt }
                   amountInfo={ amountInfo }
+                  isOpen={ showAmountInfo }
+                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
                   purposeType={ purposeType }
+                  canDownloadReceipt={ canDownloadReceipt }
                 ></AmountInfoSection>
                 <div className="txn-divider"></div>
                 <IssueInfoSection
@@ -117,13 +132,14 @@ export const CashReceiptDetailPage = () => {
                 ></DetailInfoSection>
               </div>
             </div>
-            { !!detailInfo?.canDownloadReceipt && 
-            <div className="apply-row">
-              <button 
-                className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToPurposeUpdate() }
-              >용도 변경</button>
-            </div>
+            { (issueInfo?.transactionType === CashReceiptTransactionType.APPROVAL) &&
+              (issueInfo?.processResult === '발급완료') &&
+              <div className="apply-row">
+                <button 
+                  className="btn-50 btn-blue flex-1"
+                  onClick={ () => onClickToPurposeUpdate() }
+                >용도 변경</button>
+              </div>
             }
           </div>
         </div>