..

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 = ({
       <motion.div 
         className="bottomsheet mail-page"
         initial="hidden"
-        animate={ (taxInvoiceOn)? 'hidden': 'hidden' }
+        animate={ (cashReceiptSampleOn)? 'hidden': 'hidden' }
         variants={ FilterMotionVariants }
         transition={ FilterMotionDuration }
       >
         <div className="wrap">
-          <div className="header">
-            <div className="header-top">
-              <img 
-                className="logo" 
-                src={ IMAGE_ROOT + '/mail_nicepay_logo.svg' }
-                alt="NICEPAY"
-              />
-              <img 
-                className="close-ic" 
-                src={ IMAGE_ROOT + '/ico_close.svg' }
-                alt="닫기"
-              />
-            </div>
-            <div className="email-row">
-              <div className="label">이메일 발송</div>
-              <input 
-                className="input40" 
-                type="email" 
-                placeholder="test@abc.com" 
-                aria-label="수신 이메일 주소 입력"
-              />
-              <a 
-                className="btn btn-dark" 
-                style={{ width: '46px' }}
-              >발송</a>
-              <a className="btn btn-primary">인쇄</a>
-            </div>
-            <div className="divider"></div>
-            <div className="title-row">
-              <div className="title">신용카드 매출전표</div>
-              <select 
-                className="select-outline" 
-                aria-label="작업 선택"
-              >
-                <option value="cancel">취소</option>
-                <option value="reprint">재출력</option>
-              </select>
-            </div>
-          </div>
-
           <div id="image-section">
             <div className="section">
               <div className="head">
@@ -111,27 +98,27 @@ export const TaxInvoiceSample = ({
               </div>
               <div className="row">
                 <div className="k">상호</div>
-                <div className="v">아이스 페이먼츠 주식회사</div>
+                <div className="v">{ merchantInfo?.merchantName }</div>
               </div>
               <div className="row">
                 <div className="k">대표자</div>
-                <div className="v">김광철</div>
+                <div className="v">{ merchantInfo?.representativeName }</div>
               </div>
               <div className="row">
                 <div className="k">사업자등록번호</div>
-                <div className="v">815-81-00527</div>
+                <div className="v">{ merchantInfo?.businessNumber }</div>
               </div>
               <div className="row">
                 <div className="k">전화번호</div>
-                <div className="v">1661-7335</div>
+                <div className="v">{ merchantInfo?.phoneNumber }</div>
               </div>
               <div className="row">
                 <div className="k">주소</div>
-                <div className="v">서울 마포구 아현동 크레디트센터빌딩 217 11</div>
+                <div className="v">{ merchantInfo?.address }</div>
               </div>
               <div className="row">
                 <div className="k">URL</div>
-                <div className="v">home.nicepay.co.kr</div>
+                <div className="v"></div>
               </div>
             </div>
             <div className="divider"></div>
@@ -157,102 +144,90 @@ export const TaxInvoiceSample = ({
               </div>
               <div className="amount-row">
                 <div className="k">총 결제금액</div>
-                <div className="v">4,552,000원</div>
+                <div className="v">
+                  <NumericFormat
+                    value={ amountInfo?.amount }
+                    thousandSeparator
+                    displayType="text"
+                  ></NumericFormat>
+                </div>
               </div>
               <div className="row">
-                <div className="k">금액</div>
-                <div className="v">343,940원</div>
+                <div className="k">과세금액</div>
+                <div className="v">
+                  <NumericFormat
+                    value={ amountInfo?.supplyAmount }
+                    thousandSeparator
+                    displayType="text"
+                  ></NumericFormat>
+                </div>
               </div>
               <div className="row">
                 <div className="k">부가세</div>
-                <div className="v">343,940원</div>
+                <div className="v">
+                  <NumericFormat
+                    value={ amountInfo?.vatAmount }
+                    thousandSeparator
+                    displayType="text"
+                  ></NumericFormat>
+                </div>
+              </div>
+              <div className="row">
+                <div className="k">면세금액</div>
+                <div className="v">
+                  <NumericFormat
+                    value={ amountInfo?.taxFreeAmount }
+                    thousandSeparator
+                    displayType="text"
+                  ></NumericFormat>
+                </div>
+              </div>
+              <div className="row">
+                <div className="k">봉사료</div>
+                <div className="v">
+                  <NumericFormat
+                    value={ amountInfo?.serviceAmount }
+                    thousandSeparator
+                    displayType="text"
+                  ></NumericFormat>
+                </div>
               </div>
               <div className="row split"></div>
               <div className="row">
-                <div className="k">카드종류</div>
-                <div className="v">신한</div>
+                <div className="k">결제수단</div>
+                <div className="v">{ transactionInfo?.paymentMethod }</div>
               </div>
               <div className="row">
-                <div className="k">카드번호</div>
-                <div className="v">489023******0070</div>
+                <div className="k">현금영수증번호</div>
+                <div className="v">{ issueInfo?.issueNumber }</div>
               </div>
               <div className="row">
-                <div className="k">구매자</div>
-                <div className="v">홍*동</div>
+                <div className="k">주문자</div>
+                <div className="v">{ customerInfo?.customerName }</div>
               </div>
               <div className="row">
                 <div className="k">상품명</div>
-                <div className="v">곰인형</div>
-              </div>
-              <div className="row">
-                <div className="k">거래유형</div>
-                <div className="v">전취소</div>
-              </div>
-              <div className="row">
-                <div className="k">일반/할부</div>
-                <div className="v">일시불</div>
+                <div className="v">{ productInfo?.productName }</div>
               </div>
               <div className="row">
                 <div className="k">승인번호</div>
-                <div className="v">14219606</div>
+                <div className="v">{ issueInfo?.approvalNumber }</div>
               </div>
               <div className="row">
                 <div className="k">거래일시</div>
-                <div className="v">2025.09.22 | 11:32:29</div>
+                <div className="v">{ getDateTime() }</div>
               </div>
               <div className="row">
-                <div className="k">취소일시</div>
-                <div className="v">2025.09.22 | 23:10:16</div>
-              </div>
-            </div>
-
-            <div className="divider"></div>
-
-            <div className="section">
-              <div className="head">
-                <div className="icon">
-                  <svg 
-                    xmlns="http://www.w3.org/2000/svg" 
-                    width="20" 
-                    height="20" 
-                    viewBox="0 0 20 20" 
-                    fill="none"
-                  >
-                    <path d="M18.4004 0.849609C18.8129 0.849821 19.1502 1.18707 19.1504 1.59961V18.4004C19.1502 18.8129 18.8129 19.1502 18.4004 19.1504H1.59961C1.18707 19.1502 0.849821 18.8129 0.849609 18.4004V11.2002C0.849609 10.7875 1.18694 10.4504 1.59961 10.4502H8.0498V1.59961C8.05002 1.18701 8.38718 0.849716 8.7998 0.849609H18.4004ZM9.5498 17.6504H17.6504V2.34961H9.5498V17.6504ZM2.34961 17.6504H8.0498V11.9502H2.34961V17.6504Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
-                    <path d="M12.5496 4.44922V6.5498H11.0496V4.44922H12.5496Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
-                    <path d="M16.1496 4.44922V6.5498H14.6496V4.44922H16.1496Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
-                    <path d="M12.5496 7.44922V9.5498H11.0496V7.44922H12.5496Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
-                    <path d="M16.1496 7.44922V9.5498H14.6496V7.44922H16.1496Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
-                    <path d="M12.5496 10.4492V12.5498H11.0496V10.4492H12.5496Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
-                    <path d="M16.1496 10.4492V12.5498H14.6496V10.4492H16.1496Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
-                    <path d="M6.15039 13.8496V15.1504H3.84961V13.8496H6.15039Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
-                  </svg>
-                </div>
-                <div className="h-title">결제대행사 정보</div>
-              </div>
-              <div className="row">
-                <div className="k">상호</div>
-                <div className="v">나이스페이먼츠 주식회사</div>
-              </div>
-              <div className="row">
-                <div className="k">대표자명</div>
-                <div className="v">김광철</div>
-              </div>
-              <div className="row">
-                <div className="k">사업자등록번호</div>
-                <div className="v">815-81-00527</div>
-              </div>
-              <div className="row">
-                <div className="k">전화번호</div>
-                <div className="v">1661-0808</div>
-              </div>
-              <div className="row">
-                <div className="k">주소</div>
-                <div className="v">서울특별시 영등포구 문래로28길 25 (문래동3가)</div>
+                <div className="k">용도</div>
+                <div className="v">{ issueInfo?.purpose }</div>
               </div>
             </div>
           </div>
-          <div className="notice">신용카드 청구서에는 NICE로 표기됩니다.<br />* 부가세법 제 46조에 따라 신용카드 매출전표를 이용하여 매입세액 공제가 가능합니다.<br />(동법 제 33조 2항에 근거하여 신용카드 매출전표를 발행한 경우에는 세금계산서를 발급하지 아니합니다.)</div>
+          <div className="notice">
+            * 본 영수증은 조세특례제한법 제 126조의 3및 동법 시행령 제 121조의 3규정에 의거, 연말정산시 소득공제 혜택 부여의 목적으로 발행됩니다.<br />
+            * 현금 거래 완료 건에 대한 국세청의 검증 소요기간은 2일이며 결제하신 다음날 검증이 완료된 현금영수증을 발급받을 수 있습니다.<br />
+            * 현금영수증 문의 126-1-1
+          </div>
         </div>
       </motion.div>
     </>