Merge branch 'master' of https://github.com/aliabb01/invoify

al1abb · Dec 6, 2023 · a429717 · a429717
2 parents e2b7208 + e568a76
commit a429717
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 72 deletions.
diff --git a/app/components/index.ts b/app/components/index.ts
@@ -82,6 +82,7 @@ import NewInvoiceAlert from "./modals/alerts/NewInvoiceAlert";
    ========================= */
 // Invoice templates
 import DynamicInvoiceTemplate from "./templates/invoice-pdf/DynamicInvoiceTemplate";
+import InvoiceLayout from "./templates/invoice-pdf/InvoiceLayout";
 import InvoiceTemplate1 from "./templates/invoice-pdf/InvoiceTemplate1";
 import InvoiceTemplate2 from "./templates/invoice-pdf/InvoiceTemplate2";
 
@@ -134,6 +135,7 @@ export {
     SignatureFontSelector,
     NewInvoiceAlert,
     DynamicInvoiceTemplate,
+    InvoiceLayout,
     InvoiceTemplate1,
     InvoiceTemplate2,
     SendPdfEmail,

diff --git a/app/components/templates/invoice-pdf/InvoiceLayout.tsx b/app/components/templates/invoice-pdf/InvoiceLayout.tsx
@@ -0,0 +1,49 @@
+import { ReactNode } from "react";
+
+import { InvoiceType } from "@/app/types/types";
+
+type InvoiceLayoutProps = {
+    data: InvoiceType;
+    children: ReactNode;
+};
+
+export default function InvoiceLayout({ data, children }: InvoiceLayoutProps) {
+    const { sender, receiver, details } = data;
+
+    // Instead of fetching all fonts, get the specific one user selected
+    const fontHref = details.signature?.fontFamily
+        ? `https://fonts.googleapis.com/css2?family=${details?.signature?.fontFamily}&display=swap`
+        : "";
+
+    const head = (
+        <>
+            {/* //! NOTE: This causes performance issues in production. (Estimated saving 1.38s) */}
+            <link
+                href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
+                rel="stylesheet"
+            />
+
+            {details.signature?.fontFamily && (
+                <>
+                    <link
+                        rel="preconnect"
+                        href="https://fonts.googleapis.com"
+                    />
+                    <link
+                        rel="preconnect"
+                        href="https://fonts.gstatic.com"
+                        crossOrigin="anonymous"
+                    />
+                    <link href={fontHref} rel="stylesheet" />
+                </>
+            )}
+        </>
+    );
+
+    return (
+        <>
+            {head}
+            {children}
+        </>
+    );
+}
diff --git a/app/components/templates/invoice-pdf/InvoiceTemplate1.tsx b/app/components/templates/invoice-pdf/InvoiceTemplate1.tsx
@@ -1,5 +1,8 @@
 import React from "react";
 
+// Components
+import { InvoiceLayout } from "@/app/components";
+
 // Helpers
 import { formatNumberWithCommas, isDataUrl } from "@/lib/helpers";
 
@@ -12,38 +15,8 @@ import { DATE_OPTIONS } from "@/lib/variables";
 const InvoiceTemplate = (data: InvoiceType) => {
     const { sender, receiver, details } = data;
 
-    // Instead of fetching all fonts, get the specific one user selected
-    const fontHref = details.signature?.fontFamily
-        ? `https://fonts.googleapis.com/css2?family=${details?.signature?.fontFamily}&display=swap`
-        : "";
-
-    const heading = (
-        <>
-            {/* //! NOTE: This causes performance issues in production. (Estimated saving 1.38s) */}
-            <link
-                href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
-                rel="stylesheet"
-            />
-
-            {details.signature?.fontFamily && (
-                <>
-                    <link
-                        rel="preconnect"
-                        href="https://fonts.googleapis.com"
-                    />
-                    <link
-                        rel="preconnect"
-                        href="https://fonts.gstatic.com"
-                        crossOrigin="anonymous"
-                    />
-                    <link href={fontHref} rel="stylesheet" />
-                </>
-            )}
-        </>
-    );
-    const content = (
-        <>
-            {heading}
+    return (
+        <InvoiceLayout data={data}>
             <div
                 style={{
                     position: "relative",
@@ -348,10 +321,8 @@ const InvoiceTemplate = (data: InvoiceType) => {
                     ) : null}
                 </div>
             </div>
-        </>
+        </InvoiceLayout>
     );
-
-    return <>{content}</>;
 };
 
 export default InvoiceTemplate;
diff --git a/app/components/templates/invoice-pdf/InvoiceTemplate2.tsx b/app/components/templates/invoice-pdf/InvoiceTemplate2.tsx
@@ -1,5 +1,8 @@
 import React from "react";
 
+// Components
+import { InvoiceLayout } from "@/app/components";
+
 // Helpers
 import { formatNumberWithCommas, isDataUrl } from "@/lib/helpers";
 
@@ -9,40 +12,10 @@ import { InvoiceType } from "@/app/types/types";
 // Variables
 import { DATE_OPTIONS } from "@/lib/variables";
 
-const InvoiceTemplate2 = ({ sender, receiver, details }: InvoiceType) => {
-    // const ReactDOMServer = (await import("react-dom/server")).default;
-
-    // Instead of fetching all fonts, get the specific one user selected
-    const fontHref = details.signature?.fontFamily
-        ? `https://fonts.googleapis.com/css2?family=${details?.signature?.fontFamily}&display=swap`
-        : "";
-
-    const heading = (
-        <>
-            <link
-                href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
-                rel="stylesheet"
-            />
-
-            {details.signature?.fontFamily && (
-                <>
-                    <link
-                        rel="preconnect"
-                        href="https://fonts.googleapis.com"
-                    />
-                    <link
-                        rel="preconnect"
-                        href="https://fonts.gstatic.com"
-                        crossOrigin="anonymous"
-                    />
-                    <link href={fontHref} rel="stylesheet" />
-                </>
-            )}
-        </>
-    );
-    const content = (
-        <>
-            {heading}
+const InvoiceTemplate2 = (data: InvoiceType) => {
+    const { sender, receiver, details } = data;
+    return (
+        <InvoiceLayout data={data}>
             <div
                 style={{
                     position: "relative",
@@ -349,10 +322,8 @@ const InvoiceTemplate2 = ({ sender, receiver, details }: InvoiceType) => {
                     ) : null}
                 </div>
             </div>
-        </>
+        </InvoiceLayout>
     );
-
-    return <>{content}</>;
 };
 
 export default InvoiceTemplate2;