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

- getListDateGroup 수정

Browse Source 
- 알림톡 필터 추가
- 일부 부가서비스 엑셀다운로드 바텀시트 추가
This commit is contained in:
HyeonJongKim
2025-10-23 10:49:15 +09:00
parent 79271caab3
commit 53f6731205
40 changed files with 1022 additions and 1130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
View File

@@ -1,7 +1,7 @@
import moment from 'moment';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useEffect, useState } from 'react';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
@@ -19,21 +19,24 @@ import { AccountHolderAuthList } from '@/entities/additional-service/ui/account-
import { useExtensionAccountHolderAuthDownloadExcelMutation } from '@/entities/additional-service/api/account-holder-auth/use-extension-account-holder-auth-download-excel-mutation';
import { AccountHolderAuthFilter } from '@/entities/additional-service/ui/account-holder-auth/filter/account-holder-auth-filter';
import { useStore } from '@/shared/model/store';
import { AccountHolderAuthListItem, AuthAndTransferStatus } from '@/entities/additional-service/model/account-holder-auth/types';
import { AccountHolderAuthListItem, AuthAndTransferStatus, ExtensionAccountHolderAuthContentItem, ExtensionAccountHolderAuthDownloadExcelParams, ExtensionAccountHolderAuthDownloadExcelResponse } from '@/entities/additional-service/model/account-holder-auth/types';
import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
export const AccountHolderAuthPage = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState({});
const [listItems, setListItems] = useState<Array<ExtensionAccountHolderAuthContentItem>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>(userMid);
const [fromDate, setFromDate] = useState(moment().format('YYYY-MM-DD'));
const [toDate, setToDate] = useState(moment().format('YYYY-MM-DD'));
const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
const [authStatus, setAuthStatus] = useState<AuthAndTransferStatus>(AuthAndTransferStatus.ALL)
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
useSetHeaderTitle('계좌점유인증');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
@@ -43,12 +46,11 @@ export const AccountHolderAuthPage = () => {
const { mutateAsync: accountHolderAuthList } = useExtensionAccountHolderAuthListMutation();
const { mutateAsync: downloadExcel } = useExtensionAccountHolderAuthDownloadExcelMutation();
const callList = (option?: {
sortType?: SortTypeKeys,
val?: string
status?: AuthAndTransferStatus
}) => {
pageParam.sortType = (option?.sortType)? option.sortType: sortType;
setPageParam(pageParam);
let listParams = {
mid: mid,
fromDate: fromDate,
@@ -57,28 +59,14 @@ export const AccountHolderAuthPage = () => {
page: pageParam
};
accountHolderAuthList(listParams).then((rs) => {
setListItems(assembleData(rs.content));
});
}
const assembleData = (content: Array<AccountHolderAuthListItem>) => {
console.log('rs.content:', content)
let data: any = {};
if (content && content.length > 0) {
for (let i = 0; i < content?.length; i++) {
let requestDate = content[i]?.requestDate?.substring(0, 8);
let groupDate = moment(requestDate).format('YYYYMMDD');
if(!!groupDate && !data.hasOwnProperty(groupDate)){
data[groupDate] = [];
}
if(!!groupDate && data.hasOwnProperty(groupDate)){
data[groupDate].push(content[i]);
}
}
if (listParams.page) {
listParams.page.sortType = option?.sortType || sortType;
setPageParam(listParams.page);
}
console.log('Data : ', data);
return data;
accountHolderAuthList(listParams).then((rs) => {
setListItems(rs.content);
});
};
const onClickToDownloadExcel = () => {
@@ -100,19 +88,46 @@ export const AccountHolderAuthPage = () => {
setSortType(sort);
callList({
sortType: sort
})
});
};
const onClickToAuthStatus = (val: AuthAndTransferStatus) => {
setAuthStatus(val);
callList({ val: val });
callList({
status: val
});
};
const onClickToOpenEmailBottomSheet = () => {
setEmailBottomSheetOn(true);
};
const onSendRequest = (selectedEmail?: string) => {
if (selectedEmail) {
const params: ExtensionAccountHolderAuthDownloadExcelParams = { // 추후 수정필요
mid: mid,
//email: selectedEmail,
fromDate: fromDate,
toDate: toDate,
authStatus: authStatus
};
downloadExcel(params).then((rs: ExtensionAccountHolderAuthDownloadExcelResponse) => {
console.log('Excel Download Status:', rs.status);
});
}
setEmailBottomSheetOn(false);
};
useEffect(() => {
callList();
}, []);
}, [
mid,
fromDate,
toDate,
authStatus
]);
return (
<>
<main>
@@ -152,8 +167,8 @@ export const AccountHolderAuthPage = () => {
<div className="filter-section">
<SortTypeBox
sortType={ sortType }
onClickToSort={ onClickToSort }
sortType={sortType}
onClickToSort={onClickToSort}
></SortTypeBox>
<div className="excrow">
<div className="full-menu-keywords no-padding">
@@ -170,6 +185,7 @@ export const AccountHolderAuthPage = () => {
</div>
</div>
<AccountHolderAuthList
additionalServiceCategory={AdditionalServiceCategory.AccountHolderAuth}
listItems={listItems}
mid={mid}
></AccountHolderAuthList>
@@ -189,6 +205,14 @@ export const AccountHolderAuthPage = () => {
setAuthStatus={setAuthStatus}
>
</AccountHolderAuthFilter>
<EmailBottomSheet
bottomSheetOn={emailBottomSheetOn}
setBottomSheetOn={setEmailBottomSheetOn}
imageSave={false}
sendEmail={true}
sendRequest={onSendRequest}
/>
</>
);
};

105
src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
View File

@@ -21,37 +21,16 @@ import { AccountHolderSearchList } from '@/entities/additional-service/ui/accoun
import { useStore } from '@/shared/model/store';
import { AccountHolderSearchListItem, AccountHolderSearchType } from '@/entities/additional-service/model/account-holder-search/types';
import { resultStatusBtnGroup } from '@/entities/additional-service/model/account-holder-search/constant';
import useIntersectionObserver from '@/widgets/intersection-observer';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
export const AccountHolderSearchPage = () => {
const { navigate } = useNavigate();
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if (entry.isIntersecting) {
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if (onActionIntersect) {
callList();
}
}
else {
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const userMid = useStore.getState().UserStore.mid;
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<AccountHolderSearchListItem>>([]);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [mid, setMid] = useState<string>(userMid);
const [searchType, setSearchType] = useState<AccountHolderSearchType>(AccountHolderSearchType.ACCOUNT_NAME)
@@ -60,6 +39,8 @@ export const AccountHolderSearchPage = () => {
const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
const [bank, setBank] = useState<string>('');
const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL);
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
const [email, setEmail] = useState<string>('');
useSetHeaderTitle('계좌성명조회');
useSetHeaderType(HeaderType.LeftArrow);
@@ -73,17 +54,8 @@ export const AccountHolderSearchPage = () => {
const callList = (option?: {
sortType?: SortTypeKeys,
processResult?: ProcessResult,
resetPage?: boolean
processResult?: ProcessResult
}) => {
setOnActionIntersect(false);
const currentPageParam = option?.resetPage
? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
: { ...pageParam, sortType: option?.sortType ?? sortType };
setPageParam(currentPageParam);
let listParams = {
mid: mid,
searchCl: searchType,
@@ -92,27 +64,16 @@ export const AccountHolderSearchPage = () => {
toDate: endDate,
bankCode: bank,
resultStatus: option?.processResult ?? processResult,
... {
page: currentPageParam
}
page: pageParam
}
if (listParams.page) {
listParams.page.sortType = option?.sortType || sortType;
setPageParam(listParams.page);
}
accountHolderSearchList(listParams).then((rs) => {
setListItems(option?.resetPage ? rs.content : [
...listItems,
...rs.content
]);
if (rs.hasNext) {
setNextCursor(rs.nextCursor);
setPageParam({
...currentPageParam,
cursor: rs.nextCursor
});
setOnActionIntersect(true)
}
else {
setNextCursor(null);
}
setListItems(rs.content);
});
}
@@ -120,6 +81,30 @@ export const AccountHolderSearchPage = () => {
setFilterOn(!filterOn);
};
const onClickToOpenEmailBottomSheet = () => {
setEmailBottomSheetOn(true);
};
const onSendRequest = (selectedEmail?: string) => {
if (selectedEmail) {
// 이메일을 설정한 후 다운로드 실행
downloadExcel({
mid: mid,
//email: selectedEmail,
searchCl: searchType,
searchValue: searchKeyword,
fromDate: startDate,
toDate: endDate,
bankCode: bank,
resultStatus: processResult
}).then((rs) => {
console.log('Excel Download Status: ' + rs.status);
});
}
setEmailBottomSheetOn(false);
};
const onClickToDownloadExcel = () => {
downloadExcel({
mid: mid,
@@ -137,22 +122,19 @@ export const AccountHolderSearchPage = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort,
resetPage: true
sortType: sort
});
};
const onClickToTransactionStatus = (val: ProcessResult) => {
setProcessResult(val);
callList({
processResult: val,
resetPage: true
processResult: val
});
};
useEffect(() => {
// 필터 조건이 변경되면 첫 페이지부터 다시 시작
callList({ resetPage: true });
callList();
}, [
mid,
searchType,
@@ -190,11 +172,11 @@ export const AccountHolderSearchPage = () => {
</div>
<button
className="download-btn"
onClick={onClickToOpenEmailBottomSheet}
>
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt="다운로드"
onClick={() => onClickToDownloadExcel()}
/>
</button>
</div>
@@ -222,7 +204,6 @@ export const AccountHolderSearchPage = () => {
<AccountHolderSearchList
listItems={listItems}
mid={mid}
setTarget={setTarget}
></AccountHolderSearchList>
</div>
</div>
@@ -245,6 +226,14 @@ export const AccountHolderSearchPage = () => {
setBank={setBank}
setProcessResult={setProcessResult}
></AccountHolderSearchFilter>
<EmailBottomSheet
bottomSheetOn={emailBottomSheetOn}
setBottomSheetOn={setEmailBottomSheetOn}
imageSave={false}
sendEmail={true}
sendRequest={onSendRequest}
/>
</>
);
};

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

@@ -3,9 +3,9 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { JSX, useEffect, useState } from 'react';
@@ -19,7 +19,8 @@ import {
ExtensionAlimtalkDownloadExcelParams,
ExtensionAlimtalkDownloadExcelResponse,
ExtensionAlimtalkListParams,
ExtensionAlimtalkListResponse
ExtensionAlimtalkListResponse,
ServiceCode
} from '@/entities/additional-service/model/alimtalk/types';
import moment from 'moment';
import { useExtensionAlimtalkListMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-list-mutation';
@@ -27,47 +28,29 @@ import { useExtensionAlimtalkDownloadExcelMutation } from '@/entities/additional
import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
import { useStore } from '@/shared/model/store';
import useIntersectionObserver from '@/widgets/intersection-observer';
import { snackBar } from '@/shared/lib';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { AlimtalkFilter } from '@/entities/additional-service/ui/filter/alimtalk-filter';
export const AlimtalkListPage = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if (entry.isIntersecting) {
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if (onActionIntersect) {
callList();
}
}
else {
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<AlimtalkListContent>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>(userMid);
const [searchCl, setSearchCl] = useState<AlimtalkSearchCl>(AlimtalkSearchCl.BUYER_NAME);
const [searchValue, setSearchValue] = useState<string>();
const [paymentMethod, setPaymentMethod] = useState<string>();
const [searchValue, setSearchValue] = useState<string>('');
const [serviceCode, setServiceCode] = useState<ServiceCode>(ServiceCode.CARD);
const [alimCl, setAlimCl] = useState<AlimtalkAlimCl>(AlimtalkAlimCl.DEPOSIT_REQUEST);
const [fromDate, setFromDate] = useState<string>(moment().format('YYYYMMDD'));
const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
const [sendType, setSendType] = useState<AlimtalkSendType>(AlimtalkSendType.ALL);
const [sendCl, setSendCl] = useState<AlimTalkSendCl>(AlimTalkSendCl.ALL);
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
const { mutateAsync: extensionAlimtalkList } = useExtensionAlimtalkListMutation();
const { mutateAsync: extensionAlimtalkDownloadExcel } = useExtensionAlimtalkDownloadExcelMutation();
@@ -79,101 +62,97 @@ export const AlimtalkListPage = () => {
});
const callList = (option?: {
sortType?: SortTypeKeys,
resetPage?: boolean
}) => {
setOnActionIntersect(false);
const currentPageParam = option?.resetPage
? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
: { ...pageParam, sortType: option?.sortType ?? sortType };
setPageParam(currentPageParam);
sortType?: SortTypeKeys
}) => {
let params: ExtensionAlimtalkListParams = {
mid: mid,
searchCl: searchCl,
searchValue: searchValue,
serviceCode: paymentMethod,
fromDate: fromDate,
toDate: toDate,
sendType: sendType,
sendCl: sendCl,
page: currentPageParam
};
extensionAlimtalkList(params).then((rs: ExtensionAlimtalkListResponse) => {
setListItems(option?.resetPage ? rs.content : [
...listItems,
...rs.content
]);
if (rs.hasNext) {
setNextCursor(rs.nextCursor);
setPageParam({
...currentPageParam,
cursor: rs.nextCursor
});
setOnActionIntersect(true);
}
else {
setNextCursor(null);
}
});
};
const callDownloadExcel = () => {
let params: ExtensionAlimtalkDownloadExcelParams = {
mid: mid,
searchCl: searchCl,
searchValue: searchValue,
paymentMethod: paymentMethod,
serviceCode: serviceCode,
alimCl: alimCl,
fromDate: fromDate,
toDate: toDate,
sendType: sendType,
sendCl: sendCl
sendCl: sendCl,
page: pageParam
};
extensionAlimtalkDownloadExcel(params).then((rs: ExtensionAlimtalkDownloadExcelResponse) => {
if (params.page) {
params.page.sortType = option?.sortType || sortType;
setPageParam(params.page);
}
extensionAlimtalkList(params).then((rs: ExtensionAlimtalkListResponse) => {
setListItems(rs.content);
});
};
const onClickToOpenEmailBottomSheet = () => {
setEmailBottomSheetOn(true);
}
const onSendRequest = (selectedEmail?: string) => {
if (selectedEmail) {
const params: ExtensionAlimtalkDownloadExcelParams = {
mid: mid,
searchCl: searchCl,
searchValue: searchValue,
serviceCode: serviceCode,
alimCl: alimCl,
fromDate: fromDate,
toDate: toDate,
sendType: sendType,
sendCl: sendCl,
//email: selectedEmail
};
extensionAlimtalkDownloadExcel(params).then((rs: ExtensionAlimtalkDownloadExcelResponse) => {
console.log('Excel Download Status:', rs.status);
});
};
setEmailBottomSheetOn(false);
};
const onClickToNavigate = () => {
navigate(PATHS.additionalService.alimtalk.setting);
};
const onClickToDownloadExcel = () => {
callDownloadExcel();
};
const onClickToOpenFilter = () => {
setFilterOn(!filterOn);
};
const getAlimtalkList = () => {
let rs: JSX.Element[] = [];
let rs = [];
let date = '';
let list: AlimtalkListContent[] = [];
let list = [];
for (let i = 0; i < listItems.length; i++) {
// sendDate format: "20211018140420" (YYYYMMDDHHmmss)
let sendDate = listItems[i]?.sendDate || '';
let itemDate = sendDate.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
// 날짜가 바뀌면 이전 리스트를 푸시
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.Alimtalk}
mid={mid}
key={date + '-' + i}
date={date}
items={list as any}
></ListDateGroup>
);
let item = listItems[i];
if (!!item) {
// sendDate format: "20211018140420" (YYYYMMDDHHmmss)
let sendDate = item?.sendDate || '';
let itemDate = sendDate.substring(0, 8);
if (!!itemDate) {
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
date = itemDate;
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.Alimtalk}
mid={mid}
key={date + '-' + i}
date={date}
items={list as any}
></ListDateGroup>
);
}
list = [];
}
list.push(item);
}
date = itemDate;
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
@@ -188,15 +167,15 @@ export const AlimtalkListPage = () => {
}
return rs;
}
useEffect(() => {
// 필터 조건이 변경되면 첫 페이지부터 다시 시작
callList({ resetPage: true });
callList();
}, [
mid,
searchCl,
searchValue,
paymentMethod,
serviceCode,
alimCl,
fromDate,
toDate,
sendType,
@@ -211,49 +190,78 @@ export const AlimtalkListPage = () => {
<section className="summary-section no-border">
<div className="credit-controls">
<div>
<input
className="credit-period"
type="text"
value={ moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD') }
readOnly={ true }
<input
className="credit-period"
type="text"
value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
readOnly={true}
/>
<button
className="filter-btn"
<button
className="filter-btn"
aria-label="필터"
onClick={ () => onClickToOpenFilter() }
onClick={() => onClickToOpenFilter()}
>
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt="검색옵션"
/>
</button>
</div>
<button
className="download-btn"
<button
className="download-btn"
aria-label="다운로드"
onClick={ () => onClickToDownloadExcel() }
onClick={() => onClickToOpenEmailBottomSheet()}
>
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt="다운로드"
/>
</button>
</div>
</section>
<section className="transaction-list">
{ getAlimtalkList() }
<div ref={setTarget}></div>
{getAlimtalkList()}
</section>
</div>
</div>
</main>
<div className="apply-row">
<button
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigate() }
onClick={() => onClickToNavigate()}
>서비스 설정</button>
</div>
<AlimtalkFilter
filterOn={filterOn}
setFilterOn={setFilterOn}
mid={mid}
searchCl={searchCl}
searchValue={searchValue}
fromDate={fromDate}
toDate={toDate}
serviceCode={serviceCode}
alimCl={alimCl}
sendType={sendType}
sendCl={sendCl}
setMid={setMid}
setSearchCl={setSearchCl}
setSearchValue={setSearchValue}
setFromDate={setFromDate}
setToDate={setToDate}
setServiceCode={setServiceCode}
setAlimCl={setAlimCl}
setSendType={setSendType}
setSendCl={setSendCl}
></AlimtalkFilter>
<EmailBottomSheet
bottomSheetOn={emailBottomSheetOn}
setBottomSheetOn={setEmailBottomSheetOn}
imageSave={false}
sendEmail={true}
sendRequest={onSendRequest}
>
</EmailBottomSheet>
</>
);
};

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

@@ -3,9 +3,9 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { JSX, useEffect, useState } from 'react';
@@ -20,37 +20,15 @@ import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
import { ArsPaymentStatusBtnGroup } from '@/entities/additional-service/model/ars/constant';
import { ArsFilter } from '@/entities/additional-service/ui/filter/ars-filter';
import { useStore } from '@/shared/model/store';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const ArsListPage = () => {
const { navigate } = useNavigate();
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if (entry.isIntersecting) {
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if (onActionIntersect) {
callList();
}
}
else {
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const userMid = useStore.getState().UserStore.mid;
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<ArsListContent>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>(userMid);
const [moid, setMoid] = useState<string>('');
@@ -63,7 +41,7 @@ export const ArsListPage = () => {
const { mutateAsync: extensionArsList } = useExtensionArsListMutation();
const { mutateAsync: extensionArsDownloadExcel } = useExtensionArsDownloadExcelMutation();
useSetHeaderTitle('신용카드 ARS 결제');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
@@ -73,17 +51,8 @@ export const ArsListPage = () => {
const callList = (option?: {
sortType?: SortTypeKeys,
paymentStatus?: PaymentStatus,
resetPage?: boolean
paymentStatus?: PaymentStatus
}) => {
setOnActionIntersect(false);
const currentPageParam = option?.resetPage
? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
: { ...pageParam, sortType: option?.sortType ?? sortType };
setPageParam(currentPageParam);
let params: ExtensionArsListParams = {
mid: mid,
moid: moid,
@@ -93,25 +62,16 @@ export const ArsListPage = () => {
orderStatus: orderStatus,
minAmount: minAmount,
maxAmount: maxAmount,
page: currentPageParam
page: pageParam
};
if (params.page) {
params.page.sortType = option?.sortType || sortType;
setPageParam(params.page);
}
extensionArsList(params).then((rs: ExtensionArsListResponse) => {
// resetPage면 기존 리스트 무시, 아니면 추가
setListItems(option?.resetPage ? rs.content : [
...listItems,
...rs.content
]);
if (rs.hasNext) {
setNextCursor(rs.nextCursor);
setPageParam({
...currentPageParam,
cursor: rs.nextCursor
});
setOnActionIntersect(true)
}
else {
setNextCursor(null);
}
setListItems(rs.content);
});
};
@@ -146,21 +106,21 @@ export const ArsListPage = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort,
resetPage: true
sortType: sort
});
};
const onClickToPaymentStatus = (val: PaymentStatus) => {
setPaymentStatus(val);
callList({
paymentStatus: val,
resetPage: true
paymentStatus: val
});
};
useEffect(() => {
// 필터 조건이 변경되면 첫 페이지부터 다시 시작
callList({ resetPage: true });
callList();
}, []);
useEffect(() => {
callList();
}, [
mid,
moid,
@@ -173,33 +133,36 @@ export const ArsListPage = () => {
]);
const getListDateGroup = () => {
let rs: JSX.Element[] = [];
let rs = [];
let date = '';
let list: ArsListContent[] = [];
let list = [];
for (let i = 0; i < listItems.length; i++) {
// paymentDate format: "20211018140420" (YYYYMMDDHHmmss)
let paymentDate = listItems[i]?.paymentDate || '';
let itemDate = paymentDate.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
// 날짜가 바뀌면 이전 리스트를 푸시 (날짜 업데이트 전에!)
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.Ars}
mid={mid}
key={date + '-' + i}
date={date}
items={list as any}
></ListDateGroup>
);
let item = listItems[i];
if (!!item) {
let paymentDate = item?.paymentDate || '';
let itemDate = paymentDate.substring(0, 8);
if (!!itemDate) {
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
date = itemDate;
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.Ars}
mid={mid}
key={date + '-' + i}
date={date}
items={list}
></ListDateGroup>
);
}
list = [];
}
list.push(item);
}
date = itemDate; // 그 다음에 날짜 업데이트
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
@@ -223,30 +186,30 @@ export const ArsListPage = () => {
<section className="summary-section">
<div className="credit-controls">
<div>
<input
<input
className="credit-period"
type="text"
value={ moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD') }
readOnly={ true }
value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
readOnly={true}
/>
<button
className="filter-btn"
<button
className="filter-btn"
aria-label="필터"
onClick={ () => onClickToOpenFilter() }
onClick={() => onClickToOpenFilter()}
>
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt="검색옵션"
/>
</button>
</div>
<button
className="download-btn"
<button
className="download-btn"
aria-label="다운로드"
onClick={ () => onClickToDownloadExcel() }
onClick={() => onClickToDownloadExcel()}
>
<img
src={ IMAGE_ROOT +'/ico_download.svg' }
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt="다운로드"
/>
</button>
@@ -255,56 +218,55 @@ export const ArsListPage = () => {
<section className="filter-section">
<SortTypeBox
sortType={ sortType }
onClickToSort={ onClickToSort }
sortType={sortType}
onClickToSort={onClickToSort}
></SortTypeBox>
<div className="excrow mr-0">
<div className="full-menu-keywords no-padding">
{
ArsPaymentStatusBtnGroup.map((value, index) => (
<span
key={ `key-service-code=${ index }` }
className={ `keyword-tag ${(paymentStatus === value.value)? 'active': ''}` }
onClick={ () => onClickToPaymentStatus(value.value) }
>{ value.name }</span>
<span
key={`key-service-code=${index}`}
className={`keyword-tag ${(paymentStatus === value.value) ? 'active' : ''}`}
onClick={() => onClickToPaymentStatus(value.value)}
>{value.name}</span>
))
}
</div>
</div>
</section>
<section className="transaction-list">
{ getListDateGroup() }
<div ref={setTarget}></div>
{getListDateGroup()}
</section>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigate() }
onClick={() => onClickToNavigate()}
>결제 신청</button>
</div>
</div>
</div>
</main>
<ArsFilter
filterOn={ filterOn }
setFilterOn={ setFilterOn }
mid={ mid }
moid={ moid }
fromDate={ fromDate }
toDate={ toDate }
paymentStatus={ paymentStatus }
orderStatus={ orderStatus }
minAmount={ minAmount }
maxAmount={ maxAmount }
setMid={ setMid }
setMoid={ setMoid }
setFromDate={ setFromDate }
setToDate={ setToDate }
setPaymentStatus={ setPaymentStatus }
setOrderStatus={ setOrderStatus }
setMinAmount={ setMinAmount }
setMaxAmount={ setMaxAmount }
filterOn={filterOn}
setFilterOn={setFilterOn}
mid={mid}
moid={moid}
fromDate={fromDate}
toDate={toDate}
paymentStatus={paymentStatus}
orderStatus={orderStatus}
minAmount={minAmount}
maxAmount={maxAmount}
setMid={setMid}
setMoid={setMoid}
setFromDate={setFromDate}
setToDate={setToDate}
setPaymentStatus={setPaymentStatus}
setOrderStatus={setOrderStatus}
setMinAmount={setMinAmount}
setMaxAmount={setMaxAmount}
></ArsFilter>
</>
);

24
src/pages/additional-service/fund-account/result-detail-page.tsx
View File

@@ -11,11 +11,14 @@ import { useLocation } from 'react-router';
import { useEffect, useState } from 'react';
import { NumericFormat } from 'react-number-format';
import {
ExtensionFundAccountDownloadReceiptParams,
ExtensionFundAccountDownloadReceiptResponse,
ExtensionFundAccountResultDetailParams,
ExtensionFundAccountResultDetailResponse,
} from '@/entities/additional-service/model/fund-account/types';
import moment from 'moment';
import { useExtensionFundAccountResultDetailMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-result-detail-mutation';
import { useExtensionFundAccountDownloadReceiptMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-download-certificate-mutation';
export const FundAccountResultDetailPage = () => {
const { navigate } = useNavigate();
@@ -25,8 +28,10 @@ export const FundAccountResultDetailPage = () => {
const mid = location.state.mid;
const [detail, setDetail] = useState<ExtensionFundAccountResultDetailResponse>();
const [email, setEmail] = useState<string>('');
const { mutateAsync: extensionFundAccountResultDetail } = useExtensionFundAccountResultDetailMutation();
const { mutateAsync: extensionFundAccountDownlaodReceipt } = useExtensionFundAccountDownloadReceiptMutation();
const callDetail = () => {
let params: ExtensionFundAccountResultDetailParams = {
@@ -39,6 +44,17 @@ export const FundAccountResultDetailPage = () => {
});
};
const onClickToDownload = () => {
let params: ExtensionFundAccountDownloadReceiptParams = {
mid: mid,
tid: tid,
email: email
};
extensionFundAccountDownlaodReceipt(params).then((rs: ExtensionFundAccountDownloadReceiptResponse) => {
console.log(rs);
});
};
useSetHeaderTitle('자금이체 상세');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
@@ -72,7 +88,11 @@ export const FundAccountResultDetailPage = () => {
{/* ✅ resultMessage가 "정상"일 때만 표시 */}
{detail?.resultMessage === '정상' && (
<div className="receipt-row">
<button type="button" className="receipt-btn">
<button
type="button"
className="receipt-btn"
onClick={ onClickToDownload }
>
<span className="icon-24 download"></span>
<span>입금확인서</span>
</button>
@@ -104,7 +124,7 @@ export const FundAccountResultDetailPage = () => {
</li>
<li className="kv-row">
<span className="k">은행</span>
<span className="v">{detail?.bankCode}</span>
<span className="v">{detail?.bankName}</span>
</li>
<li className="kv-row">
<span className="k">계좌번호</span>

52
src/pages/additional-service/fund-account/transfer-detail-page.tsx
View File

@@ -11,27 +11,25 @@ import { useLocation } from 'react-router';
import { useEffect, useState } from 'react';
import { NumericFormat } from 'react-number-format';
import { useExtensionFundAccountTransferDetailMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-detail-mutation';
import { ExtensionFundAccountTransferDetailParams, ExtensionFundAccountTransferDetailResponse, ExtensionFundAccountTransferRequestParams, ExtensionFundAccountTransferRequestResponse, FundAccountStatus } from '@/entities/additional-service/model/fund-account/types';
import { ExtensionFundAccountTransferDetailParams, ExtensionFundAccountTransferDetailResponse, ExtensionFundAccountTransferRegistParams, ExtensionFundAccountTransferRequestResponse, FundAccountStatus } from '@/entities/additional-service/model/fund-account/types';
import { getFundAccountStatusName } from '@/entities/additional-service/model/fund-account/constant';
import moment from 'moment';
import { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation';
import { useExtensionFundAccountTransferRegistMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-regist-mutation';
export const FundAccountTransferDetailPage = () => {
const { navigate } = useNavigate();
const location = useLocation();
const tid = location.state.tid;
const mid = location.state.mid;
const seq = location.state.seq;
const [detail, setDetail] = useState<ExtensionFundAccountTransferDetailResponse>();
const { mutateAsync: extensionFundAccountTransferDetail } = useExtensionFundAccountTransferDetailMutation();
const { mutateAsync: extensionFundAccountTransferRequest } = useExtensionFundAccountTransferRequestMutation();
const { mutateAsync: extensionFundAccountTransferRequest } = useExtensionFundAccountTransferRegistMutation();
const callDetail = () => {
let params: ExtensionFundAccountTransferDetailParams = {
tid: tid,
mid: mid,
seq: seq
};
extensionFundAccountTransferDetail(params).then((rs: ExtensionFundAccountTransferDetailResponse) => {
@@ -50,26 +48,26 @@ export const FundAccountTransferDetailPage = () => {
callDetail();
}, []);
const onClickToRequest = () => {
if (!detail) {
alert('상세 정보를 불러오는 중입니다.');
return;
}
// const onClickToRequest = () => {
// if (!detail) {
// alert('상세 정보를 불러오는 중입니다.');
// return;
// }
let params: ExtensionFundAccountTransferRequestParams = {
mid: mid,
bankCode: detail.bankCode || '',
accountNo: detail.accountNo || '',
accountName: detail.accountName || '',
amount: detail.amount || 0,
moid: detail.moid || ''
};
extensionFundAccountTransferRequest(params).then((rs: ExtensionFundAccountTransferRequestResponse) => {
console.log(rs)
alert(rs.status ? '이체 요청이 완료되었습니다.' : '이체 요청에 실패했습니다.');
navigate(PATHS.additionalService.fundAccount.transferList);
});
};
// let params: ExtensionFundAccountTransferRegistParams = {
// mid: mid,
// bankCode: detail.bankCode || '',
// accountNo: detail.accountNo || '',
// accountName: detail.accountName || '',
// amount: detail.amount || 0,
// moid: detail.moid || ''
// };
// extensionFundAccountTransferRequest(params).then((rs: ExtensionFundAccountTransferRequestResponse) => {
// console.log(rs)
// alert(rs.status ? '이체 요청이 완료되었습니다.' : '이체 요청에 실패했습니다.');
// navigate(PATHS.additionalService.fundAccount.transferList);
// });
// };
return (
<>
@@ -138,7 +136,7 @@ export const FundAccountTransferDetailPage = () => {
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToRequest()}
//onClick={() => onClickToRequest()}
disabled={detail?.resultStatus !== FundAccountStatus.REGIST_COMPLETE}
>이체 요청</button>
</div>

39
src/pages/additional-service/fund-account/transfer-request-page.tsx
View File

@@ -7,15 +7,15 @@ import {
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { ChangeEvent, useEffect, useState } from 'react';
import { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation';
import { ExtensionFundAccountTransferRequestParams, ExtensionFundAccountTransferRequestResponse } from '@/entities/additional-service/model/fund-account/types';
import { ChangeEvent, useState } from 'react';
import { ExtensionFundAccountTransferRegistParams, ExtensionFundAccountTransferRegistResponse } from '@/entities/additional-service/model/fund-account/types';
import { useStore } from '@/shared/model/store';
import { snackBar } from '@/shared/lib';
import { useExtensionFundAccountTransferRegistMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-regist-mutation';
export const FundAccountTransferRequestPage = () => {
const { navigate } = useNavigate();
const midOptions = useStore.getState().UserStore.selectOptionsMids;
const userMid = useStore.getState().UserStore.mid;
@@ -27,7 +27,7 @@ export const FundAccountTransferRequestPage = () => {
const [moid, setMoid] = useState<string>('');
const [depositParameter, setDepositParameter] = useState<string>('');
const { mutateAsync: extensionFundAccountRequest } = useExtensionFundAccountTransferRequestMutation();
const { mutateAsync: extensionFundAccountRegist } = useExtensionFundAccountTransferRegistMutation();
useSetHeaderTitle('자금이체 이체등록');
useSetHeaderType(HeaderType.RightClose);
@@ -36,8 +36,17 @@ export const FundAccountTransferRequestPage = () => {
navigate(PATHS.additionalService.fundAccount.transferList);
});
const callExtensionFundAccountTransferRequest = () => {
let params: ExtensionFundAccountTransferRequestParams = {
const resetForm = () => {
setBankCode('');
setAccountNo('');
setAccountName('');
setAmount(0);
setMoid('');
setDepositParameter('');
};
const callExtensionFundAccountTransferRegist = () => {
let params: ExtensionFundAccountTransferRegistParams = {
mid: mid,
bankCode: bankCode,
accountNo: accountNo,
@@ -46,8 +55,13 @@ export const FundAccountTransferRequestPage = () => {
moid: moid,
depositParameter: depositParameter
};
extensionFundAccountRequest(params).then((rs: ExtensionFundAccountTransferRequestResponse) => {
navigate(PATHS.additionalService.payout.list);
extensionFundAccountRegist(params).then((rs: ExtensionFundAccountTransferRegistResponse) => {
if (rs.status) {
snackBar("이체등록을 성공하였습니다.")
resetForm();
} else {
snackBar("이체등록이 실패하였습니다.")
}
});
};
@@ -72,10 +86,7 @@ export const FundAccountTransferRequestPage = () => {
<div className="billing-row">
<div className="billing-label">가맹점<span>*</span></div>
<div className="billing-field">
<select
value={ mid }
onChange={ (e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value) }
>
<select value={mid} onChange={(e) => setMid(e.target.value)}>
{
midOptions.map((value, index) => (
<option
@@ -154,7 +165,7 @@ export const FundAccountTransferRequestPage = () => {
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={callExtensionFundAccountTransferRequest}
onClick={callExtensionFundAccountTransferRegist}
disabled={!isFormValid()}
>등록</button>
</div>

67
src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
View File

@@ -21,7 +21,6 @@ import { KeyInPaymentList } from '@/entities/additional-service/ui/key-in-paymen
import { useStore } from '@/shared/model/store';
import { KeyInPaymentListItem, KeyInPaymentPaymentStatus } from '@/entities/additional-service/model/key-in/types';
import { keyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const KeyInPaymentPage = () => {
const { navigate } = useNavigate();
@@ -31,32 +30,12 @@ export const KeyInPaymentPage = () => {
const [listItems, setListItems] = useState<Array<KeyInPaymentListItem>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [mid, setMid] = useState<string>(userMid);
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
const [paymentStatus, setPaymentStatus] = useState<KeyInPaymentPaymentStatus>(KeyInPaymentPaymentStatus.ALL)
const [minAmount, setMinAmount] = useState<number>();
const [maxAmount, setMaxAmount] = useState<number>();
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if (entry.isIntersecting) {
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if (onActionIntersect) {
callList();
}
}
else {
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
useSetHeaderTitle('KEY-IN 결제');
useSetHeaderType(HeaderType.LeftArrow);
@@ -70,17 +49,8 @@ export const KeyInPaymentPage = () => {
const callList = (option?: {
sortType?: SortTypeKeys,
status?: KeyInPaymentPaymentStatus,
resetPage?: boolean
status?: KeyInPaymentPaymentStatus
}) => {
setOnActionIntersect(false);
const currentPageParam = option?.resetPage
? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
: { ...pageParam, sortType: option?.sortType ?? sortType };
setPageParam(currentPageParam);
let newMinAmount = minAmount;
if (!!minAmount && typeof (minAmount) === 'string') {
newMinAmount = parseInt(minAmount);
@@ -96,28 +66,16 @@ export const KeyInPaymentPage = () => {
paymentStatus: paymentStatus,
minAmount: newMinAmount,
maxAmount: newMaxAmount,
... {
page: currentPageParam
}
page: pageParam
};
if (listParams.page) {
listParams.page.sortType = option?.sortType || sortType;
setPageParam(listParams.page);
}
keyinList(listParams).then((rs) => {
// resetPage면 기존 리스트 무시, 아니면 추가
setListItems(option?.resetPage ? rs.content : [
...listItems,
...rs.content
]);
if (rs.hasNext) {
setNextCursor(rs.nextCursor);
setPageParam({
...currentPageParam, // pageParam이 아니라 currentPageParam 사용
cursor: rs.nextCursor
});
setOnActionIntersect(true)
}
else {
setNextCursor(null);
}
setListItems(rs.content);
});
}
@@ -149,21 +107,19 @@ export const KeyInPaymentPage = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort,
resetPage: true
sortType: sort
});
};
const onClickToPaymentStatus = (val: KeyInPaymentPaymentStatus) => {
setPaymentStatus(val);
callList({
status: val,
resetPage: true
status: val
});
};
useEffect(() => {
callList({resetPage: true});
callList();
}, [
mid,
startDate,
@@ -234,7 +190,6 @@ export const KeyInPaymentPage = () => {
listItems={listItems}
additionalServiceCategory={AdditionalServiceCategory.KeyInPayment}
mid={mid}
setTarget={setTarget}
></KeyInPaymentList>
</div>
</div>

19
src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-page.tsx
View File

@@ -256,7 +256,12 @@ export const LinkPaymentSeparateApprovalPage = () => {
</li>
<li>
<span className="label">• 유효기간:</span>
<span className="value">{item.paymentLimitDate}</span>
<span className="value">
{item.paymentLimitDate
? moment(item.paymentLimitDate, 'YYYYMMDD').format('YYYY/MM/DD')
: '-'
}
</span>
</li>
<li>
<span className="label">• 연장횟수:</span>
@@ -272,13 +277,11 @@ export const LinkPaymentSeparateApprovalPage = () => {
onChange={(e) => handleExtendPeriodChange(itemId, e.target.value)}
>
<option value="">미설정</option>
<option value="1">1일</option>
<option value="2">2일</option>
<option value="3">3일</option>
<option value="4">4일</option>
<option value="5">5일</option>
<option value="6">6일</option>
<option value="7">7일</option>
{[1, 2, 3, 4, 5, 6, 7].map(days => {
const baseDate = moment(item.paymentLimitDate, 'YYYYMMDD');
const targetDate = baseDate.clone().add(days, 'days').format('YYYY/MM/DD');
return <option key={days} value={days.toString()}>{targetDate}</option>;
})}
</select>
</div>
</div>

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

@@ -28,36 +28,14 @@ import { PayoutDisbursementStatusBtnGroup } from '@/entities/additional-service/
import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
import { useStore } from '@/shared/model/store';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const PayoutListPage = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if (entry.isIntersecting) {
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if (onActionIntersect) {
callExtensionPayoutList();
}
}
else {
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<PayoutContent>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>(userMid);
const [searchDateType, setSearchDateType] = useState<PayoutSearchDateType>(PayoutSearchDateType.REQUEST_DATE);
@@ -83,17 +61,8 @@ export const PayoutListPage = () => {
const callExtensionPayoutList = (option?: {
sortType?: SortTypeKeys,
status?: PayoutDisbursementStatus,
resetPage?: boolean
status?: PayoutDisbursementStatus
}) => {
setOnActionIntersect(false);
const currentPageParam = option?.resetPage
? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
: { ...pageParam, sortType: option?.sortType ?? sortType };
setPageParam(currentPageParam);
let newMinAmount = minAmount;
if(!!minAmount && typeof(minAmount) === 'string'){
newMinAmount = parseInt(minAmount);
@@ -110,25 +79,16 @@ export const PayoutListPage = () => {
status: option?.status ?? status,
minAmount: newMinAmount,
maxAmount: newMaxAmount,
page: currentPageParam
page: pageParam
};
if(params.page){
params.page.sortType = option?.sortType || sortType;
setPageParam(params.page);
}
extensionPayoutList(params).then((rs: ExtensionPayoutListResponse) => {
// resetPage면 기존 리스트 무시, 아니면 추가
setListItems(option?.resetPage ? rs.content : [
...listItems,
...rs.content
]);
if (rs.hasNext) {
setNextCursor(rs.nextCursor);
setPageParam({
...currentPageParam,
cursor: rs.nextCursor
});
setOnActionIntersect(true)
}
else {
setNextCursor(null);
}
setListItems(rs.content);
});
};
@@ -156,21 +116,18 @@ export const PayoutListPage = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callExtensionPayoutList({
sortType: sort,
resetPage: true
sortType: sort
});
};
const onClickToDisbursementStatus = (val: PayoutDisbursementStatus) => {
setStatus(val);
callExtensionPayoutList({
status: val,
resetPage: true
status: val
});
};
useEffect(() => {
// 필터 조건이 변경되면 첫 페이지부터 다시 시작
callExtensionPayoutList({ resetPage: true });
callExtensionPayoutList();
}, [
mid,
searchDateType,
@@ -298,7 +255,6 @@ export const PayoutListPage = () => {
</section>
<section className="transaction-list">
{ getListDateGroup() }
<div ref={setTarget}></div>
</section>
<div className="apply-row">
<button

58
src/pages/additional-service/sms-payment/sms-payment-page.tsx
View File

@@ -18,7 +18,6 @@ import { SmsPaymentList } from '@/entities/additional-service/ui/sms-payment/sms
import { SmsPaymentFilter } from '@/entities/additional-service/ui/sms-payment/sms-payment-filter';
import { useExtensionSmsDetailMutation } from '@/entities/additional-service/api/sms-payment/use-extension-sms-detail-mutation';
import { useStore } from '@/shared/model/store';
import useIntersectionObserver from '@/widgets/intersection-observer';
import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
import { PATHS } from '@/shared/constants/paths';
@@ -27,31 +26,10 @@ export const SmsPaymentPage = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if (entry.isIntersecting) {
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if (onActionIntersect) {
callList();
}
}
else {
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState<boolean>(false)
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<SmsPaymentListItem>>([]);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [mid, setMid] = useState<string>(userMid);
@@ -75,15 +53,8 @@ export const SmsPaymentPage = () => {
navigate(PATHS.home);
});
const callList = (option?: {
sortType?: SortTypeKeys,
resetPage?: boolean
sortType?: SortTypeKeys
}) => {
const currentPageParam = option?.resetPage
? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
: { ...pageParam, sortType: option?.sortType ?? sortType };
setPageParam(currentPageParam);
let listParams: ExtensionSmsPaymentListParams = {
mid: mid,
searchCl: searchCl,
@@ -91,26 +62,16 @@ export const SmsPaymentPage = () => {
fromDate: fromDate,
toDate: toDate,
smsCl: smsCl,
... {
page: currentPageParam
}
page: pageParam
}
if (listParams.page) {
listParams.page.sortType = option?.sortType || sortType;
setPageParam(listParams.page);
}
smsPaymentList(listParams).then((rs) => {
setListItems(option?.resetPage ? rs.content : [
...listItems,
...rs.content
]);
if (rs.hasNext) {
setNextCursor(rs.nextCursor);
setPageParam({
...currentPageParam,
cursor: rs.nextCursor
});
setOnActionIntersect(true)
} else {
setNextCursor(null);
}
setListItems(rs.content);
});
}
@@ -150,7 +111,7 @@ export const SmsPaymentPage = () => {
};
useEffect(() => {
callList({resetPage: true});
callList();
}, [
mid,
searchCl,
@@ -203,7 +164,6 @@ export const SmsPaymentPage = () => {
additionalServiceCategory={AdditionalServiceCategory.SMSPayment}
mid={mid}
onResendClick={onClickToShowDetail}
setTarget={setTarget}
></SmsPaymentList>
</div>
</div>