nice-app-web/src/entities/transaction/ui/info-wrap/transaction-info-wrap.tsx

import moment from 'moment';
import { motion } from 'framer-motion';
import { DetailArrow } from '../detail-arrow';
import { InfoWrapKeys, DetailInfoProps, TransactionCategory } from '../../model/types';
import { NumericFormat } from 'react-number-format';

export const TransactionInfoWrap = ({
  transactionCategory,
  transactionInfo,
  serviceCode,
  show,
  onClickToShowInfo
}: DetailInfoProps) => {

  const subItems: Record<string, Record<string, string>> = {
    buyerName: {name: '구매자명', type: 'string'},
    email: {name: '이메일', type: 'string'},
    phoneNumber: {name: '전화번호', type: 'string'},
    cancelReason: {name: '취소사유', type: 'string'},
    cancelRequestor: {name: '취소요청자', type: 'string'},
    partialCancel: {name: '부분취소', type: 'string'},
    cashReceiptIssue: {name: '현금영수증발행', type: 'string'},
  };

  const showSubItems: Record<string, Array<string>> = {
    // 신용카드
    '01': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
      'cancelRequestor', 'partialCancel'],
    // 계좌이체
    '02': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
      'cancelRequestor', 'partialCancel', 'cashReceiptIssue'],
    // 가상계좌
    '03': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
      'cancelRequestor', 'partialCancel', 'cashReceiptIssue'],
    // 휴대폰
    '04': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
      'cancelRequestor'],
    // 계좌간편결제
    '26': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
      'cancelRequestor', 'partialCancel', 'cashReceiptIssue'],
    // SSG머니
    '21': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
      'cancelRequestor'],
    // SSG은행계좌
    '24': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
      'cancelRequestor'],
    // 문화상품권
    '14': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
      'cancelRequestor'],
    // 티머니페이
    '31': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
      'cancelRequestor'],
  };

  const checkValue = (val: any) => {
    return (!!val || val === 0);
  };
  let newTransactionInfo: Record<string, any> | undefined = transactionInfo;
  const subLi = () => {
    let rs = [];

    if(!!newTransactionInfo && !!serviceCode && !!showSubItems[serviceCode]){
      for(let i=0;i<showSubItems[serviceCode].length;i++){
        let k = showSubItems[serviceCode][i];
        if(!!k){
          rs.push(
            <li 
              key={`key-important-item-${i}`}
              className="kv-row"
            >
              <span className="k">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
              <span className="v">
              { (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'string') &&
                newTransactionInfo[k] 
              }
              { (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'number') &&
                <NumericFormat
                  value={ newTransactionInfo[k] } 
                  thousandSeparator
                  displayType="text"
                  suffix='원'
                ></NumericFormat>
              }
              { (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'date') &&
                moment(newTransactionInfo[k]).format('YYYY.MM.DD')
              }
              </span>
            </li>
          );
        }
      }
    }
    return rs;
  };


  const variants = {
    hidden: { height: 0, display: 'none' },
    visible: { height: 'auto', display: 'block' },
  };

  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
      onClickToShowInfo(InfoWrapKeys.Transaction);
    }
  };

  return (
    <>
      <div className="txn-section" onClick={ () => onClickToSetShowInfo() }>
        <div 
          className="section-title with-toggle"
          
        >
          거래 정보 <DetailArrow show={ show }></DetailArrow>
        </div>
        <motion.ul 
          className="kv-list"
          initial="hidden"
          animate={ (show)? 'visible': 'hidden' }
          variants={ variants }
          transition={{ duration: 0.3 }}
        >
          { (transactionCategory === TransactionCategory.AllTransaction) && 
            subLi()
          }
          { (transactionCategory === TransactionCategory.Escrow) && 
            <>
              <li className="kv-row">
                <span className="k">가맹점명</span>
                <span className="v">NICE PAY</span>
              </li>
              <li className="kv-row">
                <span className="k">사업자번호</span>
                <span className="v">123-45-67890</span>
              </li>
            </>
          }
          
        </motion.ul>
      </div>
    </>
  )
};