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

3
src/entities/additional-service/model/account-holder-search/types.ts
View File

@@ -22,8 +22,9 @@ export interface AccountHolderSearchListItem {
}
export interface AccountHolderSearchListProps {
listItems: Record<string, Array<ListItemProps>>;
listItems: Array<AccountHolderSearchListItem>;
mid: string;
setTarget: (element: HTMLElement | null) => void;
}
export interface AccountHolderSearchFilterProps extends FilterProps {

14
src/entities/additional-service/model/ars/constant.ts
View File

@@ -15,4 +15,16 @@ export const ArsOrderStatusBtnGroup = [
export const ArsPaymentMethodBtnGroup = [
{name: 'SMS', value: ArsPaymentMethod.SMS },
{name: 'ARS', value: ArsPaymentMethod.ARS },
];
];
export const getArsPaymentStatusName = (status?: string): string => {
if (!status) return '';
const found = ArsPaymentStatusBtnGroup.find(item => item.value === status);
return found ? found.name : status;
}
export const getArsOrderStatusName = (status?: string): string => {
if (!status) return '';
const found = ArsOrderStatusBtnGroup.find(item => item.value === status);
return found ? found.name : status;
}

12
src/entities/additional-service/model/ars/types.ts
View File

@@ -4,12 +4,12 @@ import {
} from '@/entities/common/model/types';
export enum PaymentStatus {
ALL = 'ALL',
ALL = '',
COMPLETE = 'COMPLETE',
UNPAID = 'UNPAID'
};
export enum OrderStatus {
ALL = 'ALL',
ALL = '',
PENDING = 'PENDING',
SUCCESS = 'SUCCESS',
EXPIRED = 'EXPIRED',
@@ -39,8 +39,8 @@ export interface ArsListContent {
tid?: string;
paymentDate?: string;
paymentStatus?: PaymentStatus | string;
orderStatus?: string;
arsPaymentMethod?: ArsPaymentMethod;
orderStatus?: OrderStatus;
arsPaymentMethod?: string;
amount?: number;
};
export interface ExtensionArsListResponse extends DefaulResponsePagination {
@@ -64,7 +64,7 @@ export interface ExtensionArsDetailParams {
export interface ExtensionArsDetailResponse {
corpName: string;
mid: string;
arsPaymentMethod: ArsPaymentMethod;
arsPaymentMethod: string;
paymentStatus: PaymentStatus;
orderStatus: string;
paymentDate: string;
@@ -85,6 +85,6 @@ export interface ExtensionArsApplyParams {
buyerName: string;
phoneNumber: string;
email: string;
arsPaymentMethod: ArsPaymentMethod;
arsPaymentMethod: string;
};
export interface ExtensionArsApplyResponse {};

10
src/entities/additional-service/model/key-in/constant.ts
View File

@@ -1,9 +1,15 @@
import { KeyInPaymentPaymentStatus } from "./types";
// contant로 옮기기
export const requestStatusBtnGroup = [
export const keyInPaymentPaymentStatusBtnGroup = [
{ name: '전체', value: KeyInPaymentPaymentStatus.ALL },
{ name: '승인', value: KeyInPaymentPaymentStatus.APPROVAL },
{ name: '전취소', value: KeyInPaymentPaymentStatus.PRE_CANCEL },
{ name: '후취소', value: KeyInPaymentPaymentStatus.POST_CANCEL }
];
];
export const getKeyInPaymentPaymentStatusName = (status?: string): string => {
if (!status) return '';
const found = keyInPaymentPaymentStatusBtnGroup.find(item => item.value === status);
return found ? found.name : status;
}

13
src/entities/additional-service/model/sms-payment/constant.ts
View File

@@ -0,0 +1,13 @@
import { SmsCl } from './types';
export const SmsClBtnGroup = [
{ name: '', value: SmsCl.ALL },
{ name: '가상계좌 요청', value: SmsCl.VACCOUNT_REQ },
{ name: '가상계좌 요청 + 입금', value: SmsCl.VACCOUNT_REQ_DEPOSIT }
];
export const getSmsClName = (smsCl?: string): string => {
if (!smsCl) return '';
const found = SmsClBtnGroup.find(item => item.value === smsCl);
return found ? found.name : smsCl;
};

88
src/entities/additional-service/model/sms-payment/types.ts
View File

@@ -1,73 +1,75 @@
import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
import { ExtensionRequestParams, FilterProps, ListItemProps } from '../types';
import { AdditionalServiceCategory, ExtensionRequestParams, FilterProps, ListItemProps } from '../types';
export enum SmsType {
ALL = "ALL",
VACCOUNT_REQ = "VACCOUNT_REQ",
VACCOUNT_REQ_DEPOSIT = "VACCOUNT_REQ_DEPOSIT"
export enum SmsCl {
ALL = "",
VACCOUNT_REQ = "VACCOUNT_REQ",
VACCOUNT_REQ_DEPOSIT = "VACCOUNT_REQ_DEPOSIT"
}
export enum SmsPaymentSearchType {
BUYER_NAME = "BUYER_NAME",
RECEIVE_PHONE_NUMBER = "RECEIVE_PHONE_NUMBER"
export enum SmsPaymentSearchCl {
BUYER_NAME = "BUYER_NAME",
RECEIVE_PHONE_NUMBER = "RECEIVE_PHONE_NUMBER"
}
export interface SmsPaymentListItem {
mid?: string;
tid?: string;
paymentDate?: string;
paymentStatus?: string;
smsCl?: string;
mid?: string;
tid?: string;
paymentDate?: string;
paymentStatus?: string;
smsCl?: string;
}
export interface SmsPaymentListProps {
listItems: Record<string, Array<ListItemProps>>;
mid: string;
onResendClick?: (mid: string, tid: string) => void;
listItems: Array<ListItemProps>;
additionalServiceCategory: AdditionalServiceCategory;
mid: string;
onResendClick?: (mid: string, tid: string) => void;
setTarget: (element: HTMLElement | null) => void;
}
export interface SmsPaymentFilterProps extends FilterProps {
mid: string;
searchCl: SmsPaymentSearchType;
searchValue: string;
fromDate: string;
toDate: string;
smsCl: SmsType;
setMid: (mid: string) => void;
setSearchCl: (searchCl: SmsPaymentSearchType) => void;
setSearchValue: (searchValue: string) => void;
setFromDate: (fromDate: string) => void;
setToDate: (toDate: string) => void;
setSmsCl: (smsCl: SmsType) => void;
mid: string;
searchCl: SmsPaymentSearchCl;
searchValue: string;
fromDate: string;
toDate: string;
smsCl: SmsCl;
setMid: (mid: string) => void;
setSearchCl: (searchCl: SmsPaymentSearchCl) => void;
setSearchValue: (searchValue: string) => void;
setFromDate: (fromDate: string) => void;
setToDate: (toDate: string) => void;
setSmsCl: (smsCl: SmsCl) => void;
}
export interface ExtensionSmsPaymentListParams extends ExtensionRequestParams {
searchCl: SmsPaymentSearchType;
searchValue: string;
fromDate: string;
toDate: string;
smsCl: string;
page?: DefaultRequestPagination;
searchCl: SmsPaymentSearchCl;
searchValue: string;
fromDate: string;
toDate: string;
smsCl: SmsCl;
page?: DefaultRequestPagination;
}
export interface ExtensionSmsPaymentListResponse extends DefaulResponsePagination {
content: Array<ListItemProps>
content: Array<ListItemProps>
}
export interface ExtensionSmsDownloadExcelResponse {
status: boolean;
status: boolean;
}
export interface ExtensionSmsDetailResponse {
senderNumber: string;
senderName: string;
receiverNumber: string;
receiverName: string;
sendMessage: string;
senderNumber: string;
senderName: string;
receiverNumber: string;
receiverName: string;
sendMessage: string;
}
export interface ExtensionSmsResendParams extends ExtensionRequestParams {
tid: string;
tid: string;
}
@@ -86,7 +88,7 @@ export interface ExtensionSmsResendParams extends ExtensionRequestParams {
}
export interface ExtensionSmsResendResponse {
status: boolean;
status: boolean;
}
export interface ExtensionSmsListParams extends ExtensionRequestParams {

58
src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx
View File

@@ -2,24 +2,53 @@ import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { ListDateGroup } from '../list-date-group';
import { AdditionalServiceCategory } from '../../model/types'
import { AccountHolderSearchListProps } from '../../model/account-holder-search/types';
import { AccountHolderSearchListItem, AccountHolderSearchListProps } from '../../model/account-holder-search/types';
import { JSX } from 'react';
export const AccountHolderSearchList = ({
listItems,
mid
mid,
setTarget
}: AccountHolderSearchListProps) => {
const { navigate } = useNavigate();
const getListDateGroup = () => {
let rs = [];
for (const [key, value] of Object.entries(listItems)) {
let rs: JSX.Element[] = [];
let date = '';
let list: AccountHolderSearchListItem[] = [];
for (let i = 0; i < listItems.length; i++) {
// requestDate format: "20211018140420" (YYYYMMDDHHmmss)
let requestDate = listItems[i]?.requestDate || '';
let itemDate = requestDate.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
// 날짜가 바뀌면 이전 리스트를 푸시 (날짜 업데이트 전에!)
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
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.AccountHolderSearch}
key={key}
date={key}
items={value}
mid={mid}
key={date + '-last'}
date={date}
items={list as any}
></ListDateGroup>
);
}
@@ -32,14 +61,15 @@ export const AccountHolderSearchList = ({
return (
<>
<div className="transaction-list">
<section className="transaction-list">
{getListDateGroup()}
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToNavigate()}
>조회 신청</button>
</div>
<div ref={setTarget}></div>
</section>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToNavigate()}
>조회 신청</button>
</div>
</>
);

4
src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
View File

@@ -158,7 +158,6 @@ export const FundAccountResultListWrap = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
setListItems([]); // 리스트 초기화
callList({
sortType: sort,
resetPage: true
@@ -166,7 +165,6 @@ export const FundAccountResultListWrap = () => {
};
const onClickToStatus = (val: FundAccountResultStatus) => {
setResultStatus(val);
setListItems([]); // 리스트 초기화
callList({
resultStatus: val,
resetPage: true
@@ -222,8 +220,6 @@ export const FundAccountResultListWrap = () => {
useEffect(() => {
// 필터 조건이 변경되면 첫 페이지부터 다시 시작
setListItems([]);
setNextCursor(null);
callList({ resetPage: true });
}, [
mid,

11
src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
View File

@@ -99,7 +99,6 @@ export const FundAccountTransferListWrap = () => {
};
extensionFundAccountTransferList(listSummaryParams).then((rs: any) => {
// resetPage면 기존 리스트 무시, 아니면 추가
setListItems(option?.resetPage ? rs.content : [
...listItems,
...rs.content
@@ -152,12 +151,14 @@ export const FundAccountTransferListWrap = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
setListItems([]); // 리스트 초기화
callList({ sortType: sort, resetPage: true });
callList({
sortType: sort,
resetPage: true
});
};
const onClickToStatus = (val: FundAccountStatus) => {
setStatus(val);
setListItems([]); // 리스트 초기화
callList({
status: val,
resetPage: true
@@ -208,8 +209,6 @@ export const FundAccountTransferListWrap = () => {
useEffect(() => {
// 필터 조건이 변경되면 첫 페이지부터 다시 시작
setListItems([]);
setNextCursor(null);
callList({ resetPage: true });
}, [
mid,

18
src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx
View File

@@ -1,16 +1,15 @@
import moment from 'moment';
import { useEffect } from 'react';
import { useState } from 'react';
import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
import { useStore } from '@/shared/model/store';
import { KeyInPaymentFilterProps, KeyInPaymentPaymentStatus } from '@/entities/additional-service/model/key-in/types';
import { keyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
export const KeyInPaymentFilter = ({
filterOn,
@@ -42,10 +41,6 @@ export const KeyInPaymentFilter = ({
setFilterOn(false);
};
const setNewDate = (newDate: any) => {
console.log(newDate)
};
const onClickToSetFilter = () => {
setMid(filterMid);
setStartDate(filterStartDate);
@@ -55,13 +50,6 @@ export const KeyInPaymentFilter = ({
setMaxAmount(filterMaxAmount);
onClickToClose();
};
let transactionStatusOption = [
{ name: '전체', value: KeyInPaymentPaymentStatus.ALL },
{ name: '승인', value: KeyInPaymentPaymentStatus.APPROVAL },
{ name: '전취소', value: KeyInPaymentPaymentStatus.PRE_CANCEL },
{ name: '후취소', value: KeyInPaymentPaymentStatus.POST_CANCEL },
];
return (
<>
@@ -94,7 +82,7 @@ export const KeyInPaymentFilter = ({
<FilterSelect
title='가맹점'
selectValue={filterMid}
selectSetter={setMid}
selectSetter={setFilterMid}
selectOptions={midOptions}
></FilterSelect>
<FilterCalendar
@@ -108,7 +96,7 @@ export const KeyInPaymentFilter = ({
<FilterButtonGroups
title='거래상태'
activeValue={filterTransactionStatus}
btnGroups={transactionStatusOption}
btnGroups={keyInPaymentPaymentStatusBtnGroup}
setter={setFilterTransactionStatus}
></FilterButtonGroups>

21
src/entities/additional-service/ui/list-item.tsx
View File

@@ -6,6 +6,9 @@ import { getPaymentStatusText, getProcessStatusText, getSendMethodText } from '.
import { getFundAccountResultStatusName, getFundAccountStatusName } from '../model/fund-account/constant';
import moment from 'moment';
import { FundAccountResultStatus } from '../model/fund-account/types';
import { getSmsClName } from '../model/sms-payment/constant';
import { getKeyInPaymentPaymentStatusName } from '../model/key-in/constant';
import { getArsPaymentStatusName, getArsOrderStatusName } from '../model/ars/constant';
export const ListItem = ({
additionalServiceCategory,
@@ -291,6 +294,16 @@ export const ListItem = ({
else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
statusText = status || '';
}
else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
console.log(smsCl)
statusText = getSmsClName(smsCl);
}
else if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
statusText = getKeyInPaymentPaymentStatusName(paymentStatus)
}
else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
statusText = getArsPaymentStatusName(paymentStatus)
}
else {
statusText = resultStatus || status || '';
}
@@ -348,7 +361,7 @@ export const ListItem = ({
<div key='key-in-list' className="transaction-details">
<span>{getTime()}</span>
<span className="separator">|</span>
<span>{paymentStatus}</span>
<span>{getStatus()}</span>
</div>
);
}
@@ -451,9 +464,9 @@ export const ListItem = ({
<div className="transaction-details">
<span>{getTime()}</span>
<span className="separator">|</span>
<span>{paymentStatus}</span>
<span>{getStatus()}</span>
<span className="separator">|</span>
<span>{orderStatus}</span>
<span>{getArsOrderStatusName(orderStatus)}</span>
<span className="separator">|</span>
<span>{arsPaymentMethod}</span>
</div>
@@ -475,7 +488,7 @@ export const ListItem = ({
<div key="sms-payment" className="transaction-details">
<span>{mid}</span>
<span className="separator">|</span>
<span>{smsCl}</span>
<span>{getStatus()}</span>
</div>
)
}

16
src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx
View File

@@ -7,7 +7,7 @@ import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { FilterDateOptions } from '@/entities/common/model/types';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { SmsPaymentFilterProps, SmsPaymentSearchType, SmsType } from '../../model/sms-payment/types';
import { SmsPaymentFilterProps, SmsPaymentSearchCl, SmsCl } from '../../model/sms-payment/types';
import { useStore } from '@/shared/model/store';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
export const SmsPaymentFilter = ({
@@ -28,11 +28,11 @@ export const SmsPaymentFilter = ({
}: SmsPaymentFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchCl, setFilterSearchCl] = useState<SmsPaymentSearchType>(searchCl);
const [filterSearchCl, setFilterSearchCl] = useState<SmsPaymentSearchCl>(searchCl);
const [filterSearchValue, setFilterSearchValue] = useState<string>(searchValue);
const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYY.MM.DD'));
const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYY.MM.DD'));
const [filterSmsCl, setFilterSmsCl] = useState<SmsType>(smsCl);
const [filterSmsCl, setFilterSmsCl] = useState<SmsCl>(smsCl);
const midOptions = useStore.getState().UserStore.selectOptionsMids;
@@ -52,14 +52,14 @@ export const SmsPaymentFilter = ({
];
let searchTypeOption = [
{ name: '주문자', value: SmsPaymentSearchType.BUYER_NAME },
{ name: '수신번호', value: SmsPaymentSearchType.RECEIVE_PHONE_NUMBER },
{ name: '주문자', value: SmsPaymentSearchCl.BUYER_NAME },
{ name: '수신번호', value: SmsPaymentSearchCl.RECEIVE_PHONE_NUMBER },
]
let smsTypeOption = [
{ name: '전체', value: SmsType.ALL },
{ name: '가상계좌\n요청', value: SmsType.VACCOUNT_REQ },
{ name: '가상계좌\n요청+입금', value: SmsType.VACCOUNT_REQ_DEPOSIT },
{ name: '전체', value: SmsCl.ALL },
{ name: '가상계좌\n요청', value: SmsCl.VACCOUNT_REQ },
{ name: '가상계좌\n요청+입금', value: SmsCl.VACCOUNT_REQ_DEPOSIT },
]
const onClickToClose = () => {

51
src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx
View File

@@ -1,35 +1,64 @@
import { SmsPaymentListProps } from '../../model/sms-payment/types';
import { SmsPaymentListItem, SmsPaymentListProps } from '../../model/sms-payment/types';
import { AdditionalServiceCategory } from '../../model/types';
import { ListDateGroup } from '../list-date-group';
export const SmsPaymentList = ({
listItems,
additionalServiceCategory,
mid,
onResendClick
onResendClick,
setTarget
}: SmsPaymentListProps) => {
const getListDateGroup = () => {
let rs = [];
for (const [key, value] of Object.entries(listItems)) {
let date = '';
let list: SmsPaymentListItem[] = [];
for (let i = 0; i < listItems.length; i++) {
let paymentDate = listItems[i]?.paymentDate || '';
let itemDate = paymentDate.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
date = itemDate;
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
onResendClick={onResendClick}
mid={mid}
key={date + '-' + i}
date={date}
items={list as any}
></ListDateGroup>
);
}
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.SMSPayment}
key={key}
date={key}
items={value}
mid={mid}
additionalServiceCategory={additionalServiceCategory}
onResendClick={onResendClick}
mid={mid}
key={date + '-last'}
date={date}
items={list as any}
></ListDateGroup>
)
);
}
return rs;
};
return (
<>
<div className="transaction-list">
<section className="transaction-list">
{getListDateGroup()}
</div>
<div ref={setTarget}></div>
</section>
</>
)
}

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>