nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

부가서비스 정산 신용카드ARS 지급대행

Browse Source
This commit is contained in:
focp212@naver.com
2025-11-15 15:11:55 +09:00
parent a64efdf697
commit 186b50ec25
8 changed files with 507 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
src/entities/additional-service/ui/payout/payout-list.tsx
View File

@@ -1,69 +1,162 @@
import { useTranslation } from "react-i18next";
import { PayoutListProps, PayoutSearchDateType } from "../../model/payout/types";
import { AdditionalServiceCategory } from "../../model/types";
import { ListDateGroup } from "../list-date-group";
import { useGroupDateOnStore, useGroupDateStore } from "@/shared/model/store";
import { useEffect, useState } from "react";
import { GetListHeight, IMAGE_ROOT, ListScrollOn } from "@/shared/constants/common";
export const PayoutList = ({
additionalServiceCategory,
listItems,
searchDateType,
mid,
setDetailData
additionalServiceCategory,
listItems,
searchDateType,
mid,
setDetailData,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: PayoutListProps) => {
const { t, i18n } = useTranslation();
const { groupDate, setGroupDate } = useGroupDateStore();
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
const [listHeight, setListHeight] = useState<number>(0);
const getListDateGroup = () => {
let rs = [];
let date = '';
let list = [];
for (let i = 0; i < listItems.length; i++) {
let itemDateStr = '';
if (searchDateType === PayoutSearchDateType.REQUEST_DATE) {
itemDateStr = listItems[i]?.requestDate || '';
} else if (searchDateType === PayoutSearchDateType.SETTLEMENT_DATE) {
itemDateStr = listItems[i]?.settlementDate || '';
}
let itemDate = itemDateStr.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
mid={mid}
key={date + '-' + i}
date={date}
items={list}
setDetailData={setDetailData}
></ListDateGroup>
);
}
date = itemDate;
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
mid={mid}
key={date + '-last'}
date={date}
items={list}
setDetailData={setDetailData}
></ListDateGroup>
);
}
return rs;
};
const getListDateGroup = () => {
let rs = [];
let date = '';
let list = [];
for (let i=0;i<listItems.length;i++){
let itemDateStr = '';
if(searchDateType === PayoutSearchDateType.REQUEST_DATE){
itemDateStr = listItems[i]?.requestDate || '';
}
else if(searchDateType === PayoutSearchDateType.SETTLEMENT_DATE){
itemDateStr = listItems[i]?.settlementDate || '';
}
let itemDate = itemDateStr.substring(0, 8);
if(i === 0){
date = itemDate;
}
if(date !== itemDate){
if(list.length > 0){
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
mid={mid}
key={date + '-' + i}
date={date}
items={list}
setDetailData={setDetailData}
></ListDateGroup>
);
}
date = itemDate;
list = [];
}
list.push(listItems[i] as any);
}
if(list.length > 0){
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
mid={mid}
key={date + '-last'}
date={date}
items={list}
setDetailData={setDetailData}
></ListDateGroup>
);
}
return rs;
};
return (
<>
<section className="transaction-list">
{getListDateGroup()}
</section>
</>
)
const getMax = (data: Array<Record<string, any>>) => {
let maxItem = null;
if(data.length > 0){
let numberArr = data.map((
value: Record<string, any>,
index: number
) => {
return value.top;
});
let max = Math.max(...numberArr);
maxItem = data.filter((
value: Record<string, any>,
index: number
) => {
return value.top === max;
});
}
return maxItem? maxItem[0]: null;
};
}
const setScrollAction = (e: Event) => {
let dateHeader = document.querySelectorAll('.date-header');
let posData: Array<Record<string, any>> = [];
dateHeader.forEach((value, index) => {
let date: string = value.innerHTML;
let top: number = value.getBoundingClientRect().top;
if(top < 10){
posData.push({
date: date,
top: top
});
}
});
let maxItem = getMax(posData);
if(maxItem){
setGroupDateOn(true);
setGroupDate(maxItem.date);
}
else{
setGroupDateOn(false);
setGroupDate('');
}
};
useEffect(() => {
ListScrollOn(true);
let heightList = GetListHeight();
setListHeight(heightList.listHeight);
let tabContent = document.querySelector('.tab-content');
tabContent?.addEventListener('scroll', setScrollAction);
return () => {
ListScrollOn(false);
tabContent?.removeEventListener('scroll', setScrollAction);
};
}, []);
return (
<>
{ groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{ groupDate }</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={ onClickToOpenDownloadBottomSheet }
/>
</button>
</div>
</div>
}
<section className="transaction-list">
{getListDateGroup()}
</section>
</>
);
};