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

- SMS,KeyIn,ARS 페이지 스크롤 적용

Browse Source 
- ARS 결제신청 :성공 결과 팝업 추가
This commit is contained in:
HyeonJongKim
2025-10-20 16:03:13 +09:00
parent 5d2af3fb06
commit 948657db3f
20 changed files with 570 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,9 +3,9 @@ import { PATHS } from '@/shared/constants/paths';
import { useEffect, useState } from 'react';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { HeaderType } from '@/entities/common/model/types';
import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types';
import { AccountHolderSearchFilter } from '@/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter';
import { ProcessResult} from '@/entities/additional-service/model/types';
import { ProcessResult } from '@/entities/additional-service/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
@@ -21,20 +21,43 @@ 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';
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({});
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
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_NO)
const [searchType, setSearchType] = useState<AccountHolderSearchType>(AccountHolderSearchType.ACCOUNT_NAME)
const [searchKeyword, setSearchKeyword] = useState<string>('');
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
const [bank, setBank] = useState<string>('');
const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL);
@@ -50,10 +73,17 @@ export const AccountHolderSearchPage = () => {
const callList = (option?: {
sortType?: SortTypeKeys,
val?: string
processResult?: ProcessResult,
resetPage?: boolean
}) => {
pageParam.sortType = (option?.sortType) ? option.sortType : sortType;
setPageParam(pageParam);
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,
@@ -61,34 +91,31 @@ export const AccountHolderSearchPage = () => {
fromDate: startDate,
toDate: endDate,
bankCode: bank,
resultStatus: processResult,
page: pageParam
resultStatus: option?.processResult ?? processResult,
... {
page: currentPageParam
}
}
accountHolderSearchList(listParams).then((rs) => {
setListItems(assembleData(rs.content));
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 assembleData = (content: Array<AccountHolderSearchListItem>) => {
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]);
}
}
}
console.log('Data : ', data);
return data;
};
const onClickToOpenFilter = () => {
setFilterOn(!filterOn);
};
@@ -110,20 +137,31 @@ export const AccountHolderSearchPage = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort
sortType: sort,
resetPage: true
});
};
const onClickToTransactionStatus = (val: ProcessResult) => {
setProcessResult(val);
callList({
val: val
processResult: val,
resetPage: true
});
};
useEffect(() => {
callList();
}, []);
// 필터 조건이 변경되면 첫 페이지부터 다시 시작
callList({ resetPage: true });
}, [
mid,
searchType,
searchKeyword,
startDate,
endDate,
bank,
processResult
]);
return (
<>
@@ -164,8 +202,8 @@ export const AccountHolderSearchPage = () => {
<div className="filter-section">
<SortTypeBox
sortType={ sortType }
onClickToSort={ onClickToSort }
sortType={sortType}
onClickToSort={onClickToSort}
></SortTypeBox>
<div className="excrow">
<div className="full-menu-keywords no-padding">
@@ -184,6 +222,7 @@ export const AccountHolderSearchPage = () => {
<AccountHolderSearchList
listItems={listItems}
mid={mid}
setTarget={setTarget}
></AccountHolderSearchList>
</div>
</div>

28
src/pages/additional-service/ars/detail-page.tsx
View File

@@ -15,11 +15,14 @@ import {
ExtensionArsDetailParams,
ExtensionArsDetailResponse,
ExtensionArsResendParams,
ExtensionArsResendResponse
ExtensionArsResendResponse,
ArsPaymentMethod,
OrderStatus
} from '@/entities/additional-service/model/ars/types';
import moment from 'moment';
import { ArsResendSmsBottomSheet } from '@/entities/additional-service/ui/ars/resend-sms-bottom-sheet';
import { useExtensionArsResendMutation } from '@/entities/additional-service/api/ars/use-extension-ars-resend-mutation';
import { getArsOrderStatusName, getArsPaymentStatusName } from '@/entities/additional-service/model/ars/constant';
export const ArsDetailPage = () => {
const { navigate } = useNavigate();
@@ -107,15 +110,17 @@ export const ArsDetailPage = () => {
</li>
<li className="kv-row">
<span className="k">결제상태</span>
<span className="v">{ detail?.paymentStatus }</span>
<span className="v">{ getArsPaymentStatusName(detail?.paymentStatus) }</span>
</li>
<li className="kv-row">
<span className="k">주문상태</span>
<span className="v">{ detail?.orderStatus }</span>
<span className="v">{ getArsOrderStatusName(detail?.orderStatus) }</span>
</li>
<li className="kv-row">
<span className="k">주문일시</span>
<span className="v">{ getDate(detail?.paymentDate) }</span>
<span className="v">{
detail?.paymentDate ? moment(detail.paymentDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '-'
}</span>
</li>
<li className="kv-row">
<span className="k">상품명</span>
@@ -143,12 +148,15 @@ export const ArsDetailPage = () => {
</li>
</ul>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToOpenResendBottomSheet() }
>SMS 재전송</button>
</div>
{detail?.arsPaymentMethod === ArsPaymentMethod.SMS && (
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToOpenResendBottomSheet() }
disabled={ detail?.orderStatus !== OrderStatus.PENDING }
>SMS 재전송</button>
</div>
)}
</div>
</div>
</main>

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

@@ -1,14 +1,14 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { HeaderType, SortTypeKeys } from '@/entities/common/model/types';
import {
import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { useEffect, useState } from 'react';
import { JSX, useEffect, useState } from 'react';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { ArsListContent, 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';
@@ -20,15 +20,38 @@ 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<Record<string, Array<ArsListContent>>>({});
const [listItems, setListItems] = useState<Array<ArsListContent>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
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>('');
const [fromDate, setFromDate] = useState<string>(moment().format('YYYYMMDD'));
@@ -49,25 +72,46 @@ export const ArsListPage = () => {
});
const callList = (option?: {
sortType?: SortTypeKeys,
val?: string
sortType?: SortTypeKeys,
paymentStatus?: PaymentStatus,
resetPage?: boolean
}) => {
pageParam.sortType = (option?.sortType)? option.sortType: sortType;
setPageParam(pageParam);
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,
fromDate: fromDate,
toDate: toDate,
paymentStatus: paymentStatus,
paymentStatus: option?.paymentStatus ?? paymentStatus,
orderStatus: orderStatus,
minAmount: minAmount,
maxAmount: maxAmount,
page: pageParam
page: currentPageParam
};
extensionArsList(params).then((rs: ExtensionArsListResponse) => {
setListItems(assembleData(rs.content));
// 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);
}
});
};
@@ -87,23 +131,6 @@ export const ArsListPage = () => {
});
};
const assembleData = (content: Array<ArsListContent>) => {
let data: any = {};
if(content && content.length > 0){
for(let i=0;i<content?.length;i++){
let date = content[i]?.paymentDate?.substring(0, 8);
let groupDate = moment(date).format('YYYYMMDD');
if(!!groupDate && !data.hasOwnProperty(groupDate)){
data[groupDate] = [];
}
if(!!groupDate && data.hasOwnProperty(groupDate)){
data[groupDate].push(content[i]);
}
}
}
return data;
};
const onClickToNavigate = () => {
navigate(PATHS.additionalService.ars.request, {
state: { mid }
@@ -119,34 +146,71 @@ export const ArsListPage = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort
sortType: sort,
resetPage: true
});
};
const onClickToPaymentStatus = (val: PaymentStatus) => {
setPaymentStatus(val);
callList({
val: val
paymentStatus: val,
resetPage: true
});
};
useEffect(() => {
callList();
}, []);
// 필터 조건이 변경되면 첫 페이지부터 다시 시작
callList({ resetPage: true });
}, [
mid,
moid,
fromDate,
toDate,
paymentStatus,
orderStatus,
minAmount,
maxAmount
]);
const getArsList = () => {
let rs = [];
if(Object.keys(listItems).length > 0){
for (const [key, value] of Object.entries(listItems)) {
rs.push(
<ListDateGroup
additionalServiceCategory={ AdditionalServiceCategory.Ars }
mid={ mid }
key={ key }
date={ key }
items={ value }
></ListDateGroup>
);
const getListDateGroup = () => {
let rs: JSX.Element[] = [];
let date = '';
let list: ArsListContent[] = [];
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>
);
}
date = itemDate; // 그 다음에 날짜 업데이트
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.Ars}
mid={mid}
key={date + '-last'}
date={date}
items={list as any}
></ListDateGroup>
);
}
return rs;
}
@@ -210,14 +274,15 @@ export const ArsListPage = () => {
</section>
<section className="transaction-list">
{ getArsList() }
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigate() }
>결제 신청</button>
</div>
{ getListDateGroup() }
<div ref={setTarget}></div>
</section>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigate() }
>결제 신청</button>
</div>
</div>
</div>
</main>

12
src/pages/additional-service/ars/request-page.tsx
View File

@@ -12,6 +12,7 @@ import {
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { ArsPaymentMethod, ExtensionArsApplyParams } from '@/entities/additional-service/model/ars/types';
import { ArsRequestSuccessPage } from './request-success-page';
export const ArsRequestPage = () => {
const { navigate } = useNavigate();
@@ -30,6 +31,8 @@ export const ArsRequestPage = () => {
const [phoneNumber, setPhoneNumber] = useState<string>('');
const [email, setEamil] = useState<string>('');
const [arsPaymentMethod, setArsPaymentMethod] = useState<ArsPaymentMethod>(ArsPaymentMethod.SMS);
const [successPageOn, setSuccessPageOn] = useState<boolean>(false);
const [resultMessage, setResultMessage] = useState<string>('');
useSetHeaderTitle('결제 신청');
useSetHeaderType(HeaderType.LeftArrow);
@@ -51,8 +54,9 @@ export const ArsRequestPage = () => {
arsPaymentMethod: arsPaymentMethod,
};
arsApply(arsApplyParams).then((rs) => {
navigate(PATHS.additionalService.ars.requestSuccess);
console.log(rs)
setResultMessage('결제 신청이 완료되었습니다');
setSuccessPageOn(true);
}).catch(() => {
}).finally(() => {
@@ -227,6 +231,12 @@ export const ArsRequestPage = () => {
</div>
</div>
</main>
<ArsRequestSuccessPage
pageOn={successPageOn}
setPageOn={setSuccessPageOn}
resultMessage={resultMessage}
/>
</>
);
};

83
src/pages/additional-service/ars/request-success-page.tsx
View File

@@ -1,43 +1,66 @@
import { PATHS } from '@/shared/constants/paths';
import { motion } from 'framer-motion';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderType,
useSetFooterMode,
} from '@/widgets/sub-layout/use-sub-layout';
export const ArsRequestSuccessPage = () => {
import { PATHS } from '@/shared/constants/paths';
import {
FilterMotionDuration,
FilterMotionStyle,
FilterMotionVariants
} from '@/entities/common/model/constant';
export interface ArsRequestSuccessPageProps {
pageOn: boolean;
setPageOn: (pageOn: boolean) => void;
resultMessage?: string;
}
export const ArsRequestSuccessPage = ({
pageOn,
setPageOn,
resultMessage
}: ArsRequestSuccessPageProps) => {
const { navigate } = useNavigate();
useSetHeaderType(HeaderType.NoHeader);
useSetFooterMode(false);
const onClickToNavigate = () => {
const onClickToClose = () => {
setPageOn(false);
navigate(PATHS.additionalService.ars.list);
};
return (
<>
<div className="success-page" >
<div className="success-body">
<div
className="success-icon"
aria-hidden="true"
></div>
<h1 className="success-title">
<span>신용카드 ARS</span><br/>
<span>결제 신청이 완료되었습니다.</span>
</h1>
<div className="success-result">
<p className="result-text">결과 : [0000] ARS 요청 처리 완료</p>
<motion.div
className="full-menu-modal"
initial="hidden"
animate={(pageOn) ? 'visible' : 'hidden'}
variants={FilterMotionVariants}
transition={FilterMotionDuration}
style={{ ...FilterMotionStyle, overflow: 'hidden' }}
>
<div className="full-menu-container" style={{ paddingTop: '0px' }}>
<div className="success-page">
<div className="success-body">
<div
className="success-icon"
aria-hidden="true"
></div>
<h1 className="success-title">
<span>ARS 결제 신청</span>
</h1>
<div className="success-result">
<p className="result-text align-left position_label">
<span>결과 :</span>
<span>{resultMessage || '결제 신청이 완료되었습니다'}</span>
</p>
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={onClickToClose}
>확인</button>
</div>
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigate() }
>확인</button>
</div>
</div>
</motion.div>
</>
);
};

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

@@ -20,7 +20,7 @@ import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { KeyInPaymentList } from '@/entities/additional-service/ui/key-in-payment/key-in-payment-list';
import { useStore } from '@/shared/model/store';
import { KeyInPaymentListItem, KeyInPaymentPaymentStatus } from '@/entities/additional-service/model/key-in/types';
import { requestStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
import { keyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const KeyInPaymentPage = () => {
@@ -148,7 +148,6 @@ export const KeyInPaymentPage = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
setListItems([]);
callList({
sortType: sort,
resetPage: true
@@ -157,7 +156,6 @@ export const KeyInPaymentPage = () => {
const onClickToPaymentStatus = (val: KeyInPaymentPaymentStatus) => {
setPaymentStatus(val);
setListItems([]);
callList({
status: val,
resetPage: true
@@ -165,8 +163,15 @@ export const KeyInPaymentPage = () => {
};
useEffect(() => {
callList();
}, []);
callList({resetPage: true});
}, [
mid,
startDate,
endDate,
paymentStatus,
minAmount,
maxAmount
]);
return (
<>
@@ -214,7 +219,7 @@ export const KeyInPaymentPage = () => {
<div className="excrow">
<div className="full-menu-keywords no-padding">
{
requestStatusBtnGroup.map((value, index) => (
keyInPaymentPaymentStatusBtnGroup.map((value, index) => (
<span
key={`key-service-code=${index}`}
className={`keyword-tag ${(paymentStatus === value.value) ? 'active' : ''}`}

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

@@ -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>