This commit is contained in:
Jay Sheen
2025-09-15 14:09:43 +09:00
28 changed files with 1155 additions and 526 deletions

View File

@@ -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);

View File

@@ -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 />} />

View File

@@ -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: '예치금으로 즉시 송금, 파일 등록만으로 다중 송금 가능',

View File

@@ -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>
</section>
</div>
<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>

View File

@@ -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={['취소', '확인']}
/>

View File

@@ -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';
/**
* 발송대기 탭 화면

View File

@@ -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>

View File

@@ -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,24 +53,30 @@ export const EscrowListPage = () => {
sortBy?: string,
val?: string
}) => {
// pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
setPageParam(pageParam);
let newMinAmount = minAmount;
if(!!minAmount && typeof(minAmount) === 'string'){
newMinAmount = parseInt(minAmount);
}
let newMaxAmount = maxAmount;
if(!!maxAmount && typeof(maxAmount) === 'string'){
newMaxAmount = parseInt(maxAmount);
}
let listParams = {
mid: 'nictest001m',
searchType: 'ORDER_NUMBER',
searchKeyword: '',
mid: mid,
searchType: searchType,
searchKeyword: searchKeyword,
startDate: startDate,
endDate: endDate,
deliveryStatus: 'ALL',
settlementStatus: 'ALL',
minAmount: 0,
maxAmount: 999999999,
deliveryStatus: deliveryStatus,
settlementStatus: settlementStatus,
minAmount: newMinAmount,
maxAmount: newMaxAmount,
pagination: pageParam
};
console.log(listParams)
escrowList(listParams).then((rs) => {
escrowList(listParams).then((rs) => {
setListItems(assembleData(rs.content));
});
};
@@ -105,8 +113,8 @@ export const EscrowListPage = () => {
callList({sortBy: sort});
};
const onClickToServiceCode = (val: string) => {
setSelectedServiceCode(val);
const onClickToDeliveryStatus = (val: EscrowDeliveryStatus) => {
setDeliveryStatus(val);
callList({val: val});
};
@@ -154,11 +162,11 @@ export const EscrowListPage = () => {
<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>
))
}