Refactor additional service details and fix various bugs
- Convert detail pages to modal components for better UX - Fix seq type from string to number for ARS and Alimtalk - Add seq field to list item types - Fix validation for card number input (remove formatting chars) - Fix SMS payment resend seq parameter issue - Improve z-index handling for snackBar and dialogs - Add useSetHeaderTitle to link payment history wrap - Remove unused detail page files - Update payout filter and various detail components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
HyeonJongKim
@@ -1,181 +0,0 @@
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode,
|
||||
useSetOnBack
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { useLocation } from 'react-router';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { useExtensionArsDetailMutation } from '@/entities/additional-service/api/ars/use-extension-ars-detail-mutation';
|
||||
import {
|
||||
ExtensionArsDetailParams,
|
||||
ExtensionArsDetailResponse,
|
||||
ExtensionArsResendParams,
|
||||
ExtensionArsResendResponse,
|
||||
ArsPaymentMethod,
|
||||
OrderStatus
|
||||
} from '@/entities/additional-service/model/ars/types';
|
||||
import moment from 'moment';
|
||||
import { ArsResendSmsBottomSheet } from '@/entities/additional-service/ui/ars/resend-sms-bottom-sheet';
|
||||
import { useExtensionArsResendMutation } from '@/entities/additional-service/api/ars/use-extension-ars-resend-mutation';
|
||||
import { getArsOrderStatusName, getArsPaymentStatusName } from '@/entities/additional-service/model/ars/constant';
|
||||
import { snackBar } from '@/shared/lib';
|
||||
|
||||
export const ArsDetailPage = () => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const { navigate } = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const tid = location.state.tid;
|
||||
const mid = location.state.mid;
|
||||
|
||||
const [detail, setDetail] = useState<ExtensionArsDetailResponse>();
|
||||
const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
|
||||
|
||||
const { mutateAsync: extensionArsDetail } = useExtensionArsDetailMutation();
|
||||
const { mutateAsync: extensionArsResend } = useExtensionArsResendMutation();
|
||||
const callDetail = () => {
|
||||
let params: ExtensionArsDetailParams = {
|
||||
tid: tid,
|
||||
mid: mid,
|
||||
};
|
||||
|
||||
extensionArsDetail(params).then((rs: ExtensionArsDetailResponse) => {
|
||||
setDetail(rs);
|
||||
});
|
||||
};
|
||||
|
||||
useSetHeaderTitle('ARS 결제 상세');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(false);
|
||||
useSetOnBack(() => {
|
||||
navigate(PATHS.additionalService.ars.list);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
callDetail();
|
||||
}, []);
|
||||
|
||||
const onClickToOpenResendBottomSheet = () => {
|
||||
setBottomSheetOn(true);
|
||||
};
|
||||
|
||||
const getDate = (date?: string) => {
|
||||
return (date)? moment(date.substr(0, 8)).format('YYYY.MM.DD'): '';
|
||||
};
|
||||
|
||||
const callResendSms = () => {
|
||||
let params: ExtensionArsResendParams = {
|
||||
mid: mid,
|
||||
tid: tid
|
||||
}
|
||||
extensionArsResend(params).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}`);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<main className="full-height">
|
||||
<div className="tab-content">
|
||||
<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>
|
||||
</main>
|
||||
<ArsResendSmsBottomSheet
|
||||
setBottomSheetOn={ setBottomSheetOn }
|
||||
bottomSheetOn={ bottomSheetOn }
|
||||
phoneNumber={ detail?.phoneNumber }
|
||||
callResendSms={ callResendSms }
|
||||
></ArsResendSmsBottomSheet>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -17,6 +17,7 @@ import { ArsRequestSuccessPage } from './request-success-page';
|
||||
import { useStore } from '@/shared/model/store';
|
||||
import { snackBar } from '@/shared/lib';
|
||||
import { NumericFormat, PatternFormat } from 'react-number-format';
|
||||
import { showAlert } from '@/widgets/show-alert';
|
||||
|
||||
export const ArsRequestPage = () => {
|
||||
const { t } = useTranslation();
|
||||
@@ -69,9 +70,13 @@ export const ArsRequestPage = () => {
|
||||
snackBar(`[${t('common.failed')}] ${errorMessage}`);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
const errorMsg = error?.response?.data?.message || error?.response?.data?.error?.message || t('additionalService.ars.requestFailed');
|
||||
snackBar(`[${t('common.failed')}] ${errorMsg}`);
|
||||
.catch((e) => {
|
||||
const errorMsg = e?.response?.data?.message || e?.response?.data?.error?.message || t('additionalService.ars.requestFailed');
|
||||
if (e.response?.data?.error?.root !== "SystemErrorCode") {
|
||||
snackBar(`[${t('common.failed')}] ${errorMsg}`);
|
||||
} else {
|
||||
showAlert(`[${t('common.failed')}] ${errorMsg}`)
|
||||
}
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user