- SMS,KeyIn,ARS 페이지 스크롤 적용
- ARS 결제신청 :성공 결과 팝업 추가
This commit is contained in:
HyeonJongKim
@@ -3,40 +3,65 @@ import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { SmsPaymentDetailResend } from '@/entities/additional-service/ui/sms-payment/sms-payment-detail-resend';
|
||||
import { HeaderType, SortTypeKeys } from '@/entities/common/model/types';
|
||||
import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/common/model/types';
|
||||
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode
|
||||
useSetFooterMode,
|
||||
useSetOnBack
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { SmsPaymentListItem, SmsPaymentSearchType, SmsType, ExtensionSmsDetailResponse } from '@/entities/additional-service/model/sms-payment/types';
|
||||
import { SmsPaymentListItem, SmsPaymentSearchCl, SmsCl, ExtensionSmsDetailResponse, ExtensionSmsPaymentListParams } from '@/entities/additional-service/model/sms-payment/types';
|
||||
import { useExtensionSmsListMutation } from '@/entities/additional-service/api/sms-payment/use-extension-sms-list-mutation';
|
||||
import { useExtensionSmsDownloadExcelMutation } from '@/entities/additional-service/api/sms-payment/use-extension-sms-download-excel-mutation';
|
||||
import { SmsPaymentList } from '@/entities/additional-service/ui/sms-payment/sms-payment-list';
|
||||
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';
|
||||
|
||||
|
||||
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({});
|
||||
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
|
||||
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);
|
||||
const [selectedTid, setSelectedTid] = useState<string>('');
|
||||
const [selectedMid, setSelectedMid] = useState<string>('');
|
||||
const [searchCl, setSearchCl] = useState<SmsPaymentSearchType>(SmsPaymentSearchType.BUYER_NAME)
|
||||
const [searchCl, setSearchCl] = useState<SmsPaymentSearchCl>(SmsPaymentSearchCl.BUYER_NAME)
|
||||
const [searchValue, setSearchValue] = useState<string>('')
|
||||
const [fromDate, setFromDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [toDate, setToDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [smsCl, setSmsCl] = useState<SmsType>(SmsType.ALL);
|
||||
const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
|
||||
const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
|
||||
const [smsCl, setSmsCl] = useState<SmsCl>(SmsCl.ALL);
|
||||
const [smsDetailData, setSmsDetailData] = useState<ExtensionSmsDetailResponse | null>(null);
|
||||
|
||||
const { mutateAsync: smsPaymentList } = useExtensionSmsListMutation();
|
||||
@@ -46,46 +71,48 @@ export const SmsPaymentPage = () => {
|
||||
useSetHeaderTitle('SMS 결제 통보');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(false);
|
||||
|
||||
useSetOnBack(() => {
|
||||
navigate(PATHS.home);
|
||||
});
|
||||
const callList = (option?: {
|
||||
sortType?: SortTypeKeys,
|
||||
val?: string
|
||||
resetPage?: boolean
|
||||
}) => {
|
||||
pageParam.sortType = (option?.sortType)? option.sortType: sortType;
|
||||
setPageParam(pageParam);
|
||||
const currentPageParam = option?.resetPage
|
||||
? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
|
||||
: { ...pageParam, sortType: option?.sortType ?? sortType };
|
||||
|
||||
let listParams = {
|
||||
setPageParam(currentPageParam);
|
||||
|
||||
let listParams: ExtensionSmsPaymentListParams = {
|
||||
mid: mid,
|
||||
searchCl: searchCl,
|
||||
searchValue: searchValue,
|
||||
fromDate: fromDate,
|
||||
toDate: toDate,
|
||||
smsCl: (smsCl === SmsType.ALL)? '' :smsCl,
|
||||
page: pageParam
|
||||
smsCl: smsCl,
|
||||
... {
|
||||
page: currentPageParam
|
||||
}
|
||||
}
|
||||
|
||||
smsPaymentList(listParams).then((rs) => {
|
||||
setListItems(assembleData(rs.content));
|
||||
})
|
||||
}
|
||||
|
||||
const assembleData = (content: Array<SmsPaymentListItem>) => {
|
||||
let data: any = {};
|
||||
if (content && content.length > 0) {
|
||||
for (let i = 0; i < content?.length; i++) {
|
||||
let paymentDate = content[i]?.paymentDate?.substring(0, 8);
|
||||
let groupDate = moment(paymentDate).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,
|
||||
cursor: rs.nextCursor
|
||||
});
|
||||
setOnActionIntersect(true)
|
||||
} else {
|
||||
setNextCursor(null);
|
||||
}
|
||||
}
|
||||
console.log('Data : ', data);
|
||||
return data;
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const callDetail = (selectedMid: string, selectedTid: string) => {
|
||||
console.log('Selected Mid: ', selectedMid, 'Selected Tid: ', selectedTid);
|
||||
@@ -93,7 +120,6 @@ export const SmsPaymentPage = () => {
|
||||
mid: selectedMid,
|
||||
tid: selectedTid
|
||||
}).then((rs) => {
|
||||
console.log('Detail info : ', rs);
|
||||
setSmsDetailData(rs);
|
||||
})
|
||||
}
|
||||
@@ -105,7 +131,7 @@ export const SmsPaymentPage = () => {
|
||||
searchValue: searchValue,
|
||||
fromDate: fromDate,
|
||||
toDate: toDate,
|
||||
smsCl: (smsCl === SmsType.ALL)? '': smsCl,
|
||||
smsCl: smsCl,
|
||||
}).then((rs) => {
|
||||
console.log('Excel Dowload Status : ' + rs.status);
|
||||
});
|
||||
@@ -124,8 +150,15 @@ export const SmsPaymentPage = () => {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
callList();
|
||||
}, []);
|
||||
callList({resetPage: true});
|
||||
}, [
|
||||
mid,
|
||||
searchCl,
|
||||
searchValue,
|
||||
fromDate,
|
||||
toDate,
|
||||
smsCl
|
||||
]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -166,9 +199,11 @@ export const SmsPaymentPage = () => {
|
||||
</section>
|
||||
<div className="detail-divider"></div>
|
||||
<SmsPaymentList
|
||||
listItems={ listItems }
|
||||
mid={ mid }
|
||||
onResendClick={ onClickToShowDetail }
|
||||
listItems={listItems}
|
||||
additionalServiceCategory={AdditionalServiceCategory.SMSPayment}
|
||||
mid={mid}
|
||||
onResendClick={onClickToShowDetail}
|
||||
setTarget={setTarget}
|
||||
></SmsPaymentList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user