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
@@ -27,6 +27,8 @@ import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access
|
||||
import useIntersectionObserver from '@/widgets/intersection-observer';
|
||||
import { snackBar } from '@/shared/lib';
|
||||
import { AccountHolderSearchDetail } from '@/entities/additional-service/ui/account-holder-search/detail/account-holder-search-detail';
|
||||
import { showAlert } from '@/widgets/show-alert';
|
||||
import { checkGrant } from '@/shared/lib/check-grant';
|
||||
|
||||
export const AccountHolderSearchPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
@@ -176,10 +178,10 @@ export const AccountHolderSearchPage = () => {
|
||||
|
||||
const setDetailData = (detailData: DetailData) => {
|
||||
setDetailOn(detailData.detailOn);
|
||||
if(detailData.mid){
|
||||
if (detailData.mid) {
|
||||
setDetailMid(detailData.mid);
|
||||
}
|
||||
if(detailData.tid){
|
||||
if (detailData.tid) {
|
||||
setDetailTid(detailData.tid);
|
||||
}
|
||||
};
|
||||
@@ -262,9 +264,9 @@ export const AccountHolderSearchPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
<AccountHolderSearchList
|
||||
listItems={ listItems }
|
||||
mid={ mid }
|
||||
setDetailData={ setDetailData }
|
||||
listItems={listItems}
|
||||
mid={mid}
|
||||
setDetailData={setDetailData}
|
||||
></AccountHolderSearchList>
|
||||
<div ref={setTarget}></div>
|
||||
</div>
|
||||
@@ -289,10 +291,10 @@ export const AccountHolderSearchPage = () => {
|
||||
setResultStatus={setResultStatus}
|
||||
></AccountHolderSearchFilter>
|
||||
<AccountHolderSearchDetail
|
||||
detailOn={ detailOn }
|
||||
setDetailOn={ setDetailOn }
|
||||
mid={ detailMid }
|
||||
tid={ detailTid }
|
||||
detailOn={detailOn}
|
||||
setDetailOn={setDetailOn}
|
||||
mid={detailMid}
|
||||
tid={detailTid}
|
||||
></AccountHolderSearchDetail>
|
||||
<EmailBottomSheet
|
||||
bottomSheetOn={emailBottomSheetOn}
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
import moment from 'moment';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode,
|
||||
useSetOnBack
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { AdditionalServiceCategory, DetailInfo, DetailResponse, TitleInfo } from '@/entities/additional-service/model/types';
|
||||
import { TitleInfoWrap } from '@/entities/additional-service/ui/info-wrap/title-info-wrap';
|
||||
import { useLocation } from 'react-router';
|
||||
import { DetailInfoWrap } from '@/entities/additional-service/ui/info-wrap/detail-info-wrap';
|
||||
import { ExtensionAccountHolderSearchDetailParams, ExtensionAccountHolderSearchDetailResponse } from '@/entities/additional-service/model/account-holder-search/types';
|
||||
import { useExtensionAccountHolderSearchDetailtMutation } from '@/entities/additional-service/api/account-holder-search/use-extension-account-holder-search-detail-mutation';
|
||||
import { getAccountHolderStatusText } from '@/entities/additional-service/model/account-holder-search/constant';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export const AccountHolderSearchDetailPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
const location = useLocation();
|
||||
|
||||
const { mid, tid } = location.state || {};
|
||||
|
||||
const [detail, setDetail] = useState<ExtensionAccountHolderSearchDetailResponse>();
|
||||
|
||||
useSetHeaderTitle(t('additionalService.accountHolderSearch.detailTitle'));
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(false);
|
||||
useSetOnBack(() => {
|
||||
navigate(PATHS.additionalService.accountHolderSearch.list);
|
||||
});
|
||||
|
||||
const { mutateAsync: accountHolderSearchDetail } = useExtensionAccountHolderSearchDetailtMutation();
|
||||
|
||||
const callDetail = () => {
|
||||
let accountHolderSearchDetailParams: ExtensionAccountHolderSearchDetailParams = {
|
||||
mid: mid,
|
||||
tid: tid
|
||||
}
|
||||
accountHolderSearchDetail(accountHolderSearchDetailParams).then((rs: ExtensionAccountHolderSearchDetailResponse) => {
|
||||
setDetail(rs);
|
||||
});
|
||||
};
|
||||
|
||||
const getDate = (date?: string) => {
|
||||
return (date) ? moment(date, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '';
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
callDetail();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<div className="pay-top">
|
||||
<div className="num-amount">
|
||||
<span className="amount">{detail?.accountNo}</span>
|
||||
</div>
|
||||
<span className="num-day">{detail?.bankName}</span>
|
||||
<div className="num-day">{getDate(detail?.requestDate)}</div>
|
||||
</div>
|
||||
<div className="detail-divider"></div>
|
||||
<div className="pay-detail">
|
||||
<div className="detail-title">{t('transaction.sections.detailInfo')}</div>
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('transaction.fields.accountHolder')}</span>
|
||||
<span className="v">{detail?.accountName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.accountHolderAuth.requestDate')}</span>
|
||||
<span className="v">{getDate(detail?.requestDate)}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('common.result')}</span>
|
||||
<span className="v">{getAccountHolderStatusText(t)(detail?.resultStatus)}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('transaction.fields.failureReason')}</span>
|
||||
<span className="v">{detail?.failReason ? detail?.failReason : '-' }</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('transaction.fields.bank')}</span>
|
||||
<span className="v">{detail?.bankName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('transaction.fields.accountNo')}</span>
|
||||
<span className="v">{detail?.accountNo}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('additionalService.accountHolderAuth.requestWay')}</span>
|
||||
<span className="v">{detail?.requestWay}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main >
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -14,6 +14,7 @@ import { useStore } from '@/shared/model/store';
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { snackBar } from '@/shared/lib';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { showAlert } from '@/widgets/show-alert';
|
||||
|
||||
export const AccountHolderSearchRequestPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
@@ -73,12 +74,13 @@ export const AccountHolderSearchRequestPage = () => {
|
||||
snackBar(`[${t('common.failed')}] ${errorMessage}`);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Account holder search request failed: ", error)
|
||||
const errorMessage = error?.response?.data?.error?.message ||
|
||||
error?.message ||
|
||||
t('common.errorOccurred');
|
||||
snackBar(`[${t('common.failed')}] ${errorMessage}`);
|
||||
.catch((e) => {
|
||||
const errorMessage = e?.response?.data?.error?.message || e?.message ||t('common.errorOccurred');
|
||||
if (e.response?.data?.error?.root !== "SystemErrorCode") {
|
||||
snackBar(`[${t('common.failed')}] ${errorMessage}`);
|
||||
} else {
|
||||
showAlert(`[${t('common.failed')}] ${errorMessage}`)
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user