diff --git a/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx b/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx index ea9d945..e3d6904 100644 --- a/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx +++ b/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx @@ -15,7 +15,7 @@ import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@ import { FullMenuClose } from '@/entities/common/ui/full-menu-close'; import { showAlert } from '@/widgets/show-alert'; import { snackBar } from '@/shared/lib'; -import { TaxInvoiceSample } from '@/entities/common/ui/tax-invoice-sample'; +import { DepositReceiptSample } from '@/entities/common/ui/deposit-receipt-sample'; export interface FundAccountResultDetailProps { detailOn: boolean; @@ -34,7 +34,7 @@ export const FundAccountResultDetail = ({ const [detail, setDetail] = useState(); const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState(false); - const [taxInvoiceOn, setTaxInvoiceOn] = useState(false); + const [depositReceiptSampleOn, setDepositReceiptSampleOn] = useState(false); const { mutateAsync: extensionFundAccountResultDetail } = useExtensionFundAccountResultDetailMutation(); const { mutateAsync: extensionFundAccountDownlaodReceipt } = useExtensionFundAccountDownloadReceiptMutation(); @@ -91,7 +91,7 @@ export const FundAccountResultDetail = ({ }; extensionFundAccountDownlaodReceipt(params).then((rs: ExtensionFundAccountDownloadReceiptResponse) => { if (selectedMode === DownloadSelectedMode.IMAGE) { - setTaxInvoiceOn(true) + setDepositReceiptSampleOn(true) } else if (selectedMode === DownloadSelectedMode.EMAIL) { snackBar('입금확인서 다운 성공') } @@ -213,10 +213,10 @@ export const FundAccountResultDetail = ({ } { - + } ); diff --git a/src/entities/additional-service/ui/payout/detail/payout-detail.tsx b/src/entities/additional-service/ui/payout/detail/payout-detail.tsx index 34532e5..ee6b3c2 100644 --- a/src/entities/additional-service/ui/payout/detail/payout-detail.tsx +++ b/src/entities/additional-service/ui/payout/detail/payout-detail.tsx @@ -11,7 +11,7 @@ import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/ import { showAlert } from '@/widgets/show-alert'; import { checkGrant } from '@/shared/lib/check-grant'; import { snackBar } from '@/shared/lib'; -import { TaxInvoiceSample } from '@/entities/common/ui/tax-invoice-sample'; +import { DepositReceiptSample } from '@/entities/common/ui/deposit-receipt-sample'; export interface PayoutDetailProps { detailOn: boolean; @@ -31,7 +31,7 @@ export const PayoutDetail = ({ const [detail, setDetail] = useState(); const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState(false); - const [taxInvoiceOn, setTaxInvoiceOn] = useState(false); + const [depositReceiptSampleOn, setDepositReceiptSampleOn] = useState(false); const { mutateAsync: extensionPayoutDetail } = useExtensionPayoutDetailMutation(); const { mutateAsync: extensionPayoutDetailDownloadCertification } = useExtensionPayoutDetailDownloadCertificateMutation(); @@ -72,9 +72,9 @@ export const PayoutDetail = ({ }; extensionPayoutDetailDownloadCertification(params).then((rs: ExtensionPayoutDetailDownloadCertificateResponse) => { console.log('Certificate Download Status:', rs); - if(selectedMode === DownloadSelectedMode.IMAGE) { - setTaxInvoiceOn(true) - } else if(selectedMode === DownloadSelectedMode.EMAIL) { + if (selectedMode === DownloadSelectedMode.IMAGE) { + setDepositReceiptSampleOn(true) + } else if (selectedMode === DownloadSelectedMode.EMAIL) { snackBar('입금확인서 다운 성공') } }).catch((error) => { @@ -205,10 +205,10 @@ export const PayoutDetail = ({ } { - + } ); diff --git a/src/entities/common/ui/deposit-receipt-sample.tsx b/src/entities/common/ui/deposit-receipt-sample.tsx new file mode 100644 index 0000000..83ab0d7 --- /dev/null +++ b/src/entities/common/ui/deposit-receipt-sample.tsx @@ -0,0 +1,115 @@ +import { IMAGE_ROOT } from '@/shared/constants/common'; +import { motion } from 'framer-motion'; +import { FilterMotionDuration, FilterMotionVariants } from '../model/constant'; +import { snackBar } from '@/shared/lib'; +import { toPng } from 'html-to-image'; +import { useTranslation } from 'react-i18next'; +import '@/shared/ui/assets/css/style-tax-invoice.css'; +import { useEffect } from 'react'; +import { NumericFormat } from 'react-number-format'; +import { DepositInfo } from '@/entities/transaction/model/types'; + +export interface DepositReceiptSampleProps { + depositReceiptSampleOn: boolean; + setDepositReceiptSampleOn: (DepositReceiptSampleOn: boolean) => void; + depositInfo?: DepositInfo +}; + +export const DepositReceiptSample = ({ + depositReceiptSampleOn, + setDepositReceiptSampleOn, + depositInfo +}: DepositReceiptSampleProps) => { + const { t } = useTranslation(); + + const downloadImage = () => { + const section = document.getElementById('image-section') as HTMLElement + toPng(section).then((image) => { + const link = document.createElement('a'); + link.download = 'downloadImage.png'; + link.href = image; + link.click(); + snackBar(t('common.imageRequested'), function () { + onClickToClose(); + }); + }); + } + const onClickToClose = () => { + setDepositReceiptSampleOn(false); + }; + + useEffect(() => { + if (!!depositReceiptSampleOn) { + downloadImage(); + } + }, [depositReceiptSampleOn]); + + + return ( + <> + +
+
+
+
+
+ + + + + + + +
+
입금정보
+
+
+
입금일시
+
{depositInfo?.depositDate}
+
+
+
입금은행
+
{depositInfo?.depositBank}
+
+
+
입금계좌
+
{depositInfo?.depositAccount}
+
+
+
금액
+
+ + +
+
+
+
입금적요
+
{depositInfo?.depositReason}
+
+
+
입금ID
+
{depositInfo?.depositId}
+
+
+
+
+ + + ) +} \ No newline at end of file diff --git a/src/entities/transaction/model/types.ts b/src/entities/transaction/model/types.ts index a7e2f82..01a1d69 100644 --- a/src/entities/transaction/model/types.ts +++ b/src/entities/transaction/model/types.ts @@ -561,6 +561,15 @@ export interface MerchantInfo { subMallBusinessNumber?: string; }; +export interface DepositInfo { + depositDate?: string; + depositBank?: string; + depositAccount?: string; + amount?: number; + depositReason?: string; + depositId?: string; +} + export interface DetailResponse { amount?: number; customerName?: string;