diff --git a/src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx b/src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx index ee8c4bb..a7cde1a 100644 --- a/src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx +++ b/src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx @@ -1,5 +1,4 @@ import moment from 'moment'; -import { NumericFormat } from 'react-number-format'; import { useTranslation } from 'react-i18next'; import { AdditionalServiceCategory, DetailInfoSectionKeys } from '../../model/types'; import { DetailInfoSectionProps } from '../../model/types'; diff --git a/src/entities/common/ui/tax-invoice-sample.tsx b/src/entities/common/ui/cash-receipt-sample.tsx similarity index 54% rename from src/entities/common/ui/tax-invoice-sample.tsx rename to src/entities/common/ui/cash-receipt-sample.tsx index b97a37a..f896422 100644 --- a/src/entities/common/ui/tax-invoice-sample.tsx +++ b/src/entities/common/ui/cash-receipt-sample.tsx @@ -6,16 +6,31 @@ 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 TaxInoviceSampleProps { - taxInvoiceOn: boolean; - setTaxInvoiceOn: (taxInvoiceOn: boolean) => void; +export interface CashReceiptSampleProps { + cashReceiptSampleOn: boolean; + setCashReceiptSampleOn: (taxInvoiceOn: boolean) => void; + merchantInfo?: MerchantInfo; + issueInfo?: IssueInfo; + amountInfo?: AmountInfo; + transactionInfo?: TransactionInfo; + customerInfo?: CustomerInfo; + productInfo?: ProductInfo; }; -export const TaxInvoiceSample = ({ - taxInvoiceOn, - setTaxInvoiceOn -}: TaxInoviceSampleProps) => { +export const CashReceiptSample = ({ + cashReceiptSampleOn, + setCashReceiptSampleOn, + merchantInfo, + issueInfo, + amountInfo, + transactionInfo, + customerInfo, + productInfo +}: CashReceiptSampleProps) => { const { t } = useTranslation(); const downloadImage = () => { @@ -31,14 +46,26 @@ export const TaxInvoiceSample = ({ }); }; const onClickToClose = () => { - setTaxInvoiceOn(false); + setCashReceiptSampleOn(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(!!taxInvoiceOn){ + if(!!cashReceiptSampleOn){ downloadImage(); } - }, [taxInvoiceOn]); + }, [cashReceiptSampleOn]); return ( @@ -46,51 +73,11 @@ export const TaxInvoiceSample = ({
-
-
- NICEPAY - 닫기 -
-
-
이메일 발송
- - 발송 - 인쇄 -
-
-
-
신용카드 매출전표
- -
-
-
@@ -111,27 +98,27 @@ export const TaxInvoiceSample = ({
상호
-
아이스 페이먼츠 주식회사
+
{ merchantInfo?.merchantName }
대표자
-
김광철
+
{ merchantInfo?.representativeName }
사업자등록번호
-
815-81-00527
+
{ merchantInfo?.businessNumber }
전화번호
-
1661-7335
+
{ merchantInfo?.phoneNumber }
주소
-
서울 마포구 아현동 크레디트센터빌딩 217 11
+
{ merchantInfo?.address }
URL
-
home.nicepay.co.kr
+
@@ -157,102 +144,90 @@ export const TaxInvoiceSample = ({
총 결제금액
-
4,552,000원
+
+ +
-
금액
-
343,940원
+
과세금액
+
+ +
부가세
-
343,940원
+
+ +
+
+
+
면세금액
+
+ +
+
+
+
봉사료
+
+ +
-
카드종류
-
신한
+
결제수단
+
{ transactionInfo?.paymentMethod }
-
카드번호
-
489023******0070
+
현금영수증번호
+
{ issueInfo?.issueNumber }
-
구매자
-
홍*동
+
주문자
+
{ customerInfo?.customerName }
상품명
-
곰인형
-
-
-
거래유형
-
전취소
-
-
-
일반/할부
-
일시불
+
{ productInfo?.productName }
승인번호
-
14219606
+
{ issueInfo?.approvalNumber }
거래일시
-
2025.09.22 | 11:32:29
+
{ getDateTime() }
-
취소일시
-
2025.09.22 | 23:10:16
-
-
- -
- -
-
-
- - - - - - - - - - -
-
결제대행사 정보
-
-
-
상호
-
나이스페이먼츠 주식회사
-
-
-
대표자명
-
김광철
-
-
-
사업자등록번호
-
815-81-00527
-
-
-
전화번호
-
1661-0808
-
-
-
주소
-
서울특별시 영등포구 문래로28길 25 (문래동3가)
+
용도
+
{ issueInfo?.purpose }
-
신용카드 청구서에는 NICE로 표기됩니다.
* 부가세법 제 46조에 따라 신용카드 매출전표를 이용하여 매입세액 공제가 가능합니다.
(동법 제 33조 2항에 근거하여 신용카드 매출전표를 발행한 경우에는 세금계산서를 발급하지 아니합니다.)
+
+ * 본 영수증은 조세특례제한법 제 126조의 3및 동법 시행령 제 121조의 3규정에 의거, 연말정산시 소득공제 혜택 부여의 목적으로 발행됩니다.
+ * 현금 거래 완료 건에 대한 국세청의 검증 소요기간은 2일이며 결제하신 다음날 검증이 완료된 현금영수증을 발급받을 수 있습니다.
+ * 현금영수증 문의 126-1-1 +
diff --git a/src/entities/transaction/model/types.ts b/src/entities/transaction/model/types.ts index 18bfcd3..a7e2f82 100644 --- a/src/entities/transaction/model/types.ts +++ b/src/entities/transaction/model/types.ts @@ -347,7 +347,7 @@ export interface AmountInfo { multiCouponAmount?: number; receiptAmount?: number; cupDepositAmount?: number; - + customerName?: string; amount?: number; supplyAmount?: number; @@ -375,6 +375,7 @@ export interface AmountInfo { simplePaymentServiceCode?: string; buyerName?: string; + vatAmount?: number; }; export interface ImportantInfo { moid?: string; @@ -467,6 +468,9 @@ export interface TransactionInfo { cashReceiptIssue?: string; transactionDateTime?: string; transactionAmount?: number; + tid?: string; + merchantTid?: string; + paymentMethod?: string; }; export interface SettlementInfo { approvalSettlementDate?: string; @@ -548,7 +552,14 @@ export interface MerchantInfo { companyName?: string; gid?: string; aid?: string; -} + merchantName?: string; + businessNumber?: string; + representativeName?: string; + address?: string; + phoneNumber?: string; + subMallName?: string; + subMallBusinessNumber?: string; +}; export interface DetailResponse { amount?: number; diff --git a/src/entities/transaction/ui/section/amount-info-section.tsx b/src/entities/transaction/ui/section/amount-info-section.tsx index 8fb0789..536056f 100644 --- a/src/entities/transaction/ui/section/amount-info-section.tsx +++ b/src/entities/transaction/ui/section/amount-info-section.tsx @@ -1,14 +1,14 @@ import moment from 'moment'; import { useTranslation } from 'react-i18next'; import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; -import { CashReceiptReceiptDownloadParams, CashReceiptReceiptDownloadResponse, InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types'; +import { AmountInfo, CashReceiptReceiptDownloadParams, CashReceiptReceiptDownloadResponse, CustomerInfo, InfoSectionKeys, InfoSectionProps, IssueInfo, MerchantInfo, ProductInfo, TransactionCategory, TransactionInfo } from '../../model/types'; import { SlideDown } from 'react-slidedown'; import 'react-slidedown/lib/slidedown.css'; import { snackBar } from '@/shared/lib'; import { useCashReceiptReceiptDownloadMutation } from '../../api/use-cash-receipt-receipt-download-mutation'; import { useState } from 'react'; import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet'; -import { TaxInvoiceSample } from '@/entities/common/ui/tax-invoice-sample'; +import { CashReceiptSample } from '@/entities/common/ui/cash-receipt-sample'; export const AmountInfoSection = ({ transactionCategory, @@ -23,7 +23,14 @@ export const AmountInfoSection = ({ const { mutateAsync: cashReceiptReceiptDownload } = useCashReceiptReceiptDownloadMutation(); const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState(false); - const [taxInvoiceOn, setTaxInvoiceOn] = useState(false); + const [cashReceiptSampleOn, setCashReceiptSampleOn] = useState(false); + + const [receiptIssueInfo, setReceiptIssueInfo] = useState({}); + const [receiptMerchantInfo, setReceiptMerchantInfo] = useState({}); + const [receiptTransactionInfo, setReceiptTransactionInfo] = useState({}); + const [receiptAmountInfo, setReceiptAmountInfo] = useState({}); + const [receiptCustomerInfo, setReceiptCustomerInfo] = useState(); + const [receiptProductInfo, setReceiptProductInfo] = useState(); let newAmountInfo: Record | undefined = amountInfo; const subItems: Record> = { @@ -196,15 +203,19 @@ export const AmountInfoSection = ({ selectedMode: DownloadSelectedMode, userEmail?: string ) => { - console.log(selectedMode, userEmail, tid) if(!!tid){ let params: CashReceiptReceiptDownloadParams = { tid: tid }; cashReceiptReceiptDownload(params).then((rs: CashReceiptReceiptDownloadResponse) => { - console.log(rs); + setReceiptIssueInfo(rs?.issueInfo); + setReceiptMerchantInfo(rs?.merchantInfo); + setReceiptTransactionInfo(rs?.transactionInfo); + setReceiptAmountInfo(rs?.amountInfo); + setReceiptCustomerInfo(rs?.customerInfo); + setReceiptProductInfo(rs?.productInfo); if(selectedMode === DownloadSelectedMode.IMAGE){ - setTaxInvoiceOn(true); + setCashReceiptSampleOn(true); } else if(selectedMode === DownloadSelectedMode.EMAIL){ snackBar('거래확인서 다운 성공'); @@ -431,10 +442,16 @@ export const AmountInfoSection = ({ > } { - + } ); diff --git a/src/entities/vat-return/ui/detail/tax-invoice-detail.tsx b/src/entities/vat-return/ui/detail/tax-invoice-detail.tsx index 550cc12..6ef5123 100644 --- a/src/entities/vat-return/ui/detail/tax-invoice-detail.tsx +++ b/src/entities/vat-return/ui/detail/tax-invoice-detail.tsx @@ -52,13 +52,6 @@ export const TaxInvoiceDetail = ({ const [bottomSheetOn, setBottomSheetOn] = useState(false); const [detail, setDetail] = useState({}); const [breakdown, setBreakdown] = useState>([]); - - useSetHeaderTitle(t('vatReturn.taxInvoiceDetail')); - useSetHeaderType(HeaderType.RightClose); - useSetOnBack(() => { - navigate(PATHS.vatReturn.list); - }); - useSetFooterMode(false); const { mutateAsync: vatReturnTaxInvoice } = useVatReturnTaxInvoiceMutation(); const { mutateAsync: vatReturnDetail } = useVatReturnDetailMutation(); @@ -121,7 +114,7 @@ export const TaxInvoiceDetail = ({ >
-
{ t('transaction.detailTitle') }
+
{ t('vatReturn.taxInvoiceDetail') }
-
+
{ detailOn={ detailOn } setDetailOn={ setDetailOn } taxInvoiceNumber={ detailTaxInvoiceNumber } - > - + > { !!downloadBottomSheetOn &&