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
@@ -26,6 +26,8 @@ import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
|
||||
import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
|
||||
import useIntersectionObserver from '@/widgets/intersection-observer';
|
||||
import { AccountHolderAuthDetail } from '@/entities/additional-service/ui/account-holder-auth/detail/account-holder-auth-detail';
|
||||
import { showAlert } from '@/widgets/show-alert';
|
||||
import { checkGrant } from '@/shared/lib/check-grant';
|
||||
|
||||
export const AccountHolderAuthPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
@@ -63,18 +65,18 @@ export const AccountHolderAuthPage = () => {
|
||||
const { mutateAsync: downloadExcel } = useExtensionAccountHolderAuthDownloadExcelMutation();
|
||||
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
|
||||
entries.forEach((entry: IntersectionObserverEntry) => {
|
||||
if(entry.isIntersecting){
|
||||
if(onActionIntersect && !!pageParam.cursor){
|
||||
if (entry.isIntersecting) {
|
||||
if (onActionIntersect && !!pageParam.cursor) {
|
||||
setOnActionIntersect(false);
|
||||
callList('page');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const { setTarget } = useIntersectionObserver({
|
||||
threshold: 1,
|
||||
onIntersect
|
||||
const { setTarget } = useIntersectionObserver({
|
||||
threshold: 1,
|
||||
onIntersect
|
||||
});
|
||||
|
||||
const callList = (type?: string) => {
|
||||
@@ -88,37 +90,37 @@ export const AccountHolderAuthPage = () => {
|
||||
...{ sortType: sortType }
|
||||
}
|
||||
};
|
||||
if(type !== 'page' && listParams.page){
|
||||
if (type !== 'page' && listParams.page) {
|
||||
listParams.page.cursor = null;
|
||||
}
|
||||
|
||||
accountHolderAuthList(listParams).then((rs) => {
|
||||
if(type === 'page'){
|
||||
if (type === 'page') {
|
||||
setListItems([
|
||||
...listItems,
|
||||
...rs.content
|
||||
]);
|
||||
}
|
||||
else{
|
||||
else {
|
||||
setListItems(rs.content);
|
||||
}
|
||||
if(rs.hasNext
|
||||
if (rs.hasNext
|
||||
&& rs.nextCursor !== pageParam.cursor
|
||||
&& rs.content.length === DEFAULT_PAGE_PARAM.size
|
||||
){
|
||||
) {
|
||||
setPageParam({
|
||||
...pageParam,
|
||||
...{ cursor: rs.nextCursor }
|
||||
});
|
||||
}
|
||||
else{
|
||||
else {
|
||||
setPageParam({
|
||||
...pageParam,
|
||||
...{ cursor: null }
|
||||
});
|
||||
}
|
||||
setOnActionIntersect(
|
||||
!!rs.hasNext
|
||||
!!rs.hasNext
|
||||
&& rs.nextCursor !== pageParam.cursor
|
||||
&& rs.content.length === DEFAULT_PAGE_PARAM.size
|
||||
);
|
||||
@@ -139,10 +141,10 @@ export const AccountHolderAuthPage = () => {
|
||||
};
|
||||
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);
|
||||
}
|
||||
};
|
||||
@@ -154,7 +156,7 @@ export const AccountHolderAuthPage = () => {
|
||||
|
||||
const onSendRequest = (selectedEmail?: string) => {
|
||||
if (selectedEmail) {
|
||||
const params: ExtensionAccountHolderAuthDownloadExcelParams = { // 추후 수정필요
|
||||
const params: ExtensionAccountHolderAuthDownloadExcelParams = {
|
||||
mid: mid,
|
||||
email: selectedEmail,
|
||||
fromDate: fromDate,
|
||||
@@ -244,12 +246,12 @@ export const AccountHolderAuthPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
<AccountHolderAuthList
|
||||
additionalServiceCategory={ AdditionalServiceCategory.AccountHolderAuth }
|
||||
listItems={ listItems }
|
||||
mid={ mid }
|
||||
setDetailData={ setDetailData }
|
||||
additionalServiceCategory={AdditionalServiceCategory.AccountHolderAuth}
|
||||
listItems={listItems}
|
||||
mid={mid}
|
||||
setDetailData={setDetailData}
|
||||
></AccountHolderAuthList>
|
||||
<div ref={ setTarget }></div>
|
||||
<div ref={setTarget}></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -266,10 +268,10 @@ export const AccountHolderAuthPage = () => {
|
||||
setAuthStatus={setAuthStatus}
|
||||
></AccountHolderAuthFilter>
|
||||
<AccountHolderAuthDetail
|
||||
detailOn={ detailOn }
|
||||
setDetailOn={ setDetailOn }
|
||||
mid={ detailMid }
|
||||
tid={ detailTid }
|
||||
detailOn={detailOn}
|
||||
setDetailOn={setDetailOn}
|
||||
mid={detailMid}
|
||||
tid={detailTid}
|
||||
></AccountHolderAuthDetail>
|
||||
<EmailBottomSheet
|
||||
bottomSheetOn={emailBottomSheetOn}
|
||||
|
||||
@@ -1,109 +0,0 @@
|
||||
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 { useExtensionAccountHolderAuthDetailMutation } from '@/entities/additional-service/api/account-holder-auth/use-extension-account-holder-auth-deatil-mutation';
|
||||
import { ExtensionAccountHolderAuthDetailParams, ExtensionAccountHolderAuthDetailResponse } from '@/entities/additional-service/model/account-holder-auth/types';
|
||||
import moment from 'moment';
|
||||
import { getAuthStatusText } from '@/entities/additional-service/model/account-holder-auth/constant';
|
||||
import { getAuthResultStatusText } from '@/entities/additional-service/model/face-auth/constant';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export const AccountHolderAuthDetailPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
const location = useLocation();
|
||||
const { mid, tid } = location.state || {};
|
||||
const [detail, setDetail] = useState<ExtensionAccountHolderAuthDetailResponse>();
|
||||
|
||||
useSetHeaderTitle(t('additionalService.accountHolderAuth.detailTitle'));
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(false);
|
||||
useSetOnBack(() => {
|
||||
navigate(PATHS.additionalService.accountHolderAuth.list);
|
||||
});
|
||||
|
||||
const { mutateAsync: accountHolderAuthDetail } = useExtensionAccountHolderAuthDetailMutation();
|
||||
|
||||
const callDetail = () => {
|
||||
let accountHolderAuthDetailParams: ExtensionAccountHolderAuthDetailParams = {
|
||||
mid: mid,
|
||||
tid: tid
|
||||
}
|
||||
accountHolderAuthDetail(accountHolderAuthDetailParams).then((rs: ExtensionAccountHolderAuthDetailResponse) => {
|
||||
setDetail(rs);
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
callDetail();
|
||||
}, []);
|
||||
|
||||
const getDate = (date?: string) => {
|
||||
return (date) ? moment(date, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '';
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<div className="pay-top">
|
||||
<div className="num-amount">
|
||||
<span className="amount">{detail?.accountName}</span>
|
||||
</div>
|
||||
<span className="num-store">{detail?.accountNo}</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.companyName')}</span>
|
||||
<span className="v">{detail?.companyName}</span>
|
||||
</li>
|
||||
<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.accountHolderAuth.requestDate')}</span>
|
||||
<span className="v">{getDate(detail?.requestDate)}</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('transaction.fields.accountHolder')}</span>
|
||||
<span className="v">{detail?.accountName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('common.result')}</span>
|
||||
<span className="v">{getAuthStatusText(t)(detail?.authStatus)}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">{t('transaction.fields.failureReason')}</span>
|
||||
<span className="v">{detail?.failReason ? getAuthResultStatusText(t)(detail?.failReason) : '-' }</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main >
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user