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

downloadbottomsheet

Browse Source
This commit is contained in:
focp212@naver.com
2025-11-07 17:46:06 +09:00
parent 6b6d3cff0e
commit 1bbf90b98e
24 changed files with 485 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/entities/additional-service/ui/fund-account/detail/result-detail.tsx
View File

@@ -10,7 +10,7 @@ import {
import moment from 'moment';
import { useExtensionFundAccountResultDetailMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-result-detail-mutation';
import { useExtensionFundAccountDownloadReceiptMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-download-certificate-mutation';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
import { showAlert } from '@/widgets/show-alert';
@@ -31,7 +31,8 @@ export const FundAccountResultDetail = ({
const { t } = useTranslation();
const [detail, setDetail] = useState<ExtensionFundAccountResultDetailResponse>();
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
const { mutateAsync: extensionFundAccountResultDetail } = useExtensionFundAccountResultDetailMutation();
const { mutateAsync: extensionFundAccountDownlaodReceipt } = useExtensionFundAccountDownloadReceiptMutation();
@@ -53,16 +54,21 @@ export const FundAccountResultDetail = ({
});
};
const onClickToOpenEmailBottomSheet = () => {
setEmailBottomSheetOn(true);
const onClickToOpenDownloadBottomSheet = () => {
setDownloadBottomSheetOn(true);
};
const onSendRequest = (selectedEmail?: string) => {
if (selectedEmail) {
const onRequestDownload = (
selectedMode: DownloadSelectedMode,
userEmail?: string
) => {
if(selectedMode === DownloadSelectedMode.EMAIL
&& userEmail
){
let params: ExtensionFundAccountDownloadReceiptParams = {
mid: mid,
tid: tid,
email: selectedEmail
email: userEmail
};
extensionFundAccountDownlaodReceipt(params).then((rs: ExtensionFundAccountDownloadReceiptResponse) => {
console.log('Receipt Download Status:', rs);
@@ -73,7 +79,6 @@ export const FundAccountResultDetail = ({
}
});
}
setEmailBottomSheetOn(false);
};
const onClickToClose = () => {
@@ -123,7 +128,7 @@ export const FundAccountResultDetail = ({
<button
type="button"
className="receipt-btn"
onClick={onClickToOpenEmailBottomSheet}
onClick={ onClickToOpenDownloadBottomSheet }
>
<span className="icon-24 download"></span>
<span>{t('additionalService.fundAccount.depositCertificate')}</span>
@@ -178,14 +183,14 @@ export const FundAccountResultDetail = ({
</div>
</div>
</motion.div>
{ !!emailBottomSheetOn &&
<EmailBottomSheet
bottomSheetOn={ emailBottomSheetOn }
setBottomSheetOn={ setEmailBottomSheetOn }
{ !!downloadBottomSheetOn &&
<DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn }
setBottomSheetOn={ setDownloadBottomSheetOn }
imageMode={ false }
emailMode={ true }
sendRequest={ onSendRequest }
></EmailBottomSheet>
sendRequest={ onRequestDownload }
></DownloadBottomSheet>
}
</>
);

41
src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
View File

@@ -15,7 +15,7 @@ import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
import { getFundAccountResultStatusBtnGroup, getFundAccountStatusBtnGroup } from '../../model/fund-account/constant';
import { FundAccountResultFilter } from '../filter/fund-account-result-filter';
import { useStore } from '@/shared/model/store';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
import { useTranslation } from 'react-i18next';
import { FundAccountResultDetail } from './detail/result-detail';
@@ -45,7 +45,8 @@ export const FundAccountResultListWrap = () => {
const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
const [bankCode, setBankCode] = useState<string>('');
const [resultStatus, setResultStatus] = useState<FundAccountResultStatus>(FundAccountResultStatus.ALL);
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
const [totalRequestCount, setTotalRequestCount] = useState<number>(0);
const [totalRequestAmount, setTotalRequestAmount] = useState<number>(0);
@@ -156,19 +157,24 @@ export const FundAccountResultListWrap = () => {
});
};
const onClickToOpenEmailBottomSheet = () => {
const onClickToOpenDownloadBottomSheet = () => {
if (!checkGrant(55, 'D')) {
showAlert(t('common.nopermission'));
return;
}
setEmailBottomSheetOn(true);
setDownloadBottomSheetOn(true);
};
const onSendRequest = (selectedEmail?: string) => {
if (selectedEmail) {
const onRequestDownloadExcel = (
selectedMode: DownloadSelectedMode,
userEmail?: string
) => {
if(selectedMode === DownloadSelectedMode.EMAIL
&& userEmail
){
let params: ExtensionFundAccountResultExcelParams = {
mid: mid,
email: selectedEmail,
email: userEmail,
searchDateType: searchDateType,
fromDate: fromDate,
toDate: toDate,
@@ -182,7 +188,6 @@ export const FundAccountResultListWrap = () => {
}
});
}
setEmailBottomSheetOn(false);
};
const onClickToOpenFilter = () => {
@@ -295,7 +300,7 @@ export const FundAccountResultListWrap = () => {
<button
className="filter-btn"
aria-label="필터"
onClick={() => onClickToOpenFilter()}
onClick={ onClickToOpenFilter }
>
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
@@ -306,7 +311,7 @@ export const FundAccountResultListWrap = () => {
<button
className="download-btn"
aria-label="다운로드"
onClick={() => onClickToOpenEmailBottomSheet()}
onClick={ onClickToOpenDownloadBottomSheet }
>
<img
src={IMAGE_ROOT + '/ico_download.svg'}
@@ -398,14 +403,14 @@ export const FundAccountResultListWrap = () => {
mid={ detailMid }
tid={ detailTid }
></FundAccountResultDetail>
{ !!emailBottomSheetOn &&
<EmailBottomSheet
bottomSheetOn={emailBottomSheetOn}
setBottomSheetOn={setEmailBottomSheetOn}
imageMode={false}
emailMode={true}
sendRequest={onSendRequest}
></EmailBottomSheet>
{ !!downloadBottomSheetOn &&
<DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn }
setBottomSheetOn={ setDownloadBottomSheetOn }
imageMode={ false }
emailMode={ true }
sendRequest={ onRequestDownloadExcel }
></DownloadBottomSheet>
}
</>
);

37
src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
View File

@@ -24,7 +24,7 @@ import { useExtensionFundAccountBalanceMutation } from '../../api/fund-account/u
import { FundAccountTransactionFilter } from '../filter/fund-account-trnasaction-filter';
import { PATHS } from '@/shared/constants/paths';
import { useStore } from '@/shared/model/store';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
import { useTranslation } from 'react-i18next';
import { FundAccountTransferDetail } from './detail/transfer-detail';
@@ -54,7 +54,8 @@ export const FundAccountTransferListWrap = () => {
const [detailOn, setDetailOn] = useState<boolean>(false);
const [detailSeq, setDetailSeq] = useState<number>(0);
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
const [balance, setBalance] = useState<number>(0);
const { mutateAsync: extensionFundAccountTransferList } = useExtensionFundAccountTransferListMutation();
@@ -134,12 +135,12 @@ export const FundAccountTransferListWrap = () => {
callBalance();
};
const onClickToOpenEmailBottomSheet = () => {
const onClickToOpenDownloadBottomSheet = () => {
if (!checkGrant(55, 'D')) {
showAlert(t('common.nopermission'));
return;
}
setEmailBottomSheetOn(true);
setDownloadBottomSheetOn(true);
};
const setDetailData = (detailData: DetailData) => {
@@ -149,11 +150,16 @@ export const FundAccountTransferListWrap = () => {
}
};
const onSendRequest = (selectedEmail?: string) => {
if (selectedEmail) {
const onRequestDownloadExcel = (
selectedMode: DownloadSelectedMode,
userEmail?: string
) => {
if(selectedMode === DownloadSelectedMode.EMAIL
&& userEmail
){
const params: ExtensionFundAccountTransferExcelParams = {
mid: mid,
email: selectedEmail,
email: userEmail,
fromDate: fromDate,
toDate: toDate,
};
@@ -166,7 +172,6 @@ export const FundAccountTransferListWrap = () => {
}
});
}
setEmailBottomSheetOn(false);
};
const callBalance = () => {
@@ -277,7 +282,7 @@ export const FundAccountTransferListWrap = () => {
<button
className="filter-btn"
aria-label="필터"
onClick={() => onClickToOpenFilter()}
onClick={ onClickToOpenFilter }
>
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
@@ -288,7 +293,7 @@ export const FundAccountTransferListWrap = () => {
<button
className="download-btn"
aria-label="다운로드"
onClick={onClickToOpenEmailBottomSheet}
onClick={ onClickToOpenDownloadBottomSheet }
>
<img
src={IMAGE_ROOT + '/ico_download.svg'}
@@ -364,14 +369,14 @@ export const FundAccountTransferListWrap = () => {
setDetailOn={ setDetailOn }
seq={ detailSeq }
></FundAccountTransferDetail>
{ emailBottomSheetOn &&
<EmailBottomSheet
bottomSheetOn={ emailBottomSheetOn }
setBottomSheetOn={ setEmailBottomSheetOn }
{ !!downloadBottomSheetOn &&
<DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn }
setBottomSheetOn={ setDownloadBottomSheetOn }
imageMode={ false }
emailMode={ true }
sendRequest={ onSendRequest }
/>
sendRequest={ onRequestDownloadExcel }
></DownloadBottomSheet>
}
</>
);

39
src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
View File

@@ -13,7 +13,7 @@ import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { useExtensionLinkPayHistoryDownloadExcelMutation } from '../../api/link-payment/use-extension-link-pay-history-download-excel-mutation';
import { useStore } from '@/shared/model/store';
import { ExtensionLinkPayHistoryListParams, LinkPaymentHistoryListItem, LinkPaymentPaymentMethod, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus } from '../../model/link-pay/types';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
import { useTranslation } from 'react-i18next';
import { LinkPaymentHistoryDetail } from './detail/link-payment-history-detail';
@@ -50,7 +50,9 @@ export const LinkPaymentHistoryWrap = () => {
const [paymentStatus, setPaymentStatus] = useState<LinkPaymentPaymentStatus>(LinkPaymentPaymentStatus.ALL);
const [sendStatus, setSendStatus] = useState<LinkPaymentSendStatus>(LinkPaymentSendStatus.ALL);
const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
const [detailOn, setDetailOn] = useState<boolean>(false);
const [detailMid, setDetailMid] = useState<string>('');
const [detailRequestId, setDetailRequestId] = useState<string>('');
@@ -58,6 +60,7 @@ export const LinkPaymentHistoryWrap = () => {
const { mutateAsync: linkPayHistoryList } = useExtensionLinkPayHistoryListMutation();
const { mutateAsync: downloadExcel } = useExtensionLinkPayHistoryDownloadExcelMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if (entry.isIntersecting) {
@@ -144,19 +147,24 @@ export const LinkPaymentHistoryWrap = () => {
});
};
const onClickToOpenEmailBottomSheet = () => {
const onClickToOpenDownloadBottomSheet = () => {
if (!checkGrant(54, 'D')) {
showAlert(t('common.nopermission'));
return;
}
setEmailBottomSheetOn(true);
setDownloadBottomSheetOn(true);
};
const onSendRequest = (selectedEmail?: string) => {
if (selectedEmail) {
const onRequestDownloadExcel = (
selectedMode: DownloadSelectedMode,
userEmail?: string
) => {
if(selectedMode === DownloadSelectedMode.EMAIL
&& userEmail
){
downloadExcel({
mid: mid,
email: selectedEmail,
email: userEmail,
searchCl: searchCl,
searchValue: searchValue,
paymentMethod: paymentMethod,
@@ -174,7 +182,6 @@ export const LinkPaymentHistoryWrap = () => {
}
});
}
setEmailBottomSheetOn(false);
};
const onClickPaymentStatus = (val: LinkPaymentPaymentStatus) => {
@@ -233,14 +240,14 @@ export const LinkPaymentHistoryWrap = () => {
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('common.searchOptions')}
onClick={() => onClickToOpenFilter()}
onClick={ onClickToOpenFilter }
/>
</button>
</div>
<button
className="download-btn"
aria-label={t('common.download')}
onClick={onClickToOpenEmailBottomSheet}
onClick={ onClickToOpenDownloadBottomSheet }
>
<img
src={IMAGE_ROOT + '/ico_download.svg'}
@@ -310,14 +317,14 @@ export const LinkPaymentHistoryWrap = () => {
requestId={detailRequestId}
subReqId={detailSubReqId}
></LinkPaymentHistoryDetail>
{ emailBottomSheetOn &&
<EmailBottomSheet
bottomSheetOn={ emailBottomSheetOn }
setBottomSheetOn={ setEmailBottomSheetOn }
{ !!downloadBottomSheetOn &&
<DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn }
setBottomSheetOn={ setDownloadBottomSheetOn }
imageMode={ false }
emailMode={ true }
sendRequest={ onSendRequest }
></EmailBottomSheet>
sendRequest={ onRequestDownloadExcel }
></DownloadBottomSheet>
}
</>
);

38
src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
View File

@@ -14,7 +14,7 @@ import { useExtensionLinkPayWaitDownloadExcelMutation } from '../../api/link-pay
import { useStore } from '@/shared/model/store';
import { LinkPaymentProcessStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus, LinkPaymentWaitListItem } from '../../model/link-pay/types';
import { getProcessStatusBtnGroup } from '../../model/link-pay/constant';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
import { useTranslation } from 'react-i18next';
import { LinkPaymentWaitDetail } from './detail/link-payment-wait-detail';
@@ -40,7 +40,9 @@ export const LinkPaymentWaitSendWrap = () => {
const [processStatus, setProcessStatus] = useState<LinkPaymentProcessStatus>(LinkPaymentProcessStatus.ALL);
const [listItems, setListItems] = useState<Array<LinkPaymentWaitListItem>>([]);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
const [detailOn, setDetailOn] = useState<boolean>(false);
const [detailMid, setDetailMid] = useState<string>('');
const [detailRequestId, setDetailRequestId] = useState<string>('');
@@ -126,19 +128,24 @@ export const LinkPaymentWaitSendWrap = () => {
});
};
const onClickToOpenEmailBottomSheet = () => {
const onClickToOpenDownloadBottomSheet = () => {
if (!checkGrant(54, 'D')) {
showAlert(t('common.nopermission'));
return;
}
setEmailBottomSheetOn(true);
setDownloadBottomSheetOn(true);
};
const onSendRequest = (selectedEmail?: string) => {
if (selectedEmail) {
const onRequestDownloadExcel = (
selectedMode: DownloadSelectedMode,
userEmail?: string
) => {
if(selectedMode === DownloadSelectedMode.EMAIL
&& userEmail
){
downloadExcel({
mid: mid,
email: selectedEmail,
email: userEmail,
searchCl: searchType,
searchValue: searchValue,
fromDate: startDate,
@@ -154,7 +161,6 @@ export const LinkPaymentWaitSendWrap = () => {
}
});
}
setEmailBottomSheetOn(false);
};
const onClickToSort = (sort: SortTypeKeys) => {
@@ -204,14 +210,14 @@ export const LinkPaymentWaitSendWrap = () => {
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('common.searchOptions')}
onClick={() => onClickToOpenFilter()}
onClick={ onClickToOpenFilter }
/>
</button>
</div>
<button
className="download-btn"
aria-label={t('common.download')}
onClick={onClickToOpenEmailBottomSheet}
onClick={ onClickToOpenDownloadBottomSheet }
>
<img
src={IMAGE_ROOT + '/ico_download.svg'}
@@ -278,14 +284,14 @@ export const LinkPaymentWaitSendWrap = () => {
mid={ detailMid }
requestId={ detailRequestId }
></LinkPaymentWaitDetail>
{ !!emailBottomSheetOn &&
<EmailBottomSheet
bottomSheetOn={ emailBottomSheetOn }
setBottomSheetOn={ setEmailBottomSheetOn }
{ !!downloadBottomSheetOn &&
<DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn }
setBottomSheetOn={ setDownloadBottomSheetOn }
imageMode={ false }
emailMode={ true }
sendRequest={ onSendRequest }
></EmailBottomSheet>
sendRequest={ onRequestDownloadExcel }
></DownloadBottomSheet>
}
</>
);

50
src/entities/additional-service/ui/payout/detail/payout-detail.tsx
View File

@@ -7,8 +7,7 @@ import { useExtensionPayoutDetailMutation } from '@/entities/additional-service/
import { useExtensionPayoutDetailDownloadCertificateMutation } from '@/entities/additional-service/api/payout/use-extension-payout-detail-download-cetificate-mutation';
import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
import { DownloadTypeBottomSheet } from '@/entities/common/ui/download-type-bottom-sheet';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
import { showAlert } from '@/widgets/show-alert';
import { checkGrant } from '@/shared/lib/check-grant';
import { snackBar } from '@/shared/lib';
@@ -29,8 +28,8 @@ export const PayoutDetail = ({
const { t } = useTranslation();
const [detail, setDetail] = useState<ExtensionPayoutDetailResponse>();
const [downloadTypeBottomSheetOn, setDownloadTypeBottomSheetOn] = useState<boolean>(false);
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
const { mutateAsync: extensionPayoutDetail } = useExtensionPayoutDetailMutation();
const { mutateAsync: extensionPayoutDetailDownloadCertification } = useExtensionPayoutDetailDownloadCertificateMutation();
@@ -50,17 +49,19 @@ export const PayoutDetail = ({
});
}
const onClickToDownload = () => {
const onClickToOpenDownloadBottomSheet = () => {
if(!checkGrant(53, 'D')){
showAlert(t('common.nopermission'));
return;
}
setDownloadTypeBottomSheetOn(true);
setDownloadBottomSheetOn(true);
};
const onSelectDownloadType = (type: 'IMAGE' | 'EMAIL') => {
if(type === 'IMAGE'){
// Save image directly
const onRequestDownload = (
selectedMode: DownloadSelectedMode,
userEmail?: string
) => {
if(selectedMode === DownloadSelectedMode.IMAGE){
const params: ExtensionPayoutDetailDownloadCertificateParams = {
mid: mid,
tid: tid,
@@ -73,19 +74,14 @@ export const PayoutDetail = ({
console.error('Certificate Download Failed:', error);
});
}
else{
// Open EmailBottomSheet for email option
setEmailBottomSheetOn(true);
}
};
const onSendRequest = (selectedEmail?: string) => {
if(selectedEmail){
else if(selectedMode === DownloadSelectedMode.EMAIL
&& userEmail
){
const params: ExtensionPayoutDetailDownloadCertificateParams = {
mid: mid,
tid: tid,
requestType: 'EMAIL',
email: selectedEmail
email: userEmail
};
extensionPayoutDetailDownloadCertification(params).then((rs: ExtensionPayoutDetailDownloadCertificateResponse) => {
console.log('Certificate Download Status:', rs);
@@ -93,7 +89,6 @@ export const PayoutDetail = ({
console.error('Certificate Download Failed:', error);
});
}
setEmailBottomSheetOn(false);
};
const onClickToClose = () => {
@@ -138,7 +133,7 @@ export const PayoutDetail = ({
<button
className="receipt-btn"
type="button"
onClick={onClickToDownload}
onClick={ onClickToOpenDownloadBottomSheet }
>
<span className="icon-24 download"></span>
<span>{t('additionalService.payout.depositCertificate')}</span>
@@ -192,18 +187,13 @@ export const PayoutDetail = ({
</ul>
</div>
</div>
<DownloadTypeBottomSheet
bottomSheetOn={downloadTypeBottomSheetOn}
setBottomSheetOn={setDownloadTypeBottomSheetOn}
onSelectType={onSelectDownloadType}
/>
{ !!emailBottomSheetOn &&
<EmailBottomSheet
bottomSheetOn={ emailBottomSheetOn }
setBottomSheetOn={ setEmailBottomSheetOn }
{ !!downloadBottomSheetOn &&
<DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn }
setBottomSheetOn={ setDownloadBottomSheetOn }
imageMode={ false }
emailMode={ true }
sendRequest={ onSendRequest }
sendRequest={ onRequestDownload }
/>
}
</motion.div>

59
src/entities/common/ui/email-bottom-sheet.tsx → src/entities/common/ui/download-bottom-sheet.tsx
View File

@@ -7,44 +7,58 @@ import { toPng } from 'html-to-image';
import { snackBar } from '@/shared/lib';
import { useTranslation } from 'react-i18next';
export interface EmailBottomSheetProps {
export interface DownloadBottomSheetProps {
bottomSheetOn: boolean;
setBottomSheetOn: (bottomSheetOn: boolean) => void;
imageMode: boolean;
emailMode: boolean;
sendRequest: (email?: string) => void;
sendRequest: (
selectedMode: DownloadSelectedMode,
email?: string
) => void;
};
export enum EmailBottomSheetSelectedMode {
export enum DownloadSelectedMode {
IMAGE = 'IMAGE',
EMAIL = 'EMAIL'
};
export const EmailBottomSheet = ({
export const DownloadBottomSheet = ({
bottomSheetOn,
setBottomSheetOn,
imageMode,
emailMode,
sendRequest
}: EmailBottomSheetProps) => {
}: DownloadBottomSheetProps) => {
const { t } = useTranslation();
const optionsEmails = useStore.getState().UserStore.selectOptionsEmails;
const email = useStore.getState().UserStore.email;
const [userEmail, setUserEmail] = useState<string>(email);
const [userEmail, setUserEmail] = useState<string | undefined>(email);
const [sheetImageMode, setSheetImageMode] = useState<boolean>(imageMode);
const [sheetEmailMode, setSheetEmailMode] = useState<boolean>(emailMode);
const [selectedMode, setSelectedMode] = useState<EmailBottomSheetSelectedMode | undefined>();
const [selectedMode, setSelectedMode] = useState<DownloadSelectedMode | undefined>();
const onClickToClose = () => {
setBottomSheetOn(false);
};
const onClickToRequest = () => {
sendRequest(userEmail);
setTimeout(() => {
onClickToClose();
}, 2000);
if(selectedMode === DownloadSelectedMode.IMAGE){
sendRequest(selectedMode);
setTimeout(() => {
onClickToClose();
}, 10);
}
else if(selectedMode === DownloadSelectedMode.EMAIL){
sendRequest(selectedMode, userEmail);
setTimeout(() => {
onClickToClose();
}, 10);
}
else{
snackBar('신청 방법을 선택하세요');
}
};
const downloadImage = () => {
@@ -61,7 +75,11 @@ export const EmailBottomSheet = ({
// downloadImage();
setTimeout(() => {
onClickToClose();
}, 2000);
}, 10);
};
const onClickToSelectMode = (mode: DownloadSelectedMode) => {
setSelectedMode(mode);
};
useEffect(() => {
@@ -69,10 +87,10 @@ export const EmailBottomSheet = ({
setSheetEmailMode(emailMode);
if(imageMode && !emailMode){
setSelectedMode(EmailBottomSheetSelectedMode.IMAGE);
setSelectedMode(DownloadSelectedMode.IMAGE);
}
else if(!imageMode && emailMode){
setSelectedMode(EmailBottomSheetSelectedMode.EMAIL);
setSelectedMode(DownloadSelectedMode.EMAIL);
}
}, [imageMode, emailMode]);
@@ -90,7 +108,7 @@ export const EmailBottomSheet = ({
>
<div className="bottomsheet-header">
<div className="bottomsheet-title">
<h2>{t('common.selectEmailAddress')}</h2>
<h2>신청 방법을 선택하세요</h2>
<button
className="close-btn"
type="button"
@@ -109,7 +127,7 @@ export const EmailBottomSheet = ({
{ !!sheetImageMode &&
<div
className="email-label mb-10"
onClick={ onDownloadImage }
onClick={ () => onClickToSelectMode(DownloadSelectedMode.IMAGE) }
>
<div className="mail-icon">
<div className="mail-icon-bg"></div>
@@ -123,7 +141,10 @@ export const EmailBottomSheet = ({
}
{ !!sheetEmailMode &&
<>
<div className="email-label">
<div
className="email-label"
onClick={ () => onClickToSelectMode(DownloadSelectedMode.EMAIL) }
>
<div className="mail-icon">
<div className="mail-icon-bg"></div>
<img
@@ -133,7 +154,7 @@ export const EmailBottomSheet = ({
</div>
<span className="label-text">{t('common.receiveByEmail')}</span>
</div>
{ selectedMode === EmailBottomSheetSelectedMode.EMAIL &&
{ selectedMode === DownloadSelectedMode.EMAIL &&
optionsEmails &&
optionsEmails.length > 0 &&
<div className="email-select">
@@ -154,7 +175,7 @@ export const EmailBottomSheet = ({
</div>
</div>
}
{ selectedMode === EmailBottomSheetSelectedMode.EMAIL &&
{ selectedMode === DownloadSelectedMode.EMAIL &&
(!optionsEmails || optionsEmails.length === 0) &&
<div className="error-message">
<p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p>

25
src/entities/settlement/ui/list-wrap.tsx
View File

@@ -32,7 +32,7 @@ import {
} from '../model/types';
import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
import { useStore } from '@/shared/model/store';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
import { useTranslation } from 'react-i18next';
import { SettlementDetail } from './detail/settlement-detail';
@@ -85,7 +85,7 @@ export const ListWrap = ({
const [detailSettlementId, setDetailSettlementId] = useState<string>('');
const [detailTid, setDetailTid] = useState<string>('');
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
const { mutateAsync: settlementsHistory } = useSettlementsHistoryMutation();
const { mutateAsync: settlementsHistorySummary} = useSettlementsHistorySummaryMutation();
@@ -384,16 +384,19 @@ export const ListWrap = ({
const onClickToOpenFilter = () => {
setFilterOn(!filterOn);
};
const onClickToDownloadExcel = () => {
const onClickToOpenDownloadBottomSheet = () => {
if(checkGrant(menuId, 'D')){
setEmailBottomSheetOn(true);
setDownloadBottomSheetOn(true);
}
else{
showAlert(t('common.nopermission'));
}
};
const onRequestDownloadExcel = (userEmail?: string) => {
const onRequestDownloadExcel = (
selectedMode: DownloadSelectedMode,
userEmail?: string
) => {
};
@@ -428,7 +431,7 @@ export const ListWrap = ({
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt={t('transaction.download')}
onClick={ () => onClickToDownloadExcel() }
onClick={ () => onClickToOpenDownloadBottomSheet() }
/>
</button>
</div>
@@ -528,14 +531,14 @@ export const ListWrap = ({
settlementId={ detailSettlementId }
tid={ detailTid }
></SettlementDetail>
{ !!emailBottomSheetOn &&
<EmailBottomSheet
bottomSheetOn={ emailBottomSheetOn }
setBottomSheetOn={ setEmailBottomSheetOn }
{ !!downloadBottomSheetOn &&
<DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn }
setBottomSheetOn={ setDownloadBottomSheetOn }
imageMode={ false }
emailMode={ true }
sendRequest={ onRequestDownloadExcel }
></EmailBottomSheet>
></DownloadBottomSheet>
}
</>
);

21
src/entities/transaction/ui/detail/escrow-detail.tsx
View File

@@ -24,7 +24,7 @@ import {
import { useEscrowMailResendMutation } from '@/entities/transaction/api/use-escrow-mail-resend-mutation';
import { MerchantInfoSection } from '@/entities/transaction/ui/section/merchant-info-section';
import { AmountInfoSection } from '@/entities/transaction/ui/section/amount-info-section';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
import { checkGrant } from '@/shared/lib/check-grant';
@@ -65,7 +65,7 @@ export const EscrowDetail = ({
const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
const [showMerchantInfo, setShowMerchantInfo] = useState<boolean>(false);
const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
const [orderNumber, setOrderNumber] = useState<string>();
@@ -102,14 +102,17 @@ export const EscrowDetail = ({
const onClickToShowMailResend = () => {
if(checkGrant(menuId, 'X')){
setBottomSheetOn(true);
setDownloadBottomSheetOn(true);
}
else{
showAlert(t('common.nopermission'));
}
};
const callMailResend = () => {
const callMailResend = (
selectedMode: DownloadSelectedMode,
userEmail?: string
) => {
let params = {
orderNumber: orderNumber,
tid: tid,
@@ -231,14 +234,14 @@ export const EscrowDetail = ({
>메일 재발송</button>
</div>
</motion.div>
{ !!bottomSheetOn &&
<EmailBottomSheet
setBottomSheetOn={ setBottomSheetOn }
bottomSheetOn={ bottomSheetOn }
{ !!downloadBottomSheetOn &&
<DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn }
setBottomSheetOn={ setDownloadBottomSheetOn }
imageMode={ false }
emailMode={ true }
sendRequest={ callMailResend }
></EmailBottomSheet>
></DownloadBottomSheet>
}
</>
);

35
src/entities/transaction/ui/section/amount-info-section.tsx
View File

@@ -4,11 +4,10 @@ import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { CashReceiptReceiptDownloadParams, CashReceiptReceiptDownloadResponse, InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
import { SlideDown } from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
import { showAlert } from '@/widgets/show-alert';
import { snackBar } from '@/shared/lib';
import { useCashReceiptReceiptDownloadMutation } from '../../api/use-cash-receipt-receipt-download-mutation';
import { useState } from 'react';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
export const AmountInfoSection = ({
transactionCategory,
@@ -22,7 +21,8 @@ export const AmountInfoSection = ({
const { t } = useTranslation();
const { mutateAsync: cashReceiptReceiptDownload } = useCashReceiptReceiptDownloadMutation();
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
let newAmountInfo: Record<string, any> | undefined = amountInfo;
const subItems: Record<string, Record<string, string>> = {
mid: {name: t('transaction.fields.mid'), type: 'string'},
@@ -187,14 +187,13 @@ export const AmountInfoSection = ({
};
const onClickToOpenDownloadBottomSheet = () => {
setEmailBottomSheetOn(true);
setDownloadBottomSheetOn(true);
};
const onSendRequest = (email?: string) => {
};
const onRequestToDownload = () => {
const onRequestDownload = (
selectedMode: DownloadSelectedMode,
userEmail?: string
) => {
if(!!tid){
let params: CashReceiptReceiptDownloadParams = {
tid: tid
@@ -210,7 +209,7 @@ export const AmountInfoSection = ({
});
}
};
return (
<>
<div className="txn-num-group">
@@ -414,13 +413,15 @@ export const AmountInfoSection = ({
}
</div>
</div>
<EmailBottomSheet
bottomSheetOn={emailBottomSheetOn}
setBottomSheetOn={setEmailBottomSheetOn}
imageMode={true}
emailMode={true}
sendRequest={onSendRequest}
/>
{ !!downloadBottomSheetOn &&
<DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn }
setBottomSheetOn={ setDownloadBottomSheetOn }
imageMode={ true }
emailMode={ true }
sendRequest={ onRequestDownload }
></DownloadBottomSheet>
}
</>
);
};

29
src/entities/vat-return/ui/list-wrap.tsx
View File

@@ -17,7 +17,7 @@ import {
import { useVatReturnListMutation } from '../api/use-vat-return-list-mutation';
import { ListDateGroup } from './list-date-group';
import { useStore } from '@/shared/model/store';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
import { TaxInvoiceDetail } from './detail/tax-invoice-detail';
import { showAlert } from '@/widgets/show-alert';
@@ -40,7 +40,7 @@ export const ListWrap = () => {
const [receiptType, setReceiptType] = useState<VatReturnReceiptType>(VatReturnReceiptType.ALL);
const [targetType, setTargetType] = useState<VatReturnTargetType>(VatReturnTargetType.ALL);
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
const [detailOn, setDetailOn] = useState<boolean>(false);
const [detailTaxInvoiceNumber, setDetailTaxInvoiceNumber] = useState<string>('');
@@ -118,17 +118,20 @@ export const ListWrap = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
};
const onClickToDownloadExcel = () => {
const onClickToOpenDownloadBottomSheet = () => {
if(checkGrant(menuId, 'D')){
setEmailBottomSheetOn(true);
setDownloadBottomSheetOn(true);
}
else{
showAlert(t('common.nopermission'));
}
};
const onRequestDownloadExcel = (userEmail?: string) => {
};
const onRequestDownloadExcel = (
selectedMode: DownloadSelectedMode,
userEmail?: string
) => {
};
useEffect(() => {
callList();
@@ -212,7 +215,7 @@ export const ListWrap = () => {
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt={t('transaction.download')}
onClick={ onClickToDownloadExcel }
onClick={ onClickToOpenDownloadBottomSheet }
/>
</button>
</div>
@@ -247,14 +250,14 @@ export const ListWrap = () => {
taxInvoiceNumber={ detailTaxInvoiceNumber }
>
</TaxInvoiceDetail>
{ !!emailBottomSheetOn &&
<EmailBottomSheet
bottomSheetOn={ emailBottomSheetOn }
setBottomSheetOn={ setEmailBottomSheetOn }
{ !!downloadBottomSheetOn &&
<DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn }
setBottomSheetOn={ setDownloadBottomSheetOn }
imageMode={ false }
emailMode={ true }
sendRequest={ onRequestDownloadExcel }
></EmailBottomSheet>
></DownloadBottomSheet>
}
</>
);

13
src/entities/vat-return/ui/section/amount-section.tsx
View File

@@ -6,7 +6,7 @@ import { NumericFormat } from 'react-number-format';
import SlideDown from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
import { useState } from 'react';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
export interface AmountSectionProps {
detail: VatReturnDetailResponse;
@@ -24,8 +24,11 @@ export const AmountSection = ({
setIsOpen(status);
};
const onRequestDownload = (userEmail?: string) => {
const onRequestDownload = (
selectedMode: DownloadSelectedMode,
userEmail?: string
) => {
};
const onClickToOpenDownloadBottomSheet = () => {
@@ -86,13 +89,13 @@ export const AmountSection = ({
</div>
</div>
{ !!downloadBottomSheetOn &&
<EmailBottomSheet
<DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn }
setBottomSheetOn={ setDownloadBottomSheetOn }
imageMode={ true }
emailMode={ true }
sendRequest={ onRequestDownload }
></EmailBottomSheet>
></DownloadBottomSheet>
}
</>
);