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
@@ -10,6 +10,7 @@ import { useExtensionArsDetailMutation } from '@/entities/additional-service/api
|
||||
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';
|
||||
import { showAlert } from '@/widgets/show-alert';
|
||||
|
||||
export interface ArsDetailProps {
|
||||
detailOn: boolean;
|
||||
@@ -39,6 +40,11 @@ export const ArsDetail = ({
|
||||
};
|
||||
extensionArsDetail(arsDetailParams).then((rs: ExtensionArsDetailResponse) => {
|
||||
setDetail(rs);
|
||||
}).catch((e: any) => {
|
||||
if (e.response?.data?.error?.message) {
|
||||
showAlert(e.response?.data?.error?.message);
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -101,76 +107,76 @@ export const ArsDetail = ({
|
||||
></FullMenuClose>
|
||||
</div>
|
||||
</div>
|
||||
<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 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="detail-divider"></div>
|
||||
<div className="pay-detail">
|
||||
<div className="detail-title">{t('additionalService.ars.transactionInfo')}</div>
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('transaction.fields.mid')}</span>
|
||||
<span className="v">{detail?.mid}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.paymentMethod')}</span>
|
||||
<span className="v">{detail?.arsPaymentMethod}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.paymentStatus')}</span>
|
||||
<span className="v">{getArsPaymentStatusName(t)(detail?.paymentStatus)}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.orderStatus')}</span>
|
||||
<span className="v">{getArsOrderStatusName(t)(detail?.orderStatus)}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.orderDateTime')}</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">{t('additionalService.ars.productName')}</span>
|
||||
<span className="v">{detail?.goodsName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.orderNumber')}</span>
|
||||
<span className="v">{detail?.tid}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.buyer')}</span>
|
||||
<span className="v">{detail?.buyerName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.phoneNumber')}</span>
|
||||
<span className="v">{detail?.maskPhoneNumber}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.email')}</span>
|
||||
<span className="v">{detail?.email}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.sendVerificationCode')}</span>
|
||||
<span className="v">{detail?.smsVerificationCode}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<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">{t('additionalService.ars.transactionInfo')}</div>
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('transaction.fields.mid')}</span>
|
||||
<span className="v">{detail?.mid}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.paymentMethod')}</span>
|
||||
<span className="v">{detail?.arsPaymentMethod}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.paymentStatus')}</span>
|
||||
<span className="v">{getArsPaymentStatusName(t)(detail?.paymentStatus)}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.orderStatus')}</span>
|
||||
<span className="v">{getArsOrderStatusName(t)(detail?.orderStatus)}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.orderDateTime')}</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">{t('additionalService.ars.productName')}</span>
|
||||
<span className="v">{detail?.goodsName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.orderNumber')}</span>
|
||||
<span className="v">{detail?.tid}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.buyer')}</span>
|
||||
<span className="v">{detail?.buyerName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.phoneNumber')}</span>
|
||||
<span className="v">{detail?.maskPhoneNumber}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.email')}</span>
|
||||
<span className="v">{detail?.email}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.ars.sendVerificationCode')}</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 }
|
||||
>{t('additionalService.ars.smsResend')}</button>
|
||||
</div>
|
||||
{detail?.arsPaymentMethod === ArsPaymentMethod.SMS && (
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToOpenResendBottomSheet()}
|
||||
//disabled={ detail?.orderStatus !== OrderStatus.PENDING }
|
||||
>{t('additionalService.ars.smsResend')}</button>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
<ArsResendSmsBottomSheet
|
||||
setBottomSheetOn={setBottomSheetOn}
|
||||
|
||||
Reference in New Issue
Block a user