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

import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
import { SlideDown } from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';

export const TransactionInfoSection = ({
  transactionCategory,
  transactionInfo,
  serviceCode,
  isOpen,
  onClickToOpenInfo
}: InfoSectionProps) => {
  const { t } = useTranslation();

  const subItems: Record<string, Record<string, string>> = {
    buyerName: {name: t('transaction.fields.buyerName'), type: 'string'},
    buyerEmail: {name: t('transaction.fields.buyerEmail'), type: 'string'},
    buyerTel: {name: t('transaction.fields.buyerTel'), type: 'string'},
    cancelReason: {name: t('transaction.fields.cancelReason'), type: 'string'},
    cancelRequestor: {name: t('transaction.fields.cancelRequestor'), type: 'string'},
    partialCancel: {name: t('transaction.fields.partialCancel'), type: 'string'},
    cashReceiptIssue: {name: t('transaction.fields.cashReceiptIssue'), type: 'string'},
  };

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

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

    if(!!newTransactionInfo && !!serviceCode && !!openSubItems[serviceCode]){
      for(let i=0;i<openSubItems[serviceCode].length;i++){
        let k = openSubItems[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') &&
                (k === 'partialCancel')? ((newTransactionInfo[k] === '1')? t('transaction.possible'): t('transaction.impossible')): newTransactionInfo[k] 
              }
              { (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'number') &&
                t('home.money', { value: new Intl.NumberFormat('en-US').format(newTransactionInfo[k] || 0) })
              }
              { (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'date') &&
                moment(newTransactionInfo[k]).format('YYYY.MM.DD')
              }
              </span>
            </li>
          );
        }
      }
    }
    return rs;
  };

  const onClickToSetOpenInfo = () => {
    if(!!onClickToOpenInfo){
      onClickToOpenInfo(InfoSectionKeys.Transaction);
    }
  };

  return (
    <>
      <div className="txn-section">
        <div
          className="section-title with-toggle"
          onClick={ () => onClickToSetOpenInfo() }
        >
          {t('transaction.sections.transactionInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
        </div>
        <SlideDown className={'my-dropdown-slidedown'}>
        { !!isOpen &&
          <ul className="kv-list">
          { (transactionCategory === TransactionCategory.AllTransaction) &&
            subLi()
          }
          { (transactionCategory === TransactionCategory.Escrow) &&
            <>
              <li className="kv-row">
                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.buyerName')}</span>
                <span className="v">{ transactionInfo?.buyerName }</span>
              </li>
              <li className="kv-row">
                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.buyerEmail')}</span>
                <span className="v">{ transactionInfo?.buyerEmail }</span>
              </li>
              <li className="kv-row">
                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.buyerTel')}</span>
                <span className="v">{ transactionInfo?.buyerTel }</span>
              </li>
              <li className="kv-row">
                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelReason')}</span>
                <span className="v">{ transactionInfo?.cancelReason }</span>
              </li>
              <li className="kv-row">
                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelRequestor')}</span>
                <span className="v">{ transactionInfo?.cancelRequestor }</span>
              </li>
              <li className="kv-row">
                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.partialCancel')}</span>
                <span className="v">{ (transactionInfo?.partialCancel === '1')? t('transaction.possible'): t('transaction.impossible') }</span>
              </li>
              { (serviceCode === '02' || serviceCode === '03') &&
              <li className="kv-row">
                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cashReceiptIssue')}</span>
                <span className="v">{ transactionInfo?.cashReceiptIssue }</span>
              </li>
              }
            </>
          }
          </ul>
        }
        </SlideDown>
      </div>
    </>
  )
};