- 링크결제 API 수정
- 지급대행 수정
This commit is contained in:
HyeonJongKim
@@ -6,37 +6,64 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { PATHS } from "@/shared/constants/paths";
|
||||
import { LinkPaymentHistoryList } from "./link-payment-history-list";
|
||||
import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
|
||||
import { SortTypeKeys } from '@/entities/common/model/types';
|
||||
import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
|
||||
import { AdditionalServiceCategory, ProcessResult } from "../../model/types";
|
||||
import { useExtensionLinkPayHistoryListMutation } from '../../api/link-payment/use-extension-link-pay-history-list-mutation';
|
||||
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
|
||||
import { useExtensionLinkPayHistoryDownloadExcelMutation } from '../../api/link-payment/use-extension-link-pay-history-download-excel-mutation';
|
||||
import { useStore } from '@/shared/model/store';
|
||||
import { LinkPaymentHistoryListItem, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod } from '../../model/link-pay/types';
|
||||
import { ExtensionLinkPayHistoryListParams, LinkPaymentHistoryListItem, LinkPaymentPaymentMethod, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus } from '../../model/link-pay/types';
|
||||
import useIntersectionObserver from '@/widgets/intersection-observer';
|
||||
|
||||
const processResultBtnGroup = [
|
||||
{ name: '전체', value: ProcessResult.ALL },
|
||||
{ name: '성공', value: ProcessResult.SUCCESS },
|
||||
{ name: '실패', value: ProcessResult.FAIL }
|
||||
const paymentResultBtnGroup = [
|
||||
{ name: '전체', value: LinkPaymentPaymentStatus.ALL },
|
||||
{ name: '미완료/활성화', value: LinkPaymentPaymentStatus.ACTIVATE },
|
||||
{ name: '입금요청', value: LinkPaymentPaymentStatus.DEPOSIT_REQUEST },
|
||||
{ name: '결제완료', value: LinkPaymentPaymentStatus.PAYMENT_COMPLETE },
|
||||
{ name: '결제실패', value: LinkPaymentPaymentStatus.PAYMENT_FAIL },
|
||||
{ name: '결제중단/비활성화', value: LinkPaymentPaymentStatus.INACTIVE },
|
||||
];
|
||||
|
||||
export const LinkPaymentHistoryWrap = () => {
|
||||
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 [filterOn, setFilterOn] = useState<boolean>(false);
|
||||
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
|
||||
const [listItems, setListItems] = useState({});
|
||||
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
|
||||
const [listItems, setListItems] = useState<Array<LinkPaymentHistoryListItem>>([]);
|
||||
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<LinkPaymentSearchCl>(LinkPaymentSearchCl.ALL)
|
||||
const [searchKeyword, setSearchKeyword] = useState<string>('');
|
||||
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [transactionStatus, setTransactionStatus] = useState<LinkPaymentPaymentStatus>(LinkPaymentPaymentStatus.ALL)
|
||||
const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL)
|
||||
const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL)
|
||||
const [searchCl, setSearchCl] = useState<LinkPaymentSearchCl>(LinkPaymentSearchCl.PHONE);
|
||||
const [searchValue, setSearchValue] = useState<string>('');
|
||||
const [paymentMethod, setPaymentMethod] = useState<LinkPaymentPaymentMethod>(LinkPaymentPaymentMethod.CARD);
|
||||
const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
|
||||
const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
|
||||
const [paymentStatus, setPaymentStatus] = useState<LinkPaymentPaymentStatus>(LinkPaymentPaymentStatus.ALL);
|
||||
const [sendStatus, setSendStatus] = useState<LinkPaymentSendStatus>(LinkPaymentSendStatus.ALL);
|
||||
const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
|
||||
|
||||
const [email, setEmail] = useState<string>('');
|
||||
|
||||
const { mutateAsync: linkPayHistoryList } = useExtensionLinkPayHistoryListMutation();
|
||||
const { mutateAsync: downloadExcel } = useExtensionLinkPayHistoryDownloadExcelMutation();
|
||||
@@ -47,71 +74,80 @@ export const LinkPaymentHistoryWrap = () => {
|
||||
|
||||
const callList = (option?: {
|
||||
sortType?: SortTypeKeys,
|
||||
val?: string
|
||||
status?: LinkPaymentPaymentStatus,
|
||||
resetPage?: boolean
|
||||
}) => {
|
||||
pageParam.sortType = (option?.sortType) ? option.sortType : sortType;
|
||||
setPageParam(pageParam);
|
||||
setOnActionIntersect(false);
|
||||
|
||||
let listParams = {
|
||||
const currentPageParam = option?.resetPage
|
||||
? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
|
||||
: { ...pageParam, sortType: option?.sortType ?? sortType };
|
||||
|
||||
setPageParam(currentPageParam); // currentPageParam으로 수정!
|
||||
|
||||
let listParams: ExtensionLinkPayHistoryListParams = {
|
||||
mid: mid,
|
||||
searchCl: searchCl,
|
||||
searchValue: searchKeyword,
|
||||
paymentMethod: '',
|
||||
fromDate: startDate,
|
||||
toDate: endDate,
|
||||
paymentStatus: transactionStatus === LinkPaymentPaymentStatus.ALL ? '' : transactionStatus,
|
||||
sendStatus: processResult === ProcessResult.ALL ? '' : processResult,
|
||||
sendMethod: sendMethod === LinkPaymentSendMethod.ALL ? '' : sendMethod,
|
||||
page: pageParam
|
||||
searchValue: searchValue,
|
||||
fromDate: fromDate,
|
||||
toDate: toDate,
|
||||
paymentStatus: option?.status ?? paymentStatus,
|
||||
sendStatus: sendStatus,
|
||||
sendMethod: sendMethod,
|
||||
... {
|
||||
page: currentPageParam
|
||||
}
|
||||
};
|
||||
|
||||
linkPayHistoryList(listParams).then((rs) => {
|
||||
setListItems(assembleData(rs.content));
|
||||
});
|
||||
};
|
||||
|
||||
const assembleData = (content: Array<LinkPaymentHistoryListItem>) => {
|
||||
let data: any = {};
|
||||
if(content && content.length > 0){
|
||||
for(let i=0;i<content?.length;i++){
|
||||
let sendDate = content[i]?.sendDate?.substring(0, 8);
|
||||
let groupDate = moment(sendDate).format('YYYYMMDD');
|
||||
if(!!groupDate && !data.hasOwnProperty(groupDate)){
|
||||
data[groupDate] = [];
|
||||
}
|
||||
if(!!groupDate && data.hasOwnProperty(groupDate)){
|
||||
data[groupDate].push(content[i]);
|
||||
}
|
||||
setListItems(option?.resetPage ? rs.content : [
|
||||
...listItems,
|
||||
...rs.content
|
||||
]);
|
||||
if (rs.hasNext) {
|
||||
setNextCursor(rs.nextCursor);
|
||||
setPageParam({
|
||||
...currentPageParam, // pageParam이 아니라 currentPageParam 사용
|
||||
cursor: rs.nextCursor
|
||||
});
|
||||
setOnActionIntersect(true)
|
||||
}
|
||||
}
|
||||
console.log('Data : ', data);
|
||||
return data;
|
||||
else {
|
||||
setNextCursor(null);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onClickToDownloadExcel = () => {
|
||||
downloadExcel({
|
||||
mid: mid,
|
||||
email: email,
|
||||
searchCl: searchCl,
|
||||
searchValue: searchKeyword,
|
||||
paymentMethod: '',
|
||||
fromDate: startDate,
|
||||
toDate: endDate,
|
||||
paymentStatus: transactionStatus,
|
||||
sendStatus: (processResult === ProcessResult.ALL)? '': processResult,
|
||||
sendMethod: (sendMethod === LinkPaymentSendMethod.ALL)? '': sendMethod,
|
||||
searchValue: searchValue,
|
||||
paymentMethod: paymentMethod,
|
||||
fromDate: fromDate,
|
||||
toDate: toDate,
|
||||
paymentStatus: paymentStatus,
|
||||
sendStatus: sendStatus,
|
||||
sendMethod: sendMethod,
|
||||
}).then((rs) => {
|
||||
console.log('Excel Dowload Status : ' + rs.status);
|
||||
});
|
||||
};
|
||||
|
||||
const onClickProcessResult = (val: ProcessResult) => {
|
||||
setProcessResult(val);
|
||||
const onClickPaymentStatus = (val: LinkPaymentPaymentStatus) => {
|
||||
setPaymentStatus(val);
|
||||
callList({
|
||||
status: val,
|
||||
resetPage: true
|
||||
})
|
||||
}
|
||||
|
||||
const onClickToSort = (sort: SortTypeKeys) => {
|
||||
setSortType(sort);
|
||||
callList({
|
||||
sortType: sort
|
||||
sortType: sort,
|
||||
resetPage: true
|
||||
});
|
||||
};
|
||||
|
||||
@@ -120,8 +156,19 @@ export const LinkPaymentHistoryWrap = () => {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
callList();
|
||||
}, []);
|
||||
// 필터 조건이 변경되면 첫 페이지부터 다시 시작
|
||||
callList({ resetPage: true });
|
||||
}, [
|
||||
mid,
|
||||
searchCl,
|
||||
searchValue,
|
||||
paymentMethod,
|
||||
fromDate,
|
||||
toDate,
|
||||
paymentStatus,
|
||||
sendStatus,
|
||||
sendMethod
|
||||
]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -131,7 +178,7 @@ export const LinkPaymentHistoryWrap = () => {
|
||||
<input
|
||||
className="credit-period"
|
||||
type="text"
|
||||
value={moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD')}
|
||||
value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
|
||||
readOnly={true}
|
||||
/>
|
||||
<button
|
||||
@@ -158,21 +205,21 @@ export const LinkPaymentHistoryWrap = () => {
|
||||
|
||||
<div className="filter-section">
|
||||
<SortTypeBox
|
||||
sortType={ sortType }
|
||||
onClickToSort={ onClickToSort }
|
||||
sortType={sortType}
|
||||
onClickToSort={onClickToSort}
|
||||
>
|
||||
</SortTypeBox>
|
||||
<div className="excrow">
|
||||
<div className="full-menu-keywords no-padding">
|
||||
{
|
||||
processResultBtnGroup.map((value, index) => (
|
||||
<span
|
||||
key={`key-service-code=${index}`}
|
||||
className={`keyword-tag ${(processResult === value.value) ? 'active' : ''}`}
|
||||
onClick={() => onClickProcessResult(value.value)}
|
||||
>{ value.name }</span>
|
||||
))
|
||||
}
|
||||
{
|
||||
paymentResultBtnGroup.map((value, index) => (
|
||||
<span
|
||||
key={`key-service-code=${index}`}
|
||||
className={`keyword-tag ${(paymentStatus === value.value) ? 'active' : ''}`}
|
||||
onClick={() => onClickPaymentStatus(value.value)}
|
||||
>{value.name}</span>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -180,6 +227,8 @@ export const LinkPaymentHistoryWrap = () => {
|
||||
<LinkPaymentHistoryList
|
||||
listItems={listItems}
|
||||
additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
|
||||
setTarget={setTarget}
|
||||
mid={mid}
|
||||
></LinkPaymentHistoryList>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
@@ -192,19 +241,19 @@ export const LinkPaymentHistoryWrap = () => {
|
||||
setFilterOn={setFilterOn}
|
||||
mid={mid}
|
||||
searchCl={searchCl}
|
||||
searchValue={searchKeyword}
|
||||
fromDate={startDate}
|
||||
toDate={endDate}
|
||||
paymentStatus={transactionStatus}
|
||||
processResult={processResult}
|
||||
searchValue={searchValue}
|
||||
fromDate={fromDate}
|
||||
toDate={toDate}
|
||||
paymentStatus={paymentStatus}
|
||||
sendStatus={sendStatus}
|
||||
sendMethod={sendMethod}
|
||||
setMid={setMid}
|
||||
setSearchType={setSearchCl}
|
||||
setSearchKeyword={setSearchKeyword}
|
||||
setStartDate={setStartDate}
|
||||
setEndDate={setEndDate}
|
||||
setTransactionStatus={setTransactionStatus}
|
||||
setProcessResult={setProcessResult}
|
||||
setSearchKeyword={setSearchValue}
|
||||
setStartDate={setFromDate}
|
||||
setEndDate={setToDate}
|
||||
setPaymentStatus={setPaymentStatus}
|
||||
setSendStatus={setSendStatus}
|
||||
setSendMethod={setSendMethod}
|
||||
></LinkPaymentHistoryFilter>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user