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
@@ -13,6 +13,7 @@ import { useExtensionFundAccountDownloadReceiptMutation } from '@/entities/addit
|
||||
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
|
||||
import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
|
||||
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
|
||||
import { showAlert } from '@/widgets/show-alert';
|
||||
|
||||
export interface FundAccountResultDetailProps {
|
||||
detailOn: boolean;
|
||||
@@ -26,8 +27,8 @@ export const FundAccountResultDetail = ({
|
||||
mid,
|
||||
tid
|
||||
}: FundAccountResultDetailProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [detail, setDetail] = useState<ExtensionFundAccountResultDetailResponse>();
|
||||
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
|
||||
|
||||
@@ -43,6 +44,11 @@ export const FundAccountResultDetail = ({
|
||||
extensionFundAccountResultDetail(params).then((rs: ExtensionFundAccountResultDetailResponse) => {
|
||||
console.log(rs.requestDate)
|
||||
setDetail(rs);
|
||||
}).catch((e: any) => {
|
||||
if (e.response?.data?.error?.message) {
|
||||
showAlert(e.response?.data?.error?.message);
|
||||
return;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@@ -51,7 +57,7 @@ export const FundAccountResultDetail = ({
|
||||
};
|
||||
|
||||
const onSendRequest = (selectedEmail?: string) => {
|
||||
if(selectedEmail){
|
||||
if (selectedEmail) {
|
||||
let params: ExtensionFundAccountDownloadReceiptParams = {
|
||||
mid: mid,
|
||||
tid: tid,
|
||||
@@ -63,107 +69,107 @@ export const FundAccountResultDetail = ({
|
||||
}
|
||||
setEmailBottomSheetOn(false);
|
||||
};
|
||||
|
||||
|
||||
const onClickToClose = () => {
|
||||
setDetailOn(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if(!!mid && !!tid){
|
||||
if (!!mid && !!tid) {
|
||||
callDetail();
|
||||
}
|
||||
}, [mid, tid]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
className="full-menu-modal"
|
||||
<motion.div
|
||||
className="full-menu-modal"
|
||||
initial="hidden"
|
||||
animate={ (detailOn)? 'visible': 'hidden' }
|
||||
variants={ DetailMotionVariants }
|
||||
transition={ DetailMotionDuration }
|
||||
style={ DetailMotionStyle }
|
||||
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">{ t('additionalService.fundAccount.transferDetailTitle') }</div>
|
||||
<div className="full-menu-title center">{t('additionalService.fundAccount.transferDetailTitle')}</div>
|
||||
<div className="full-menu-actions">
|
||||
<FullMenuClose
|
||||
addClass="full-menu-close"
|
||||
onClickToCallback={ onClickToClose }
|
||||
onClickToCallback={onClickToClose}
|
||||
></FullMenuClose>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pay-top">
|
||||
<div className="num-amount">
|
||||
<span className="amount">
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(detail?.amount || 0) })}
|
||||
</span>
|
||||
</div>
|
||||
<div className="num-store">{detail?.accountName}({detail?.accountNo})</div>
|
||||
{detail?.applicationDate && (
|
||||
<div className="num-day"> {moment(detail?.applicationDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</div>
|
||||
)}
|
||||
<div className="pay-top">
|
||||
<div className="num-amount">
|
||||
<span className="amount">
|
||||
{t('home.money', { value: new Intl.NumberFormat('en-US').format(detail?.amount || 0) })}
|
||||
</span>
|
||||
</div>
|
||||
{/* ✅ resultMessage가 "정상"일 때만 표시 */}
|
||||
{detail?.resultMessage === '정상' && (
|
||||
<div className="receipt-row">
|
||||
<button
|
||||
type="button"
|
||||
className="receipt-btn"
|
||||
onClick={ onClickToOpenEmailBottomSheet }
|
||||
>
|
||||
<span className="icon-24 download"></span>
|
||||
<span>{t('additionalService.fundAccount.depositCertificate')}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="num-store">{detail?.accountName}({detail?.accountNo})</div>
|
||||
{detail?.applicationDate && (
|
||||
<div className="num-day"> {moment(detail?.applicationDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</div>
|
||||
)}
|
||||
<div className="detail-divider"></div>
|
||||
<div className="pay-detail">
|
||||
<div className="detail-title">{t('additionalService.fundAccount.detailInfo')}</div>
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.fundAccount.requestDateTime')}</span>
|
||||
<span className="v">{moment(detail?.requestDate,'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.fundAccount.transferDateTime')}</span>
|
||||
<span className="v">{detail?.applicationDate ? moment(detail?.applicationDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '-'}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.fundAccount.transferResult')}</span>
|
||||
<span className="v">{detail?.resultMessage || '-'}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.fundAccount.failureReason')}</span>
|
||||
<span className="v">{detail?.failReason || '-'}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.fundAccount.beneficiaryName')}</span>
|
||||
<span className="v">{detail?.accountName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.fundAccount.bank')}</span>
|
||||
<span className="v">{detail?.bankName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.fundAccount.accountNumber')}</span>
|
||||
<span className="v">{detail?.accountNo}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">MID</span>
|
||||
<span className="v">{mid}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('transaction.fields.orderNumber')}</span>
|
||||
<span className="v">{detail?.moid}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">TID</span>
|
||||
<span className="v">{detail?.tid}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* ✅ resultMessage가 "정상"일 때만 표시 */}
|
||||
{detail?.resultMessage === '정상' && (
|
||||
<div className="receipt-row">
|
||||
<button
|
||||
type="button"
|
||||
className="receipt-btn"
|
||||
onClick={onClickToOpenEmailBottomSheet}
|
||||
>
|
||||
<span className="icon-24 download"></span>
|
||||
<span>{t('additionalService.fundAccount.depositCertificate')}</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="detail-divider"></div>
|
||||
<div className="pay-detail">
|
||||
<div className="detail-title">{t('additionalService.fundAccount.detailInfo')}</div>
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.fundAccount.requestDateTime')}</span>
|
||||
<span className="v">{moment(detail?.requestDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.fundAccount.transferDateTime')}</span>
|
||||
<span className="v">{detail?.applicationDate ? moment(detail?.applicationDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '-'}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.fundAccount.transferResult')}</span>
|
||||
<span className="v">{detail?.resultMessage || '-'}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.fundAccount.failureReason')}</span>
|
||||
<span className="v">{detail?.failReason || '-'}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.fundAccount.beneficiaryName')}</span>
|
||||
<span className="v">{detail?.accountName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.fundAccount.bank')}</span>
|
||||
<span className="v">{detail?.bankName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.fundAccount.accountNumber')}</span>
|
||||
<span className="v">{detail?.accountNo}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">MID</span>
|
||||
<span className="v">{mid}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('transaction.fields.orderNumber')}</span>
|
||||
<span className="v">{detail?.moid}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">TID</span>
|
||||
<span className="v">{detail?.tid}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
<EmailBottomSheet
|
||||
|
||||
Reference in New Issue
Block a user