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

- 링크결제 API 수정

Browse Source 
- 지급대행 수정
This commit is contained in:
HyeonJongKim
2025-10-21 14:24:51 +09:00
parent c3fbb91888
commit ab5bea6aeb
30 changed files with 784 additions and 590 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/entities/additional-service/ui/filter/payout-filter.tsx
View File

@@ -7,7 +7,7 @@ import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
import {
PayoutDisbursementStatus,
PayoutSearchCl
PayoutSearchDateType
} from '../../model/payout/types';
import {
PayoutSearchClBtnGroup,
@@ -25,47 +25,47 @@ export interface PayoutFilterProps {
filterOn: boolean;
setFilterOn: (filterOn: boolean) => void;
mid: string;
searchCl: PayoutSearchCl;
searchDateType: PayoutSearchDateType;
fromDate: string;
toDate: string;
disbursementStatus: PayoutDisbursementStatus;
minAmount?: number;
maxAmount?: number;
status: PayoutDisbursementStatus;
minAmount: number;
maxAmount: number;
setMid: (mid: string) => void;
setSearchCl: (searchCl: PayoutSearchCl) => void;
setSearchDateType: (searchDateType: PayoutSearchDateType) => void;
setFromDate: (fromDate: string) => void;
setToDate: (toDate: string) => void;
setDisbursementStatus: (disbursementStatus: PayoutDisbursementStatus) => void;
setMinAmount: (minAmount?: number) => void;
setMaxAmount: (maxAmount?: number) => void;
setStatus: (status: PayoutDisbursementStatus) => void;
setMinAmount: (minAmount: number) => void;
setMaxAmount: (maxAmount: number) => void;
};
export const PayoutFilter = ({
filterOn,
setFilterOn,
mid,
searchCl,
searchDateType,
fromDate,
toDate,
disbursementStatus,
status,
minAmount,
maxAmount,
setMid,
setSearchCl,
setSearchDateType,
setFromDate,
setToDate,
setDisbursementStatus,
setStatus,
setMinAmount,
setMaxAmount
}: PayoutFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchCl, setFilterSearchCl] = useState<PayoutSearchCl>(searchCl);
const [filterSearchDateType, setFilterSearchDateType] = useState<PayoutSearchDateType>(searchDateType);
const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYY.MM.DD'));
const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYY.MM.DD'));
const [filterDisbursementStatus, setFilterDisbursementStatus] = useState<PayoutDisbursementStatus>(disbursementStatus);
const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
const [filterStatus, setFilterStatus] = useState<PayoutDisbursementStatus>(status);
const [filterMinAmount, setFilterMinAmount] = useState<number>(minAmount);
const [filterMaxAmount, setFilterMaxAmount] = useState<number>(maxAmount);
const midOptions = useStore.getState().UserStore.selectOptionsMids;
@@ -75,18 +75,18 @@ export const PayoutFilter = ({
const onClickToSetFilter = () => {
setMid(filterMid);
setSearchCl(filterSearchCl);
setSearchDateType(filterSearchDateType);
setFromDate(filterFromDate);
setToDate(filterToDate);
setDisbursementStatus(filterDisbursementStatus);
setStatus(filterStatus);
setMinAmount(filterMinAmount);
setMaxAmount(filterMaxAmount);
onClickToClose();
};
useEffect(() => {
setFilterDisbursementStatus(disbursementStatus);
}, [disbursementStatus]);
setFilterStatus(status);
}, [status]);
return (
<>
@@ -123,9 +123,9 @@ export const PayoutFilter = ({
></FilterSelect>
<FilterButtonGroups
title='조회기준'
activeValue={ filterSearchCl }
activeValue={ filterSearchDateType }
btnGroups={ PayoutSearchClBtnGroup }
setter={ setFilterSearchCl }
setter={ setFilterSearchDateType }
></FilterButtonGroups>
<FilterCalendar
title='조회기간'
@@ -136,9 +136,9 @@ export const PayoutFilter = ({
></FilterCalendar>
<FilterButtonGroups
title='지급상태'
activeValue={ filterDisbursementStatus }
activeValue={ filterStatus }
btnGroups={ PayoutDisbursementStatusBtnGroup }
setter={ setFilterDisbursementStatus }
setter={ setFilterStatus }
></FilterButtonGroups>
<FilterRangeAmount
title='거래금액'

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

@@ -115,7 +115,6 @@ export const FundAccountTransferListWrap = () => {
setNextCursor(null);
}
});
callBalance();
};
@@ -177,18 +176,19 @@ export const FundAccountTransferListWrap = () => {
date = itemDate;
}
if (date !== itemDate) {
date = itemDate;
// 날짜가 바뀌면 이전 리스트를 푸시 (날짜 업데이트 전에!)
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
mid={mid}
key={date + '-' + i}
date={date}
date={date} // 이전 날짜 사용
items={list as any}
></ListDateGroup>
);
}
date = itemDate; // 그 다음에 날짜 업데이트
list = [];
}
list.push(listItems[i] as any);

8
src/entities/additional-service/ui/info-wrap/payment-info-wrap.tsx
View File

@@ -1,7 +1,7 @@
import moment from 'moment';
import { AdditionalServiceCategory, DetailInfoSectionProps } from '../../model/types';
import { getPaymentStatusText, getSendMethodText } from '../../lib/payment-status-utils';
import { getPaymentStatusText, getProcessStatusText, getSendMethodText } from '../../lib/payment-status-utils';
export const PaymentInfoWrap = ({
additionalServiceCategory,
@@ -28,7 +28,7 @@ export const PaymentInfoWrap = ({
<li className="kv-row">
<span className="k">발송일자</span>
<span className="v">
{paymentInfo?.sendDate && moment(paymentInfo.sendDate).format('YYYY.MM.DD')}
{paymentInfo?.sendDate && moment(paymentInfo?.sendDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD')}
</span>
</li>
<li className="kv-row">
@@ -56,7 +56,7 @@ export const PaymentInfoWrap = ({
<>
<li className="kv-row">
<span className="k">진행상태</span>
<span className="v">{paymentInfo?.processStatus}</span>
<span className="v">{getProcessStatusText(paymentInfo?.processStatus)}</span>
</li>
<li className="kv-row">
<span className="k">요청일자</span>
@@ -65,7 +65,7 @@ export const PaymentInfoWrap = ({
<li className="kv-row">
<span className="k">결제유효일자</span>
<span className="v">
{paymentInfo?.paymentLimitDate && moment(paymentInfo.paymentLimitDate).format('YYYY.MM.DD')}
{paymentInfo?.paymentLimitDate && moment(paymentInfo.paymentLimitDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD')}
</span>
</li>
<li className="kv-row">

2
src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx
View File

@@ -54,7 +54,7 @@ export const TitleInfoWrap = ({
</span>
</div>
<div className="num-store">{titleInfo?.corpName}</div>
<div className="num-day">{titleInfo?.sendDate && moment(titleInfo.sendDate).format('YYYY.MM.DD')}</div>
<div className="num-day">{titleInfo?.sendDate && moment(titleInfo.sendDate,'YYYYMMDDHHmmss').format('YYYY.MM.DD')}</div>
</>
)}
{/*링크결제_발송대기*/}

23
src/entities/additional-service/ui/link-payment/apply/link-payment-step1.tsx
View File

@@ -13,7 +13,7 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
const { navigate } = useNavigate();
useSetOnBack(() => {
navigate(PATHS.additionalService.list);
navigate(PATHS.additionalService.linkPayment.shippingHistory);
});
const handlePaymentMethodChange = (method: LinkPaymentSendMethod) => {
@@ -24,8 +24,16 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
setFormData({ ...formData, [field]: value });
};
const handleAmountChange = (value: string) => {
// 숫자만 추출
const onlyNumbers = value.replace(/[^0-9]/g, '');
// 빈 문자열이면 0, 아니면 숫자로 변환 (앞의 0 제거됨)
const numericValue = onlyNumbers === '' ? 0 : parseInt(onlyNumbers, 10);
setFormData({ ...formData, amount: numericValue });
};
const handleDateChange = (date: string) => {
setFormData({ ...formData, paymentExpiryDate: date });
setFormData({ ...formData, paymentLimitDate: date });
};
return (
@@ -87,9 +95,11 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
<div className="issue-field">
<input
type="text"
placeholder=""
value={formData.amount}
onChange={(e) => handleInputChange('amount', e.target.value)}
placeholder="0"
value={formData.amount === 0 ? '' : formData.amount}
onChange={(e) => handleAmountChange(e.target.value)}
inputMode="numeric"
pattern="[0-9]*"
/>
</div>
</div>
@@ -111,9 +121,10 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
<div className="issue-field">
<div className="link-apply-date">
<SingleDatePicker
date={formData.paymentExpiryDate}
date={formData.paymentLimitDate}
setDate={handleDateChange}
placeholder="날짜 선택"
minDate={new Date()}
/>
<span>까지</span>
</div>

76
src/entities/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx
View File

@@ -13,7 +13,7 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
import { useStore } from '@/shared/model/store';
import { LinkPaymentHistoryFilterProps, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod } from '@/entities/additional-service/model/link-pay/types';
import { LinkPaymentHistoryFilterProps, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus } from '@/entities/additional-service/model/link-pay/types';
export const LinkPaymentHistoryFilter = ({
filterOn,
@@ -24,53 +24,31 @@ export const LinkPaymentHistoryFilter = ({
fromDate,
toDate,
paymentStatus,
processResult,
sendStatus,
sendMethod,
setMid,
setSearchType,
setSearchKeyword,
setStartDate,
setEndDate,
setTransactionStatus,
setProcessResult,
setPaymentStatus,
setSendStatus,
setSendMethod
}: LinkPaymentHistoryFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchCl>(searchCl);
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchValue);
const [filterSearchCl, setFilterSearchCl] = useState<LinkPaymentSearchCl>(searchCl);
const [filterSearchValue, setFilterSearchValue] = useState<string>(searchValue);
const [filterStartDate, setFilterStartDate] = useState<string>(fromDate);
const [filterEndDate, setFilterEndDate] = useState<string>(toDate);
const [filterTransactionStatus, setFilterTransactionStatus] = useState<LinkPaymentPaymentStatus>(paymentStatus)
const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
const [filterSendStatus, setFilterSendStatus] = useState<LinkPaymentSendStatus>(sendStatus);
const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod);
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
const midOptions = useStore.getState().UserStore.selectOptionsMids;
const onClickToClose = () => {
setFilterOn(false);
};
const setNewDate = (newDate: any) => {
console.log(newDate)
};
const onClickToSetFilter = () => {
setMid(filterMid);
setSearchType(filterSearchType);
setSearchKeyword(filterSearchKeyword);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setTransactionStatus(filterTransactionStatus);
setProcessResult(filterProcessResult);
setSendMethod(filterSendMethod);
onClickToClose();
};
let searchTypeOption = [
{ name: '휴대폰번호', value: LinkPaymentSearchCl.PHONE },
@@ -87,9 +65,9 @@ export const LinkPaymentHistoryFilter = ({
];
let processResultOption = [
{ name: '전체', value: ProcessResult.ALL },
{ name: '성공', value: ProcessResult.SUCCESS },
{ name: '실패', value: ProcessResult.FAIL },
{ name: '전체', value: LinkPaymentSendStatus.ALL },
{ name: '성공', value: LinkPaymentSendStatus.SUCCESS },
{ name: '실패', value: LinkPaymentSendStatus.FAIL },
];
let sendMethodOption = [
@@ -99,15 +77,35 @@ export const LinkPaymentHistoryFilter = ({
{ name: '카카오', value: LinkPaymentSendMethod.KAKAO },
];
const onClickToClose = () => {
setFilterOn(false);
};
const onClickToSetFilter = () => {
setMid(filterMid);
setSearchType(filterSearchCl);
setSearchKeyword(filterSearchValue);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setPaymentStatus(filterTransactionStatus);
setSendStatus(filterSendStatus);
setSendMethod(filterSendMethod);
onClickToClose();
};
useEffect(() => {
})
return (
<>
<motion.div
className="full-menu-modal"
initial="hidden"
animate={(filterOn) ? 'visible' : 'hidden'}
variants={ FilterMotionVariants }
transition={ FilterMotionDuration }
style={ FilterMotionStyle }
variants={FilterMotionVariants}
transition={FilterMotionDuration}
style={FilterMotionStyle}
>
<div className="full-menu-container">
<div className="full-menu-header">
@@ -136,8 +134,8 @@ export const LinkPaymentHistoryFilter = ({
<FilterSelectInput
title='휴대폰번호/이메일'
selectValue={filterSearchType}
selectSetter={setFilterSearchType}
selectValue={filterSearchCl}
selectSetter={setFilterSearchCl}
selectOptions={searchTypeOption}
inputValue={searchValue}
inputSetter={setSearchKeyword}
@@ -158,9 +156,9 @@ export const LinkPaymentHistoryFilter = ({
<FilterButtonGroups
title='전송결과'
activeValue={filterProcessResult}
activeValue={filterSendStatus}
btnGroups={processResultOption}
setter={setFilterProcessResult}
setter={setFilterSendStatus}
></FilterButtonGroups>
<FilterButtonGroups

24
src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx
View File

@@ -10,7 +10,7 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
import { useStore } from '@/shared/model/store';
import { LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus, LinkPaymentWaitFilterProps } from '@/entities/additional-service/model/link-pay/types';
import { LinkPaymentProcessStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus, LinkPaymentWaitFilterProps } from '@/entities/additional-service/model/link-pay/types';
export const LinkPaymentWaitSendFilter = ({
filterOn,
@@ -21,14 +21,14 @@ export const LinkPaymentWaitSendFilter = ({
startDate,
endDate,
sendMethod,
sendingStatus,
processStatus,
setMid,
setSearchType,
setSearchKeyword,
setStartDate,
setEndDate,
setSendMethod,
setSendingStatus
setProcessStatus
}: LinkPaymentWaitFilterProps) => {
@@ -38,7 +38,7 @@ export const LinkPaymentWaitSendFilter = ({
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod)
const [filterSendingStatus, setFilterSendingStatus] = useState<LinkPaymentSendStatus>(sendingStatus);
const [filterProcessStatus, setFilterProcessStatus] = useState<LinkPaymentProcessStatus>(processStatus);
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
@@ -61,7 +61,7 @@ export const LinkPaymentWaitSendFilter = ({
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setSendMethod(filterSendMethod);
setSendingStatus(filterSendingStatus);
setProcessStatus(filterProcessStatus);
onClickToClose();
};
@@ -77,10 +77,10 @@ export const LinkPaymentWaitSendFilter = ({
{ name: '카카오', value: LinkPaymentSendMethod.KAKAO },
];
let sendingStatusOption = [
{ name: '전체', value: LinkPaymentSendStatus.ALL },
{ name: '발송요청', value: LinkPaymentSendStatus.SUCCESS },
{ name: '발송취소', value: LinkPaymentSendStatus.FAIL },
let processStatusOption = [
{ name: '전체', value: LinkPaymentProcessStatus.ALL },
{ name: '발송요청', value: LinkPaymentProcessStatus.SEND_REQUEST },
{ name: '발송취소', value: LinkPaymentProcessStatus.SEND_CANCEL },
];
return (
@@ -142,9 +142,9 @@ export const LinkPaymentWaitSendFilter = ({
<FilterButtonGroups
title='진행상태'
activeValue={filterSendingStatus}
btnGroups={sendingStatusOption}
setter={setFilterSendingStatus}
activeValue={filterProcessStatus}
btnGroups={processStatusOption}
setter={setFilterProcessStatus}
></FilterButtonGroups>
</div>
<div className="apply-row">

45
src/entities/additional-service/ui/link-payment/link-payment-history-list.tsx
View File

@@ -1,20 +1,50 @@
import { LinkPaymentHistoryListProps } from '../../model/link-pay/types';
import { JSX } from 'react';
import { LinkPaymentHistoryListItem, LinkPaymentHistoryListProps } from '../../model/link-pay/types';
import { ListDateGroup } from '../list-date-group';
export const LinkPaymentHistoryList = ({
additionalServiceCategory,
listItems
listItems,
setTarget,
mid
}: LinkPaymentHistoryListProps) => {
const getListDateGroup = () => {
let rs = [];
for (const [key, value] of Object.entries(listItems)) {
let rs: JSX.Element[] = [];
let date = '';
let list: LinkPaymentHistoryListItem[] = [];
for (let i = 0; i < listItems.length; i++) {
// paymentDate format: "20211018140420" (YYYYMMDDHHmmss)
let sendDate = listItems[i]?.sendDate || '';
let itemDate = sendDate.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
key={date + '-' + i}
date={date}
items={list as any}
mid={mid}
></ListDateGroup>
);
}
date = itemDate;
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
key={key}
date={key}
items={value}
key={date + '-last'}
date={date}
items={list as any}
mid={mid}
></ListDateGroup>
);
}
@@ -25,6 +55,7 @@ export const LinkPaymentHistoryList = ({
<>
<div className="transaction-list">
{getListDateGroup()}
<div ref={setTarget}></div>
</div>
</>
)

209
src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
View File

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

45
src/entities/additional-service/ui/link-payment/link-payment-wait-list.tsx
View File

@@ -1,20 +1,50 @@
import { LinkPaymentWaitListProps } from '../../model/link-pay/types';
import { JSX } from 'react';
import { LinkPaymentWaitListItem, LinkPaymentWaitListProps } from '../../model/link-pay/types';
import { ListDateGroup } from '../list-date-group';
export const LinkPaymentWaitList = ({
additionalServiceCategory,
listItems
listItems,
setTarget,
mid
}: LinkPaymentWaitListProps) => {
const getListDateGroup = () => {
let rs = [];
for (const [key, value] of Object.entries(listItems)) {
let rs: JSX.Element[] = [];
let date = '';
let list: LinkPaymentWaitListItem[] = [];
for (let i = 0; i < listItems.length; i++) {
// paymentDate format: "20211018140420" (YYYYMMDDHHmmss)
let scheduledSendDate = listItems[i]?.scheduledSendDate || '';
let itemDate = scheduledSendDate.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
key={date + '-' + i}
date={date}
items={list as any}
mid={mid}
></ListDateGroup>
);
}
date = itemDate;
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
key={key}
date={key}
items={value}
key={date + '-last'}
date={date}
items={list as any}
mid={mid}
></ListDateGroup>
);
}
@@ -25,6 +55,7 @@ export const LinkPaymentWaitList = ({
<>
<div className="transaction-list">
{getListDateGroup()}
<div ref={setTarget}></div>
</div>
</>
)

173
src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
View File

@@ -7,35 +7,56 @@ import { PATHS } from "@/shared/constants/paths";
import { LinkPaymentWaitList } from "./link-payment-wait-list";
import { AdditionalServiceCategory } from "../../model/types";
import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
import { SortTypeKeys } from '@/entities/common/model/types';
import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
import { useExtensionLinkPayWaitListMutation } from '../../api/link-payment/use-extension-link-pay-wait-list-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { useExtensionLinkPayWaitDownloadExcelMutation } from '../../api/link-payment/use-extension-link-pay-wait-download-excel-mutation';
import { useStore } from '@/shared/model/store';
import { LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus, LinkPaymentWaitListItem } from '../../model/link-pay/types';
import { LinkPaymentProcessStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus, LinkPaymentWaitListItem } from '../../model/link-pay/types';
import useIntersectionObserver from '@/widgets/intersection-observer';
import { ProcessStatusBtnGrouup } from '../../model/link-pay/constant';
import { useExtensionLinkPayWaitDeleteMutation } from '../../api/link-payment/use-extension-link-pay-wait-delete-mutation';
const sendingStatusBtnGrouup = [
{ name: '전체', value: LinkPaymentSendStatus.ALL },
{ name: '발송요청', value: LinkPaymentSendStatus.SUCCESS },
{ name: '발송취소', value: LinkPaymentSendStatus.FAIL }
]
export const LinkPaymentWaitSendWrap = () => {
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 [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [mid, setMid] = useState<string>(userMid);
const [searchType, setSearchType] = useState<LinkPaymentSearchCl>(LinkPaymentSearchCl.ALL)
const [searchKeyword, setSearchKeyword] = useState<string>('');
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
const [searchType, setSearchType] = useState<LinkPaymentSearchCl>(LinkPaymentSearchCl.PHONE)
const [searchValue, setSearchValue] = useState<string>('');
const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
const [sendingStatus, setSendingStatus] = useState<LinkPaymentSendStatus>(LinkPaymentSendStatus.ALL);
const [listItems, setListItems] = useState({});
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [processStatus, setProcessStatus] = useState<LinkPaymentProcessStatus>(LinkPaymentProcessStatus.ALL);
const [listItems, setListItems] = useState<Array<LinkPaymentWaitListItem>>([]);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [email, setEmail] = useState<string>('');
const { mutateAsync: pendingSendList } = useExtensionLinkPayWaitListMutation();
const { mutateAsync: downloadExcel } = useExtensionLinkPayWaitDownloadExcelMutation();
@@ -48,56 +69,59 @@ export const LinkPaymentWaitSendWrap = () => {
const callList = (option?: {
sortType?: SortTypeKeys,
val?: string
status?: LinkPaymentProcessStatus,
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,
searchValue: searchKeyword,
searchValue: searchValue,
fromDate: startDate,
toDate: endDate,
sendStatus: sendingStatus, // 추후 삭제 필요
sendMethod: (sendMethod === LinkPaymentSendMethod.ALL)? '': sendMethod,
processStatus: sendingStatus,
page: pageParam
sendMethod: sendMethod,
processStatus: option?.status ?? processStatus,
... {
page: currentPageParam
}
}
pendingSendList(listParams).then((rs) => {
setListItems(assembleData(rs.content));
});
};
const assembleData = (content: Array<LinkPaymentWaitListItem>) => {
let data: any = {};
if(content && content.length > 0){
for (let i = 0; i < content?.length; i++) {
let scheduledSendDate = content[i]?.scheduledSendDate?.substring(0, 8);
let groupDate = moment(scheduledSendDate).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);
}
}
console.log('Data : ', data);
return data;
else {
setNextCursor(null);
}
});
};
const onClickToDownloadExcel = () => {
downloadExcel({
mid: mid,
searchCl: (searchType === LinkPaymentSearchCl.ALL)? '': searchType,
searchValue: searchKeyword,
email: email,
searchCl: searchType,
searchValue: searchValue,
fromDate: startDate,
toDate: endDate,
sendStatus: (sendingStatus === LinkPaymentSendStatus.ALL)? '': sendingStatus, // 추후 삭제 필요
sendMethod: (sendMethod === LinkPaymentSendMethod.ALL)? '': sendMethod,
processStatus: (sendingStatus === LinkPaymentSendStatus.ALL)? '': sendingStatus,
sendMethod: sendMethod,
processStatus: processStatus,
}).then((rs) => {
console.log('Excel Dowload Status : ' + rs.status);
});
@@ -105,15 +129,32 @@ export const LinkPaymentWaitSendWrap = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort,
resetPage: true
});
};
const onClickSendingStatus = (val: LinkPaymentSendStatus) => {
setSendingStatus(val);
const onClickSendingStatus = (val: LinkPaymentProcessStatus) => {
setProcessStatus(val);
callList({
status: val,
resetPage: true
});
};
useEffect(() => {
callList();
}, []);
// 필터 조건이 변경되면 첫 페이지부터 다시 시작
callList({ resetPage: true });
}, [
mid,
searchType,
searchValue,
startDate,
endDate,
sendMethod,
processStatus
]);
return (
<>
@@ -150,20 +191,20 @@ export const LinkPaymentWaitSendWrap = () => {
<div className="filter-section">
<SortTypeBox
sortType={ sortType }
onClickToSort={ onClickToSort }
sortType={sortType}
onClickToSort={onClickToSort}
></SortTypeBox>
<div className="excrow">
<div className="full-menu-keywords no-padding">
{
sendingStatusBtnGrouup.map((value, index) => (
<span
key={`key-service-code=${index}`}
className={`keyword-tag ${(sendingStatus === value.value) ? 'active' : ''}`}
onClick={() => onClickSendingStatus(value.value)}
>{value.name}</span>
))
}
{
ProcessStatusBtnGrouup.map((value, index) => (
<span
key={`key-service-code=${index}`}
className={`keyword-tag ${(processStatus === value.value) ? 'active' : ''}`}
onClick={() => onClickSendingStatus(value.value)}
>{value.name}</span>
))
}
</div>
</div>
</div>
@@ -171,6 +212,8 @@ export const LinkPaymentWaitSendWrap = () => {
<LinkPaymentWaitList
listItems={listItems}
additionalServiceCategory={AdditionalServiceCategory.LinkPaymentWait}
setTarget={setTarget}
mid={mid}
></LinkPaymentWaitList>
<div className="apply-row">
<button
@@ -183,18 +226,18 @@ export const LinkPaymentWaitSendWrap = () => {
setFilterOn={setFilterOn}
mid={mid}
searchCl={searchType}
searchKeyword={searchKeyword}
searchKeyword={searchValue}
startDate={startDate}
endDate={endDate}
sendMethod={sendMethod}
sendingStatus={sendingStatus}
processStatus={processStatus}
setMid={setMid}
setSearchType={setSearchType}
setSearchKeyword={setSearchKeyword}
setSearchKeyword={setSearchValue}
setStartDate={setStartDate}
setEndDate={setEndDate}
setSendMethod={setSendMethod}
setSendingStatus={setSendingStatus}
setProcessStatus={setProcessStatus}
></LinkPaymentWaitSendFilter>
</>
);

8
src/entities/additional-service/ui/list-date-group.tsx
View File

@@ -55,6 +55,14 @@ export const ListDateGroup = ({
orderStatus={ items[i]?.orderStatus }
arsPaymentMethod={ items[i]?.arsPaymentMethod }
buyerName={ items[i]?.buyerName}
cursorId={ items[i]?.cursorId}
subReqId={ items[i]?.subReqId}
requestId={ items[i]?.requestId}
detailExposure={ items[i]?.detailExposure}
receiverInfo={ items[i]?.receiverInfo}
alimCl={ items[i]?.alimCl }
sendType={ items[i]?.sendType }
sendCl={ items[i]?.sendCl }

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

@@ -26,6 +26,8 @@ export const ListItem = ({
alimCl, sendType, sendCl,
paymentMethod, receiverName,
requestId,subReqId,
buyerName,receiverInfo,
smsCl,
name,
@@ -168,7 +170,9 @@ export const ListItem = ({
state: {
additionalServiceCategory: additionalServiceCategory,
mid: mid,
tid: tid
tid: tid,
requestId: requestId,
subReqId: subReqId
}
});
}
@@ -177,7 +181,8 @@ export const ListItem = ({
state: {
additionalServiceCategory: additionalServiceCategory,
mid: mid,
tid: tid
tid: tid,
requestId: requestId
}
});
}
@@ -327,11 +332,7 @@ export const ListItem = ({
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory ||
additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait
) {
if (sendMethod === "SMS") {
str = `${"buyerName"}(${"휴대폰 번호"})`;
} else {
str = `${"buyerName"}(${"이메일"})`;
}
str = `${buyerName}(${receiverInfo})`;
}
else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
str = companyName;
@@ -394,7 +395,7 @@ export const ListItem = ({
);
}
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
if (paymentStatus === "PAYMENT_FAIL" || paymentStatus === "INACTIVE") {
if (paymentStatus === "3" || paymentStatus === "4") {
rs.push(
<div key="link-payment-history" className="transaction-details">
<span>{getPaymentStatusText(paymentStatus)}</span>
@@ -409,7 +410,7 @@ export const ListItem = ({
<span className="separator">|</span>
<span>{getSendMethodText(sendMethod)}</span>
<span className="separator">|</span>
<span>{"결제수단 추가 필요"}</span>
<span>{paymentMethod}</span>
</div>
);
}