부가서비스

- SMS 결제 통보 리스트 API 연동
This commit is contained in:
HyeonJongKim
2025-09-24 16:54:35 +09:00
parent 9c03a73cc7
commit 69bafcd2c5
19 changed files with 432 additions and 224 deletions

View File

@@ -1,4 +1,3 @@
import { PATHS } from '@/shared/constants/paths';
import { ListDateGroup } from '../list-date-group';
import { AccountHolderAuthListProps, AdditionalServiceCategory } from '../../model/types';

View File

@@ -63,6 +63,8 @@ export const ListDateGroup = ({
sendCl={ items[i]?.sendCl }
paymentMethod={ items[i]?.paymentMethod }
receiverName={ items[i]?.receiverName }
smsCl= { items[i]?.smsCl }
></ListItem>
)
}

View File

@@ -13,19 +13,21 @@ export const ListItem = ({
amount, sendDate, sendStatus, sendMethod,
scheduledSendDate, processStatus,
accountName,transferStatus,
accountName, transferStatus,
submallId, settlementDate, companyName,
disbursementStatus, disbursementAmount,
transferAmount, receiveBankName,
transferAmount, receiveBankName,
receiveAccountNo, receiveAccountName,
status, processDate,
orderStatus, arsPaymentMethod,
alimCl, sendType, sendCl,
paymentMethod, receiverName
paymentMethod, receiverName,
smsCl
}: ListItemProps) => {
const { navigate } = useNavigate();
const getItemClass = () => {
@@ -100,13 +102,21 @@ export const ListItem = ({
} 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) {
if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment ||
additionalServiceCategory === AdditionalServiceCategory.SMSPayment
) {
return;
}
@@ -176,7 +186,7 @@ export const ListItem = ({
}
});
}
else if (additionalServiceCategory === AdditionalServiceCategory.Ars){
else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
navigate(PATHS.additionalService.ars.detail, {
state: {
additionalServiceCategory: additionalServiceCategory,
@@ -186,7 +196,7 @@ export const ListItem = ({
}
});
}
else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
navigate(PATHS.additionalService.alimtalk.detail, {
state: {
additionalServiceCategory: additionalServiceCategory,
@@ -220,11 +230,11 @@ export const ListItem = ({
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
timeStr = moment(requestDate).format('mm:ss');
}
else if (additionalServiceCategory === AdditionalServiceCategory.Ars){
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){
else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
let time = paymentDate?.substring(8, 12);
timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
}
@@ -257,16 +267,19 @@ export const ListItem = ({
else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
str = companyName;
}
else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer){
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
str = `${receiveAccountName}(${receiveAccountNo})`;
}
else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountResult){
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
str = `${receiveAccountName}(${receiveAccountNo})`;
}
else if(additionalServiceCategory === AdditionalServiceCategory.Ars){
else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
str = `${paymentDate}(${paymentStatus})[추후 수정 필요]`
}
else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
str = '이름(' + tid + ')';
}
else if(additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
str = `${receiverName}(${tid})`;
}
@@ -277,7 +290,7 @@ export const ListItem = ({
let rs = [];
if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
rs.push(
<div className="transaction-details">
<div key='key-in-list' className="transaction-details">
<span>{getTime()}</span>
<span className="separator">|</span>
<span>{paymentStatus}</span>
@@ -295,7 +308,7 @@ export const ListItem = ({
}
else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
rs.push(
<div className="transaction-details">
<div key="account-search" className="transaction-details">
<span>{getTime()}</span>
<span className="separator">|</span>
<span>{bankName}</span>
@@ -305,7 +318,7 @@ export const ListItem = ({
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
if (paymentStatus === "PAYMENT_FAIL" || paymentStatus === "INACTIVE") {
rs.push(
<div className="transaction-details">
<div key="link-payment-history" className="transaction-details">
<span>{getPaymentStatusText(paymentStatus)}</span>
<span className="separator">|</span>
<span>{getSendMethodText(sendMethod)}</span>
@@ -313,7 +326,7 @@ export const ListItem = ({
)
} else {
rs.push(
<div className="transaction-details">
<div key="link-payment-history" className="transaction-details">
<span>{getPaymentStatusText(paymentStatus)}</span>
<span className="separator">|</span>
<span>{getSendMethodText(sendMethod)}</span>
@@ -325,7 +338,7 @@ export const ListItem = ({
}
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait) {
rs.push(
<div className="transaction-details">
<div key="link-payment-wait" className="transaction-details">
<span>{getProcessStatusText(processStatus)}</span>
<span className="separator">|</span>
<span>{getSendMethodText(sendMethod)}</span>
@@ -341,48 +354,57 @@ export const ListItem = ({
</div>
);
}
else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer){
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
rs.push(
<div className="transaction-details">
<span>{ getTime() }</span>
<span>{getTime()}</span>
<span className="separator">|</span>
<span>{ status }</span>
<span>{status}</span>
</div>
);
}
else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountResult){
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
rs.push(
<div className="transaction-details">
<span>{ getTime() }</span>
<span>{getTime()}</span>
<span className="separator">|</span>
<span>{ status }</span>
<span>{status}</span>
</div>
);
}
else if(additionalServiceCategory === AdditionalServiceCategory.Ars){
else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
rs.push(
<div className="transaction-details">
<span>{ getTime() }</span>
<span>{getTime()}</span>
<span className="separator">|</span>
<span>{ paymentStatus }</span>
<span>{paymentStatus}</span>
<span className="separator">|</span>
<span>{ orderStatus }</span>
<span>{orderStatus}</span>
<span className="separator">|</span>
<span>{ arsPaymentMethod }</span>
<span>{arsPaymentMethod}</span>
</div>
);
}
else if(additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
rs.push(
<div className="transaction-details">
<span>{ getTime() }</span>
<span>{getTime()}</span>
<span className="separator">|</span>
<span>{ paymentMethod }</span>
<span>{paymentMethod}</span>
<span className="separator">|</span>
<span>{ alimCl }</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;
};
@@ -394,7 +416,7 @@ export const ListItem = ({
{resultStatus === 'SUCCESS' ? '성공' : '실패'}
</div>
);
}
}
else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
rs.push(
<div className={`status-label ${(transferStatus === 'REQUEST' || transferStatus === 'SUCCESS') ? 'success' : 'fail'}`}>
@@ -493,9 +515,17 @@ export const ListItem = ({
<div
key="payout-item-amount"
className="transaction-amount"
>{ sendCl }</div>
>{sendCl}</div>
);
}
else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
rs.push(
<div
key="sms-payment-amount"
className="transaction-amount"
>{'재발송'}</div>
)
}
return rs;
}
@@ -509,10 +539,10 @@ export const ListItem = ({
<div className={`status-dot ${getDotClass()}`}></div>
</div>
<div className="transaction-content">
<div className="transaction-title">{ getTitle() }</div>
{ getDetail() }
<div className="transaction-title">{getTitle()}</div>
{getDetail()}
</div>
{ getAmount() }
{getAmount()}
</div>
</>
);

View File

@@ -1,6 +1,6 @@
import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { SmsPaymentDetailResendProps } from '../model/types';
import { SmsPaymentDetailResendProps } from '../../model/types';
export const SmsPaymentDetailResend = ({
bottomSmsPaymentDetailResendOn,

View File

@@ -0,0 +1,33 @@
import { SmsPaymentListProps } from '../../model/sms-payment/types';
import { AdditionalServiceCategory } from '../../model/types';
import { ListDateGroup } from '../list-date-group';
export const SmsPaymentList = ({
listItems,
mid
}: SmsPaymentListProps) => {
const getListDateGroup = () => {
let rs = [];
for (const [key, value] of Object.entries(listItems)) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.SMSPayment}
key={key}
date={key}
items={value}
mid={mid}
></ListDateGroup>
)
}
return rs;
};
return (
<>
<div className="transaction-list">
{getListDateGroup()}
</div>
</>
)
}