nice-app-web/src/pages/settlement/list/detail-page.tsx

import { useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { AmountInfoWrap } from '@/entities/settlement/ui/info-wrap/amount-info-wrap';
import { SettlementInfoWrap } from '@/entities/settlement/ui/info-wrap/settlement-info-wrap';
import { TransactionInfoWrap } from '@/entities/settlement/ui/info-wrap/transaction-info-wrap'
import { HeaderType } from '@/entities/common/model/types';
import { 
  AmountInfo,
  InfoWrapKeys,
  SettlementInfo,
  SettlementPeriodType,
  SettlementsHistoryDetailParams,
  SettlementsHistoryDetailResponse,
  SettlementsTransactionDetailParams,
  SettlementsTransactionDetailResponse,
  TransactionInfo
} from '@/entities/settlement/model/types';
import {
  useSetOnBack, 
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { useSettlementsHistoryDetailMutation } from '@/entities/settlement/api/use-settlements-history-detail-mutation';
import { useSettlementsTransactionDetailMutation } from '@/entities/settlement/api/use-settlements-transaction-detail-mutation';
import { NumericFormat } from 'react-number-format';
import moment from 'moment';

export const DetailPage = () => {
  const { navigate } = useNavigate();
  const location = useLocation();
  
  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
  const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
  const [settlementAmount, setSettlementAmount] = useState<number>();
  const [settlementDate, setSettlementDate] = useState<string>();
  const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
  const [transactionAmount, setTransactionAmount] = useState<number>();
  const [merchantName, setMerchantName] = useState<string>();

  const [showSettlement, setShowSettlement] = useState<boolean>(false);
  const [showTransaction, setShowTransaction] = useState<boolean>(false);

  const { mutateAsync: settlementsHistoryDetail } = useSettlementsHistoryDetailMutation();
  const { mutateAsync: settlementsTransactionDetail } = useSettlementsTransactionDetailMutation();
  
  const settlementId = location.state.settlementId;
  const approvalNumber = location.state.approvalNumber;
  const periodType = location.state.periodType;
  

  useSetHeaderTitle('정산내역 상세');
  useSetHeaderType(HeaderType.RightClose);
  useSetOnBack(() => {
    navigate(PATHS.settlement.list);
  });
  useSetFooterMode(false);

  const callSettlementDetail = () => {
    let params: SettlementsHistoryDetailParams = {
      settlementId: settlementId
    };

    settlementsHistoryDetail(params).then((rs: SettlementsHistoryDetailResponse) => {
      setAmountInfo(rs.amountInfo);
      setSettlementInfo(rs.settlementInfo);
      setSettlementAmount(rs.settlementAmount);
      setSettlementDate(rs.settlementDate);
    });
  };
  const callTransactionDetail = () => {
    let params: SettlementsTransactionDetailParams = {
      approvalNumber: approvalNumber
    };

    settlementsTransactionDetail(params).then((rs: SettlementsTransactionDetailResponse) => {
      setAmountInfo(rs.amountInfo);
      setTransactionInfo(rs.transactionInfo);
      setTransactionAmount(rs.transactionAmount);
      setMerchantName(rs.merchantName);
    });
  };
  
  const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
    if(infoWrapKey === InfoWrapKeys.Settlement){
      setShowSettlement(!showSettlement);
    }
    else if(infoWrapKey === InfoWrapKeys.Transaction){
      setShowTransaction(!showTransaction);
    }
  };

  useEffect(() => {
    if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
      callSettlementDetail();
    }
    else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
      callTransactionDetail();
    }
  }, []);

  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="txn-detail">
                { (periodType === SettlementPeriodType.SETTLEMENT_DATE) && 
                  <div className="txn-num-group">
                    <div className="txn-amount">
                      <div className="value">
                        <NumericFormat
                          value={ settlementAmount } 
                          thousandSeparator
                          displayType="text"
                        ></NumericFormat><span className="unit">원</span>
                      </div>
                    </div>
                    <div className="txn-date">{ moment(settlementDate).format('YYYY.MM.DD') }</div>
                  </div>
                }
                { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
                  <div className="txn-num-group">
                    <div className="txn-amount">
                      <div className="value">
                        <NumericFormat
                          value={ transactionAmount } 
                          thousandSeparator
                          displayType="text"
                        ></NumericFormat><span className="unit">원</span>
                      </div>
                    </div>
                    <div className="txn-date">{ merchantName }</div>
                  </div>
                }
                <div className="txn-divider minus"></div>
                
                <AmountInfoWrap
                  periodType={ periodType }
                  amountInfo={ amountInfo }
                ></AmountInfoWrap>
                <div className="txn-divider"></div>
                { (periodType === SettlementPeriodType.SETTLEMENT_DATE) && 
                  <SettlementInfoWrap
                    settlementInfo={ settlementInfo }
                    show={ showSettlement }
                    onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
                  ></SettlementInfoWrap>
                }
                { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
                  <TransactionInfoWrap
                    transactionInfo={ transactionInfo }
                    show={ showTransaction }
                    onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
                  ></TransactionInfoWrap>
                }
              </div>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};