- 신용카드ARS,지급대행,링크결제,자금이체-결과대기 필터 사용중 표시 추가

This commit is contained in:
HyeonJongKim
2025-11-17 20:17:49 +09:00
parent 5ca36c7322
commit 97407f52d7
6 changed files with 335 additions and 229 deletions

View File

@@ -30,6 +30,18 @@ const getPaymentResultBtnGroup = (t: any) => [
{ name: t('additionalService.linkPayment.paymentStopped'), value: LinkPaymentPaymentStatus.INACTIVE },
];
const defaultParams = {
fromDate: moment().format('YYYYMMDD'),
toDate: moment().format('YYYYMMDD'),
searchCl: LinkPaymentSearchCl.PHONE,
searchValue: '',
paymentMethod: LinkPaymentPaymentMethod.CARD,
paymentStatus: LinkPaymentPaymentStatus.ALL,
sendStatus: LinkPaymentSendStatus.ALL,
sendMethod: LinkPaymentSendMethod.ALL
}
export const LinkPaymentHistoryWrap = () => {
const { t } = useTranslation();
const { navigate } = useNavigate();
@@ -42,17 +54,19 @@ export const LinkPaymentHistoryWrap = () => {
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>(userMid);
const [searchCl, setSearchCl] = useState<LinkPaymentSearchCl>(LinkPaymentSearchCl.PHONE);
const [searchValue, setSearchValue] = useState<string>('');
const [paymentMethod, setPaymentMethod] = useState<LinkPaymentPaymentMethod>(LinkPaymentPaymentMethod.CARD);
const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
const [paymentStatus, setPaymentStatus] = useState<LinkPaymentPaymentStatus>(LinkPaymentPaymentStatus.ALL);
const [sendStatus, setSendStatus] = useState<LinkPaymentSendStatus>(LinkPaymentSendStatus.ALL);
const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
const [searchCl, setSearchCl] = useState<LinkPaymentSearchCl>(defaultParams.searchCl);
const [searchValue, setSearchValue] = useState<string>(defaultParams.searchValue);
const [paymentMethod, setPaymentMethod] = useState<LinkPaymentPaymentMethod>(defaultParams.paymentMethod);
const [fromDate, setFromDate] = useState(defaultParams.fromDate);
const [toDate, setToDate] = useState(defaultParams.toDate);
const [paymentStatus, setPaymentStatus] = useState<LinkPaymentPaymentStatus>(defaultParams.paymentStatus);
const [sendStatus, setSendStatus] = useState<LinkPaymentSendStatus>(defaultParams.sendStatus);
const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(defaultParams.sendMethod);
const [filterUsed, setFilterUsed] = useState<boolean>(false);
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
const [detailOn, setDetailOn] = useState<boolean>(false);
const [detailMid, setDetailMid] = useState<string>('');
const [detailRequestId, setDetailRequestId] = useState<string>('');
@@ -60,7 +74,7 @@ export const LinkPaymentHistoryWrap = () => {
const { mutateAsync: linkPayHistoryList } = useExtensionLinkPayHistoryListMutation();
const { mutateAsync: downloadExcel } = useExtensionLinkPayHistoryDownloadExcelMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if (entry.isIntersecting) {
@@ -140,7 +154,7 @@ export const LinkPaymentHistoryWrap = () => {
&& rs.content.length === DEFAULT_PAGE_PARAM.size
);
}).catch((e: any) => {
if(e.response?.data?.error?.message){
if (e.response?.data?.error?.message) {
snackBar(e.response?.data?.error?.message);
return;
}
@@ -159,9 +173,9 @@ export const LinkPaymentHistoryWrap = () => {
selectedMode: DownloadSelectedMode,
userEmail?: string
) => {
if(selectedMode === DownloadSelectedMode.EMAIL
&& userEmail
){
if (selectedMode === DownloadSelectedMode.EMAIL
&& userEmail
) {
downloadExcel({
mid: mid,
email: userEmail,
@@ -176,11 +190,11 @@ export const LinkPaymentHistoryWrap = () => {
}).then((rs) => {
console.log('Excel Download Status: ' + rs.status);
}).catch((e: any) => {
if(e.response?.data?.error?.message){
snackBar(e.response?.data?.error?.message);
return;
}
});
if (e.response?.data?.error?.message) {
snackBar(e.response?.data?.error?.message);
return;
}
});
}
};
@@ -209,8 +223,25 @@ export const LinkPaymentHistoryWrap = () => {
}
};
const checkUsedFilter = () => {
let rs: boolean = true;
if (fromDate === defaultParams.fromDate
&& toDate === defaultParams.toDate
&& searchCl === defaultParams.searchCl
&& searchValue === defaultParams.searchValue
&& paymentMethod === defaultParams.paymentMethod
&& paymentStatus === defaultParams.paymentStatus
&& sendMethod === defaultParams.sendMethod
&& sendStatus === defaultParams.sendStatus
) {
rs = false;
}
setFilterUsed(rs);
}
useEffect(() => {
callList();
checkUsedFilter();
}, [
mid,
searchCl,
@@ -240,14 +271,17 @@ export const LinkPaymentHistoryWrap = () => {
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('common.searchOptions')}
onClick={ onClickToOpenFilter }
onClick={onClickToOpenFilter}
/>
{filterUsed &&
<span className="notification-badge2"></span>
}
</button>
</div>
<button
className="download-btn"
aria-label={t('common.download')}
onClick={ onClickToOpenDownloadBottomSheet }
onClick={onClickToOpenDownloadBottomSheet}
>
<img
src={IMAGE_ROOT + '/ico_download.svg'}
@@ -282,8 +316,8 @@ export const LinkPaymentHistoryWrap = () => {
additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
mid={mid}
setDetailData={setDetailData}
onClickToOpenFilter={ onClickToOpenFilter }
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
onClickToOpenFilter={onClickToOpenFilter}
onClickToOpenDownloadBottomSheet={onClickToOpenDownloadBottomSheet}
></LinkPaymentHistoryList>
<div ref={setTarget}></div>
<div className="apply-row">
@@ -319,13 +353,13 @@ export const LinkPaymentHistoryWrap = () => {
requestId={detailRequestId}
subReqId={detailSubReqId}
></LinkPaymentHistoryDetail>
{ !!downloadBottomSheetOn &&
{!!downloadBottomSheetOn &&
<DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn }
setBottomSheetOn={ setDownloadBottomSheetOn }
imageMode={ false }
emailMode={ true }
sendRequest={ onRequestDownloadExcel }
bottomSheetOn={downloadBottomSheetOn}
setBottomSheetOn={setDownloadBottomSheetOn}
imageMode={false}
emailMode={true}
sendRequest={onRequestDownloadExcel}
></DownloadBottomSheet>
}
</>