diff --git a/src/entities/additional-service/model/contant.ts b/src/entities/additional-service/model/contant.ts new file mode 100644 index 0000000..9aab8d6 --- /dev/null +++ b/src/entities/additional-service/model/contant.ts @@ -0,0 +1,12 @@ +import { EscrowDeliveryStatus } from '@/entities/transaction/model/types'; + +export const deliveryStatusBtnGroup = [ + {name: '전체', value: EscrowDeliveryStatus.ALL}, + {name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE}, + {name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT}, + {name: '배송완료', value: EscrowDeliveryStatus.DELIVERY_COMPLETE}, + {name: '구매확인', value: EscrowDeliveryStatus.PURCHASE_CONFIRM}, + {name: '구매거절', value: EscrowDeliveryStatus.PURCHASE_REJECT}, + {name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING}, + {name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE}, +]; \ No newline at end of file diff --git a/src/entities/transaction/model/types.ts b/src/entities/transaction/model/types.ts index e0de5b0..cf2a6e9 100644 --- a/src/entities/transaction/model/types.ts +++ b/src/entities/transaction/model/types.ts @@ -38,7 +38,27 @@ export enum CashReceiptPurpose { INCOME_DEDUCTION = 'INCOME_DEDUCTION', EXPENSE_PROOF = 'EXPENSE_PROOF', }; - +export enum EscrowSearchType { + ALL = 'ALL', + ORDER_NUMBER = 'ORDER_NUMBER', + TID = 'TID' +}; +export enum EscrowDeliveryStatus { + ALL = 'ALL', + PAY_COMPLETE = 'PAY_COMPLETE', + DELIVERY_INSERT = 'DELIVERY_INSERT', + DELIVERY_COMPLETE = 'DELIVERY_COMPLETE', + PURCHASE_CONFIRM = 'PURCHASE_CONFIRM', + PURCHASE_REJECT = 'PURCHASE_REJECT', + RETURN_PROCESSING = 'RETURN_PROCESSING', + DEPOSIT_COMPLETE = 'DEPOSIT_COMPLETE' +}; +export enum EscrowSettlementStatus { + ALL = 'ALL', + CREDIT_CARD = 'CREDIT_CARD', + REAL_ACCOUNT = 'REAL_ACCOUNT', + ACCOUNT_TRANSFER = 'ACCOUNT_TRANSFER' +}; export enum BillingSearchType { ALL = 'ALL', ORDER_NUMBER = 'ORDER_NUMBER', @@ -200,8 +220,8 @@ export interface EscrowListParams { endDate?: string; deliveryStatus?: string; settlementStatus?: string; - minAmount?: number; - maxAmount?: number; + minAmount?: number | string; + maxAmount?: number | string; pagination?: DefaultRequestPagination; }; @@ -214,6 +234,8 @@ export interface BillingListParams { requestStatus?: string; processResult?: string; paymentMethod?: string; + minAmount?: number | string; + maxAmount?: number | string; pagination?: DefaultRequestPagination }; @@ -452,7 +474,24 @@ export interface CashReceiptFilterProps extends FilterProps { }; export interface EscrowFilterProps extends FilterProps { - + mid: string; + searchType: EscrowSearchType; + searchKeyword: string; + startDate: string + endDate: string; + deliveryStatus: EscrowDeliveryStatus; + settlementStatus: EscrowSettlementStatus; + minAmount: number; + maxAmount: number; + setMid: (mid: string) => void; + setSearchType: (searchType: EscrowSearchType) => void; + setSearchKeyword: (searchKeyword: string) => void; + setStartDate: (startDate: string) => void; + setEndDate: (endDate: string) => void; + setDeliveryStatus: (deliveryStatus: EscrowDeliveryStatus) => void; + setSettlementStatus: (settlementStatus: EscrowSettlementStatus) => void; + setMinAmount: (minAmount: string | number) => void; + setMaxAmount: (maxAmount: string | number) => void; }; export interface BillingFilterProps extends FilterProps { mid: string; diff --git a/src/entities/transaction/ui/filter/billing-filter.tsx b/src/entities/transaction/ui/filter/billing-filter.tsx index 38f004a..6f4a3d0 100644 --- a/src/entities/transaction/ui/filter/billing-filter.tsx +++ b/src/entities/transaction/ui/filter/billing-filter.tsx @@ -1,4 +1,3 @@ -import moment from 'moment'; import { useEffect } from 'react'; import { useState } from 'react'; import { motion } from 'framer-motion'; diff --git a/src/entities/transaction/ui/filter/escrow-filter.tsx b/src/entities/transaction/ui/filter/escrow-filter.tsx index d4c9df5..85505de 100644 --- a/src/entities/transaction/ui/filter/escrow-filter.tsx +++ b/src/entities/transaction/ui/filter/escrow-filter.tsx @@ -1,12 +1,52 @@ +import { useEffect } from 'react'; +import { useState } from 'react'; import { motion } from 'framer-motion'; import { IMAGE_ROOT } from '@/shared/constants/common'; -import { FilterProps } from '../../model/types'; +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 { + EscrowFilterProps, + EscrowSearchType, + EscrowDeliveryStatus, + EscrowSettlementStatus +} from '../../model/types'; export const EscrowFilter = ({ filterOn, - setFilterOn -}: FilterProps) => { + setFilterOn, + mid, + searchType, + searchKeyword, + startDate, + endDate, + deliveryStatus, + settlementStatus, + minAmount, + maxAmount, + setMid, + setSearchType, + setSearchKeyword, + setStartDate, + setEndDate, + setDeliveryStatus, + setSettlementStatus, + setMinAmount, + setMaxAmount +}: EscrowFilterProps) => { + const [filterMid, setFilterMid] = useState(mid); + const [filterSearchType, setFilterSearchType] = useState(searchType); + const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchKeyword); + const [filterStartDate, setFilterStartDate] = useState(startDate); + const [filterEndDate, setFilterEndDate] = useState(endDate); + const [filterDeliveryStatus, setFilterDeliveryStatus] = useState(deliveryStatus); + const [filterSettlementStatus, setFilterSettlementStatus] = useState(settlementStatus); + const [filterMinAmount, setFilterMinAmount] = useState(minAmount || ''); + const [filterMaxAmount, setFilterMaxAmount] = useState(maxAmount || ''); + const variants = { hidden: { x: '100%' }, visible: { x: '0%' }, @@ -15,6 +55,52 @@ export const EscrowFilter = ({ const onClickToClose = () => { setFilterOn(false); }; + + const setNewDate = (newDate: any) => { + console.log(newDate) + }; + + const onClickToSetFilter = () => { + setMid(filterMid); + setSearchType(filterSearchType); + setSearchKeyword(filterSearchKeyword); + setStartDate(filterStartDate); + setEndDate(filterEndDate); + setDeliveryStatus(filterDeliveryStatus); + setSettlementStatus(filterSettlementStatus); + setMinAmount(filterMinAmount); + setMaxAmount(filterMaxAmount); + onClickToClose(); + }; + let MidOptions = [ + {name: 'nictest001m', value: 'nictest001m'} + ]; + let SearchTypeOptions = [ + {name: '주문번호', value: EscrowSearchType.ORDER_NUMBER }, + {name: 'TID', value: EscrowSearchType.TID } + ]; + + let deliveryStatusBtnGroup = [ + {name: '전체', value: EscrowDeliveryStatus.ALL}, + {name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE}, + {name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT}, + {name: '배송완료', value: EscrowDeliveryStatus.DELIVERY_COMPLETE}, + {name: '구매확인', value: EscrowDeliveryStatus.PURCHASE_CONFIRM}, + {name: '구매거절', value: EscrowDeliveryStatus.PURCHASE_REJECT}, + {name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING}, + {name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE}, + ]; + let settlementStatusBtnGroup = [ + {name: '전체', value: EscrowSettlementStatus.ALL}, + {name: '신용카드', value: EscrowSettlementStatus.CREDIT_CARD}, + {name: '가상계좌', value: EscrowSettlementStatus.REAL_ACCOUNT}, + {name: '계좌이체', value: EscrowSettlementStatus.ACCOUNT_TRANSFER}, + ]; + + useEffect(() => { + setFilterDeliveryStatus(deliveryStatus); + }, [deliveryStatus]); + return ( <> -
-
-
가맹점
-
- -
-
- -
-
주문번호/ID
-
- - -
-
- -
-
조회기간
-
-
- 당일 - 일주일 - 1개월 - 직접입력 -
-
-
- - -
- ~ -
- - -
-
-
-
- -
-
요청상태
-
-
- 전체 - 진행중 - 성공 - 요청취소 -
-
-
- -
-
저리결과
-
-
- 전체 - 성공 - 실패 - -
-
-
- -
-
결제수단
-
- -
-
- -
-
거래금액
-
-
- -
- ~ -
- -
-
-
+
+ + + + + + + + +
- +
diff --git a/src/pages/transaction/escrow/list-page.tsx b/src/pages/transaction/escrow/list-page.tsx index 2d193dd..8e9ea21 100644 --- a/src/pages/transaction/escrow/list-page.tsx +++ b/src/pages/transaction/escrow/list-page.tsx @@ -5,11 +5,12 @@ import { IMAGE_ROOT } from '@/shared/constants/common'; import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { EscrowList } from '@/entities/transaction/ui/escrow-list'; -import { EscrowListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types'; +import { EscrowListItem, TransactionCategory, SortByKeys, EscrowDeliveryStatus, EscrowSearchType, EscrowSettlementStatus } from '@/entities/transaction/model/types'; import { useEscrowListMutation } from '@/entities/transaction/api/use-escrow-list-mutation'; import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation'; import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants'; import { Filter } from '@/entities/transaction/ui/filter'; +import { deliveryStatusBtnGroup } from '@/entities/additional-service/model/contant'; import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box'; import { HeaderType } from '@/entities/common/model/types'; import { @@ -19,23 +20,24 @@ import { useSetFooterMode } from '@/widgets/sub-layout/use-sub-layout'; -const serviceCodes = [ - {name: '전체', key: 'all'}, - {name: '결제완료', key: 'paid'}, - {name: '배송등록', key: 'register'}, -]; - export const EscrowListPage = () => { const { navigate } = useNavigate(); const userInfo = useStore((state) => state.UserStore.UserInfo); - const [selectedServiceCode, setSelectedServiceCode] = useState('all'); const [sortBy, setSortBy] = useState(SortByKeys.New); const [listItems, setListItems] = useState({}); const [filterOn, setFilterOn] = useState(false); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); - const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD')); + const [mid, setMid] = useState('nictest001m'); + const [searchType, setSearchType] = useState(EscrowSearchType.ALL); + const [searchKeyword, setSearchKeyword] = useState(''); + //const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD')); + const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD')); const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD')); + const [deliveryStatus, setDeliveryStatus] = useState(EscrowDeliveryStatus.ALL); + const [settlementStatus, setSettlementStatus] = useState(EscrowSettlementStatus.ALL); + const [minAmount, setMinAmount] = useState(); + const [maxAmount, setMaxAmount] = useState(); useSetHeaderTitle('에스크로'); useSetHeaderType(HeaderType.LeftArrow); @@ -51,24 +53,30 @@ export const EscrowListPage = () => { sortBy?: string, val?: string }) => { - // pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy; + pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy; setPageParam(pageParam); + let newMinAmount = minAmount; + if(!!minAmount && typeof(minAmount) === 'string'){ + newMinAmount = parseInt(minAmount); + } + let newMaxAmount = maxAmount; + if(!!maxAmount && typeof(maxAmount) === 'string'){ + newMaxAmount = parseInt(maxAmount); + } let listParams = { - mid: 'nictest001m', - searchType: 'ORDER_NUMBER', - searchKeyword: '', + mid: mid, + searchType: searchType, + searchKeyword: searchKeyword, startDate: startDate, endDate: endDate, - deliveryStatus: 'ALL', - settlementStatus: 'ALL', - minAmount: 0, - maxAmount: 999999999, + deliveryStatus: deliveryStatus, + settlementStatus: settlementStatus, + minAmount: newMinAmount, + maxAmount: newMaxAmount, pagination: pageParam }; - console.log(listParams) - - escrowList(listParams).then((rs) => { + escrowList(listParams).then((rs) => { setListItems(assembleData(rs.content)); }); }; @@ -105,8 +113,8 @@ export const EscrowListPage = () => { callList({sortBy: sort}); }; - const onClickToServiceCode = (val: string) => { - setSelectedServiceCode(val); + const onClickToDeliveryStatus = (val: EscrowDeliveryStatus) => { + setDeliveryStatus(val); callList({val: val}); }; @@ -154,11 +162,11 @@ export const EscrowListPage = () => {
{ - serviceCodes.map((value, index) => ( + deliveryStatusBtnGroup.map((value, index) => ( onClickToServiceCode(value.key) } + className={ `keyword-tag ${(deliveryStatus === value.value)? 'active': ''}` } + onClick={ () => onClickToDeliveryStatus(value.value) } >{ value.name } )) }