Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web
This commit is contained in:
Jay Sheen
12
src/entities/additional-service/model/contant.ts
Normal file
12
src/entities/additional-service/model/contant.ts
Normal file
@@ -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},
|
||||
];
|
||||
@@ -8,7 +8,7 @@ export interface FundTransferTabProps {
|
||||
activeTab: FundTransferTabKeys;
|
||||
};
|
||||
export enum LinkPaymentTabKeys {
|
||||
DispatchList = 'DispatchList',
|
||||
ShippingHistory = 'ShippingHistory',
|
||||
PendingSend = 'PendingSend'
|
||||
};
|
||||
export interface LinkPaymentTabProps {
|
||||
@@ -23,16 +23,47 @@ export enum SortByKeys {
|
||||
New = 'New',
|
||||
Amount = 'Amount',
|
||||
};
|
||||
export enum ProcessResult {
|
||||
ALL = 'ALL',
|
||||
SUCCESS = 'SUCCESS',
|
||||
FAILURE = 'FAILURE'
|
||||
};
|
||||
export enum KeyInPaymentTransactionStatus {
|
||||
ALL = 'ALL',
|
||||
APPROVE = 'APPROVE',
|
||||
BF_CANCEL = 'BF_CANCEL',
|
||||
AF_CANCEL = 'AF_CANCEL'
|
||||
}
|
||||
export enum AccountHolderSearchType {
|
||||
ALL = 'ALL',
|
||||
ACCOUNT_HOLDER = 'ACCOUNT_HOLDER',
|
||||
ACCOUNT_NUMBER = 'ACCOUNT_NUMBER'
|
||||
};
|
||||
export enum AccountHolderSearchProcessResult {
|
||||
ALL = 'ALL',
|
||||
SUCCESS = 'SUCCESS',
|
||||
FAILURE = 'FAILURE'
|
||||
export enum LinkPaymentSearchType {
|
||||
ALL = "ALL",
|
||||
PHONE = "PHONE",
|
||||
EMAIL = "EMAIL"
|
||||
};
|
||||
export enum LinkPaymentSendMethod {
|
||||
ALL = "ALL",
|
||||
SMS = "SMS",
|
||||
EMAIL = "EMAIL",
|
||||
KAKAO = "KAKAO"
|
||||
};
|
||||
export enum LinkPaymentTransactionStatus {
|
||||
ALL = "ALL",
|
||||
ACTIVATE = "ACTIVATE",
|
||||
DEPOSIT_REQUEST = "DEPOSIT_REQUEST",
|
||||
TRANSACTION_COMPLETE = "TRANSACTION_COMPLETE",
|
||||
TRANSACTION_FAIL = "TRANSACTION_FAIL",
|
||||
INACTIVE = "INACTIVE"
|
||||
}
|
||||
export enum LinkPaymentSendingStatus {
|
||||
ALL = "ALL",
|
||||
SEND_REQUEST = "SEND_REQUEST",
|
||||
SEND_CANCEL = "SEND_CANCEL"
|
||||
}
|
||||
|
||||
export interface SortOptionsBoxProps {
|
||||
sortBy: SortByKeys;
|
||||
onClickToSort: (sortBy: SortByKeys) => void;
|
||||
@@ -328,7 +359,21 @@ export interface FilterProps {
|
||||
filterOn: boolean;
|
||||
setFilterOn: (filterOn: boolean) => void;
|
||||
};
|
||||
|
||||
export interface KeyInPaymentFilterProps extends FilterProps {
|
||||
mid: string,
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
transactionStatus: KeyInPaymentTransactionStatus;
|
||||
minAmount?: number | string;
|
||||
maxAmount?: number | string;
|
||||
setMid: (mid: string) => void;
|
||||
setStartDate: (startDate: string) => void;
|
||||
setEndDate: (endDate: string) => void;
|
||||
setTransactionStatus: (transactionStatus: KeyInPaymentTransactionStatus) => void;
|
||||
setMinAmount: (minAmount: string | number) => void;
|
||||
setMaxAmount: (maxAmount: string | number) => void;
|
||||
}
|
||||
// 계좌성명 조회 필터
|
||||
export interface AccountHolderSearchFilterProps extends FilterProps {
|
||||
mid: string;
|
||||
searchType: AccountHolderSearchType;
|
||||
@@ -336,17 +381,52 @@ export interface AccountHolderSearchFilterProps extends FilterProps {
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
bank: string;
|
||||
processResult: AccountHolderSearchProcessResult;
|
||||
processResult: ProcessResult;
|
||||
setMid: (mid: string) => void;
|
||||
setSearchType: (searchType: AccountHolderSearchType) => void;
|
||||
setSearchKeyword: (searchKeyWorld: string) => void;
|
||||
setStartDate: (startDate: string) => void;
|
||||
setEndDate: (endDate: string) => void;
|
||||
setBank: (bank: string) => void;
|
||||
setProcessResult: (processResult: AccountHolderSearchProcessResult) => void;
|
||||
setProcessResult: (processResult: ProcessResult) => void;
|
||||
}
|
||||
export interface LinkPaymentFilterProps extends FilterProps {
|
||||
|
||||
// 링크결제 - 발송내역 탭 필터
|
||||
export interface LinkPaymentShippingHistoryFilterProps extends FilterProps {
|
||||
mid: string;
|
||||
searchType: LinkPaymentSearchType;
|
||||
searchKeyword: string;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
transactionStatus: LinkPaymentTransactionStatus;
|
||||
processResult: ProcessResult;
|
||||
sendMethod: LinkPaymentSendMethod;
|
||||
setMid: (mid: string) => void;
|
||||
setSearchType: (searchType: LinkPaymentSearchType) => void;
|
||||
setSearchKeyword: (searchKeyWorld: string) => void;
|
||||
setStartDate: (startDate: string) => void;
|
||||
setEndDate: (endDate: string) => void;
|
||||
setTransactionStatus: (transactionStatus: LinkPaymentTransactionStatus) => void;
|
||||
setProcessResult: (processResult: ProcessResult) => void;
|
||||
setSendMethod: (sendMethod: LinkPaymentSendMethod) => void;
|
||||
}
|
||||
|
||||
// 링크결제 - 발송대기 탭 필터
|
||||
export interface LinkPaymentPendingSendFilterProps extends FilterProps {
|
||||
mid: string;
|
||||
searchType: LinkPaymentSearchType;
|
||||
searchKeyword: string;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
sendMethod: LinkPaymentSendMethod;
|
||||
sendingStatus: LinkPaymentSendingStatus;
|
||||
setMid: (mid: string) => void;
|
||||
setSearchType: (searchType: LinkPaymentSearchType) => void;
|
||||
setSearchKeyword: (searchKeyWorld: string) => void;
|
||||
setStartDate: (startDate: string) => void;
|
||||
setEndDate: (endDate: string) => void;
|
||||
setSendMethod: (sendMethod: LinkPaymentSendMethod) => void;
|
||||
setSendingStatus: (sendingStatus: LinkPaymentSendingStatus) => void;
|
||||
};
|
||||
|
||||
export enum DetailInfoSectionKeys {
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
import moment from 'moment';
|
||||
import { useEffect } from 'react';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ChangeEvent, useState } from 'react';
|
||||
import {
|
||||
AccountHolderSearchType,
|
||||
AccountHolderSearchFilterProps,
|
||||
AccountHolderSearchProcessResult
|
||||
ProcessResult
|
||||
} from '../../model/types';
|
||||
import { FilterSelect } from '@/shared/ui/filter/select';
|
||||
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
|
||||
import { FilterDateOptions } from '@/entities/common/model/types';
|
||||
import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
|
||||
import { FilterCalendar } from '@/shared/ui/filter/calendar';
|
||||
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
|
||||
|
||||
export const AccountHolderSearchFilter = ({
|
||||
@@ -36,7 +39,7 @@ export const AccountHolderSearchFilter = ({
|
||||
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
|
||||
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
|
||||
const [filterBank, setFilterBank] = useState<string>(bank)
|
||||
const [filterProcessResult, setFilterProcessResult] = useState<AccountHolderSearchProcessResult>(processResult);
|
||||
const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
|
||||
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
|
||||
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
|
||||
|
||||
@@ -50,38 +53,6 @@ export const AccountHolderSearchFilter = ({
|
||||
const onClickToClose = () => {
|
||||
setFilterOn(false);
|
||||
};
|
||||
const setFilterDate = (dateOptions: FilterDateOptions) => {
|
||||
if (dateOptions === FilterDateOptions.Today) {
|
||||
setFilterStartDate(moment().format('YYYY-MM-DD'));
|
||||
setFilterEndDate(moment().format('YYYY-MM-DD'));
|
||||
setDateReadyOnly(true);
|
||||
setFilterDateOptionsBtn(FilterDateOptions.Today);
|
||||
}
|
||||
else if (dateOptions === FilterDateOptions.Week) {
|
||||
setFilterStartDate(moment().subtract(1, 'week').format('YYYY-MM-DD'));
|
||||
setFilterEndDate(moment().format('YYYY-MM-DD'));
|
||||
setDateReadyOnly(true);
|
||||
setFilterDateOptionsBtn(FilterDateOptions.Week);
|
||||
}
|
||||
else if (dateOptions === FilterDateOptions.Month) {
|
||||
setFilterStartDate(moment().subtract(1, 'month').format('YYYY-MM-DD'));
|
||||
setFilterEndDate(moment().format('YYYY-MM-DD'));
|
||||
setDateReadyOnly(true);
|
||||
setFilterDateOptionsBtn(FilterDateOptions.Month);
|
||||
}
|
||||
else if (dateOptions === FilterDateOptions.Input) {
|
||||
setDateReadyOnly(false);
|
||||
setFilterDateOptionsBtn(FilterDateOptions.Input);
|
||||
}
|
||||
};
|
||||
const onClickToOpenCalendar = () => {
|
||||
if (!dateReadOnly) {
|
||||
setCalendarOpen(true);
|
||||
}
|
||||
else {
|
||||
setCalendarOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const setNewDate = (newDate: any) => {
|
||||
console.log(newDate)
|
||||
@@ -97,11 +68,27 @@ export const AccountHolderSearchFilter = ({
|
||||
setProcessResult(filterProcessResult);
|
||||
};
|
||||
|
||||
let processResultBtnGroup = [
|
||||
{ name: '전체', value: AccountHolderSearchProcessResult.ALL },
|
||||
{ name: '성공', value: AccountHolderSearchProcessResult.SUCCESS },
|
||||
{ name: '실패', value: AccountHolderSearchProcessResult.FAILURE },
|
||||
let MidOptions = [
|
||||
{ name: 'nictest001m', value: 'nictest001m' },
|
||||
{ name: 'nictest002m', value: 'nictest002m' }
|
||||
];
|
||||
|
||||
let bankOptions = [
|
||||
{ name: '우리은행', value: '우리은행'},
|
||||
{ name: '토스뱅킹', value: '토스뱅킹'}
|
||||
]
|
||||
|
||||
let searchTypeOption = [
|
||||
{ name: '예금주', value: AccountHolderSearchType.ACCOUNT_HOLDER },
|
||||
{ name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NUMBER },
|
||||
]
|
||||
|
||||
let processResultBtnGroup = [
|
||||
{ name: '전체', value: ProcessResult.ALL },
|
||||
{ name: '성공', value: ProcessResult.SUCCESS },
|
||||
{ name: '실패', value: ProcessResult.FAILURE },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
@@ -134,40 +121,21 @@ export const AccountHolderSearchFilter = ({
|
||||
</div>
|
||||
|
||||
<div className="option-list pt-16">
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">가맹점</div>
|
||||
<div className="opt-controls">
|
||||
<select
|
||||
className="flex-1"
|
||||
value={filterMid}
|
||||
onChange={(e: any) => setFilterMid(e.target.value)}
|
||||
>
|
||||
<option>nictest001m</option>
|
||||
<option>nictest002m</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<FilterSelect
|
||||
title='가맹점'
|
||||
selectValue={mid}
|
||||
selectSetter={setMid}
|
||||
selectOptions={MidOptions}
|
||||
></FilterSelect>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">예금주/계좌번호</div>
|
||||
<div className="opt-controls">
|
||||
<select
|
||||
className="w-110"
|
||||
value={filterSearchType}
|
||||
onChange={(e: any) => setFilterSearchType(e.target.value)}
|
||||
>
|
||||
<option value={AccountHolderSearchType.ACCOUNT_HOLDER}>예금주</option>
|
||||
<option value={AccountHolderSearchType.ACCOUNT_NUMBER}>계좌번호</option>
|
||||
</select>
|
||||
<input
|
||||
className="flex-1"
|
||||
type="text"
|
||||
placeholder=""
|
||||
value={filterSearchKeyword}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterSearchKeyword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<FilterSelectInput
|
||||
title='예금주/계좌번호'
|
||||
selectValue={searchType}
|
||||
selectSetter={setSearchType}
|
||||
selectOptions={searchTypeOption}
|
||||
inputValue={searchKeyword}
|
||||
inputSetter={setSearchKeyword}
|
||||
></FilterSelectInput>
|
||||
<FilterCalendar
|
||||
startDate={filterStartDate}
|
||||
endDate={filterEndDate}
|
||||
@@ -175,19 +143,12 @@ export const AccountHolderSearchFilter = ({
|
||||
setEndDate={setFilterEndDate}
|
||||
></FilterCalendar>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">은행</div>
|
||||
<div className="opt-controls">
|
||||
<select
|
||||
className="flex-1"
|
||||
value={filterBank}
|
||||
onChange={(e: any) => setFilterBank(e.target.value)}
|
||||
>
|
||||
<option>선택</option>
|
||||
<option>우리은행</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<FilterSelect
|
||||
title='은행'
|
||||
selectValue={bank}
|
||||
selectSetter={setBank}
|
||||
selectOptions={bankOptions}
|
||||
></FilterSelect>
|
||||
|
||||
<FilterButtonGroups
|
||||
title='조회결과'
|
||||
|
||||
@@ -0,0 +1,145 @@
|
||||
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 {
|
||||
KeyInPaymentFilterProps,
|
||||
KeyInPaymentTransactionStatus
|
||||
} from '../../model/types';
|
||||
|
||||
export const KeyInPaymentFilter = ({
|
||||
filterOn,
|
||||
setFilterOn,
|
||||
mid,
|
||||
startDate,
|
||||
endDate,
|
||||
transactionStatus,
|
||||
minAmount,
|
||||
maxAmount,
|
||||
setMid,
|
||||
setStartDate,
|
||||
setEndDate,
|
||||
setTransactionStatus,
|
||||
setMinAmount,
|
||||
setMaxAmount
|
||||
}: KeyInPaymentFilterProps) => {
|
||||
|
||||
const [filterMid, setFilterMid] = useState<string>(mid);
|
||||
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
|
||||
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
|
||||
const [filterTransactionStatus, setFilterTransactionStatus] = useState<KeyInPaymentTransactionStatus>(transactionStatus);
|
||||
const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
|
||||
const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
|
||||
|
||||
const variants = {
|
||||
hidden: { x: '100%' },
|
||||
visible: { x: '0%' },
|
||||
};
|
||||
|
||||
const onClickToClose = () => {
|
||||
setFilterOn(false);
|
||||
};
|
||||
|
||||
const setNewDate = (newDate: any) => {
|
||||
console.log(newDate)
|
||||
};
|
||||
|
||||
const onClickToSetFilter = () => {
|
||||
setMid(filterMid);
|
||||
setStartDate(filterStartDate);
|
||||
setEndDate(filterEndDate);
|
||||
setTransactionStatus(filterTransactionStatus);
|
||||
setMinAmount(filterMinAmount);
|
||||
setMaxAmount(filterMaxAmount);
|
||||
onClickToClose();
|
||||
};
|
||||
let MidOptions = [
|
||||
{ name: 'nictest001m', value: 'nictest001m' }
|
||||
];
|
||||
|
||||
let transactionStatusOption = [
|
||||
{ name: '전체', value: KeyInPaymentTransactionStatus.ALL },
|
||||
{ name: '승인', value: KeyInPaymentTransactionStatus.APPROVE },
|
||||
{ name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL },
|
||||
{ name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL },
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
id="fullMenuModal"
|
||||
className="full-menu-modal"
|
||||
initial="hidden"
|
||||
animate={(filterOn) ? 'visible' : 'hidden'}
|
||||
variants={variants}
|
||||
transition={{ duration: 0.3 }}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div className="full-menu-container">
|
||||
<div className="full-menu-header">
|
||||
<div className="full-menu-title center">필터</div>
|
||||
<div className="full-menu-actions">
|
||||
<button
|
||||
id="closeFullMenu"
|
||||
className="full-menu-close"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_close.svg'}
|
||||
alt="닫기"
|
||||
onClick={() => onClickToClose()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="option-list pt-16">
|
||||
<FilterSelect
|
||||
title='가맹점'
|
||||
selectValue={filterMid}
|
||||
selectSetter={setFilterMid}
|
||||
selectOptions={MidOptions}
|
||||
></FilterSelect>
|
||||
<FilterCalendar
|
||||
title='조회기간'
|
||||
startDate={filterStartDate}
|
||||
endDate={filterEndDate}
|
||||
setStartDate={setFilterStartDate}
|
||||
setEndDate={setFilterEndDate}
|
||||
></FilterCalendar>
|
||||
|
||||
<FilterButtonGroups
|
||||
title='거래상태'
|
||||
activeValue={filterTransactionStatus}
|
||||
btnGroups={transactionStatusOption}
|
||||
setter={setFilterTransactionStatus}
|
||||
></FilterButtonGroups>
|
||||
|
||||
<FilterRangeAmount
|
||||
title='상품가격'
|
||||
minAmount={filterMinAmount}
|
||||
maxAmount={filterMaxAmount}
|
||||
setMinAmount={setFilterMinAmount}
|
||||
setMaxAmount={setFilterMaxAmount}
|
||||
></FilterRangeAmount>
|
||||
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToSetFilter()}
|
||||
>적용</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,174 @@
|
||||
import moment from 'moment';
|
||||
import { useEffect } from 'react';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ChangeEvent, useState } from 'react';
|
||||
import {
|
||||
LinkPaymentPendingSendFilterProps,
|
||||
LinkPaymentSearchType,
|
||||
LinkPaymentSendMethod,
|
||||
LinkPaymentSendingStatus,
|
||||
} from "../../../model/types";
|
||||
import { FilterSelect } from '@/shared/ui/filter/select';
|
||||
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';
|
||||
|
||||
export const LinkPaymentPendingSendFilter = ({
|
||||
filterOn,
|
||||
setFilterOn,
|
||||
mid,
|
||||
searchType,
|
||||
searchKeyword,
|
||||
startDate,
|
||||
endDate,
|
||||
sendMethod,
|
||||
sendingStatus,
|
||||
setMid,
|
||||
setSearchType,
|
||||
setSearchKeyword,
|
||||
setStartDate,
|
||||
setEndDate,
|
||||
setSendMethod,
|
||||
setSendingStatus
|
||||
}: LinkPaymentPendingSendFilterProps) => {
|
||||
|
||||
|
||||
const [filterMid, setFilterMid] = useState<string>(mid);
|
||||
const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchType>(searchType);
|
||||
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
|
||||
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
|
||||
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
|
||||
const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod)
|
||||
const [filterSendingStatus, setFilterSendingStatus] = useState<LinkPaymentSendingStatus>(sendingStatus);
|
||||
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
|
||||
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
|
||||
|
||||
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
|
||||
|
||||
const variants = {
|
||||
hidden: { x: '100%' },
|
||||
visible: { x: '0%' },
|
||||
};
|
||||
|
||||
const onClickToClose = () => {
|
||||
setFilterOn(false);
|
||||
};
|
||||
|
||||
const setNewDate = (newDate: any) => {
|
||||
console.log(newDate)
|
||||
};
|
||||
|
||||
const onClickToSetFilter = () => {
|
||||
setMid(filterMid);
|
||||
setSearchType(filterSearchType);
|
||||
setSearchKeyword(filterSearchKeyword);
|
||||
setStartDate(filterStartDate);
|
||||
setEndDate(filterEndDate);
|
||||
setSendMethod(filterSendMethod);
|
||||
setSendingStatus(filterSendingStatus);
|
||||
};
|
||||
|
||||
let MidOptions = [
|
||||
{ name: 'nictest001m', value: 'nictest001m' },
|
||||
{ name: 'nictest002m', value: 'nictest002m' }
|
||||
];
|
||||
|
||||
let searchTypeOption = [
|
||||
{ name: '휴대폰번호', value: LinkPaymentSearchType.PHONE },
|
||||
{ name: '이메일', value: LinkPaymentSearchType.EMAIL },
|
||||
]
|
||||
|
||||
let sendMethodOption = [
|
||||
{ name: '전체', value: LinkPaymentSendMethod.ALL },
|
||||
{ name: 'SMS', value: LinkPaymentSendMethod.SMS },
|
||||
{ name: '이메일', value: LinkPaymentSendMethod.EMAIL },
|
||||
{ name: '카카오', value: LinkPaymentSendMethod.KAKAO },
|
||||
]
|
||||
|
||||
let sendingStatusOption = [
|
||||
{ name: '전체', value: LinkPaymentSendingStatus.ALL },
|
||||
{ name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST },
|
||||
{ name: '발송취소', value: LinkPaymentSendingStatus.SEND_CANCEL },
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
id="fullMenuModal"
|
||||
className="full-menu-modal"
|
||||
initial="hidden"
|
||||
animate={(filterOn) ? 'visible' : 'hidden'}
|
||||
variants={variants}
|
||||
transition={{ duration: 0.3 }}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div className="full-menu-container">
|
||||
<div className="full-menu-header">
|
||||
<div className="full-menu-title center">필터</div>
|
||||
<div className="full-menu-actions">
|
||||
<button
|
||||
id="closeFullMenu"
|
||||
className="full-menu-close"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_close.svg'}
|
||||
alt="닫기"
|
||||
onClick={() => onClickToClose()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="option-list pt-16">
|
||||
<FilterSelect
|
||||
title='가맹점'
|
||||
selectValue={mid}
|
||||
selectSetter={setFilterMid}
|
||||
selectOptions={MidOptions}
|
||||
></FilterSelect>
|
||||
|
||||
<FilterSelectInput
|
||||
title='휴대폰번호/이메일'
|
||||
selectValue={searchType}
|
||||
selectSetter={setFilterSearchType}
|
||||
selectOptions={searchTypeOption}
|
||||
inputValue={searchKeyword}
|
||||
inputSetter={setSearchKeyword}
|
||||
></FilterSelectInput>
|
||||
<FilterCalendar
|
||||
startDate={filterStartDate}
|
||||
endDate={filterEndDate}
|
||||
setStartDate={setFilterStartDate}
|
||||
setEndDate={setFilterEndDate}
|
||||
></FilterCalendar>
|
||||
|
||||
<FilterButtonGroups
|
||||
title='발송수단'
|
||||
activeValue={filterSendMethod}
|
||||
btnGroups={sendMethodOption}
|
||||
setter={setFilterSendMethod}
|
||||
></FilterButtonGroups>
|
||||
|
||||
<FilterButtonGroups
|
||||
title='진행상태'
|
||||
activeValue={filterSendingStatus}
|
||||
btnGroups={sendingStatusOption}
|
||||
setter={setFilterSendingStatus}
|
||||
></FilterButtonGroups>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToSetFilter()}
|
||||
>적용</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
import moment from 'moment';
|
||||
import { useEffect } from 'react';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ChangeEvent, useState } from 'react';
|
||||
import {
|
||||
LinkPaymentSearchType,
|
||||
LinkPaymentSendMethod,
|
||||
LinkPaymentShippingHistoryFilterProps,
|
||||
LinkPaymentTransactionStatus,
|
||||
ProcessResult
|
||||
} from "../../../model/types";
|
||||
import { FilterSelect } from '@/shared/ui/filter/select';
|
||||
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';
|
||||
|
||||
export const LinkPaymentShippingHistoryFilter = ({
|
||||
filterOn,
|
||||
setFilterOn,
|
||||
mid,
|
||||
searchType,
|
||||
searchKeyword,
|
||||
startDate,
|
||||
endDate,
|
||||
transactionStatus,
|
||||
processResult,
|
||||
sendMethod,
|
||||
setMid,
|
||||
setSearchType,
|
||||
setSearchKeyword,
|
||||
setStartDate,
|
||||
setEndDate,
|
||||
setTransactionStatus,
|
||||
setProcessResult,
|
||||
setSendMethod
|
||||
}: LinkPaymentShippingHistoryFilterProps) => {
|
||||
|
||||
|
||||
const [filterMid, setFilterMid] = useState<string>(mid);
|
||||
const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchType>(searchType);
|
||||
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
|
||||
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
|
||||
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
|
||||
const [filterTransactionStatus, setFilterTransactionStatus] = useState<LinkPaymentTransactionStatus>(transactionStatus)
|
||||
const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
|
||||
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 variants = {
|
||||
hidden: { x: '100%' },
|
||||
visible: { x: '0%' },
|
||||
};
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
let MidOptions = [
|
||||
{ name: 'nictest001m', value: 'nictest001m' },
|
||||
{ name: 'nictest002m', value: 'nictest002m' }
|
||||
];
|
||||
|
||||
let searchTypeOption = [
|
||||
{ name: '휴대폰번호', value: LinkPaymentSearchType.PHONE },
|
||||
{ name: '이메일', value: LinkPaymentSearchType.EMAIL },
|
||||
]
|
||||
|
||||
let transactionStatusOption = [
|
||||
{ name: '전체', value: LinkPaymentTransactionStatus.ALL },
|
||||
{ name: '미완료/활성화', value: LinkPaymentTransactionStatus.ACTIVATE },
|
||||
{ name: '입금요청', value: LinkPaymentTransactionStatus.DEPOSIT_REQUEST },
|
||||
{ name: '결제완료', value: LinkPaymentTransactionStatus.TRANSACTION_COMPLETE },
|
||||
{ name: '결제실패', value: LinkPaymentTransactionStatus.TRANSACTION_FAIL },
|
||||
{ name: '결제중단/비활성화', value: LinkPaymentTransactionStatus.INACTIVE },
|
||||
]
|
||||
|
||||
let processResultOption = [
|
||||
{ name: '전체', value: ProcessResult.ALL },
|
||||
{ name: '성공', value: ProcessResult.SUCCESS },
|
||||
{ name: '실패', value: ProcessResult.FAILURE },
|
||||
]
|
||||
|
||||
let sendMethodOption = [
|
||||
{ name: '전체', value: LinkPaymentSendMethod.ALL },
|
||||
{ name: 'SMS', value: LinkPaymentSendMethod.SMS },
|
||||
{ name: '이메일', value: LinkPaymentSendMethod.EMAIL },
|
||||
{ name: '카카오', value: LinkPaymentSendMethod.KAKAO },
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
id="fullMenuModal"
|
||||
className="full-menu-modal"
|
||||
initial="hidden"
|
||||
animate={(filterOn) ? 'visible' : 'hidden'}
|
||||
variants={variants}
|
||||
transition={{ duration: 0.3 }}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div className="full-menu-container">
|
||||
<div className="full-menu-header">
|
||||
<div className="full-menu-title center">필터</div>
|
||||
<div className="full-menu-actions">
|
||||
<button
|
||||
id="closeFullMenu"
|
||||
className="full-menu-close"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_close.svg'}
|
||||
alt="닫기"
|
||||
onClick={() => onClickToClose()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="option-list pt-16">
|
||||
<FilterSelect
|
||||
title='가맹점'
|
||||
selectValue={filterMid}
|
||||
selectSetter={setFilterMid}
|
||||
selectOptions={MidOptions}
|
||||
></FilterSelect>
|
||||
|
||||
<FilterSelectInput
|
||||
title='휴대폰번호/이메일'
|
||||
selectValue={filterSearchType}
|
||||
selectSetter={setFilterSearchType}
|
||||
selectOptions={searchTypeOption}
|
||||
inputValue={searchKeyword}
|
||||
inputSetter={setSearchKeyword}
|
||||
></FilterSelectInput>
|
||||
<FilterCalendar
|
||||
startDate={filterStartDate}
|
||||
endDate={filterEndDate}
|
||||
setStartDate={setFilterStartDate}
|
||||
setEndDate={setFilterEndDate}
|
||||
></FilterCalendar>
|
||||
|
||||
<FilterButtonGroups
|
||||
title='거래상태'
|
||||
activeValue={filterTransactionStatus}
|
||||
btnGroups={transactionStatusOption}
|
||||
setter={setFilterTransactionStatus}
|
||||
></FilterButtonGroups>
|
||||
|
||||
<FilterButtonGroups
|
||||
title='전송결과'
|
||||
activeValue={filterProcessResult}
|
||||
btnGroups={processResultOption}
|
||||
setter={setFilterProcessResult}
|
||||
></FilterButtonGroups>
|
||||
|
||||
<FilterButtonGroups
|
||||
title='발송수단'
|
||||
activeValue={filterSendMethod}
|
||||
btnGroups={sendMethodOption}
|
||||
setter={setFilterSendMethod}
|
||||
></FilterButtonGroups>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToSetFilter()}
|
||||
>적용</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,193 +0,0 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import {IMAGE_ROOT} from "@/shared/constants/common";
|
||||
import {LinkPaymentFilterProps} from "@/entities/additional-service/model/types";
|
||||
|
||||
export const LinkPaymentFilter = ({
|
||||
filterOn,
|
||||
setFilterOn
|
||||
}: LinkPaymentFilterProps) => {
|
||||
const variants = {
|
||||
hidden:{ x: '100%'},
|
||||
visible: {x: '0%'}
|
||||
};
|
||||
|
||||
const onClickToClose = () => {
|
||||
setFilterOn(false);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
id="fullMenuModal"
|
||||
className="full-menu-modal"
|
||||
initial="hidden"
|
||||
animate={ (filterOn)? 'visible': 'hidden' }
|
||||
variants={ variants }
|
||||
transition={{ duration: 0.3 }}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div className="full-menu-container">
|
||||
<div className="full-menu-header">
|
||||
<div className="full-menu-title center">필터</div>
|
||||
<div className="full-menu-actions">
|
||||
<button
|
||||
id="closeFullMenu"
|
||||
className="full-menu-close"
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_close.svg' }
|
||||
alt="닫기"
|
||||
onClick={ () => onClickToClose() }
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="option-list pb-120">
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">가맹점</div>
|
||||
<div className="opt-controls">
|
||||
<select className="flex-1">
|
||||
<option>nictest001m</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">휴대폰번호, 이메일</div>
|
||||
<div className="opt-controls">
|
||||
<select className="flex-1">
|
||||
<option>휴대폰번호</option>
|
||||
<option>이메일</option>
|
||||
</select>
|
||||
<input
|
||||
type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">결제수단</div>
|
||||
<div className="opt-controls">
|
||||
<select className="flex-1">
|
||||
<option>nictext001m</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opt-field mt_top">
|
||||
<div className="opt-label">조회기간</div>
|
||||
<div className="opt-controls col below h36">
|
||||
<div className="chip-row">
|
||||
<span className="keyword-tag">당일</span>
|
||||
<span className="keyword-tag">일주일</span>
|
||||
<span className="keyword-tag">1개월</span>
|
||||
<span className="keyword-tag active">직접입력</span>
|
||||
</div>
|
||||
|
||||
<div className="range-row">
|
||||
<div className="input-wrapper date">
|
||||
<input
|
||||
className="date-input"
|
||||
type="text"
|
||||
placeholder="날짜 선택"
|
||||
value="2025.06.08"
|
||||
readOnly={ true }
|
||||
/>
|
||||
<button
|
||||
className="date-btn"
|
||||
type="button"
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date.svg' }
|
||||
alt="날짜 선택"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<span className="beetween">~</span>
|
||||
<div className="input-wrapper date">
|
||||
<input
|
||||
className="date-input"
|
||||
type="text"
|
||||
placeholder="날짜 선택"
|
||||
value="2025.06.08"
|
||||
readOnly={ true }
|
||||
/>
|
||||
<button
|
||||
className="date-btn"
|
||||
type="button"
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date.svg' }
|
||||
alt="날짜 선택"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">거래 구분</div>
|
||||
<div className="opt-controls col below h36">
|
||||
<div className="chip-row">
|
||||
<span className="keyword-tag flex-1 active">전체</span>
|
||||
<span className="keyword-tag flex-1">미완료/ <br/> 활성화</span>
|
||||
<span className="keyword-tag flex-1">입금요청</span>
|
||||
<span className="keyword-tag flex-1">결제완료</span>
|
||||
<span
|
||||
className="keyword-tag"
|
||||
style={{ visibility: 'hidden' }}
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="opt-controls col below h50 mt-10">
|
||||
<div className="chip-row">
|
||||
<span className="keyword-tag flex-1">결제실패</span>
|
||||
<span className="keyword-tag flex-1">결제중단/ <br/> 비활성화</span>
|
||||
<span
|
||||
className="keyword-tag"
|
||||
style={{ visibility: 'hidden' }}
|
||||
></span>
|
||||
<span
|
||||
className="keyword-tag"
|
||||
style={{ visibility: 'hidden' }}
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">전송결과</div>
|
||||
<div className="opt-controls col below h36">
|
||||
<div className="chip-row">
|
||||
<span className="keyword-tag flex-1 active">전체</span>
|
||||
<span className="keyword-tag flex-1">성공</span>
|
||||
<span className="keyword-tag flex-1">실패</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">발송수단</div>
|
||||
<div className="opt-controls col below h36">
|
||||
<div className="chip-row">
|
||||
<span className="keyword-tag flex-1 active">전체</span>
|
||||
<span className="keyword-tag flex-1">SMS</span>
|
||||
<span className="keyword-tag flex-1">이메일</span>
|
||||
<span className="keyword-tag flex-1">카카오</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="apply-row">
|
||||
<button className="btn-50 btn-blue flex-1">적용</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,13 +1,24 @@
|
||||
import moment from 'moment';
|
||||
import { IMAGE_ROOT } from "@/shared/constants/common";
|
||||
import { useState, useEffect } from "react";
|
||||
import { LinkPaymentFilter } from "./link-payment-filter";
|
||||
import { LinkPaymentPendingSendFilter } from "./filter/link-payment-pending-send-filter";
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { PATHS } from "@/shared/constants/paths";
|
||||
import { LinkPaymentPendingList } from "./link-payment-pending-list";
|
||||
import { LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod } from "../../model/types";
|
||||
|
||||
export const LinkPaymentPendingSendWrap = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
const [filterOn, setFilterOn] = useState<boolean>(false);
|
||||
const [mid, setMid] = useState<string>('nictest001m');
|
||||
const [searchType, setSearchType] = useState<LinkPaymentSearchType>(LinkPaymentSearchType.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 [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
|
||||
const [sendingStatus, setSendingStatus] = useState<LinkPaymentSendingStatus>(LinkPaymentSendingStatus.ALL);
|
||||
|
||||
const [listItems, setListItems] = useState({});
|
||||
|
||||
const onClickToOpenFilter = () => {
|
||||
@@ -120,10 +131,24 @@ export const LinkPaymentPendingSendWrap = () => {
|
||||
onClick={() => onClickToNavigate()}
|
||||
>결제 신청</button>
|
||||
</div>
|
||||
<LinkPaymentFilter
|
||||
<LinkPaymentPendingSendFilter
|
||||
filterOn={filterOn}
|
||||
setFilterOn={setFilterOn}
|
||||
></LinkPaymentFilter>
|
||||
mid={mid}
|
||||
searchType={searchType}
|
||||
searchKeyword={searchKeyword}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
sendMethod={sendMethod}
|
||||
sendingStatus={sendingStatus}
|
||||
setMid={setMid}
|
||||
setSearchType={setSearchType}
|
||||
setSearchKeyword={setSearchKeyword}
|
||||
setStartDate={setStartDate}
|
||||
setEndDate={setEndDate}
|
||||
setSendMethod={setSendMethod}
|
||||
setSendingStatus={setSendingStatus}
|
||||
></LinkPaymentPendingSendFilter>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,18 +1,28 @@
|
||||
import moment from 'moment';
|
||||
import { IMAGE_ROOT } from "@/shared/constants/common";
|
||||
import { useState, useEffect } from "react";
|
||||
import { LinkPaymentFilter } from "./link-payment-filter";
|
||||
import { LinkPaymentShippingHistoryFilter } from "./filter/link-payment-shipping-history-filter";
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { PATHS } from "@/shared/constants/paths";
|
||||
import { LinkPaymentList } from "./link-payment-list";
|
||||
import { SortOptionsBox } from "./sort-options-box";
|
||||
import { SortByKeys } from "../../model/types";
|
||||
import { LinkPaymentSendMethod, LinkPaymentTransactionStatus, ProcessResult, SortByKeys } from "../../model/types";
|
||||
import { LinkPaymentSearchType, } from "../../model/types";
|
||||
|
||||
|
||||
export const LinkPaymentDispatchListWrap = () => {
|
||||
export const LinkPaymentShippingHistoryWrap = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const [filterOn, setFilterOn] = useState<boolean>(false);
|
||||
const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
|
||||
const [listItems, setListItems] = useState({});
|
||||
const [mid, setMid] = useState<string>('nictest001m');
|
||||
const [searchType, setSearchType] = useState<LinkPaymentSearchType>(LinkPaymentSearchType.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<LinkPaymentTransactionStatus>(LinkPaymentTransactionStatus.ALL)
|
||||
const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL)
|
||||
const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL)
|
||||
|
||||
const onClickToOpenFilter = () => {
|
||||
setFilterOn(!filterOn);
|
||||
@@ -134,10 +144,26 @@ export const LinkPaymentDispatchListWrap = () => {
|
||||
onClick={() => onClickToNavigate()}
|
||||
>결제 신청</button>
|
||||
</div>
|
||||
<LinkPaymentFilter
|
||||
<LinkPaymentShippingHistoryFilter
|
||||
filterOn={filterOn}
|
||||
setFilterOn={setFilterOn}
|
||||
></LinkPaymentFilter>
|
||||
mid={mid}
|
||||
searchType={searchType}
|
||||
searchKeyword={searchKeyword}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
transactionStatus={transactionStatus}
|
||||
processResult={processResult}
|
||||
sendMethod={sendMethod}
|
||||
setMid={setMid}
|
||||
setSearchType={setSearchType}
|
||||
setSearchKeyword={setSearchKeyword}
|
||||
setStartDate={setStartDate}
|
||||
setEndDate={setEndDate}
|
||||
setTransactionStatus={setTransactionStatus}
|
||||
setProcessResult={setProcessResult}
|
||||
setSendMethod={setSendMethod}
|
||||
></LinkPaymentShippingHistoryFilter>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -12,8 +12,8 @@ export const LinkPaymentTab = ({
|
||||
|
||||
const onClickToNavigation = (tab: LinkPaymentTabKeys) => {
|
||||
if(activeTab !== tab){
|
||||
if(tab === LinkPaymentTabKeys.DispatchList){
|
||||
navigate(PATHS.additionalService.linkPayment.dispatchList);
|
||||
if(tab === LinkPaymentTabKeys.ShippingHistory){
|
||||
navigate(PATHS.additionalService.linkPayment.shippingHistory);
|
||||
}
|
||||
else if(tab === LinkPaymentTabKeys.PendingSend){
|
||||
navigate(PATHS.additionalService.linkPayment.pendingSend);
|
||||
@@ -25,8 +25,8 @@ export const LinkPaymentTab = ({
|
||||
<>
|
||||
<div className="subTab">
|
||||
<button
|
||||
className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.DispatchList)? 'active': ''}` }
|
||||
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.DispatchList) }
|
||||
className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.ShippingHistory)? 'active': ''}` }
|
||||
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.ShippingHistory) }
|
||||
>발송내역</button>
|
||||
<button
|
||||
className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.PendingSend)? 'active': ''}` }
|
||||
|
||||
@@ -14,6 +14,10 @@ export enum FilterDateOptions {
|
||||
Month = 'Month',
|
||||
Input = 'Input'
|
||||
};
|
||||
export enum CalendarType {
|
||||
Start = 'Start',
|
||||
End = 'End'
|
||||
};
|
||||
export interface DefaultRequestPagination {
|
||||
cursor: string;
|
||||
size: number;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
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/filter-calendar';
|
||||
import { FilterCalendar } from '@/shared/ui/filter/calendar';
|
||||
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
|
||||
import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
|
||||
import {
|
||||
@@ -74,6 +73,8 @@ export const BillingFilter = ({
|
||||
setRequestStatus(filterRequestStatus);
|
||||
setProcessResult(filterProcessResult);
|
||||
setPaymentMethod(filterPaymentMethod);
|
||||
setMinAmount(filterMinAmount);
|
||||
setMaxAmount(filterMaxAmount);
|
||||
onClickToClose();
|
||||
};
|
||||
let MidOptions = [
|
||||
@@ -140,17 +141,17 @@ export const BillingFilter = ({
|
||||
<div className="option-list pt-16">
|
||||
<FilterSelect
|
||||
title='가맹점'
|
||||
selectValue={ mid }
|
||||
selectSetter={ setMid }
|
||||
selectValue={ filterMid }
|
||||
selectSetter={ setFilterMid }
|
||||
selectOptions={ MidOptions }
|
||||
></FilterSelect>
|
||||
<FilterSelectInput
|
||||
title='주문번호/ID'
|
||||
selectValue={ searchType }
|
||||
selectSetter={ setSearchType }
|
||||
selectValue={ filterSearchType }
|
||||
selectSetter={ setFilterSearchType }
|
||||
selectOptions={ SearchTypeOptions }
|
||||
inputValue={ searchKeyword }
|
||||
inputSetter={ setSearchKeyword }
|
||||
inputSetter={ setFilterSearchKeyword }
|
||||
></FilterSelectInput>
|
||||
<FilterCalendar
|
||||
title='조회기간'
|
||||
|
||||
@@ -1,11 +1,51 @@
|
||||
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<string>(mid);
|
||||
const [filterSearchType, setFilterSearchType] = useState<EscrowSearchType>(searchType);
|
||||
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
|
||||
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
|
||||
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
|
||||
const [filterDeliveryStatus, setFilterDeliveryStatus] = useState<EscrowDeliveryStatus>(deliveryStatus);
|
||||
const [filterSettlementStatus, setFilterSettlementStatus] = useState<EscrowSettlementStatus>(settlementStatus);
|
||||
const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
|
||||
const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
|
||||
|
||||
const variants = {
|
||||
hidden: { x: '100%' },
|
||||
@@ -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 (
|
||||
<>
|
||||
<motion.div
|
||||
@@ -46,139 +132,56 @@ export const EscrowFilter = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="option-list pb-120">
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">가맹점</div>
|
||||
<div className="opt-controls">
|
||||
<select className="flex-1">
|
||||
<option>nictest001m</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="option-list pt-16">
|
||||
<FilterSelect
|
||||
title='가맹점'
|
||||
selectValue={ filterMid }
|
||||
selectSetter={ setMid }
|
||||
selectOptions={ MidOptions }
|
||||
></FilterSelect>
|
||||
<FilterSelectInput
|
||||
title='주문번호/ID'
|
||||
selectValue={ filterSearchType }
|
||||
selectSetter={ setSearchType }
|
||||
selectOptions={ SearchTypeOptions }
|
||||
inputValue={ searchKeyword }
|
||||
inputSetter={ setSearchKeyword }
|
||||
></FilterSelectInput>
|
||||
<FilterCalendar
|
||||
title='조회기간'
|
||||
startDate={ filterStartDate }
|
||||
endDate={ filterEndDate }
|
||||
setStartDate={ setFilterStartDate }
|
||||
setEndDate={ setFilterEndDate }
|
||||
></FilterCalendar>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">주문번호/ID</div>
|
||||
<div className="opt-controls">
|
||||
<select className="w-110">
|
||||
<option>주문번호</option>
|
||||
<option>ID</option>
|
||||
</select>
|
||||
<input
|
||||
className="flex-1"
|
||||
type="text"
|
||||
placeholder=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<FilterButtonGroups
|
||||
title='배송상태'
|
||||
activeValue={ filterDeliveryStatus }
|
||||
btnGroups={ deliveryStatusBtnGroup }
|
||||
setter={ setFilterDeliveryStatus }
|
||||
></FilterButtonGroups>
|
||||
<FilterButtonGroups
|
||||
title='결제수단'
|
||||
activeValue={ filterSettlementStatus }
|
||||
btnGroups={ settlementStatusBtnGroup }
|
||||
setter={ setFilterSettlementStatus }
|
||||
></FilterButtonGroups>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">조회기간</div>
|
||||
<div className="opt-controls col below h36">
|
||||
<div className="chip-row">
|
||||
<span className="keyword-tag active">당일</span>
|
||||
<span className="keyword-tag">일주일</span>
|
||||
<span className="keyword-tag">1개월</span>
|
||||
<span className="keyword-tag">직접입력</span>
|
||||
</div>
|
||||
<div className="range-row">
|
||||
<div className="input-wrapper date">
|
||||
<input
|
||||
className="date-input"
|
||||
type="text"
|
||||
placeholder="날짜 선택"
|
||||
value="2025.06.08"
|
||||
readOnly={ true }
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="date-btn"
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date.svg' }
|
||||
alt="날짜 선택"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<span className="beetween">~</span>
|
||||
<div className="input-wrapper date">
|
||||
<input
|
||||
className="date-input"
|
||||
type="text"
|
||||
placeholder="날짜 선택"
|
||||
value="2025.06.08"
|
||||
readOnly={ true }
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="date-btn"
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date.svg' }
|
||||
alt="날짜 선택"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FilterRangeAmount
|
||||
title='거래금액'
|
||||
minAmount={ filterMinAmount }
|
||||
maxAmount={ filterMaxAmount }
|
||||
setMinAmount={ setFilterMinAmount }
|
||||
setMaxAmount={ setFilterMaxAmount }
|
||||
></FilterRangeAmount>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">요청상태</div>
|
||||
<div className="opt-controls col below h36">
|
||||
<div className="chip-row">
|
||||
<span className="keyword-tag active">전체</span>
|
||||
<span className="keyword-tag">진행중</span>
|
||||
<span className="keyword-tag">성공</span>
|
||||
<span className="keyword-tag">요청취소</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">저리결과</div>
|
||||
<div className="opt-controls col below h36">
|
||||
<div className="chip-row">
|
||||
<span className="keyword-tag active">전체</span>
|
||||
<span className="keyword-tag">성공</span>
|
||||
<span className="keyword-tag">실패</span>
|
||||
<span
|
||||
className="keyword-tag"
|
||||
style={{ visibility: 'hidden' }}
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">결제수단</div>
|
||||
<div className="opt-controls">
|
||||
<select className="flex-1">
|
||||
<option>전체</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="opt-field">
|
||||
<div className="opt-label">거래금액</div>
|
||||
<div className="opt-controls">
|
||||
<div className="input-wrapper ">
|
||||
<input
|
||||
type="text"
|
||||
placeholder=""
|
||||
/>
|
||||
</div>
|
||||
<span> ~ </span>
|
||||
<div className="input-wrapper date">
|
||||
<input
|
||||
type="text"
|
||||
placeholder=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button className="btn-50 btn-blue flex-1">적용</button>
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ () => onClickToSetFilter() }
|
||||
>적용</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
@@ -6,7 +6,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
|
||||
import { AccountHolderSearchFilter } from '@/entities/additional-service/ui/account-holder-search/account-holder-search-filter';
|
||||
import { AccountHolderSearchProcessResult, AccountHolderSearchType } from '@/entities/additional-service/model/types';
|
||||
import { ProcessResult, AccountHolderSearchType } from '@/entities/additional-service/model/types';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
@@ -24,7 +24,7 @@ export const AccountHolderSearchPage = () => {
|
||||
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [bank, setBank] = useState<string>('');
|
||||
const [processResult, setProcessResult] = useState<AccountHolderSearchProcessResult>(AccountHolderSearchProcessResult.ALL);
|
||||
const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL);
|
||||
|
||||
useSetHeaderTitle('계좌성명조회');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
|
||||
@@ -9,7 +9,7 @@ import { KeyInPaymentPage } from './key-in-payment/key-in-payment-page';
|
||||
import { SmsPaymentNotificationPage } from './sms-payment-notification/sms-payment-notification-page';
|
||||
import { AccountHolderSearchPage } from './account-holder-search/account-holder-search-page';
|
||||
import { AccountHolderAuthPage } from './account-holder-auth/account-holder-auth-page';
|
||||
import { LinkPaymentDispatchListPage } from './link-payment/link-payment-dispatch-list-page';
|
||||
import { LinkPaymentShippingHistoryPage } from './link-payment/link-payment-shipping-history-page';
|
||||
import { LinkPaymentPendingSendPage } from './link-payment/link-payment-pending-send-page';
|
||||
import { KakaoPaymentNotificationListPage } from './kakao-payment-notification/list-page';
|
||||
import { KakaoPaymentNotificationSettingPage } from './kakao-payment-notification/setting-page';
|
||||
@@ -58,7 +58,7 @@ export const AdditionalServicePages = () => {
|
||||
</Route>
|
||||
<Route path={ROUTE_NAMES.additionalService.accountHolderAuth} element={<AccountHolderAuthPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.linkPayment.base}>
|
||||
<Route path={ROUTE_NAMES.additionalService.linkPayment.dispatchList} element={<LinkPaymentDispatchListPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.linkPayment.shippingHistory} element={<LinkPaymentShippingHistoryPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.linkPayment.pendingSend} element={<LinkPaymentPendingSendPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.linkPayment.request} element={<LinkPaymentApplyPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.linkPayment.requestConfirm} element={<LinkPaymentApplyConfirmPage />} />
|
||||
|
||||
@@ -49,7 +49,7 @@ export const IntroPage = () => {
|
||||
},
|
||||
{
|
||||
className: 'list-wrap02', serviceName: '링크 결제', serviceDesc: '결제 링크 전송만으로 어디서든 결제 가능 서비스',
|
||||
icon: IMAGE_ROOT + '/icon_ing07.svg', path: PATHS.additionalService.linkPayment.dispatchList
|
||||
icon: IMAGE_ROOT + '/icon_ing07.svg', path: PATHS.additionalService.linkPayment.shippingHistory
|
||||
},
|
||||
{
|
||||
className: 'list-wrap02', serviceName: '자금이체', serviceDesc: '예치금으로 즉시 송금, 파일 등록만으로 다중 송금 가능',
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState } from 'react';
|
||||
import moment from 'moment';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
@@ -8,24 +9,84 @@ import {
|
||||
useSetFooterMode
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useExtensionKeyinDownloadExcelMutation } from '@/entities/additional-service/api/use-extension-keyin-download-excel-mutation';
|
||||
import { KeyInPaymentFilter } from '@/entities/additional-service/ui/key-in-payment/key-in-payment-filter';
|
||||
import { KeyInPaymentTransactionStatus, SortByKeys } from '@/entities/additional-service/model/types';
|
||||
import { SortOptionsBox } from '@/entities/additional-service/ui/link-payment/sort-options-box';
|
||||
import { useExtensionKeyinListMutation } from '@/entities/additional-service/api/use-extension-keyin-list-mutation';
|
||||
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
|
||||
|
||||
const requestStatusBtnGroup = [
|
||||
{ name: '전체', value: KeyInPaymentTransactionStatus.ALL },
|
||||
{ name: '승인', value: KeyInPaymentTransactionStatus.APPROVE },
|
||||
{ name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL },
|
||||
{ name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL }
|
||||
];
|
||||
|
||||
export const KeyInPaymentPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
|
||||
const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
|
||||
const [listItems, setListItems] = useState({});
|
||||
const [filterOn, setFilterOn] = useState<boolean>(false);
|
||||
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
|
||||
const [mid, setMid] = useState<string>('nictest001m');
|
||||
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [transactionStatus, setTransactionStatus] = useState<KeyInPaymentTransactionStatus>(KeyInPaymentTransactionStatus.ALL)
|
||||
const [minAmount, setMinAmount] = useState<number | string>();
|
||||
const [maxAmount, setMaxAmount] = useState<number | string>();
|
||||
|
||||
|
||||
useSetHeaderTitle('KEY-IN 결제');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(false);
|
||||
|
||||
const { mutateAsync: keyinList } = useExtensionKeyinListMutation();
|
||||
const { mutateAsync: downloadExcel } = useExtensionKeyinDownloadExcelMutation();
|
||||
|
||||
const onClickToOpenFilter = () => {
|
||||
setFilterOn(!filterOn);
|
||||
};
|
||||
|
||||
const onClickToDownloadExcel = () => {
|
||||
// downloadExcel({
|
||||
// mid,
|
||||
// fromDate: '',
|
||||
// toDate: '',
|
||||
// paymentStatus: '',
|
||||
// minAmount: 0,
|
||||
// maxAmount: 0
|
||||
// }).then((rs) => {
|
||||
|
||||
// });
|
||||
};
|
||||
|
||||
const onClickToSort = (sort: SortByKeys) => {
|
||||
setSortBy(sort);
|
||||
// TODO : callList 구현
|
||||
};
|
||||
|
||||
const onClickToTransactionStatus = (val: KeyInPaymentTransactionStatus) => {
|
||||
setTransactionStatus(val);
|
||||
// TODO : callList 구현
|
||||
};
|
||||
|
||||
const onClickToNavigation = () => {
|
||||
navigate(PATHS.additionalService.keyInPayment.request)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// TODO : callList();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<section className="summary-section no-border">
|
||||
<section className="summary-section">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
@@ -41,6 +102,7 @@ export const KeyInPaymentPage = () => {
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_setting.svg'}
|
||||
alt="검색옵션"
|
||||
onClick={() => onClickToOpenFilter()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
@@ -51,26 +113,31 @@ export const KeyInPaymentPage = () => {
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||
alt="다운로드"
|
||||
onClick={() => onClickToDownloadExcel()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="filter-section">
|
||||
<div className="sort-options">
|
||||
<button className="sort-btn active">최신순</button>
|
||||
<span className="sort-divider">|</span>
|
||||
<button className="sort-btn">고액순</button>
|
||||
</div>
|
||||
<div className="filter-section">
|
||||
<SortOptionsBox
|
||||
sortBy={sortBy}
|
||||
onClickToSort={onClickToSort}
|
||||
></SortOptionsBox>
|
||||
<div className="excrow">
|
||||
<div className="full-menu-keywords no-padding">
|
||||
<span className="keyword-tag active">전체</span>
|
||||
<span className="keyword-tag">승인</span>
|
||||
<span className="keyword-tag">전취소</span>
|
||||
<span className="keyword-tag">후취소</span>
|
||||
{
|
||||
requestStatusBtnGroup.map((value, index) => (
|
||||
<span
|
||||
key={`key-service-code=${index}`}
|
||||
className={`keyword-tag ${(transactionStatus === value.value) ? 'active' : ''}`}
|
||||
onClick={() => onClickToTransactionStatus(value.value)}
|
||||
>{value.name}</span>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="transaction-list">
|
||||
<div className="date-group">
|
||||
@@ -148,6 +215,22 @@ export const KeyInPaymentPage = () => {
|
||||
onClick={() => onClickToNavigation()}
|
||||
>결제 신청</button>
|
||||
</div>
|
||||
<KeyInPaymentFilter
|
||||
filterOn={filterOn}
|
||||
setFilterOn={setFilterOn}
|
||||
mid={mid}
|
||||
startDate={startDate}
|
||||
endDate={endDate}
|
||||
transactionStatus={transactionStatus}
|
||||
minAmount={minAmount}
|
||||
maxAmount={maxAmount}
|
||||
setMid={setMid}
|
||||
setStartDate={setStartDate}
|
||||
setEndDate={setEndDate}
|
||||
setTransactionStatus={setTransactionStatus}
|
||||
setMinAmount={setMinAmount}
|
||||
setMaxAmount={setMaxAmount}
|
||||
></KeyInPaymentFilter>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -31,14 +31,14 @@ export const LinkPaymentDetailPage = () => {
|
||||
useSetHeaderTitle('링크결제 상세');
|
||||
useSetHeaderType(HeaderType.RightClose);
|
||||
useSetOnBack(() => {
|
||||
navigate(PATHS.additionalService.linkPayment.dispatchList);
|
||||
navigate(PATHS.additionalService.linkPayment.shippingHistory);
|
||||
});
|
||||
useSetFooterMode(false);
|
||||
|
||||
const onClickToNavigate = (path: string) => {
|
||||
let timeout = setTimeout(() => {
|
||||
clearTimeout(timeout);
|
||||
navigate(PATHS.additionalService.linkPayment.dispatchList, {
|
||||
navigate(PATHS.additionalService.linkPayment.shippingHistory, {
|
||||
});
|
||||
}, 10)
|
||||
};
|
||||
@@ -60,7 +60,7 @@ export const LinkPaymentDetailPage = () => {
|
||||
afterLeave={ unmount }
|
||||
open={ isOpen }
|
||||
onClose={ close }
|
||||
onConfirmClick={ () => onClickToNavigate(PATHS.additionalService.linkPayment.dispatchList) }
|
||||
onConfirmClick={ () => onClickToNavigate(PATHS.additionalService.linkPayment.shippingHistory) }
|
||||
message={ msg }
|
||||
buttonLabel={['취소', '확인']}
|
||||
/>
|
||||
|
||||
@@ -12,7 +12,6 @@ import {
|
||||
useSetFooterMode,
|
||||
useSetOnBack
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { LinkPaymentFilter } from '@/entities/additional-service/ui/link-payment/link-payment-filter';
|
||||
|
||||
/**
|
||||
* 발송대기 탭 화면
|
||||
|
||||
@@ -5,7 +5,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment/link-payment-tab';
|
||||
import { LinkPaymentTabKeys } from '@/entities/additional-service/model/types';
|
||||
import { LinkPaymentDispatchListWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap';
|
||||
import { LinkPaymentShippingHistoryWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
@@ -17,10 +17,10 @@ import {
|
||||
* 발송내역 탭 화면
|
||||
*/
|
||||
|
||||
export const LinkPaymentDispatchListPage = () => {
|
||||
export const LinkPaymentShippingHistoryPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.DispatchList)
|
||||
const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.ShippingHistory)
|
||||
|
||||
useSetHeaderTitle('링크결제')
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
@@ -35,7 +35,7 @@ export const LinkPaymentDispatchListPage = () => {
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane pt-46 active">
|
||||
<LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
|
||||
<LinkPaymentDispatchListWrap></LinkPaymentDispatchListWrap>
|
||||
<LinkPaymentShippingHistoryWrap></LinkPaymentShippingHistoryWrap>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -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<string>('all');
|
||||
const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
|
||||
const [listItems, setListItems] = useState({});
|
||||
const [filterOn, setFilterOn] = useState<boolean>(false);
|
||||
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
|
||||
const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
|
||||
const [mid, setMid] = useState<string>('nictest001m');
|
||||
const [searchType, setSearchType] = useState<EscrowSearchType>(EscrowSearchType.ALL);
|
||||
const [searchKeyword, setSearchKeyword] = useState<string>('');
|
||||
//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>(EscrowDeliveryStatus.ALL);
|
||||
const [settlementStatus, setSettlementStatus] = useState<EscrowSettlementStatus>(EscrowSettlementStatus.ALL);
|
||||
const [minAmount, setMinAmount] = useState<number | string>();
|
||||
const [maxAmount, setMaxAmount] = useState<number | string>();
|
||||
|
||||
useSetHeaderTitle('에스크로');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
@@ -51,23 +53,29 @@ 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) => {
|
||||
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 = () => {
|
||||
<div className="excrow">
|
||||
<div className="full-menu-keywords no-padding">
|
||||
{
|
||||
serviceCodes.map((value, index) => (
|
||||
deliveryStatusBtnGroup.map((value, index) => (
|
||||
<span
|
||||
key={ `key-service-code=${ index }` }
|
||||
className={ `keyword-tag ${(selectedServiceCode === value.key)? 'active': ''}` }
|
||||
onClick={ () => onClickToServiceCode(value.key) }
|
||||
className={ `keyword-tag ${(deliveryStatus === value.value)? 'active': ''}` }
|
||||
onClick={ () => onClickToDeliveryStatus(value.value) }
|
||||
>{ value.name }</span>
|
||||
))
|
||||
}
|
||||
|
||||
@@ -191,9 +191,9 @@ export const PATHS: RouteNamesType = {
|
||||
accountHolderAuth: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.accountHolderAuth),
|
||||
linkPayment: {
|
||||
base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`),
|
||||
dispatchList: generatePath(
|
||||
shippingHistory: generatePath(
|
||||
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`,
|
||||
ROUTE_NAMES.additionalService.linkPayment.dispatchList,
|
||||
ROUTE_NAMES.additionalService.linkPayment.shippingHistory,
|
||||
),
|
||||
pendingSend: generatePath(
|
||||
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`,
|
||||
|
||||
@@ -92,7 +92,7 @@ export const ROUTE_NAMES = {
|
||||
accountHolderAuth: 'account-holder-auth',
|
||||
linkPayment: {
|
||||
base: '/link-payment/*',
|
||||
dispatchList: 'dispatch-list',
|
||||
shippingHistory: 'shipping-history',
|
||||
pendingSend: 'pending-send',
|
||||
request: 'request',
|
||||
requestConfirm: 'request-confirm',
|
||||
|
||||
@@ -1,40 +1,101 @@
|
||||
import moment from 'moment';
|
||||
import moment, { locale } from 'moment';
|
||||
import styled from "styled-components";
|
||||
import { useState } from 'react';
|
||||
import Calendar from 'react-calendar';
|
||||
import 'react-calendar/dist/Calendar.css';
|
||||
import { useEffect } from 'react';
|
||||
import { CalendarType } from '@/entities/common/model/types';
|
||||
|
||||
interface NiceCalendarProps {
|
||||
calendarOpen: boolean;
|
||||
setCalendarOpen: (calendarOpen: boolean) => void;
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
calendarType: CalendarType;
|
||||
setNewDate: (date: string) => void;
|
||||
};
|
||||
|
||||
const NiceCalendar = ({
|
||||
calendarOpen,
|
||||
setCalendarOpen,
|
||||
startDate,
|
||||
endDate,
|
||||
calendarType,
|
||||
setNewDate
|
||||
}: NiceCalendarProps) => {
|
||||
const [calendarDate, setCalendarDate] = useState<string>(moment().format('YYYY-MM-DD'));
|
||||
const [isOpen, setIsOpen] = useState<boolean>(false);
|
||||
const [valueDate, setValueDate] = useState<string>();
|
||||
const [minDate, setMinDate] = useState<Date | undefined>();
|
||||
const [maxDate, setMaxDate] = useState<Date | undefined>();
|
||||
const onchangeToDate = (selectedDate: any) => {
|
||||
setNewDate(moment(selectedDate).format('YYYY-MM-DD'));
|
||||
setIsOpen(false);
|
||||
setCalendarOpen(false);
|
||||
};
|
||||
|
||||
const onClickToClose = () => {
|
||||
setCalendarOpen(false);
|
||||
};
|
||||
const setMinMaxValueDate = () => {
|
||||
if(calendarType === CalendarType.Start){
|
||||
setMinDate(undefined);
|
||||
setMaxDate(new Date(endDate));
|
||||
setValueDate(startDate);
|
||||
}
|
||||
else if(calendarType === CalendarType.End){
|
||||
setMinDate(new Date(startDate));
|
||||
setMaxDate(new Date());
|
||||
setValueDate(endDate);
|
||||
}
|
||||
};
|
||||
|
||||
const formatMonthYear = (locale: string | undefined, date: Date) => {
|
||||
return date.toLocaleDateString('en', {
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
const formatYear = (locale: string | undefined, date: Date) => {
|
||||
return date.toLocaleDateString('en', {
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
const formmatMonth = (locale: string | undefined, date: Date) => {
|
||||
return date.toLocaleDateString('en', {
|
||||
month: 'short'
|
||||
});
|
||||
};
|
||||
const formatDay = (locale: string | undefined, date: Date) => {
|
||||
return date.toLocaleString('en', {
|
||||
day: 'numeric'
|
||||
});
|
||||
};
|
||||
const formatShortWeekday = (locale: string | undefined, date: Date) => {
|
||||
return date.toLocaleString('en', {
|
||||
weekday: 'short'
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log(calendarOpen)
|
||||
setIsOpen(calendarOpen);
|
||||
setMinMaxValueDate();
|
||||
|
||||
}, [calendarOpen])
|
||||
|
||||
return (
|
||||
<>
|
||||
{ (isOpen) &&
|
||||
{ (calendarOpen) &&
|
||||
<>
|
||||
<div className="bg-dim"></div>
|
||||
<CalendarWrapper>
|
||||
<CalendarWrapper onClick={ () => onClickToClose() }>
|
||||
<Calendar
|
||||
minDate={ minDate }
|
||||
maxDate={ maxDate }
|
||||
onChange={ onchangeToDate }
|
||||
value={ calendarDate }
|
||||
value={ valueDate }
|
||||
formatMonthYear={ formatMonthYear }
|
||||
formatYear= { formatYear }
|
||||
formatMonth={ formmatMonth }
|
||||
formatDay={ formatDay }
|
||||
formatShortWeekday={ formatShortWeekday }
|
||||
showNeighboringMonth={ true }
|
||||
></Calendar>
|
||||
</CalendarWrapper>
|
||||
</>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import moment from 'moment';
|
||||
import { ChangeEvent, useState } from 'react';
|
||||
import { FilterDateOptions } from '@/entities/common/model/types';
|
||||
import { CalendarType, FilterDateOptions } from '@/entities/common/model/types';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import NiceCalendar from '../calendar/nice-calendar';
|
||||
import { useEffect } from 'react';
|
||||
@@ -24,7 +24,7 @@ export const FilterCalendar = ({
|
||||
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(false);
|
||||
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
|
||||
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
|
||||
const [activceCalendar, setActiveCalendar] = useState<string>();
|
||||
const [calendarType, setCalendarType] = useState<CalendarType>(CalendarType.Start);
|
||||
|
||||
const setFilterDate = (dateOptions: FilterDateOptions) => {
|
||||
if(dateOptions === FilterDateOptions.Today){
|
||||
@@ -52,22 +52,22 @@ export const FilterCalendar = ({
|
||||
|
||||
};
|
||||
|
||||
const onClickToOpenCalendar = (key: string) => {
|
||||
const onClickToOpenCalendar = (calendarType: CalendarType) => {
|
||||
if(!dateReadOnly){
|
||||
setCalendarOpen(true);
|
||||
setActiveCalendar(key);
|
||||
setCalendarType(calendarType);
|
||||
}
|
||||
else{
|
||||
setCalendarOpen(false);
|
||||
setActiveCalendar('');
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
const setNewDate = (date: string) => {
|
||||
if(activceCalendar === 'start'){
|
||||
if(calendarType === CalendarType.Start){
|
||||
setStartDate(date);
|
||||
}
|
||||
else if(activceCalendar === 'end'){
|
||||
else if(calendarType === CalendarType.End){
|
||||
setEndDate(date);
|
||||
}
|
||||
setCalendarOpen(false);
|
||||
@@ -107,12 +107,13 @@ export const FilterCalendar = ({
|
||||
type="text"
|
||||
placeholder="날짜 선택"
|
||||
value={ startDate }
|
||||
readOnly={ true }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
|
||||
readOnly={ dateReadOnly }
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="date-btn"
|
||||
onClick={ () => onClickToOpenCalendar('start') }
|
||||
onClick={ () => onClickToOpenCalendar(CalendarType.Start) }
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date.svg' }
|
||||
@@ -128,12 +129,13 @@ export const FilterCalendar = ({
|
||||
type="text"
|
||||
placeholder="날짜 선택"
|
||||
value={ endDate }
|
||||
readOnly={ true }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
|
||||
readOnly={ dateReadOnly }
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="date-btn"
|
||||
onClick={ () => onClickToOpenCalendar('end') }
|
||||
onClick={ () => onClickToOpenCalendar(CalendarType.End) }
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date.svg' }
|
||||
@@ -146,6 +148,10 @@ export const FilterCalendar = ({
|
||||
</div>
|
||||
<NiceCalendar
|
||||
calendarOpen={ calendarOpen }
|
||||
setCalendarOpen={ setCalendarOpen }
|
||||
startDate={ startDate }
|
||||
endDate={ endDate }
|
||||
calendarType={ calendarType }
|
||||
setNewDate={ setNewDate }
|
||||
></NiceCalendar>
|
||||
</>
|
||||
@@ -22,7 +22,7 @@ export const FilterRangeAmount = ({
|
||||
<div className="opt-controls">
|
||||
<div className="input-wrapper ">
|
||||
<input
|
||||
type="text"
|
||||
type="number"
|
||||
placeholder=""
|
||||
value={ minAmount }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setMinAmount(e.target.value) }
|
||||
@@ -31,7 +31,7 @@ export const FilterRangeAmount = ({
|
||||
<span> ~ </span>
|
||||
<div className="input-wrapper date">
|
||||
<input
|
||||
type="text"
|
||||
type="number"
|
||||
placeholder=""
|
||||
value={ maxAmount }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setMaxAmount(e.target.value) }
|
||||
|
||||
@@ -87,7 +87,7 @@ export const Menu = ({
|
||||
{title: 'SMS 결제 통보', path: PATHS.additionalService.smsPaymentNotification},
|
||||
{title: '계좌성명조회', path: PATHS.additionalService.accountHolderSearch.list},
|
||||
{title: '계좌점유인증', path: PATHS.additionalService.accountHolderAuth},
|
||||
{title: '링크결제', path: PATHS.additionalService.linkPayment.dispatchList},
|
||||
{title: '링크결제', path: PATHS.additionalService.linkPayment.shippingHistory},
|
||||
{title: '알림톡 결제통보', path: PATHS.additionalService.kakaoPaymentNotification.list},
|
||||
{title: '자금이체', path: PATHS.additionalService.fundTransfer.requestList},
|
||||
{title: '정산대행', path: PATHS.additionalService.settlementAgency.manage},
|
||||
|
||||
Reference in New Issue
Block a user