downloadbottomsheet

2025-11-07 17:46:06 +09:00
parent 6b6d3cff0e
commit 1bbf90b98e
24 changed files with 485 additions and 368 deletions
--- a/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx
+++ b/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx
@@ -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>
      }
    </>
  );
--- a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
+++ b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
@@ -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>
      }
    </>
  );
--- a/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
+++ b/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
@@ -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>
      }
    </>
  );
--- a/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
@@ -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>
 			}
 		</>
 	);
--- a/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
@@ -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>
      }
    </>
  );
--- a/src/entities/additional-service/ui/payout/detail/payout-detail.tsx
+++ b/src/entities/additional-service/ui/payout/detail/payout-detail.tsx
@@ -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>