Refactor additional service pages and add localization
- ARS 페이지 컴포넌트 분리 및 리팩토링 - SMS 재전송 성공/실패 snackBar 추가 - 부가서비스 페이지 다국어(i18n) 적용 - 계좌명의인증 리스트 UI 개선 - 라우트 경로 상수 정리 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
HyeonJongKim
@@ -1,6 +1,6 @@
|
||||
import { ListDateGroup } from '../list-date-group';
|
||||
import { AdditionalServiceCategory } from '../../model/types';
|
||||
import { AccountHolderAuthListProps, ExtensionAccountHolderAuthContentItem } from '../../model/account-holder-auth/types';
|
||||
import { AccountHolderAuthListProps, AccountHolderAuthItem } from '../../model/account-holder-auth/types';
|
||||
import { JSX } from 'react';
|
||||
|
||||
export const AccountHolderAuthList = ({
|
||||
|
||||
68
src/entities/additional-service/ui/ars/ars-list.tsx
Normal file
68
src/entities/additional-service/ui/ars/ars-list.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import { ArsListProps } from "../../model/ars/types";
|
||||
import { AdditionalServiceCategory, ListItemProps } from "../../model/types";
|
||||
import { ListDateGroup } from "../list-date-group";
|
||||
|
||||
export const ArsList = ({
|
||||
additionalServiceCategory,
|
||||
listItems,
|
||||
mid,
|
||||
setDetailData
|
||||
}: ArsListProps) => {
|
||||
|
||||
const getListDateGroup = () => {
|
||||
let rs = [];
|
||||
let date = '';
|
||||
let list: Array<ListItemProps> = [];
|
||||
for (let i = 0; i < listItems.length; i++) {
|
||||
let item = listItems[i];
|
||||
if (!!item) {
|
||||
let orderDate = item?.orderDate || '';
|
||||
let itemDate = orderDate.substring(0, 8);
|
||||
if (!!itemDate) {
|
||||
if (i === 0) {
|
||||
date = itemDate;
|
||||
}
|
||||
if (date !== itemDate) {
|
||||
if (list.length > 0) {
|
||||
rs.push(
|
||||
<ListDateGroup
|
||||
additionalServiceCategory={additionalServiceCategory}
|
||||
mid={mid}
|
||||
key={date + '-' + i}
|
||||
date={date}
|
||||
items={list}
|
||||
setDetailData={setDetailData}
|
||||
></ListDateGroup>
|
||||
);
|
||||
}
|
||||
date = itemDate;
|
||||
list = [];
|
||||
}
|
||||
list.push(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (list.length > 0) {
|
||||
rs.push(
|
||||
<ListDateGroup
|
||||
additionalServiceCategory={additionalServiceCategory}
|
||||
mid={mid}
|
||||
key={date + '-last'}
|
||||
date={date}
|
||||
items={list}
|
||||
setDetailData={setDetailData}
|
||||
></ListDateGroup>
|
||||
);
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="transaction-list">
|
||||
{getListDateGroup()}
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
187
src/entities/additional-service/ui/ars/detail/ars-detail.tsx
Normal file
187
src/entities/additional-service/ui/ars/detail/ars-detail.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
import moment from 'moment';
|
||||
import { motion } from 'framer-motion';
|
||||
import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { getArsOrderStatusName, getArsPaymentStatusName } from '@/entities/additional-service/model/ars/constant';
|
||||
import { ArsPaymentMethod, ExtensionArsDetailParams, ExtensionArsDetailResponse, ExtensionArsResendParams, ExtensionArsResendResponse } from "@/entities/additional-service/model/ars/types";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
|
||||
import { useExtensionArsDetailMutation } from '@/entities/additional-service/api/ars/use-extension-ars-detail-mutation';
|
||||
import { useExtensionArsResendMutation } from '@/entities/additional-service/api/ars/use-extension-ars-resend-mutation';
|
||||
import { snackBar } from '@/shared/lib';
|
||||
import { ArsResendSmsBottomSheet } from '../resend-sms-bottom-sheet';
|
||||
|
||||
export interface ArsDetailProps {
|
||||
detailOn: boolean;
|
||||
setDetailOn: (detailOn: boolean) => void;
|
||||
mid: string;
|
||||
tid: string;
|
||||
};
|
||||
|
||||
export const ArsDetail = ({
|
||||
detailOn,
|
||||
setDetailOn,
|
||||
mid,
|
||||
tid
|
||||
}: ArsDetailProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [detail, setDetail] = useState<ExtensionArsDetailResponse>();
|
||||
const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
|
||||
|
||||
const { mutateAsync: extensionArsDetail } = useExtensionArsDetailMutation();
|
||||
const { mutateAsync: extensionArsResend } = useExtensionArsResendMutation();
|
||||
|
||||
const callDetail = () => {
|
||||
let arsDetailParams: ExtensionArsDetailParams = {
|
||||
mid: mid,
|
||||
tid: tid
|
||||
};
|
||||
extensionArsDetail(arsDetailParams).then((rs: ExtensionArsDetailResponse) => {
|
||||
setDetail(rs);
|
||||
});
|
||||
}
|
||||
|
||||
const arsResend = () => {
|
||||
let arsResendParams: ExtensionArsResendParams = {
|
||||
mid: mid,
|
||||
tid: tid
|
||||
};
|
||||
extensionArsResend(arsResendParams).then((rs: ExtensionArsResendResponse) => {
|
||||
if (rs.status) {
|
||||
snackBar("SMS 재전송을 성공하였습니다.");
|
||||
setBottomSheetOn(false);
|
||||
callDetail(); // 상세 정보 갱신
|
||||
} else {
|
||||
const errorMessage = rs.error?.message || 'SMS 재전송이 실패하였습니다.';
|
||||
snackBar(`[실패] ${errorMessage}`);
|
||||
}
|
||||
}).catch((error) => {
|
||||
const errorMessage = error?.response?.data?.error?.message ||
|
||||
error?.message ||
|
||||
'SMS 재전송 중 오류가 발생했습니다.';
|
||||
snackBar(`[실패] ${errorMessage}`);
|
||||
});
|
||||
}
|
||||
|
||||
const onClickToOpenResendBottomSheet = () => {
|
||||
setBottomSheetOn(true);
|
||||
};
|
||||
const onClickToClose = () => {
|
||||
setDetailOn(false);
|
||||
};
|
||||
|
||||
const getDate = (date?: string) => {
|
||||
return (date) ? moment(date.substr(0, 8)).format('YYYY.MM.DD') : '';
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!!mid && !!tid) {
|
||||
callDetail();
|
||||
}
|
||||
}, [mid, tid]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
className="full-menu-modal"
|
||||
initial="hidden"
|
||||
animate={(detailOn) ? 'visible' : 'hidden'}
|
||||
variants={DetailMotionVariants}
|
||||
transition={DetailMotionDuration}
|
||||
style={DetailMotionStyle}
|
||||
>
|
||||
<div className="full-menu-container pdw-16">
|
||||
<div className="full-menu-header">
|
||||
<div className="full-menu-title center">{'ARS 결제 상세'}</div>
|
||||
<div className="full-menu-actions">
|
||||
<FullMenuClose
|
||||
addClass="full-menu-close"
|
||||
onClickToCallback={onClickToClose}
|
||||
></FullMenuClose>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tab-pane sub active">
|
||||
<div className="pay-top">
|
||||
<div className="num-amount">
|
||||
<span className="amount">
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(Number(detail?.amount) || 0) })}
|
||||
</span>
|
||||
</div>
|
||||
<div className="num-store">{detail?.corpName}</div>
|
||||
<div className="num-day">{getDate(detail?.paymentDate)}</div>
|
||||
</div>
|
||||
<div className="detail-divider"></div>
|
||||
<div className="pay-detail">
|
||||
<div className="detail-title">거래 정보</div>
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">MID</span>
|
||||
<span className="v">{detail?.mid}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">결제방식</span>
|
||||
<span className="v">{detail?.arsPaymentMethod}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">결제상태</span>
|
||||
<span className="v">{getArsPaymentStatusName(t)(detail?.paymentStatus)}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">주문상태</span>
|
||||
<span className="v">{getArsOrderStatusName(t)(detail?.orderStatus)}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">주문일시</span>
|
||||
<span className="v">{
|
||||
detail?.paymentDate ? moment(detail.paymentDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '-'
|
||||
}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">상품명</span>
|
||||
<span className="v">{detail?.goodsName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">주문번호</span>
|
||||
<span className="v">{detail?.tid}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">구매자</span>
|
||||
<span className="v">{detail?.buyerName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">휴대폰번호</span>
|
||||
<span className="v">{detail?.maskPhoneNumber}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">이메일</span>
|
||||
<span className="v">{detail?.email}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">발송 인증번호</span>
|
||||
<span className="v">{detail?.smsVerificationCode}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{detail?.arsPaymentMethod === ArsPaymentMethod.SMS && (
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToOpenResendBottomSheet()}
|
||||
//disabled={ detail?.orderStatus !== OrderStatus.PENDING }
|
||||
>SMS 재전송</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ArsResendSmsBottomSheet
|
||||
setBottomSheetOn={setBottomSheetOn}
|
||||
bottomSheetOn={bottomSheetOn}
|
||||
phoneNumber={detail?.phoneNumber}
|
||||
callResendSms={arsResend}
|
||||
></ArsResendSmsBottomSheet>
|
||||
</motion.div>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
@@ -18,11 +18,11 @@ import { getPayoutStatusText } from '../model/payout/constant';
|
||||
export const ListItem = ({
|
||||
additionalServiceCategory,
|
||||
mid, tid, orderDate, paymentStatus,
|
||||
orderTime,buyerPhoneLast4,statusColor,
|
||||
orderTime, buyerPhoneLast4, statusColor,
|
||||
applicationDate, requestDate, bankName, accountNo, resultStatus, resultMessage,
|
||||
amount, sendMethod, processStatus, registDate,
|
||||
transactionTime,transactionCode,transactionType,
|
||||
accountName,submallId, settlementDate, companyName,orderStatus,
|
||||
transactionTime, transactionCode, transactionType,
|
||||
accountName, submallId, settlementDate, companyName, orderStatus,
|
||||
|
||||
alimCl, sendType, sendCl,
|
||||
paymentMethod, receiverName,
|
||||
@@ -170,14 +170,14 @@ export const ListItem = ({
|
||||
})
|
||||
}
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
|
||||
if(setDetailData && !!mid && !!tid){
|
||||
if (setDetailData && !!mid && !!tid) {
|
||||
setDetailData({
|
||||
mid: mid,
|
||||
tid: tid,
|
||||
detailOn: true
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
|
||||
navigate(PATHS.additionalService.linkPayment.detail, {
|
||||
@@ -230,13 +230,13 @@ export const ListItem = ({
|
||||
});
|
||||
}
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
|
||||
navigate(PATHS.additionalService.ars.detail, {
|
||||
state: {
|
||||
additionalServiceCategory: additionalServiceCategory,
|
||||
if (setDetailData && !!mid && !!tid) {
|
||||
setDetailData({
|
||||
mid: mid,
|
||||
tid: tid
|
||||
}
|
||||
});
|
||||
tid: tid,
|
||||
detailOn: true
|
||||
});
|
||||
}
|
||||
}
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
|
||||
navigate(PATHS.additionalService.alimtalk.detail, {
|
||||
@@ -349,7 +349,7 @@ export const ListItem = ({
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
|
||||
str = `${userMallId}(${mid})`;
|
||||
}
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory
|
||||
) {
|
||||
str = `${buyerName}`;
|
||||
} else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait) {
|
||||
@@ -369,7 +369,7 @@ export const ListItem = ({
|
||||
} else {
|
||||
str = `${buyerName}`
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
|
||||
str = `${buyerName}(${tid})`;
|
||||
|
||||
Reference in New Issue
Block a user