diff --git a/src/entities/common/ui/cash-receipt-sample.tsx b/src/entities/common/ui/cash-receipt-sample.tsx index f896422..98abf68 100644 --- a/src/entities/common/ui/cash-receipt-sample.tsx +++ b/src/entities/common/ui/cash-receipt-sample.tsx @@ -12,7 +12,7 @@ import moment from 'moment'; export interface CashReceiptSampleProps { cashReceiptSampleOn: boolean; - setCashReceiptSampleOn: (taxInvoiceOn: boolean) => void; + setCashReceiptSampleOn: (cashReceiptSampleOn: boolean) => void; merchantInfo?: MerchantInfo; issueInfo?: IssueInfo; amountInfo?: AmountInfo; diff --git a/src/entities/common/ui/tax-invoice-sample.tsx b/src/entities/common/ui/tax-invoice-sample.tsx new file mode 100644 index 0000000..98284e6 --- /dev/null +++ b/src/entities/common/ui/tax-invoice-sample.tsx @@ -0,0 +1,235 @@ +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 { AmountInfo, CustomerInfo, IssueInfo, MerchantInfo, ProductInfo, TransactionInfo } from '@/entities/transaction/model/types'; +import moment from 'moment'; + +export interface TaxInvoiceSampleProps { + taxInvoiceSampleOn: boolean; + setTaxInvoiceSampleOn: (taxInvoiceSampleOn: boolean) => void; + merchantInfo?: MerchantInfo; + issueInfo?: IssueInfo; + amountInfo?: AmountInfo; + transactionInfo?: TransactionInfo; + customerInfo?: CustomerInfo; + productInfo?: ProductInfo; +}; + +export const TaxInvoiceSample = ({ + taxInvoiceSampleOn, + setTaxInvoiceSampleOn, + merchantInfo, + issueInfo, + amountInfo, + transactionInfo, + customerInfo, + productInfo +}: TaxInvoiceSampleProps) => { + 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 = () => { + setTaxInvoiceSampleOn(false); + }; + + const getDateTime = () => { + let date = ''; + let time = ''; + if(!!issueInfo?.issueDate){ + date = moment(issueInfo?.issueDate).format('YYYY.MM.DD'); + } + if(!!issueInfo?.issueDate && !!issueInfo?.issueTime){ + time = moment(issueInfo?.issueDate+' '+issueInfo?.issueTime).format('HH:mm:ss'); + } + return date + ' | ' + time; + }; + + useEffect(() => { + if(!!taxInvoiceSampleOn){ + downloadImage(); + } + }, [taxInvoiceSampleOn]); + + + return ( + <> + +
+
+
+
+
+ + + + + +
+
상점정보
+
+
+
상호
+
{ merchantInfo?.merchantName }
+
+
+
대표자
+
{ merchantInfo?.representativeName }
+
+
+
사업자등록번호
+
{ merchantInfo?.businessNumber }
+
+
+
전화번호
+
{ merchantInfo?.phoneNumber }
+
+
+
주소
+
{ merchantInfo?.address }
+
+
+
URL
+
+
+
+
+
+
+
+ + + + + + + +
+
결제정보
+ +
+
+
총 결제금액
+
+ +
+
+
+
과세금액
+
+ +
+
+
+
부가세
+
+ +
+
+
+
면세금액
+
+ +
+
+
+
봉사료
+
+ +
+
+
+
+
결제수단
+
{ transactionInfo?.paymentMethod }
+
+
+
현금영수증번호
+
{ issueInfo?.issueNumber }
+
+
+
주문자
+
{ customerInfo?.customerName }
+
+
+
상품명
+
{ productInfo?.productName }
+
+
+
승인번호
+
{ issueInfo?.approvalNumber }
+
+
+
거래일시
+
{ getDateTime() }
+
+
+
용도
+
{ issueInfo?.purpose }
+
+
+
+
+ * 본 영수증은 조세특례제한법 제 126조의 3및 동법 시행령 제 121조의 3규정에 의거, 연말정산시 소득공제 혜택 부여의 목적으로 발행됩니다.
+ * 현금 거래 완료 건에 대한 국세청의 검증 소요기간은 2일이며 결제하신 다음날 검증이 완료된 현금영수증을 발급받을 수 있습니다.
+ * 현금영수증 문의 126-1-1 +
+
+ + + ); +}; \ No newline at end of file