383 lines
13 KiB
TypeScript
383 lines
13 KiB
TypeScript
import moment from 'moment';
|
|
import { useStore } from '@/shared/model/store';
|
|
import { ChangeEvent, useEffect, useState } from 'react';
|
|
import { IMAGE_ROOT } from '@/shared/constants/common';
|
|
import { PATHS } from '@/shared/constants/paths';
|
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
import { AllTransactionList } from '@/entities/transaction/ui/all-transaction-list';
|
|
import {
|
|
TransactionCategory,
|
|
AllTransactionSearchCl,
|
|
AllTransactionListParams,
|
|
ListItemProps,
|
|
AllTransactionListSummaryParams,
|
|
AllTransactionListResponse,
|
|
AllTransactionListSummaryResponse,
|
|
DetailData
|
|
} from '@/entities/transaction/model/types';
|
|
import { useAllTransactionListMutation } from '@/entities/transaction/api/use-all-transaction-list-mutation';
|
|
import { useAllTransactionListSummaryMutation } from '@/entities/transaction/api/use-all-transaction-list-summary-mutation';
|
|
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
|
|
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
|
|
import { AllTransactionFilter } from '@/entities/transaction/ui/filter/all-transaction-filter';
|
|
import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
|
|
import { SortTypeKeys, HeaderType, DefaultRequestPagination } from '@/entities/common/model/types';
|
|
import {
|
|
useSetOnBack,
|
|
useSetHeaderTitle,
|
|
useSetHeaderType,
|
|
useSetFooterMode
|
|
} from '@/widgets/sub-layout/use-sub-layout';
|
|
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
|
|
import useIntersectionObserver from '@/widgets/intersection-observer';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { AllTransactionDetail } from '@/entities/transaction/ui/detail/all-transaction-detail';
|
|
import { showAlert } from '@/widgets/show-alert';
|
|
import { snackBar } from '@/shared/lib';
|
|
import { checkGrant } from '@/shared/lib/check-grant';
|
|
|
|
/* 거래내역조회 31 */
|
|
const menuId = 31;
|
|
export const AllTransactionListPage = () => {
|
|
const { navigate } = useNavigate();
|
|
|
|
const { t, i18n } = useTranslation();
|
|
const userMid = useStore.getState().UserStore.mid;
|
|
|
|
const [serviceCodeOptions, setServiceCodeOptions] = useState<Array<Record<string, any>>>();
|
|
|
|
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
|
|
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
|
|
const [listItems, setListItems] = useState<Array<ListItemProps>>([]);
|
|
const [filterOn, setFilterOn] = useState<boolean>(false);
|
|
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
|
|
const [mid, setMid] = useState<string>(userMid);
|
|
const [moid, setMoid] = useState<string>('');
|
|
const [tid, setTid] = useState<string>('');
|
|
const [dateCl, setDateCl] = useState<string>('');
|
|
const [goodsName, setGoodsName] = useState<string>('');
|
|
const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
|
|
const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
|
|
const [statusCode, setStatusCode] = useState<string>('');
|
|
const [serviceCode, setServiceCode] = useState<string>('01');
|
|
const [minAmount, setMinAmount] = useState<number>();
|
|
const [maxAmount, setMaxAmount] = useState<number>();
|
|
const [cardCode, setCardCode] = useState<string | undefined>();
|
|
const [bankCode, setBankCode] = useState<string | undefined>();
|
|
const [searchCl, setSearchCl] = useState<AllTransactionSearchCl | undefined>();
|
|
const [searchValue, setSearchValue] = useState<string | undefined>();
|
|
|
|
const [totalCount, setTotalCount] = useState<number>(0);
|
|
const [totalAmount, setTotalAmount] = useState<number>(0);
|
|
|
|
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
|
|
|
|
const [detailOn, setDetailOn] = useState<boolean>(false);
|
|
const [detailTid, setDetailTid] = useState<string>('');
|
|
const [detailServiceCode, setDetailServiceCode] = useState<string>('');
|
|
|
|
useSetHeaderTitle(t('transaction.listTitle'));
|
|
useSetHeaderType(HeaderType.LeftArrow);
|
|
useSetOnBack(() => {
|
|
navigate(PATHS.home);
|
|
});
|
|
useSetFooterMode(false);
|
|
|
|
const { mutateAsync: allTransactionList } = useAllTransactionListMutation();
|
|
const { mutateAsync: allTransactionListSummary } = useAllTransactionListSummaryMutation();
|
|
const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
|
|
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
|
|
entries.forEach((entry: IntersectionObserverEntry) => {
|
|
if(entry.isIntersecting){
|
|
if(onActionIntersect && !!pageParam.cursor){
|
|
setOnActionIntersect(false);
|
|
callList('page');
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
const { setTarget } = useIntersectionObserver({
|
|
threshold: 1,
|
|
onIntersect
|
|
});
|
|
|
|
const callList = (type?: string) => {
|
|
setOnActionIntersect(false);
|
|
let listSummaryParams: AllTransactionListSummaryParams = {
|
|
mid: mid,
|
|
moid: moid,
|
|
tid: tid,
|
|
fromDate: fromDate,
|
|
toDate: toDate,
|
|
statusCode: statusCode,
|
|
serviceCode: serviceCode,
|
|
minAmount: minAmount,
|
|
maxAmount: maxAmount,
|
|
dateCl: dateCl,
|
|
goodsName: goodsName,
|
|
cardCode: cardCode,
|
|
bankCode: bankCode,
|
|
searchCl: searchCl,
|
|
searchValue: searchValue,
|
|
sortType: sortType
|
|
};
|
|
let listParams: AllTransactionListParams = {
|
|
...listSummaryParams,
|
|
...{
|
|
page: {
|
|
...pageParam,
|
|
...{ sortType: sortType }
|
|
}
|
|
}
|
|
};
|
|
if(type !== 'page' && listParams.page){
|
|
listParams.page.cursor = null;
|
|
}
|
|
|
|
allTransactionList(listParams).then((rs: AllTransactionListResponse) => {
|
|
if(type === 'page'){
|
|
setListItems([
|
|
...listItems,
|
|
...rs.content
|
|
]);
|
|
}
|
|
else{
|
|
setListItems(rs.content);
|
|
}
|
|
if(rs.hasNext
|
|
&& rs.nextCursor !== pageParam.cursor
|
|
&& rs.content.length === DEFAULT_PAGE_PARAM.size
|
|
){
|
|
setPageParam({
|
|
...pageParam,
|
|
...{ cursor: rs.nextCursor }
|
|
});
|
|
}
|
|
else{
|
|
setPageParam({
|
|
...pageParam,
|
|
...{ cursor: null }
|
|
});
|
|
}
|
|
setOnActionIntersect(
|
|
!!rs.hasNext
|
|
&& rs.nextCursor !== pageParam.cursor
|
|
&& rs.content.length === DEFAULT_PAGE_PARAM.size
|
|
);
|
|
}).catch((e: any) => {
|
|
if(e.response?.data?.error?.message){
|
|
showAlert(e.response?.data?.error?.message);
|
|
return;
|
|
}
|
|
});
|
|
|
|
allTransactionListSummary(listSummaryParams).then((rs: AllTransactionListSummaryResponse) => {
|
|
setTotalAmount(rs.totalAmount);
|
|
setTotalCount(rs.totalCount);
|
|
}).catch((e: any) => {
|
|
if(e.response?.data?.error?.message){
|
|
showAlert(e.response?.data?.error?.message);
|
|
return;
|
|
}
|
|
});
|
|
};
|
|
|
|
const onClickToOpenFilter = () => {
|
|
setFilterOn(!filterOn);
|
|
};
|
|
|
|
const onClickToDownloadExcel = () => {
|
|
if(checkGrant(menuId, 'D')){
|
|
setEmailBottomSheetOn(true);
|
|
}
|
|
else{
|
|
showAlert(t('common.nopermission'));
|
|
}
|
|
};
|
|
const onRequestDownloadExcel = (userEmail?: string) => {
|
|
|
|
};
|
|
const onClickToSort = (sort: SortTypeKeys) => {
|
|
setSortType(sort);
|
|
};
|
|
const callServiceCodeOptions = () => {
|
|
let serviceCodes = useStore.getState().CommonStore.serviceCodes;
|
|
setServiceCodeOptions(serviceCodes);
|
|
setServiceCode(serviceCodes[0].value);
|
|
};
|
|
|
|
const onChangeServiceCode = (e: ChangeEvent<HTMLSelectElement>) => {
|
|
let val = e.target.value;
|
|
// onchagne 에서 useState가 즉시 반영 안되므로 값을 직접 바로 넘긴다.
|
|
setServiceCode(val);
|
|
};
|
|
|
|
const getServiceCodeOptions = () => {
|
|
let rs = [];
|
|
if(!!serviceCodeOptions && serviceCodeOptions.length > 0)
|
|
for(let i=0;i<serviceCodeOptions.length;i++){
|
|
const option = serviceCodeOptions[i];
|
|
const localizedName = getLocalizedServiceCodeName(option?.name);
|
|
rs.push(
|
|
<option
|
|
key={`key-${i}`}
|
|
value={option?.value}
|
|
>{ localizedName }</option>
|
|
)
|
|
}
|
|
return rs;
|
|
};
|
|
|
|
const setDetailData = (detailData: DetailData) => {
|
|
setDetailOn(detailData.detailOn);
|
|
setDetailTid(detailData.tid);
|
|
if(detailData?.serviceCode){
|
|
setDetailServiceCode(detailData?.serviceCode);
|
|
}
|
|
};
|
|
|
|
const getLocalizedServiceCodeName = (name?: string): string => {
|
|
if (!name) return '';
|
|
|
|
const nameMap: Record<string, string> = {
|
|
'전체': t('transaction.constants.all'),
|
|
'신용카드': t('transaction.constants.creditCard'),
|
|
'계좌이체': t('transaction.constants.accountTransfer'),
|
|
'가상계좌': t('transaction.constants.virtualAccount'),
|
|
'휴대폰': t('transaction.constants.mobilePayment'),
|
|
'문화상품권': t('transaction.constants.cultureLand'),
|
|
'(구)SSG머니': t('transaction.constants.ssgMoney'),
|
|
'SSG은행계좌결제': t('transaction.constants.ssgBank'),
|
|
'계좌간편결제': t('transaction.constants.accountSimpleTransfer'),
|
|
'티머니페이': t('transaction.constants.tmoneyPay'),
|
|
};
|
|
|
|
return nameMap[name] || name;
|
|
};
|
|
|
|
useEffect(() => {
|
|
callServiceCodeOptions();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
callList();
|
|
}, [
|
|
mid, moid, tid, sortType,
|
|
fromDate, toDate,
|
|
statusCode, serviceCode,
|
|
minAmount, maxAmount,
|
|
bankCode, cardCode,
|
|
searchCl, searchValue
|
|
]);
|
|
|
|
|
|
return (
|
|
<>
|
|
<main>
|
|
<div className="tab-content">
|
|
<div className="tab-pane sub active">
|
|
<div className="summary-section">
|
|
<div className="summary-label">{t('transaction.searchAmount')}</div>
|
|
<div className="summary-amount">
|
|
<span className="amount-text">
|
|
{t('home.money', { value: new Intl.NumberFormat('en-US').format(totalAmount || 0) })}
|
|
</span>
|
|
<div className="summary-actions">
|
|
<button className="filter-btn">
|
|
<img
|
|
src={ IMAGE_ROOT + '/ico_setting.svg' }
|
|
alt={t('transaction.searchOptions')}
|
|
onClick={ () => onClickToOpenFilter() }
|
|
/>
|
|
</button>
|
|
<button className="download-btn">
|
|
<img
|
|
src={ IMAGE_ROOT + '/ico_download.svg' }
|
|
alt={t('transaction.download')}
|
|
onClick={ () => onClickToDownloadExcel() }
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="summary-details">
|
|
<div className="detail-item">
|
|
<span className="detail-label">{t('transaction.searchDate')}</span>
|
|
<span className="detail-value">{ moment(fromDate).format('YYYY.MM.DD') } ~ { moment(toDate).format('YYYY.MM.DD') }</span>
|
|
</div>
|
|
<div className="detail-item">
|
|
<span className="detail-label">{t('transaction.transactionCount')}</span>
|
|
<span className="detail-value">
|
|
{t('transaction.total')} {t('home.count', { value: new Intl.NumberFormat('en-US').format(totalCount || 0) })}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="filter-section">
|
|
<SortTypeBox
|
|
sortType={ sortType }
|
|
onClickToSort={ onClickToSort }
|
|
></SortTypeBox>
|
|
<select
|
|
value={ serviceCode }
|
|
onChange={ (e) => onChangeServiceCode(e) }>
|
|
{ getServiceCodeOptions() }
|
|
</select>
|
|
</div>
|
|
<AllTransactionList
|
|
listItems={ listItems }
|
|
transactionCategory={ TransactionCategory.AllTransaction }
|
|
setDetailData={ setDetailData }
|
|
></AllTransactionList>
|
|
<div ref={ setTarget }></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<AllTransactionFilter
|
|
filterOn={ filterOn }
|
|
setFilterOn={ setFilterOn }
|
|
mid={ mid }
|
|
fromDate={ fromDate }
|
|
toDate={ toDate }
|
|
statusCode={ statusCode }
|
|
serviceCode={ serviceCode }
|
|
minAmount={ minAmount }
|
|
maxAmount={ maxAmount }
|
|
cardCode={ cardCode }
|
|
bankCode={ bankCode }
|
|
searchCl={ searchCl }
|
|
searchValue={ searchValue }
|
|
setMid={ setMid }
|
|
setMoid={ setMoid }
|
|
setTid={ setTid }
|
|
setFromDate={ setFromDate }
|
|
setToDate={ setToDate }
|
|
setStatusCode={ setStatusCode }
|
|
setServiceCode={ setServiceCode }
|
|
setMinAmount={ setMinAmount }
|
|
setMaxAmount={ setMaxAmount }
|
|
setCardCode={ setCardCode }
|
|
setBankCode={ setBankCode }
|
|
setSearchCl={ setSearchCl }
|
|
setSearchValue={ setSearchValue }
|
|
serviceCodeOptions={ serviceCodeOptions }
|
|
></AllTransactionFilter>
|
|
<AllTransactionDetail
|
|
detailOn={ detailOn }
|
|
setDetailOn={ setDetailOn }
|
|
tid={ detailTid }
|
|
serviceCode={ detailServiceCode }
|
|
></AllTransactionDetail>
|
|
{ !!emailBottomSheetOn &&
|
|
<EmailBottomSheet
|
|
bottomSheetOn={ emailBottomSheetOn }
|
|
setBottomSheetOn={ setEmailBottomSheetOn }
|
|
imageSave={ false }
|
|
sendEmail={ true }
|
|
sendRequest={ onRequestDownloadExcel }
|
|
></EmailBottomSheet>
|
|
}
|
|
</>
|
|
);
|
|
}; |