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

수정

Browse Source
This commit is contained in:
focp212@naver.com
2025-10-26 01:28:47 +09:00
parent 7e5f1e71a7
commit 00aec7656e
34 changed files with 930 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,6 +22,7 @@ import { ArsFilter } from '@/entities/additional-service/ui/filter/ars-filter';
import { useStore } from '@/shared/model/store';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const ArsListPage = () => {
const { navigate } = useNavigate();
@@ -33,6 +34,7 @@ export const ArsListPage = () => {
extensionCode: 'ARS'
});
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<ArsListContent>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -49,6 +51,24 @@ export const ArsListPage = () => {
const { mutateAsync: extensionArsList } = useExtensionArsListMutation();
const { mutateAsync: extensionArsDownloadExcel } = useExtensionArsDownloadExcelMutation();
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 && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
useSetHeaderTitle('신용카드 ARS 결제');
useSetHeaderType(HeaderType.LeftArrow);
@@ -57,29 +77,49 @@ export const ArsListPage = () => {
navigate(PATHS.home);
});
const callList = (option?: {
sortType?: SortTypeKeys,
paymentStatus?: PaymentStatus
}) => {
let params: ExtensionArsListParams = {
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams: ExtensionArsListParams = {
mid: mid,
moid: moid,
fromDate: fromDate,
toDate: toDate,
paymentStatus: option?.paymentStatus ?? paymentStatus,
paymentStatus: paymentStatus,
orderStatus: orderStatus,
minAmount: minAmount,
maxAmount: maxAmount,
page: pageParam
page: {
...pageParam,
...{ sortType: sortType }
}
};
if (params.page) {
params.page.sortType = option?.sortType || sortType;
setPageParam(params.page);
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
extensionArsList(params).then((rs: ExtensionArsListResponse) => {
setListItems(rs.content);
extensionArsList(listParams).then((rs: ExtensionArsListResponse) => {
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
};
@@ -117,9 +157,6 @@ export const ArsListPage = () => {
};
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort
});
};
const onClickToPaymentStatus = (val: PaymentStatus) => {
setPaymentStatus(val);
@@ -135,7 +172,8 @@ export const ArsListPage = () => {
paymentStatus,
orderStatus,
minAmount,
maxAmount
maxAmount,
sortType
]);
const getListDateGroup = () => {
@@ -247,7 +285,8 @@ export const ArsListPage = () => {
</section>
<section className="transaction-list">
{getListDateGroup()}
{ getListDateGroup() }
<div ref={ setTarget }></div>
</section>
<div className="apply-row">
<button

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

@@ -23,6 +23,7 @@ import { KeyInPaymentListItem, KeyInPaymentPaymentStatus } from '@/entities/addi
import { keyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const KeyInPaymentPage = () => {
const { navigate } = useNavigate();
@@ -33,6 +34,7 @@ export const KeyInPaymentPage = () => {
extensionCode: 'KEYIN'
});
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<KeyInPaymentListItem>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -54,36 +56,66 @@ export const KeyInPaymentPage = () => {
const { mutateAsync: keyinList } = useExtensionKeyinListMutation();
const { mutateAsync: downloadExcel } = useExtensionKeyinDownloadExcelMutation();
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 && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const callList = (option?: {
sortType?: SortTypeKeys,
status?: KeyInPaymentPaymentStatus
}) => {
let newMinAmount = minAmount;
if (!!minAmount && typeof (minAmount) === 'string') {
newMinAmount = parseInt(minAmount);
}
let newMaxAmount = maxAmount;
if (!!maxAmount && typeof (maxAmount) === 'string') {
newMaxAmount = parseInt(maxAmount);
}
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams = {
mid: mid,
fromDate: startDate,
toDate: endDate,
paymentStatus: paymentStatus,
minAmount: newMinAmount,
maxAmount: newMaxAmount,
page: pageParam
minAmount: minAmount,
maxAmount: maxAmount,
page: {
...pageParam,
...{ sortType: sortType }
}
};
if (listParams.page) {
listParams.page.sortType = option?.sortType || sortType;
setPageParam(listParams.page);
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
keyinList(listParams).then((rs) => {
setListItems(rs.content);
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
}
@@ -97,21 +129,13 @@ export const KeyInPaymentPage = () => {
const onSendRequest = (selectedEmail?: string) => {
if (selectedEmail) {
let newMinAmount = minAmount;
if (!!minAmount && typeof (minAmount) === 'string') {
newMinAmount = parseInt(minAmount);
}
let newMaxAmount = maxAmount;
if (!!maxAmount && typeof (maxAmount) === 'string') {
newMaxAmount = parseInt(maxAmount);
}
downloadExcel({
mid: mid,
fromDate: startDate,
toDate: endDate,
paymentStatus: paymentStatus,
minAmount: newMinAmount,
maxAmount: newMaxAmount,
minAmount: minAmount,
maxAmount: maxAmount,
//email: selectedEmail
}).then((rs) => {
console.log('Excel Download Status:', rs.status);
@@ -122,9 +146,6 @@ export const KeyInPaymentPage = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort
});
};
const onClickToPaymentStatus = (val: KeyInPaymentPaymentStatus) => {
@@ -139,7 +160,8 @@ export const KeyInPaymentPage = () => {
endDate,
paymentStatus,
minAmount,
maxAmount
maxAmount,
sortType
]);
// if (!hasAccess) {
@@ -209,6 +231,7 @@ export const KeyInPaymentPage = () => {
additionalServiceCategory={AdditionalServiceCategory.KeyInPayment}
mid={mid}
></KeyInPaymentList>
<div ref={ setTarget }></div>
</div>
</div>
</main>

62
src/pages/additional-service/link-payment/link-payment-history-page.tsx
View File

@@ -6,10 +6,10 @@ import { HeaderType } from '@/entities/common/model/types';
import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment/link-payment-tab';
import { LinkPaymentHistoryWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-history-wrap';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { LinkPaymentTabKeys } from '@/entities/additional-service/model/link-pay/types';
import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
@@ -19,36 +19,36 @@ import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access
*/
export const LinkPaymentHistoryPage = () => {
const { navigate } = useNavigate();
const { navigate } = useNavigate();
// 권한 체크
const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
extensionCode: 'LINKPAY'
});
// 권한 체크
const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
extensionCode: 'LINKPAY'
});
const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.ShippingHistory)
const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.ShippingHistory)
useSetHeaderTitle('링크결제')
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
useSetHeaderTitle('링크결제')
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
if (!hasAccess) {
return <AccessDeniedDialog />;
}
if(!hasAccess){
return <AccessDeniedDialog />;
}
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane pt-46 active">
<LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
<LinkPaymentHistoryWrap></LinkPaymentHistoryWrap>
</div>
</div>
</main>
</>
)
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane pt-46 active">
<LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
<LinkPaymentHistoryWrap></LinkPaymentHistoryWrap>
</div>
</div>
</main>
</>
);
}

48
src/pages/additional-service/link-payment/link-payment-wait-send-page.tsx
View File

@@ -6,10 +6,10 @@ import { HeaderType } from '@/entities/common/model/types';
import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment/link-payment-tab';
import { LinkPaymentWaitSendWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-wait-send-wrap';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { LinkPaymentTabKeys } from '@/entities/additional-service/model/link-pay/types';
@@ -17,27 +17,27 @@ import { LinkPaymentTabKeys } from '@/entities/additional-service/model/link-pay
* 발송대기 탭 화면
*/
export const LinkPaymentWaitSendPage = () => {
const { navigate } = useNavigate();
const { navigate } = useNavigate();
const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.PendingSend)
const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.PendingSend)
useSetHeaderTitle('링크결제')
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
useSetHeaderTitle('링크결제')
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane pt-46 active">
<LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
<LinkPaymentWaitSendWrap></LinkPaymentWaitSendWrap>
</div>
</div>
</main>
</>
)
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane pt-46 active">
<LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
<LinkPaymentWaitSendWrap></LinkPaymentWaitSendWrap>
</div>
</div>
</main>
</>
);
}

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

@@ -30,6 +30,7 @@ import { AdditionalServiceCategory } from '@/entities/additional-service/model/t
import { useStore } from '@/shared/model/store';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const PayoutListPage = () => {
// 권한 체크
@@ -39,6 +40,7 @@ export const PayoutListPage = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<PayoutContent>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -54,6 +56,24 @@ export const PayoutListPage = () => {
const { mutateAsync: extensionPayoutList } = useExtensionPayoutListMutation();
const { mutateAsync: extensionPayoutExcel } = useExtensionPayoutExcelMutation();
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 && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
useSetHeaderTitle('지급대행');
useSetHeaderType(HeaderType.LeftArrow);
@@ -66,29 +86,48 @@ export const PayoutListPage = () => {
navigate(PATHS.additionalService.payout.request);
};
const callExtensionPayoutList = (option?: {
sortType?: SortTypeKeys,
status?: PayoutDisbursementStatus
}) => {
let params: ExtensionPayoutListParams = {
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams: ExtensionPayoutListParams = {
mid: mid,
searchDateType: searchDateType,
fromDate: fromDate,
toDate: toDate,
status: option?.status ?? status,
status: status,
minAmount: minAmount,
maxAmount: maxAmount,
page: pageParam
page: {
...pageParam,
...{ sortType: sortType }
}
};
if (params.page) {
params.page.sortType = option?.sortType || sortType;
setPageParam(params.page);
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
extensionPayoutList(params).then((rs: ExtensionPayoutListResponse) => {
setListItems(rs.content);
extensionPayoutList(listParams).then((rs: ExtensionPayoutListResponse) => {
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
};
@@ -115,16 +154,13 @@ export const PayoutListPage = () => {
};
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callExtensionPayoutList({
sortType: sort
});
};
const onClickToDisbursementStatus = (val: PayoutDisbursementStatus) => {
setStatus(val);
};
useEffect(() => {
callExtensionPayoutList();
callList();
}, [
mid,
searchDateType,
@@ -132,7 +168,8 @@ export const PayoutListPage = () => {
toDate,
status,
minAmount,
maxAmount
maxAmount,
sortType
]);
const getListDateGroup = () => {
@@ -253,7 +290,8 @@ export const PayoutListPage = () => {
</div>
</section>
<section className="transaction-list">
{getListDateGroup()}
{ getListDateGroup() }
<div ref={ setTarget }></div>
</section>
<div className="apply-row">
<button