Feat/invoice pdf

components/Transaction/Invoice.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { XEC_TX_EXPLORER_URL, BCH_TX_EXPLORER_URL, NETWORK_TICKERS_FROM_ID, XEC_NETWORK_ID } from 'constants/index'
+import moment from 'moment'
+import logoImageSource from 'assets/logo.png'
+import Image from 'next/image'
+
+const Receipt = React.forwardRef((props, ref) => {
+  const { data } = props
+  const {
+    invoiceNumber,
+    amount,
+    recipientName,
+    recipientAddress,
+    description,
+    customerName,
+    customerAddress,
+    createdAt,
+    transaction
+  } = data
+  const formattedDate = new Date(createdAt).toLocaleString('en-US', {
+    month: 'short',
+    day: '2-digit',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true
+  }).replace(',', '')
+  const transactionNetworkId = transaction.networkId
+  const url = transactionNetworkId === XEC_NETWORK_ID ? XEC_TX_EXPLORER_URL : BCH_TX_EXPLORER_URL
+  return (
+    <div ref={ref} style={{ padding: 24 }}>
+      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between' }}>
+          <div style={{ display: 'flex', alignSelf: 'flex-start', marginRight: '20px' }}>
+            <Image width={250} height={200} src={logoImageSource} alt="PayButton" />
+          </div>
+          <div>
+            <h2>INVOICE</h2>
+            <p>#{ invoiceNumber }</p>
+          </div>
+      </div>
+      <p><strong>Generated at:</strong> { formattedDate }</p>
+      <p><strong>Transaction ID:</strong> <a href={url.concat(transaction.hash)} target="_blank" rel="noopener noreferrer">{transaction.hash}</a></p>
+      <p><strong>Transaction Date & Time:</strong> { moment(transaction.timestamp * 1000).tz('utc').format('lll') } </p>
+
+      <h4>Senders</h4>
+      <p>{ customerName } - { customerAddress }</p>
+
+      <h4>Recipients</h4>
+      <p>{ recipientName } - { recipientAddress }</p>
+
+      <hr />
+
+      <p><strong>Notes:</strong> { description } </p>
+      <p><strong>Amount:</strong> { amount } { NETWORK_TICKERS_FROM_ID[transactionNetworkId]}</p>
+
+    </div>
+  )
+})
+
+export default Receipt

components/Transaction/InvoiceModal.tsx

@@ -1,26 +1,22 @@
-import React, { useState, useEffect, ReactElement } from 'react'
+import React, { useState, useEffect, ReactElement, useRef } from 'react'
 import style from './transaction.module.css'
 import Button from 'components/Button'
 import { CreateInvoicePOSTParameters } from 'utils/validators'
 import axios from 'axios'
 import { Prisma } from '@prisma/client'
-
-export interface InvoiceData {
-  id?: string
-  invoiceNumber: Prisma.Decimal
-  amount: number
-  recipientName: string
-  recipientAddress: string
-  description: string
-  customerName: string
-  customerAddress: string
-}
+import { useReactToPrint } from 'react-to-print'
+import PrintableReceipt from './Invoice'
+import XECIcon from 'assets/xec-logo.png'
+import BCHIcon from 'assets/bch-logo.png'
+import { XEC_NETWORK_ID } from 'constants/index'
+import Image from 'next/image'
+import { InvoiceWithTransaction } from 'services/invoiceService'
 
 interface InvoiceModalProps {
   isOpen: boolean
   onClose: () => void
   transaction: any
-  invoiceData: InvoiceData | null
+  invoiceData: InvoiceWithTransaction | null
   mode: 'create' | 'edit' | 'view'
 }
 
@@ -31,25 +27,52 @@ export default function InvoiceModal ({
   transaction,
   mode
 }: InvoiceModalProps): ReactElement | null {
-  const [formData, setFormData] = useState<InvoiceData>({
+  const contentRef = useRef<HTMLDivElement>(null)
+  const handlePrint = useReactToPrint({
+    contentRef,
+    onBeforePrint: async () => {
+      return await new Promise<void>((resolve) => {
+        setLoading(true)
+        setTimeout(() => {
+          setLoading(false)
+          resolve()
+        }, 1000)
+      })
+    }
+  })
+
+  const [formData, setFormData] = useState<InvoiceWithTransaction>({
+    id: '',
     invoiceNumber: '',
-    amount: Number(transaction?.amount),
+    amount: transaction?.amount ?? new Prisma.Decimal(0),
     recipientName: '',
-    recipientAddress: transaction?.address?.address,
+    recipientAddress: transaction?.address ?? '',
     description: '',
     customerName: '',
-    customerAddress: ''
+    customerAddress: '',
+    userId: transaction?.userId ?? '',
+    transaction: transaction ?? null,
+    transactionId: transaction?.id ?? null,
+    createdAt: new Date(),
+    updatedAt: new Date()
   })
+  const [loading, setLoading] = useState<boolean>(false)
 
   useEffect(() => {
     setFormData(invoiceData ?? {
       invoiceNumber: '',
-      amount: Number(transaction?.amount),
+      amount: transaction?.amount,
       recipientName: '',
-      recipientAddress: transaction?.address?.address,
+      recipientAddress: transaction?.address,
       description: '',
       customerName: '',
-      customerAddress: ''
+      customerAddress: '',
+      userId: transaction?.userId ?? '',
+      transaction: transaction ?? null,
+      transactionId: transaction?.id ?? null,
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      id: ''
     })
   }, [transaction, mode, invoiceData])
 
@@ -63,26 +86,34 @@ export default function InvoiceModal ({
   const handleModalClose = (): void => {
     setFormData({
       invoiceNumber: '',
-      amount: 0,
+      amount: new Prisma.Decimal(0),
       recipientName: '',
       recipientAddress: '',
       description: '',
       customerName: '',
-      customerAddress: ''
+      customerAddress: '',
+      userId: transaction?.userId ?? '',
+      transaction: transaction ?? null,
+      transactionId: transaction?.id ?? null,
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      id: ''
     })
     onClose()
   }
 
   async function handleSubmit (e: React.FormEvent): Promise<void> {
     e.preventDefault()
-
+    setLoading(true)
     if (mode === 'edit') {
       await updateInvoice()
     } else {
       await createInvoice()
     }
+    setLoading(false)
     onClose()
   }
+
   async function createInvoice (): Promise<void> {
     const payload: CreateInvoicePOSTParameters = {
       ...formData,
@@ -133,12 +164,17 @@ export default function InvoiceModal ({
                 />
               </div>
               <div style={{ display: 'flex', flexDirection: 'column' }}>
-                <label htmlFor="amount">Amount</label>
+                <div style={{ display: 'flex', gap: '5px' }}>
+                  <label htmlFor="amount">Amount</label>
+                  <div className='table-icon'>
+                  { transaction.networkId === XEC_NETWORK_ID ? <Image src={XECIcon} alt='XEC' /> : <Image src={BCHIcon} alt='BCH' />}
+                  </div>
+                </div>
                 <input
                   type="number"
                   id="amount"
                   name="amount"
-                  value={formData.amount ?? ''}
+                  value={Number(formData.amount) ?? ''}
                   onChange={handleChange}
                   disabled={true}
                 />
@@ -193,13 +229,13 @@ export default function InvoiceModal ({
             />
             <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px' }}>
                 <div className="mt-2">
-                    <Button type="button" onClick={handleModalClose}>
+                    <Button type="button" onClick={handleModalClose} variant="outlined">
                     {isReadOnly ? 'Close' : 'Cancel'}
                     </Button>
                 </div>
                 {!isReadOnly && (
                 <div className="mt-2">
-                    <Button type="submit">Submit</Button>
+                    <Button type="submit" loading={loading}>Submit</Button>
                 </div>
                 )}
             </div>
@@ -228,12 +264,17 @@ export default function InvoiceModal ({
                 <strong>Customer Address:</strong> {formData.customerAddress}
               </div>
             </div>
-            <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'flex-end' }}>
-              <Button type="button" onClick={handleModalClose}>Close</Button>
+            <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-between' }}>
+              <Button type="button" onClick={handleModalClose} variant="outlined">Cancel</Button>
+              <Button type="button" onClick={handlePrint} loading={loading}>Download as PDF</Button>
             </div>
           </div>
                  }
         </div>
+        <div style={{ display: 'none' }}>
+        {/* <div> */}
+          <PrintableReceipt ref={contentRef} data={invoiceData} />
+        </div>
       </div>
     </div>
   )