nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

186
src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
View File

@@ -23,6 +23,16 @@ import { checkGrant } from '@/shared/lib/check-grant';
import { showAlert } from '@/widgets/show-alert'; import { showAlert } from '@/widgets/show-alert';
import { snackBar } from '@/shared/lib'; import { snackBar } from '@/shared/lib';
const defaultParams = {
fromDate: moment().format('YYYYMMDD'),
toDate: moment().format('YYYYMMDD'),
searchDateType: FundAccountSearchDateType.REQUEST_DATE,
searchCl: FundAccountSearchCl.ACCOUNT_NAME,
searchValue: '',
bankCode: '',
resultStatus: FundAccountResultStatus.ALL
}
export const FundAccountResultListWrap = () => { export const FundAccountResultListWrap = () => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t } = useTranslation(); const { t } = useTranslation();
@@ -46,6 +56,7 @@ export const FundAccountResultListWrap = () => {
const [bankCode, setBankCode] = useState<string>(''); const [bankCode, setBankCode] = useState<string>('');
const [resultStatus, setResultStatus] = useState<FundAccountResultStatus>(FundAccountResultStatus.ALL); const [resultStatus, setResultStatus] = useState<FundAccountResultStatus>(FundAccountResultStatus.ALL);
const [filterUsed, setFilterUsed] = useState<boolean>(false);
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false); const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
const [totalRequestCount, setTotalRequestCount] = useState<number>(0); const [totalRequestCount, setTotalRequestCount] = useState<number>(0);
@@ -61,7 +72,7 @@ export const FundAccountResultListWrap = () => {
const [groupDate, setGroupDate] = useState<string>(''); const [groupDate, setGroupDate] = useState<string>('');
const [groupDateOn, setGroupDateOn] = useState<boolean>(false); const [groupDateOn, setGroupDateOn] = useState<boolean>(false);
const [listHeight, setListHeight] = useState<number>(0); const [listHeight, setListHeight] = useState<number>(0);
const { mutateAsync: extensionFundAccountResultList } = useExtensionFundAccountResultListMutation(); const { mutateAsync: extensionFundAccountResultList } = useExtensionFundAccountResultListMutation();
@@ -69,20 +80,20 @@ export const FundAccountResultListWrap = () => {
const { mutateAsync: extensionFundAccountResultSummary } = useExtensionFundAccountResultSummaryMutation(); const { mutateAsync: extensionFundAccountResultSummary } = useExtensionFundAccountResultSummaryMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => { const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => { entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){ if (entry.isIntersecting) {
if(onActionIntersect && !!pageParam.cursor){ if (onActionIntersect && !!pageParam.cursor) {
setOnActionIntersect(false); setOnActionIntersect(false);
callList('page'); callList('page');
} }
} }
}); });
}; };
const { setTarget } = useIntersectionObserver({ const { setTarget } = useIntersectionObserver({
threshold: 1, threshold: 1,
onIntersect onIntersect
}); });
const callList = (type?: string) => { const callList = (type?: string) => {
setOnActionIntersect(false); setOnActionIntersect(false);
let listParams: ExtensionFundAccountResultListParams = { let listParams: ExtensionFundAccountResultListParams = {
@@ -95,34 +106,34 @@ export const FundAccountResultListWrap = () => {
bankCode: bankCode, bankCode: bankCode,
resultStatus: resultStatus, resultStatus: resultStatus,
page: { page: {
...pageParam, ...pageParam,
...{ sortType: sortType } ...{ sortType: sortType }
} }
}; };
if(type !== 'page' && listParams.page){ if (type !== 'page' && listParams.page) {
listParams.page.cursor = null; listParams.page.cursor = null;
} }
extensionFundAccountResultList(listParams).then((rs: any) => { extensionFundAccountResultList(listParams).then((rs: any) => {
if(type === 'page'){ if (type === 'page') {
setListItems([ setListItems([
...listItems, ...listItems,
...rs.content ...rs.content
]); ]);
} }
else{ else {
setListItems(rs.content); setListItems(rs.content);
} }
if(rs.hasNext if (rs.hasNext
&& rs.nextCursor !== pageParam.cursor && rs.nextCursor !== pageParam.cursor
&& rs.content.length === DEFAULT_PAGE_PARAM.size && rs.content.length === DEFAULT_PAGE_PARAM.size
){ ) {
setPageParam({ setPageParam({
...pageParam, ...pageParam,
...{ cursor: rs.nextCursor } ...{ cursor: rs.nextCursor }
}); });
} }
else{ else {
setPageParam({ setPageParam({
...pageParam, ...pageParam,
...{ cursor: null } ...{ cursor: null }
@@ -130,11 +141,11 @@ export const FundAccountResultListWrap = () => {
} }
setOnActionIntersect( setOnActionIntersect(
!!rs.hasNext !!rs.hasNext
&& rs.nextCursor !== pageParam.cursor && rs.nextCursor !== pageParam.cursor
&& rs.content.length === DEFAULT_PAGE_PARAM.size && rs.content.length === DEFAULT_PAGE_PARAM.size
); );
}).catch((e: any) => { }).catch((e: any) => {
if(e.response?.data?.error?.message){ if (e.response?.data?.error?.message) {
snackBar(e.response?.data?.error?.message); snackBar(e.response?.data?.error?.message);
return; return;
} }
@@ -155,7 +166,7 @@ export const FundAccountResultListWrap = () => {
setTotalFailCount(rs.totalFailCount); setTotalFailCount(rs.totalFailCount);
setTotalFailAmount(rs.totalFailAmount); setTotalFailAmount(rs.totalFailAmount);
}).catch((e: any) => { }).catch((e: any) => {
if(e.response?.data?.error?.message){ if (e.response?.data?.error?.message) {
snackBar(e.response?.data?.error?.message); snackBar(e.response?.data?.error?.message);
return; return;
} }
@@ -171,12 +182,12 @@ export const FundAccountResultListWrap = () => {
}; };
const onRequestDownloadExcel = ( const onRequestDownloadExcel = (
selectedMode: DownloadSelectedMode, selectedMode: DownloadSelectedMode,
userEmail?: string userEmail?: string
) => { ) => {
if(selectedMode === DownloadSelectedMode.EMAIL if (selectedMode === DownloadSelectedMode.EMAIL
&& userEmail && userEmail
){ ) {
let params: ExtensionFundAccountResultExcelParams = { let params: ExtensionFundAccountResultExcelParams = {
mid: mid, mid: mid,
email: userEmail, email: userEmail,
@@ -187,7 +198,7 @@ export const FundAccountResultListWrap = () => {
extensionFundAccountResultExcel(params).then((rs: ExtensionFundAccountResultExcelResponse) => { extensionFundAccountResultExcel(params).then((rs: ExtensionFundAccountResultExcelResponse) => {
console.log('Excel Download Status:', rs); console.log('Excel Download Status:', rs);
}).catch((e: any) => { }).catch((e: any) => {
if(e.response?.data?.error?.message){ if (e.response?.data?.error?.message) {
snackBar(e.response?.data?.error?.message); snackBar(e.response?.data?.error?.message);
return; return;
} }
@@ -201,10 +212,10 @@ export const FundAccountResultListWrap = () => {
const setDetailData = (detailData: DetailData) => { const setDetailData = (detailData: DetailData) => {
setDetailOn(detailData.detailOn); setDetailOn(detailData.detailOn);
if(detailData.mid){ if (detailData.mid) {
setDetailMid(detailData.mid); setDetailMid(detailData.mid);
} }
if(detailData.tid){ if (detailData.tid) {
setDetailTid(detailData.tid); setDetailTid(detailData.tid);
} }
}; };
@@ -233,12 +244,12 @@ export const FundAccountResultListWrap = () => {
if (list.length > 0) { if (list.length > 0) {
rs.push( rs.push(
<ListDateGroup <ListDateGroup
additionalServiceCategory={ AdditionalServiceCategory.FundAccountResult } additionalServiceCategory={AdditionalServiceCategory.FundAccountResult}
mid={ mid } mid={mid}
key={ date + '-' + i } key={date + '-' + i}
date={ date } date={date}
items={ list } items={list}
setDetailData={ setDetailData } setDetailData={setDetailData}
></ListDateGroup> ></ListDateGroup>
); );
} }
@@ -252,29 +263,44 @@ export const FundAccountResultListWrap = () => {
if (list.length > 0) { if (list.length > 0) {
rs.push( rs.push(
<ListDateGroup <ListDateGroup
additionalServiceCategory={ AdditionalServiceCategory.FundAccountResult } additionalServiceCategory={AdditionalServiceCategory.FundAccountResult}
mid={ mid } mid={mid}
key={ date + '-last' } key={date + '-last'}
date={ date } date={date}
items={ list } items={list}
setDetailData={ setDetailData } setDetailData={setDetailData}
></ListDateGroup> ></ListDateGroup>
); );
} }
return rs; return rs;
}; };
const checkUsedFilter = () => {
let rs: boolean = true;
if (fromDate === defaultParams.fromDate
&& toDate === defaultParams.toDate
&& searchCl === defaultParams.searchCl
&& searchValue === defaultParams.searchValue
&& searchDateType === defaultParams.searchDateType
&& bankCode === defaultParams.bankCode
&& resultStatus === defaultParams.resultStatus
) {
rs = false;
}
setFilterUsed(rs);
}
useEffect(() => { useEffect(() => {
callSummary(); callSummary();
ListScrollOn(true); ListScrollOn(true);
let heightList = GetListHeight(); let heightList = GetListHeight();
setListHeight(heightList.listHeight); setListHeight(heightList.listHeight);
let tabContent = document.querySelector('.tab-content'); let tabContent = document.querySelector('.tab-content');
tabContent?.addEventListener('scroll', (e: Event) => { tabContent?.addEventListener('scroll', (e: Event) => {
setScrollAction(e, setGroupDate, setGroupDateOn); setScrollAction(e, setGroupDate, setGroupDateOn);
}); });
return () => { return () => {
ListScrollOn(false); ListScrollOn(false);
tabContent?.removeEventListener('scroll', (e: Event) => { tabContent?.removeEventListener('scroll', (e: Event) => {
@@ -285,6 +311,7 @@ export const FundAccountResultListWrap = () => {
useEffect(() => { useEffect(() => {
callList(); callList();
checkUsedFilter();
}, [ }, [
mid, mid,
searchCl, searchCl,
@@ -320,18 +347,21 @@ export const FundAccountResultListWrap = () => {
<button <button
className="filter-btn" className="filter-btn"
aria-label="필터" aria-label="필터"
onClick={ onClickToOpenFilter } onClick={onClickToOpenFilter}
> >
<img <img
src={IMAGE_ROOT + '/ico_setting.svg'} src={IMAGE_ROOT + '/ico_setting.svg'}
alt="검색옵션" alt="검색옵션"
/> />
{filterUsed &&
<span className="notification-badge2"></span>
}
</button> </button>
</div> </div>
<button <button
className="download-btn" className="download-btn"
aria-label="다운로드" aria-label="다운로드"
onClick={ onClickToOpenDownloadBottomSheet } onClick={onClickToOpenDownloadBottomSheet}
> >
<img <img
src={IMAGE_ROOT + '/ico_download.svg'} src={IMAGE_ROOT + '/ico_download.svg'}
@@ -385,38 +415,38 @@ export const FundAccountResultListWrap = () => {
</div> </div>
</div> </div>
</section> </section>
{ groupDateOn && {groupDateOn &&
<div className="summary-amount scroll-group-date"> <div className="summary-amount scroll-group-date">
<span className="amount-text">{ groupDate }</span> <span className="amount-text">{groupDate}</span>
<div className="summary-actions"> <div className="summary-actions">
<button className="filter-btn"> <button className="filter-btn">
<img <img
src={ IMAGE_ROOT + '/ico_setting.svg' } src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('transaction.searchOptions')} alt={t('transaction.searchOptions')}
onClick={ onClickToOpenFilter } onClick={onClickToOpenFilter}
/> />
</button> </button>
<button className="download-btn"> <button className="download-btn">
<img <img
src={ IMAGE_ROOT + '/ico_download.svg' } src={IMAGE_ROOT + '/ico_download.svg'}
alt={t('transaction.download')} alt={t('transaction.download')}
onClick={ onClickToOpenDownloadBottomSheet } onClick={onClickToOpenDownloadBottomSheet}
/> />
</button> </button>
</div>
</div> </div>
</div>
} }
<section <section
className="transaction-list" className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }} style={{ height: (listHeight > 0) ? listHeight + 'px' : 'unset' }}
> >
{ getListDateGroup() } {getListDateGroup()}
</section> </section>
<div ref={ setTarget }></div> <div ref={setTarget}></div>
<div className="apply-row"> <div className="apply-row">
<button <button
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
onClick={ onClickToNavigate } onClick={onClickToNavigate}
>{t('additionalService.fundAccount.transferRegistration')}</button> >{t('additionalService.fundAccount.transferRegistration')}</button>
</div> </div>
<FundAccountResultFilter <FundAccountResultFilter
@@ -440,18 +470,18 @@ export const FundAccountResultListWrap = () => {
setResultStatus={setResultStatus} setResultStatus={setResultStatus}
></FundAccountResultFilter> ></FundAccountResultFilter>
<FundAccountResultDetail <FundAccountResultDetail
detailOn={ detailOn } detailOn={detailOn}
setDetailOn={ setDetailOn } setDetailOn={setDetailOn}
mid={ detailMid } mid={detailMid}
tid={ detailTid } tid={detailTid}
></FundAccountResultDetail> ></FundAccountResultDetail>
{ !!downloadBottomSheetOn && {!!downloadBottomSheetOn &&
<DownloadBottomSheet <DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn } bottomSheetOn={downloadBottomSheetOn}
setBottomSheetOn={ setDownloadBottomSheetOn } setBottomSheetOn={setDownloadBottomSheetOn}
imageMode={ false } imageMode={false}
emailMode={ true } emailMode={true}
sendRequest={ onRequestDownloadExcel } sendRequest={onRequestDownloadExcel}
></DownloadBottomSheet> ></DownloadBottomSheet>
} }
</> </>

94
src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
View File

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

129
src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
View File

@@ -22,6 +22,15 @@ import { checkGrant } from '@/shared/lib/check-grant';
import { showAlert } from '@/widgets/show-alert'; import { showAlert } from '@/widgets/show-alert';
import { snackBar } from '@/shared/lib'; import { snackBar } from '@/shared/lib';
const defaultParams = {
startDate: moment().format('YYYYMMDD'),
endDate: moment().format('YYYYMMDD'),
searchType: LinkPaymentSearchCl.PHONE,
searchValue: '',
sendMethod: LinkPaymentSendMethod.ALL,
processStatus: LinkPaymentProcessStatus.ALL
}
export const LinkPaymentWaitSendWrap = () => { export const LinkPaymentWaitSendWrap = () => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
@@ -32,15 +41,17 @@ export const LinkPaymentWaitSendWrap = () => {
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST); const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [filterOn, setFilterOn] = useState<boolean>(false); const [filterOn, setFilterOn] = useState<boolean>(false);
const [mid, setMid] = useState<string>(userMid); const [mid, setMid] = useState<string>(userMid);
const [searchType, setSearchType] = useState<LinkPaymentSearchCl>(LinkPaymentSearchCl.PHONE) const [searchType, setSearchType] = useState<LinkPaymentSearchCl>(defaultParams.searchType)
const [searchValue, setSearchValue] = useState<string>(''); const [searchValue, setSearchValue] = useState<string>(defaultParams.searchValue);
const [startDate, setStartDate] = useState(moment().format('YYYYMMDD')); const [startDate, setStartDate] = useState(defaultParams.startDate);
const [endDate, setEndDate] = useState(moment().format('YYYYMMDD')); const [endDate, setEndDate] = useState(defaultParams.endDate);
const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL); const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(defaultParams.sendMethod);
const [processStatus, setProcessStatus] = useState<LinkPaymentProcessStatus>(LinkPaymentProcessStatus.ALL); const [processStatus, setProcessStatus] = useState<LinkPaymentProcessStatus>(defaultParams.processStatus);
const [listItems, setListItems] = useState<Array<LinkPaymentWaitListItem>>([]); const [listItems, setListItems] = useState<Array<LinkPaymentWaitListItem>>([]);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM); const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [filterUsed, setFilterUsed] = useState<boolean>(false);
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false); const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
const [detailOn, setDetailOn] = useState<boolean>(false); const [detailOn, setDetailOn] = useState<boolean>(false);
@@ -51,18 +62,18 @@ export const LinkPaymentWaitSendWrap = () => {
const { mutateAsync: downloadExcel } = useExtensionLinkPayWaitDownloadExcelMutation(); const { mutateAsync: downloadExcel } = useExtensionLinkPayWaitDownloadExcelMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => { const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => { entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){ if (entry.isIntersecting) {
if(onActionIntersect && !!pageParam.cursor){ if (onActionIntersect && !!pageParam.cursor) {
setOnActionIntersect(false); setOnActionIntersect(false);
callList('page'); callList('page');
} }
} }
}); });
}; };
const { setTarget } = useIntersectionObserver({ const { setTarget } = useIntersectionObserver({
threshold: 1, threshold: 1,
onIntersect onIntersect
}); });
const onClickToOpenFilter = () => { const onClickToOpenFilter = () => {
@@ -87,34 +98,34 @@ export const LinkPaymentWaitSendWrap = () => {
sendMethod: sendMethod, sendMethod: sendMethod,
processStatus: processStatus, processStatus: processStatus,
page: { page: {
...pageParam, ...pageParam,
...{ sortType: sortType } ...{ sortType: sortType }
} }
} }
if(type !== 'page' && listParams.page){ if (type !== 'page' && listParams.page) {
listParams.page.cursor = null; listParams.page.cursor = null;
} }
pendingSendList(listParams).then((rs) => { pendingSendList(listParams).then((rs) => {
if(type === 'page'){ if (type === 'page') {
setListItems([ setListItems([
...listItems, ...listItems,
...rs.content ...rs.content
]); ]);
} }
else{ else {
setListItems(rs.content); setListItems(rs.content);
} }
if(rs.hasNext if (rs.hasNext
&& rs.nextCursor !== pageParam.cursor && rs.nextCursor !== pageParam.cursor
&& rs.content.length === DEFAULT_PAGE_PARAM.size && rs.content.length === DEFAULT_PAGE_PARAM.size
){ ) {
setPageParam({ setPageParam({
...pageParam, ...pageParam,
...{ cursor: rs.nextCursor } ...{ cursor: rs.nextCursor }
}); });
} }
else{ else {
setPageParam({ setPageParam({
...pageParam, ...pageParam,
...{ cursor: null } ...{ cursor: null }
@@ -122,7 +133,7 @@ export const LinkPaymentWaitSendWrap = () => {
} }
setOnActionIntersect( setOnActionIntersect(
!!rs.hasNext !!rs.hasNext
&& rs.nextCursor !== pageParam.cursor && rs.nextCursor !== pageParam.cursor
&& rs.content.length === DEFAULT_PAGE_PARAM.size && rs.content.length === DEFAULT_PAGE_PARAM.size
); );
}); });
@@ -137,12 +148,12 @@ export const LinkPaymentWaitSendWrap = () => {
}; };
const onRequestDownloadExcel = ( const onRequestDownloadExcel = (
selectedMode: DownloadSelectedMode, selectedMode: DownloadSelectedMode,
userEmail?: string userEmail?: string
) => { ) => {
if(selectedMode === DownloadSelectedMode.EMAIL if (selectedMode === DownloadSelectedMode.EMAIL
&& userEmail && userEmail
){ ) {
downloadExcel({ downloadExcel({
mid: mid, mid: mid,
email: userEmail, email: userEmail,
@@ -155,7 +166,7 @@ export const LinkPaymentWaitSendWrap = () => {
}).then((rs) => { }).then((rs) => {
console.log('Excel Download Status: ' + rs.status); console.log('Excel Download Status: ' + rs.status);
}).catch((e: any) => { }).catch((e: any) => {
if(e.response?.data?.error?.message){ if (e.response?.data?.error?.message) {
snackBar(e.response?.data?.error?.message); snackBar(e.response?.data?.error?.message);
return; return;
} }
@@ -169,10 +180,10 @@ export const LinkPaymentWaitSendWrap = () => {
const setDetailData = (detailData: DetailData) => { const setDetailData = (detailData: DetailData) => {
setDetailOn(detailData.detailOn); setDetailOn(detailData.detailOn);
if(detailData.mid){ if (detailData.mid) {
setDetailMid(detailData.mid); setDetailMid(detailData.mid);
} }
if(detailData.requestId){ if (detailData.requestId) {
setDetailRequestId(detailData.requestId); setDetailRequestId(detailData.requestId);
} }
}; };
@@ -181,8 +192,23 @@ export const LinkPaymentWaitSendWrap = () => {
setProcessStatus(val); setProcessStatus(val);
}; };
const checkUsedFilter = () => {
let rs: boolean = true;
if (startDate === defaultParams.startDate
&& endDate === defaultParams.endDate
&& searchType === defaultParams.searchType
&& searchValue === defaultParams.searchValue
&& sendMethod === defaultParams.sendMethod
&& processStatus === defaultParams.processStatus
) {
rs = false;
}
setFilterUsed(rs);
}
useEffect(() => { useEffect(() => {
callList(); callList();
checkUsedFilter();
}, [ }, [
mid, mid,
searchType, searchType,
@@ -210,14 +236,17 @@ export const LinkPaymentWaitSendWrap = () => {
<img <img
src={IMAGE_ROOT + '/ico_setting.svg'} src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('common.searchOptions')} alt={t('common.searchOptions')}
onClick={ onClickToOpenFilter } onClick={onClickToOpenFilter}
/> />
{filterUsed &&
<span className="notification-badge2"></span>
}
</button> </button>
</div> </div>
<button <button
className="download-btn" className="download-btn"
aria-label={t('common.download')} aria-label={t('common.download')}
onClick={ onClickToOpenDownloadBottomSheet } onClick={onClickToOpenDownloadBottomSheet}
> >
<img <img
src={IMAGE_ROOT + '/ico_download.svg'} src={IMAGE_ROOT + '/ico_download.svg'}
@@ -248,14 +277,14 @@ export const LinkPaymentWaitSendWrap = () => {
</div> </div>
<LinkPaymentWaitList <LinkPaymentWaitList
listItems={ listItems } listItems={listItems}
additionalServiceCategory={ AdditionalServiceCategory.LinkPaymentWait } additionalServiceCategory={AdditionalServiceCategory.LinkPaymentWait}
mid={ mid } mid={mid}
setDetailData={ setDetailData } setDetailData={setDetailData}
onClickToOpenFilter={ onClickToOpenFilter } onClickToOpenFilter={onClickToOpenFilter}
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet } onClickToOpenDownloadBottomSheet={onClickToOpenDownloadBottomSheet}
></LinkPaymentWaitList> ></LinkPaymentWaitList>
<div ref={ setTarget }></div> <div ref={setTarget}></div>
<div className="apply-row"> <div className="apply-row">
<button <button
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
@@ -281,18 +310,18 @@ export const LinkPaymentWaitSendWrap = () => {
setProcessStatus={setProcessStatus} setProcessStatus={setProcessStatus}
></LinkPaymentWaitSendFilter> ></LinkPaymentWaitSendFilter>
<LinkPaymentWaitDetail <LinkPaymentWaitDetail
detailOn={ detailOn } detailOn={detailOn}
setDetailOn={ setDetailOn } setDetailOn={setDetailOn}
mid={ detailMid } mid={detailMid}
requestId={ detailRequestId } requestId={detailRequestId}
></LinkPaymentWaitDetail> ></LinkPaymentWaitDetail>
{ !!downloadBottomSheetOn && {!!downloadBottomSheetOn &&
<DownloadBottomSheet <DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn } bottomSheetOn={downloadBottomSheetOn}
setBottomSheetOn={ setDownloadBottomSheetOn } setBottomSheetOn={setDownloadBottomSheetOn}
imageMode={ false } imageMode={false}
emailMode={ true } emailMode={true}
sendRequest={ onRequestDownloadExcel } sendRequest={onRequestDownloadExcel}
></DownloadBottomSheet> ></DownloadBottomSheet>
} }
</> </>

4
src/pages/additional-service/alimtalk/list-page.tsx
View File

@@ -337,11 +337,11 @@ export const AlimtalkListPage = () => {
}; };
}, []); }, []);
/*
if (!hasAccess) { if (!hasAccess) {
return <AccessDeniedDialog />; return <AccessDeniedDialog />;
} }
*/
return ( return (
<> <>

64
src/pages/additional-service/ars/list-page.tsx
View File

@@ -12,7 +12,7 @@ import { JSX, useEffect, useState } from 'react';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { ArsListItem, ExtensionArsDownloadExcelParams, ExtensionArsDownloadExcelResponse, ExtensionArsListParams, ExtensionArsListResponse, OrderStatus, PaymentStatus } from '@/entities/additional-service/model/ars/types'; import { ArsListItem, ExtensionArsDownloadExcelParams, ExtensionArsDownloadExcelResponse, ExtensionArsListParams, ExtensionArsListResponse, OrderStatus, PaymentStatus } from '@/entities/additional-service/model/ars/types';
import { useExtensionArsListMutation } from '@/entities/additional-service/api/ars/use-extension-ars-list-mutation'; import { useExtensionArsListMutation } from '@/entities/additional-service/api/ars/use-extension-ars-list-mutation';
import moment from 'moment'; import moment, { max } from 'moment';
import { useExtensionArsDownloadExcelMutation } from '@/entities/additional-service/api/ars/use-extension-ars-download-excel-mutation'; import { useExtensionArsDownloadExcelMutation } from '@/entities/additional-service/api/ars/use-extension-ars-download-excel-mutation';
import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group'; import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
import { AdditionalServiceCategory, DetailData } from '@/entities/additional-service/model/types'; import { AdditionalServiceCategory, DetailData } from '@/entities/additional-service/model/types';
@@ -30,6 +30,16 @@ import { checkGrant } from '@/shared/lib/check-grant';
import { showAlert } from '@/widgets/show-alert'; import { showAlert } from '@/widgets/show-alert';
import { snackBar } from '@/shared/lib'; import { snackBar } from '@/shared/lib';
const defaultParams = {
moid: '',
fromDate: moment().format('YYYYMMDD'),
toDate: moment().format('YYYYMMDD'),
orderStats: OrderStatus.ALL,
paymentStatus: PaymentStatus.ALL,
minAmount: undefined,
maxAmount: undefined
}
export const ArsListPage = () => { export const ArsListPage = () => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t } = useTranslation(); const { t } = useTranslation();
@@ -47,13 +57,14 @@ export const ArsListPage = () => {
const [filterOn, setFilterOn] = useState<boolean>(false); const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM); const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>(userMid); const [mid, setMid] = useState<string>(userMid);
const [moid, setMoid] = useState<string>(''); const [moid, setMoid] = useState<string>(defaultParams.moid);
const [fromDate, setFromDate] = useState<string>(moment().format('YYYYMMDD')); const [fromDate, setFromDate] = useState<string>(defaultParams.fromDate);
const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD')); const [toDate, setToDate] = useState<string>(defaultParams.toDate);
const [paymentStatus, setPaymentStatus] = useState<PaymentStatus>(PaymentStatus.ALL); const [paymentStatus, setPaymentStatus] = useState<PaymentStatus>(defaultParams.paymentStatus);
const [orderStatus, setOrderStatus] = useState<OrderStatus>(OrderStatus.ALL); const [orderStatus, setOrderStatus] = useState<OrderStatus>(defaultParams.orderStats);
const [minAmount, setMinAmount] = useState<number>(); const [minAmount, setMinAmount] = useState<number>();
const [maxAmount, setMaxAmount] = useState<number>(); const [maxAmount, setMaxAmount] = useState<number>();
const [filterUsed, setFilterUsed] = useState<boolean>(false);
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false); const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
@@ -137,7 +148,7 @@ export const ArsListPage = () => {
&& rs.content.length === DEFAULT_PAGE_PARAM.size && rs.content.length === DEFAULT_PAGE_PARAM.size
); );
}).catch((e: any) => { }).catch((e: any) => {
if(e.response?.data?.error?.message){ if (e.response?.data?.error?.message) {
snackBar(e.response?.data?.error?.message); snackBar(e.response?.data?.error?.message);
return; return;
} }
@@ -210,8 +221,24 @@ export const ArsListPage = () => {
setPaymentStatus(val); setPaymentStatus(val);
}; };
const checkUsedFilter = () => {
let rs: boolean = true;
if (fromDate === defaultParams.fromDate
&& toDate === defaultParams.toDate
&& moid === defaultParams.moid
&& paymentStatus === defaultParams.paymentStatus
&& orderStatus === defaultParams.orderStats
&& minAmount === defaultParams.minAmount
&& maxAmount === defaultParams.maxAmount
) {
rs = false;
}
setFilterUsed(rs);
}
useEffect(() => { useEffect(() => {
callList(); callList();
checkUsedFilter();
}, [ }, [
mid, mid,
moid, moid,
@@ -245,18 +272,21 @@ export const ArsListPage = () => {
<button <button
className="filter-btn" className="filter-btn"
aria-label={t('filter.filter')} aria-label={t('filter.filter')}
onClick={ onClickToOpenFilter } onClick={onClickToOpenFilter}
> >
<img <img
src={IMAGE_ROOT + '/ico_setting.svg'} src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('common.searchOptions')} alt={t('common.searchOptions')}
/> />
{filterUsed &&
<span className="notification-badge2"></span>
}
</button> </button>
</div> </div>
<button <button
className="download-btn" className="download-btn"
aria-label={t('common.download')} aria-label={t('common.download')}
onClick={ onClickToOpenDownloadBottomSheet } onClick={onClickToOpenDownloadBottomSheet}
> >
<img <img
src={IMAGE_ROOT + '/ico_download.svg'} src={IMAGE_ROOT + '/ico_download.svg'}
@@ -291,8 +321,8 @@ export const ArsListPage = () => {
listItems={listItems} listItems={listItems}
mid={mid} mid={mid}
setDetailData={setDetailData} setDetailData={setDetailData}
onClickToOpenFilter={ onClickToOpenFilter } onClickToOpenFilter={onClickToOpenFilter}
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet } onClickToOpenDownloadBottomSheet={onClickToOpenDownloadBottomSheet}
></ArsList> ></ArsList>
<div ref={setTarget}></div> <div ref={setTarget}></div>
</div> </div>
@@ -330,13 +360,13 @@ export const ArsListPage = () => {
mid={detailMid} mid={detailMid}
tid={detailTid} tid={detailTid}
></ArsDetail> ></ArsDetail>
{ !!downloadBottomSheetOn && {!!downloadBottomSheetOn &&
<DownloadBottomSheet <DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn } bottomSheetOn={downloadBottomSheetOn}
setBottomSheetOn={ setDownloadBottomSheetOn } setBottomSheetOn={setDownloadBottomSheetOn}
imageMode={ false } imageMode={false}
emailMode={ true } emailMode={true}
sendRequest={ onRequestDownloadExcel } sendRequest={onRequestDownloadExcel}
></DownloadBottomSheet> ></DownloadBottomSheet>
} }
</> </>

87
src/pages/additional-service/payout/list-page.tsx
View File

@@ -38,6 +38,15 @@ import { checkGrant } from '@/shared/lib/check-grant';
import { showAlert } from '@/widgets/show-alert'; import { showAlert } from '@/widgets/show-alert';
import { snackBar } from '@/shared/lib'; import { snackBar } from '@/shared/lib';
const defaultParams = {
fromDate: moment().format('YYYYMMDD'),
toDate: moment().format('YYYYMMDD'),
searchDateType: PayoutSearchDateType.REQUEST_DATE,
disbursementStatus: PayoutDisbursementStatus.ALL,
minAmount: undefined,
maxAmount: undefined
}
export const PayoutListPage = () => { export const PayoutListPage = () => {
// Access check // Access check
const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({ const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
@@ -53,13 +62,13 @@ export const PayoutListPage = () => {
const [filterOn, setFilterOn] = useState<boolean>(false); const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM); const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>(userMid); const [mid, setMid] = useState<string>(userMid);
const [searchDateType, setSearchDateType] = useState<PayoutSearchDateType>(PayoutSearchDateType.REQUEST_DATE); const [searchDateType, setSearchDateType] = useState<PayoutSearchDateType>(defaultParams.searchDateType);
const [fromDate, setFromDate] = useState<string>(moment().format('YYYYMMDD')); const [fromDate, setFromDate] = useState<string>(defaultParams.fromDate);
const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD')); const [toDate, setToDate] = useState<string>(defaultParams.toDate);
const [status, setStatus] = useState<PayoutDisbursementStatus>(PayoutDisbursementStatus.ALL); const [status, setStatus] = useState<PayoutDisbursementStatus>(defaultParams.disbursementStatus);
const [minAmount, setMinAmount] = useState<number | undefined>(); const [minAmount, setMinAmount] = useState<number | undefined>(defaultParams.minAmount);
const [maxAmount, setMaxAmount] = useState<number | undefined>(); const [maxAmount, setMaxAmount] = useState<number | undefined>(defaultParams.maxAmount);
const [filterUsed, setFilterUsed] = useState<boolean>(false);
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false); const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
const [detailOn, setDetailOn] = useState<boolean>(false); const [detailOn, setDetailOn] = useState<boolean>(false);
@@ -212,8 +221,23 @@ export const PayoutListPage = () => {
setStatus(val); setStatus(val);
}; };
const checkUsedFilter = () => {
let rs: boolean = true;
if (fromDate === defaultParams.fromDate
&& toDate === defaultParams.toDate
&& searchDateType === defaultParams.searchDateType
&& status === defaultParams.disbursementStatus
&& minAmount === defaultParams.minAmount
&& maxAmount === defaultParams.maxAmount
) {
rs = false;
}
setFilterUsed(rs);
}
useEffect(() => { useEffect(() => {
callList(); callList();
checkUsedFilter();
}, [ }, [
mid, mid,
searchDateType, searchDateType,
@@ -225,51 +249,7 @@ export const PayoutListPage = () => {
sortType sortType
]); ]);
const getListDateGroup = () => {
let rs = [];
let date = '';
let list = [];
for (let i = 0; i < listItems.length; i++) {
let itemDateStr = '';
if (searchDateType === PayoutSearchDateType.REQUEST_DATE) {
itemDateStr = listItems[i]?.requestDate || '';
} else if (searchDateType === PayoutSearchDateType.SETTLEMENT_DATE) {
itemDateStr = listItems[i]?.settlementDate || '';
}
let itemDate = itemDateStr.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.Payout}
mid={mid}
key={date + '-' + i}
date={date}
items={list as any}
></ListDateGroup>
);
}
date = itemDate;
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.Payout}
mid={mid}
key={date + '-last'}
date={date}
items={list as any}
></ListDateGroup>
);
}
return rs;
};
if (!hasAccess) { if (!hasAccess) {
return <AccessDeniedDialog />; return <AccessDeniedDialog />;
@@ -298,6 +278,9 @@ export const PayoutListPage = () => {
src={IMAGE_ROOT + '/ico_setting.svg'} src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('common.searchOptions')} alt={t('common.searchOptions')}
/> />
{filterUsed &&
<span className="notification-badge2"></span>
}
</button> </button>
</div> </div>
<button <button