Merge pull request #563 from Fuciuss/feature/import-invoice-from-JSON

Feature - import invoice from json

app/components/index.ts

@@ -32,6 +32,7 @@ import InvoiceDetails from "./invoice/form/sections/InvoiceDetails";
 import Items from "./invoice/form/sections/Items";
 import PaymentInformation from "./invoice/form/sections/PaymentInformation";
 import InvoiceSummary from "./invoice/form/sections/InvoiceSummary";
+import ImportJsonButton from "./invoice/form/sections/ImportJsonButton";
 
 // * Actions
 import PdfViewer from "./invoice/actions/PdfViewer";
@@ -133,6 +134,7 @@ export {
     SendPdfToEmailModal,
     InvoiceLoaderModal,
     InvoiceExportModal,
+    ImportJsonButton,
     SignatureModal,
     DrawSignature,
     TypeSignature,

app/components/invoice/form/sections/ImportJsonButton.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { useRef } from 'react';
+import { BaseButton } from '@/app/components';
+import { useInvoiceContext } from '@/contexts/InvoiceContext';
+import { Import } from 'lucide-react';
+
+type ImportJsonButtonType = {
+    setOpen: (open: boolean) => void;
+}
+
+const ImportJsonButton = ({ setOpen }: ImportJsonButtonType) => {
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const { importInvoice, invoicePdfLoading } = useInvoiceContext();
+
+    const handleClick = () => {
+        fileInputRef.current?.click();
+    };
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (file && file.type === 'application/json') {
+            importInvoice(file);
+            setOpen(false);
+        }
+        // Reset input value to allow selecting the same file again
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    };
+
+    return (
+        <>
+            <input
+                type="file"
+                ref={fileInputRef}
+                onChange={handleFileChange}
+                accept=".json"
+                style={{ display: 'none' }}
+            />
+            <BaseButton
+                variant="outline"
+                tooltipLabel="Import JSON invoice"
+                disabled={invoicePdfLoading}
+                onClick={handleClick}
+            >
+                <Import />
+                Import JSON
+            </BaseButton>
+        </>
+    );
+};
+
+export default ImportJsonButton;

app/components/modals/invoice/InvoiceLoaderModal.tsx

@@ -4,45 +4,49 @@ import { useState } from "react";
 
 // ShadCn
 import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
 } from "@/components/ui/dialog";
 
 // Components
 import { SavedInvoicesList } from "@/app/components";
+import { ImportJsonButton } from "@/app/components";
 
 // Context
 import { useInvoiceContext } from "@/contexts/InvoiceContext";
 
 type InvoiceLoaderModalType = {
-    children: React.ReactNode;
+  children: React.ReactNode;
 };
 
 const InvoiceLoaderModal = ({ children }: InvoiceLoaderModalType) => {
-    const [open, setOpen] = useState(false);
-
-    const { savedInvoices } = useInvoiceContext();
-
-    return (
-        <Dialog open={open} onOpenChange={setOpen}>
-            <DialogTrigger asChild>{children}</DialogTrigger>
-
-            <DialogContent>
-                <DialogHeader className="pb-2 border-b">
-                    <DialogTitle>Saved Invoices</DialogTitle>
-                    <DialogDescription>
-                        You have {savedInvoices.length} saved invoices
-                    </DialogDescription>
-                </DialogHeader>
-
-                <SavedInvoicesList setModalState={setOpen} />
-            </DialogContent>
-        </Dialog>
-    );
+  const [open, setOpen] = useState(false);
+
+  const { savedInvoices } = useInvoiceContext();
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader className="pb-2 border-b">
+          <DialogTitle>Saved Invoices</DialogTitle>
+          <DialogDescription>
+            <div className="space-y-2">
+              <p>You have {savedInvoices.length} saved invoices</p>
+              <ImportJsonButton setOpen={setOpen}/>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+
+        <SavedInvoicesList setModalState={setOpen} />
+      </DialogContent>
+    </Dialog>
+  );
 };
 
 export default InvoiceLoaderModal;