diff --git a/src/entities/transaction/model/contant.ts b/src/entities/transaction/model/contant.ts index caa5e6b..51f8ead 100644 --- a/src/entities/transaction/model/contant.ts +++ b/src/entities/transaction/model/contant.ts @@ -1,4 +1,8 @@ import { + AllTransactionMoidTid, + AllTransactionSearchCl, + AllTransactionServiceCode, + AllTransactionStateCode, BillingPaymentMethod, BillingProcessResult, BillingRequestStatus, @@ -11,6 +15,46 @@ import { EscrowSettlementStatus } from '@/entities/transaction/model/types'; +export const FilterMotionVariants = { + hidden: {x: '100%' }, + visible: { x: '0%' }, +}; +export const FilterMotionDuration = { + duration: 0.3 +}; +export const FilterMotionStyle = { + width: '100%', + height: '100%' +}; + +export const AllTransactionMoidTidOptionsGroup = [ + {name: '주문번호', value: AllTransactionMoidTid.MOID}, + {name: 'TID', value: AllTransactionMoidTid.TID}, +]; + +export const AllTransactionStateCodeBtnGroup = [ + {name: '전체', value: AllTransactionStateCode.ALL}, + {name: '승인/입금완료', value: AllTransactionStateCode.APPROVAL}, + {name: '전취소/취소', value: AllTransactionStateCode.CANCEL}, + {name: '후취소/환불', value: AllTransactionStateCode.REFUND} +]; +export const AllTransactionServiceCodeOptionsGroup = [ + {name: '전체', value: AllTransactionServiceCode.ALL}, + {name: '신용카드', value: AllTransactionServiceCode.CREDIT_CARD}, + {name: '가상계좌', value: AllTransactionServiceCode.VIRTUAL_ACCOUNT}, + {name: '계좌이체', value: AllTransactionServiceCode.ACCOUNT_TRANSFER}, + {name: '계좌간편결제', value: AllTransactionServiceCode.ACCOUNT_SIMPLE_TRANSFER}, + {name: '휴대폰', value: AllTransactionServiceCode.MOBILE_PAYMENT}, + {name: 'SSG 머니', value: AllTransactionServiceCode.SSGMONEY}, + {name: 'SSG 은행계좌', value: AllTransactionServiceCode.SSGBANK}, + {name: '문화상품권', value: AllTransactionServiceCode.CULT}, + {name: '티머니페이', value: AllTransactionServiceCode.TMONEY}, + +]; +export const AllTransactionCardBankCodeOptionsGroup = { + +}; + export const CashReceiptPurposeTypeBtnGroup = [ {name: '전체', value: CashReceiptPurposeType.ALL}, {name: '소득공제', value: CashReceiptPurposeType.INCOME_DEDUCTION}, @@ -44,7 +88,7 @@ export const EscrowDeliveryStatusBtnGroup = [ {name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING}, {name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE}, ]; -export let EscrowSettlementStatusBtnGroup = [ +export const EscrowSettlementStatusBtnGroup = [ {name: '전체', value: EscrowSettlementStatus.ALL}, {name: '신용카드', value: EscrowSettlementStatus.CREDIT_CARD}, {name: '가상계좌', value: EscrowSettlementStatus.REAL_ACCOUNT}, diff --git a/src/entities/transaction/model/types.ts b/src/entities/transaction/model/types.ts index 169b917..4eabb06 100644 --- a/src/entities/transaction/model/types.ts +++ b/src/entities/transaction/model/types.ts @@ -33,6 +33,44 @@ export enum ProcessStep { One = 'One', Two = 'Two', }; + +export enum AllTransactionMoidTid { + MOID = 'MOID', + TID = 'TID' +}; +export enum AllTransactionStateCode { + ALL = '0', + APPROVAL = '1', + CANCEL = '2', + REFUND = '3' +}; +export enum AllTransactionServiceCode { + ALL = 'ALL', + CREDIT_CARD = 'CREDIT_CARD', + VIRTUAL_ACCOUNT = 'VIRTUAL_ACCOUNT', + ACCOUNT_TRANSFER = 'ACCOUNT_TRANSFER', + ACCOUNT_SIMPLE_TRANSFER = 'ACCOUNT_SIMPLE_TRANSFER', + MOBILE_PAYMENT = 'MOBILE_PAYMENT', + SSGMONEY = 'SSGMONEY', + SSGBANK = 'SSGBANK', + CULT = 'CULT', + TMONEY = 'TMONEY ' +}; + +export enum AllTransactionSearchCl { + ALL = 'ALL', + CARD_NO = 'CARD_NO', + CARD_APPROVAL_NO = 'CARD_APPROVAL_NO', + BANK_BUYER_NM = 'BANK_BUYER_NM', + VACCT_NO = 'VACCT_NO', + VACCT_DEPOSIT_NM = 'VACCT_DEPOSIT_NM', + TEL_NO = 'TEL_NO', + SSGMONEY_GIFT_NO = 'SSGMONEY_GIFT_NO', + SSGBANK_APPROVAL_NO = 'SSGBANK_APPROVAL_NO', + CMSBANK_USER_ID = 'CMSBANK_USER_ID', + CULT_USER_ID = 'CULT_USER_ID', + TMONEY_CARD_NO = 'TMONEY_CARD_NO', +}; export enum CashReceiptPurposeType { ALL = 'ALL', INCOME_DEDUCTION = 'INCOME_DEDUCTION', @@ -205,14 +243,14 @@ export interface AllTransactionListParams { toDate: string; stateCode: string; serviceCode: string; - minAmount: number; - maxAmount: number; + minAmount?: number | string; + maxAmount?: number | string; dateCl: string; goodsName: string; - cardCode: string; - bankCode: string; - searchCl: string; - searchValue: string; + cardCode?: string; + bankCode?: string; + searchCl?: AllTransactionSearchCl; + searchValue?: string; page?: DefaultRequestPagination; }; @@ -482,6 +520,30 @@ export interface FilterProps { setFilterOn: (filterOn: boolean) => void; }; export interface AllTransactionFilterProps extends FilterProps { + mid: string; + fromDate: string; + toDate: string; + stateCode: AllTransactionStateCode; + serviceCode: AllTransactionServiceCode; + minAmount?: number | string; + maxAmount?: number | string; + cardCode?: string; + bankCode?: string; + searchCl?: AllTransactionSearchCl; + searchValue?: string; + setMid: (mid: string) => void; + setMoid: (moid: string) => void; + setTid: (tid: string) => void; + setFromDate: (fromDate: string) => void; + setToDate: (endDate: string) => void; + setStateCode: (stateCode: AllTransactionStateCode) => void; + setServiceCode: (serviceCode: AllTransactionServiceCode) => void; + setMinAmount: (minAmount: string | number) => void; + setMaxAmount: (maxAmount: string | number) => void; + setCardCode: (cardCode: string | undefined) => void; + setBankCode: (bankCode: string | undefined) => void; + setSearchCl: (searchCl: AllTransactionSearchCl | undefined) => void; + setSearchValue: (searchValue: string | undefined) => void; }; export interface CashReceiptFilterProps extends FilterProps { diff --git a/src/entities/transaction/ui/filter/all-transaction-filter.tsx b/src/entities/transaction/ui/filter/all-transaction-filter.tsx index b37c223..2f6939c 100644 --- a/src/entities/transaction/ui/filter/all-transaction-filter.tsx +++ b/src/entities/transaction/ui/filter/all-transaction-filter.tsx @@ -1,20 +1,157 @@ +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 { + FilterMotionVariants, + FilterMotionDuration, + FilterMotionStyle, + AllTransactionMoidTidOptionsGroup, + AllTransactionStateCodeBtnGroup, + AllTransactionServiceCodeOptionsGroup, + AllTransactionCardBankCodeOptionsGroup, + +} from '@/entities/transaction/model/contant'; +import { + AllTransactionFilterProps, + AllTransactionSearchCl, + AllTransactionStateCode, + AllTransactionServiceCode, + AllTransactionMoidTid +} from '../../model/types'; export const AllTransactionFilter = ({ filterOn, - setFilterOn -}: FilterProps) => { + setFilterOn, + mid, + fromDate, + toDate, + stateCode, + serviceCode, + minAmount, + maxAmount, + cardCode, + bankCode, + searchCl, + searchValue, + setMid, + setMoid, + setTid, + setFromDate, + setToDate, + setStateCode, + setServiceCode, + setMinAmount, + setMaxAmount, + setCardCode, + setBankCode, + setSearchCl, + setSearchValue, +}: AllTransactionFilterProps) => { - const variants = { - hidden: { x: '100%' }, - visible: { x: '0%' }, - }; + const [filterMid, setFilterMid] = useState(mid); + const [filterMoidTidType, setFilterMoidTidType] = useState(AllTransactionMoidTid.MOID); + const [filterMoidTidValue, setFilterMoidTidValue] = useState(''); + const [filterFromDate, setFilterFromDate] = useState(fromDate); + const [filterToDate, setFilterToDate] = useState(toDate); + const [filterStateCode, setFilterStateCode] = useState(stateCode); + const [filterServiceCode, setFilterServiceCode] = useState(serviceCode); + const [filterMinAmount, setFilterMinAmount] = useState(minAmount || ''); + const [filterMaxAmount, setFilterMaxAmount] = useState(maxAmount || ''); + + const [filterCardCode, setFilterCardCode] = useState(cardCode); + const [filterBankCode, setFilterBankCode] = useState(bankCode); + const [filterCardBankCode, setFilterCardBankCode] = useState(''); + + const [filterSearchCl, setFilterSearchCl] = useState(searchCl); + const [filterSearchValue, setFilterSearchValue] = useState(searchValue); + + const [searchClOptionsGroup, setSearchClOptionsGroup] = useState>>([]); const onClickToClose = () => { setFilterOn(false); }; + + const setNewDate = (newDate: any) => { + console.log(newDate) + }; + + const onClickToSetFilter = () => { + setMid(filterMid); + if(filterMoidTidType === AllTransactionMoidTid.MOID){ + setMoid(filterMoidTidValue); + setTid(''); + } + else if(filterMoidTidType === AllTransactionMoidTid.TID){ + setMoid(''); + setTid(filterMoidTidValue); + } + setFromDate(filterFromDate); + setToDate(filterToDate); + setStateCode(filterStateCode); + + setServiceCode(filterServiceCode); + setMinAmount(filterMinAmount); + setMaxAmount(filterMaxAmount); + setBankCode(filterBankCode); + setCardCode(filterCardCode); + setSearchCl(filterSearchCl); + setSearchValue(filterSearchValue); + onClickToClose(); + }; + let MidOptions = [ + {name: 'nictest001m', value: 'nictest001m'} + ]; + + let setSearchClOptions = (value: AllTransactionServiceCode) => { + let options = []; + setFilterServiceCode(value); + if(value === AllTransactionServiceCode.ALL){ + + } + else if(value === AllTransactionServiceCode.CREDIT_CARD){ + options.push({name: '카드번호', value: AllTransactionSearchCl.CARD_NO}); + options.push({name: '승인번호', value: AllTransactionSearchCl.CARD_APPROVAL_NO}); + } + else if(value === AllTransactionServiceCode.VIRTUAL_ACCOUNT){ + options.push({name: '가상계좌번호', value: AllTransactionSearchCl.VACCT_NO}); + options.push({name: '입금자명', value: AllTransactionSearchCl.VACCT_DEPOSIT_NM}); + } + else if(value === AllTransactionServiceCode.ACCOUNT_TRANSFER){ + options.push({name: '구매자명', value: AllTransactionSearchCl.BANK_BUYER_NM}); + } + else if(value === AllTransactionServiceCode.ACCOUNT_SIMPLE_TRANSFER){ + + } + else if(value === AllTransactionServiceCode.MOBILE_PAYMENT){ + options.push({name: '휴대폰번호', value: AllTransactionSearchCl.TEL_NO}); + } + else if(value === AllTransactionServiceCode.SSGMONEY){ + options.push({name: '상품권번호', value: AllTransactionSearchCl.SSGMONEY_GIFT_NO}); + } + else if(value === AllTransactionServiceCode.SSGBANK){ + options.push({name: '승인번호', value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO}); + } + else if(value === AllTransactionServiceCode.CULT){ + options.push({name: '컬처랜드ID', value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO}); + } + else if(value === AllTransactionServiceCode.TMONEY){ + options.push({name: '티머니번호', value: AllTransactionSearchCl.TMONEY_CARD_NO}); + } + setSearchClOptionsGroup(options); + }; + + /* + useEffect(() => { + setFilterDeliveryStatus(deliveryStatus); + }, [deliveryStatus]); + */ + return ( <>
@@ -46,139 +180,72 @@ export const AllTransactionFilter = ({
-
-
-
가맹점
-
- -
-
- -
-
주문번호/ID
-
- - -
-
- -
-
조회기간
-
-
- 당일 - 일주일 - 1개월 - 직접입력 -
-
-
- - -
- ~ -
- - -
-
-
-
- -
-
요청상태
-
-
- 전체 - 진행중 - 성공 - 요청취소 -
-
-
- -
-
저리결과
-
-
- 전체 - 성공 - 실패 - -
-
-
- -
-
결제수단
-
- -
-
- -
-
거래금액
-
-
- -
- ~ -
- -
-
-
+
+ + + + + + + + + {/* + + */} + +
- +
diff --git a/src/entities/transaction/ui/filter/billing-filter.tsx b/src/entities/transaction/ui/filter/billing-filter.tsx index 072c3a3..8b98931 100644 --- a/src/entities/transaction/ui/filter/billing-filter.tsx +++ b/src/entities/transaction/ui/filter/billing-filter.tsx @@ -8,6 +8,9 @@ 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, + FilterMotionVariants, + FilterMotionStyle, BillingSearchTypeOptionsGroup, BillingRequestStatusBtnGroup, BillingProcessResultBtnGroup, @@ -57,11 +60,6 @@ export const BillingFilter = ({ const [filterMinAmount, setFilterMinAmount] = useState(minAmount || ''); const [filterMaxAmount, setFilterMaxAmount] = useState(maxAmount || ''); - const variants = { - hidden: { x: '100%' }, - visible: { x: '0%' }, - }; - const onClickToClose = () => { setFilterOn(false); }; @@ -99,12 +97,9 @@ export const BillingFilter = ({ className="full-menu-modal" initial="hidden" animate={ (filterOn)? 'visible': 'hidden' } - variants={ variants } - transition={{ duration: 0.3 }} - style={{ - width: '100%', - height: '100%', - }} + variants={ FilterMotionVariants } + transition={ FilterMotionDuration } + style={ FilterMotionStyle } >
@@ -131,7 +126,7 @@ export const BillingFilter = ({ selectOptions={ MidOptions } > (issueStatus); const [filterProcessResult, setFilterProcessResult] = useState(processResult); - const variants = { - hidden: { x: '100%' }, - visible: { x: '0%' }, - }; + const [filterIssueType, setFilterIssueType] = useState(''); + const [filterIssueNumber, setFilterIssueNumber] = useState(''); + const issueTypeOptionsGroup = [ + {name: '승인번호', value: 'issue'}, + {name: '발행번호', value: 'issue2'}, + ]; const onClickToClose = () => { setFilterOn(false); @@ -79,12 +84,9 @@ export const CashReceiptFilter = ({ className="full-menu-modal" initial="hidden" animate={ (filterOn)? 'visible': 'hidden' } - variants={ variants } - transition={{ duration: 0.3 }} - style={{ - width: '100%', - height: '100%', - }} + variants={ FilterMotionVariants } + transition={ FilterMotionDuration } + style={ FilterMotionStyle } >
@@ -136,7 +138,14 @@ export const CashReceiptFilter = ({ btnGroups={ CashReceiptProcessResultBtnGroup } setter={ setFilterProcessResult } > - +