nice-app-web/src/entities/additional-service/ui/list-item.tsx

import { NumericFormat } from 'react-number-format';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { ListItemProps, AdditionalServiceCategory } from '../model/types';
import { getPaymentStatusText, getProcessStatusText, getSendMethodText } from '../lib/payment-status-utils';
import moment from 'moment';

export const ListItem = ({
  additionalServiceCategory,
  mid, tid, paymentDate, paymentStatus,

  requestDate, bankName, accountNo, resultStatus,
  amount, sendDate, sendStatus, sendMethod,
  scheduledSendDate, processStatus,

  accountName, transferStatus,

  submallId, settlementDate, companyName,
  disbursementStatus, disbursementAmount,

  transferAmount, receiveBankName,
  receiveAccountNo, receiveAccountName,
  status, processDate,

  orderStatus, arsPaymentMethod,

  alimCl, sendType, sendCl,
  paymentMethod, receiverName,

  smsCl
}: ListItemProps) => {
  const { navigate } = useNavigate();
  const getItemClass = () => {
    let rs = '';
    if (paymentStatus === '') {
      rs = '';
    }
    else if (paymentStatus === "APPROVAL") {
      rs = 'approved';
    }
    else if (paymentStatus === "ALL_CANCEL") {
      rs = 'refund';
    }
    else if (paymentStatus === 'AFTER_CANCEL') {
      rs = 'refund';
    }
    return rs;
  };

  const getDotClass = (str?: string) => {
    let rs = '';
    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
      if (paymentStatus === '') {
        rs = '';
      }
      else if (paymentStatus === "APPROVAL") {
        rs = 'blue';
      }
      else if (paymentStatus === "ALL_CANCEL") {
        rs = 'gray';
      }
      else if (paymentStatus === 'AFTER_CANCEL') {
        rs = 'gray';
      }

    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
      if (transferStatus === "REQUEST" || transferStatus === "SUCCESS") {
        rs = 'blue';
      } else if (transferStatus === "FAIL") {
        rs = 'gray';
      }
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      if (resultStatus === "SUCCESS") {
        rs = 'blue';
      }
      else if (resultStatus === "FAIL") {
        rs = 'gray';
      }
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
      if (paymentStatus === "PAYMENT_COMPLETE") {
        rs = 'blue';
      }

      else if (paymentStatus === "ACTIVE") {
        rs = 'blue';
      }
      else if (paymentStatus === "DEPOSIT_REQUEST") {
        rs = 'blue';
      }
      else if (paymentStatus === "PAYMENT_FAIL") {
        rs = 'blue';
      }
      else if (paymentStatus === "INACTIVE") {
        rs = 'gray';
      }
    } else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait) {
      if (processStatus === "SEND_REQUEST") {
        rs = 'blue'
      } else {
        rs = 'gray'
      }
    } else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
      if (smsCl === "VACCOUNT_REQ_DEPOSIT") {
        rs = 'blue'
      } else {
        rs = 'gray'
      }
    }
    return rs;

  };

  const onClickToNavigate = () => {
    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment ||
      additionalServiceCategory === AdditionalServiceCategory.SMSPayment
    ) {

      return;
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
      navigate(PATHS.additionalService.accountHolderAuth.detail, {
        state: {
          additionalServiceCategory: additionalServiceCategory,
          mid: mid,
          tid: tid
        }
      })
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      navigate(PATHS.additionalService.accountHolderSearch.detail, {
        state: {
          additionalServiceCategory: additionalServiceCategory,
          mid: mid,
          tid: tid
        }
      });
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
      navigate(PATHS.additionalService.linkPayment.detail, {
        state: {
          additionalServiceCategory: additionalServiceCategory,
          mid: mid,
          tid: tid
        }
      });
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait) {
      navigate(PATHS.additionalService.linkPayment.pendingDetail, {
        state: {
          additionalServiceCategory: additionalServiceCategory,
          mid: mid,
          tid: tid
        }
      });
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
      navigate(PATHS.additionalService.fundAccount.transferDetail, {
        state: {
          additionalServiceCategory: additionalServiceCategory,
          mid: mid,
          tid: tid
        }
      });
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
      navigate(PATHS.additionalService.fundAccount.resultDetail, {
        state: {
          additionalServiceCategory: additionalServiceCategory,
          mid: mid,
          tid: tid
        }
      });
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.SettlementAgency) {

    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
      navigate(PATHS.additionalService.payout.detail, {
        state: {
          additionalServiceCategory: additionalServiceCategory,
          mid: mid,
          tid: tid
        }
      });
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
      navigate(PATHS.additionalService.ars.detail, {
        state: {
          additionalServiceCategory: additionalServiceCategory,
          mid: mid,
          tid: tid,
          amount: amount
        }
      });
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
      navigate(PATHS.additionalService.alimtalk.detail, {
        state: {
          additionalServiceCategory: additionalServiceCategory,
          mid: mid,
          tid: tid,
        }
      });
    }
    else {
      alert('additionalServiceCategory가 존재하지 않습니다.');
    }
  };

  const getTime = () => {
    let timeStr = '';
    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
      let time = paymentDate?.substring(8, 12);
      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
      let time = requestDate?.substring(8, 14);
      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4) + ':' + time?.substring(4, 6);
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      let time = requestDate?.substring(8, 14);
      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4) + ':' + time?.substring(4, 6);
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
      timeStr = moment(requestDate).format('mm:ss');
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
      timeStr = moment(requestDate).format('mm:ss');
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
      let time = paymentDate?.substring(8, 12);
      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
      let time = paymentDate?.substring(8, 12);
      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
    }
    else {
      return
    }
    return timeStr
  };

  const getTitle = () => {
    let str: string | undefined = '';
    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
      str = `${tid}(${amount})`;
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
      str = `${accountName}(${accountNo})`;
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      str = `${accountNo}`;
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory ||
      additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait
    ) {
      if (sendMethod === "SMS") {
        str = `${"buyerName"}(${"휴대폰 번호"})`;
      } else {
        str = `${"buyerName"}(${"이메일"})`;
      }
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
      str = companyName;
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
      str = `${receiveAccountName}(${receiveAccountNo})`;
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
      str = `${receiveAccountName}(${receiveAccountNo})`;
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
      str = `${paymentDate}(${paymentStatus})[추후 수정 필요]`
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
      str = '이름(' + tid + ')';
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
      str = `${receiverName}(${tid})`;
    }

    return str;
  };

  const getDetail = () => {
    let rs = [];
    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
      rs.push(
        <div key='key-in-list' className="transaction-details">
          <span>{getTime()}</span>
          <span className="separator">|</span>
          <span>{paymentStatus}</span>
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
      rs.push(
        <div key="account-auth-list" className="transaction-details">
          <span>{getTime()}</span>
          <span className="separator">|</span>
          <span>{bankName}</span>
        </div>
      )
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      rs.push(
        <div key="account-search" className="transaction-details">
          <span>{getTime()}</span>
          <span className="separator">|</span>
          <span>{bankName}</span>
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
      if (paymentStatus === "PAYMENT_FAIL" || paymentStatus === "INACTIVE") {
        rs.push(
          <div key="link-payment-history" className="transaction-details">
            <span>{getPaymentStatusText(paymentStatus)}</span>
            <span className="separator">|</span>
            <span>{getSendMethodText(sendMethod)}</span>
          </div>
        )
      } else {
        rs.push(
          <div key="link-payment-history" className="transaction-details">
            <span>{getPaymentStatusText(paymentStatus)}</span>
            <span className="separator">|</span>
            <span>{getSendMethodText(sendMethod)}</span>
            <span className="separator">|</span>
            <span>{"결제수단 추가 필요"}</span>
          </div>
        );
      }
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait) {
      rs.push(
        <div key="link-payment-wait" className="transaction-details">
          <span>{getProcessStatusText(processStatus)}</span>
          <span className="separator">|</span>
          <span>{getSendMethodText(sendMethod)}</span>
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
      rs.push(
        <div className="transaction-details">
          <span>{disbursementStatus}</span>
          <span className="separator">|</span>
          <span>{submallId}</span>
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
      rs.push(
        <div className="transaction-details">
          <span>{getTime()}</span>
          <span className="separator">|</span>
          <span>{status}</span>
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
      rs.push(
        <div className="transaction-details">
          <span>{getTime()}</span>
          <span className="separator">|</span>
          <span>{status}</span>
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
      rs.push(
        <div className="transaction-details">
          <span>{getTime()}</span>
          <span className="separator">|</span>
          <span>{paymentStatus}</span>
          <span className="separator">|</span>
          <span>{orderStatus}</span>
          <span className="separator">|</span>
          <span>{arsPaymentMethod}</span>
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
      rs.push(
        <div className="transaction-details">
          <span>{getTime()}</span>
          <span className="separator">|</span>
          <span>{paymentMethod}</span>
          <span className="separator">|</span>
          <span>{alimCl}</span>
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
      rs.push(
        <div key="sms-payment" className="transaction-details">
          <span>{mid}</span>
          <span className="separator">|</span>
          <span>{smsCl}</span>
        </div>
      )
    }
    return rs;
  };

  const getAmount = () => {
    let rs: any[] = [];
    if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      rs.push(
        <div className={`status-label ${resultStatus === 'SUCCESS' ? 'success' : 'fail'}`}>
          {resultStatus === 'SUCCESS' ? '성공' : '실패'}
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
      rs.push(
        <div className={`status-label ${(transferStatus === 'REQUEST' || transferStatus === 'SUCCESS') ? 'success' : 'fail'}`}>
          {(transferStatus === 'REQUEST' || transferStatus === 'SUCCESS') ? '성공' : '실패'}
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
      rs.push(
        <div className="transaction-amount">
          <NumericFormat
            value={amount}
            thousandSeparator
            displayType="text"
            suffix='원'
          ></NumericFormat>
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory ||
      additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait
    ) {
      rs.push(
        <div className="transaction-amount">
          <NumericFormat
            value={amount}
            thousandSeparator
            displayType="text"
            suffix='원'
          ></NumericFormat>
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
      rs.push(
        <div
          key="payout-item-amount"
          className="transaction-amount"
        >
          <NumericFormat
            value={disbursementAmount}
            thousandSeparator
            displayType="text"
            suffix='원'
          ></NumericFormat>
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
      rs.push(
        <div
          key="payout-item-amount"
          className="transaction-amount"
        >
          <NumericFormat
            value={transferAmount}
            thousandSeparator
            displayType="text"
            suffix='원'
          ></NumericFormat>
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
      rs.push(
        <div
          key="payout-item-amount"
          className="transaction-amount"
        >
          <NumericFormat
            value={transferAmount}
            thousandSeparator
            displayType="text"
            suffix='원'
          ></NumericFormat>
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
      rs.push(
        <div
          key="payout-item-amount"
          className="transaction-amount"
        >
          <NumericFormat
            value={amount}
            thousandSeparator
            displayType="text"
            suffix='원'
          ></NumericFormat>
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
      rs.push(
        <div
          key="payout-item-amount"
          className="transaction-amount"
        >{sendCl}</div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
      rs.push(
        <div
        key="sms-payment-amount"
        className="transaction-amount"
        >{'재발송'}</div>
      )
    }
    return rs;
  }

  return (
    <>
      <div
        className={`transaction-item ${getItemClass()}`}
        onClick={() => onClickToNavigate()}
      >
        <div className="transaction-status">
          <div className={`status-dot ${getDotClass()}`}></div>
        </div>
        <div className="transaction-content">
          <div className="transaction-title">{getTitle()}</div>
          {getDetail()}
        </div>
        {getAmount()}
      </div>
    </>
  );
};