feat: Integrate Printerz API for PDF generation and add customizable title input

Author: aramb-dev

netlify/functions/printerz-proxy.js

@@ -0,0 +1,73 @@
+const fetch = require('node-fetch');
+
+exports.handler = async function(event, context) {
+  // Only allow POST requests
+  if (event.httpMethod !== 'POST') {
+    return {
+      statusCode: 405,
+      body: JSON.stringify({ error: 'Method Not Allowed' })
+    };
+  }
+
+  try {
+    // Parse the request body
+    const requestBody = JSON.parse(event.body);
+    const { templateId, printerzData } = requestBody;
+
+    // Validate required fields
+    if (!templateId || !printerzData) {
+      return {
+        statusCode: 400,
+        body: JSON.stringify({ error: 'Missing required fields: templateId and printerzData' })
+      };
+    }
+
+    // Get API key from environment variables
+    const apiKey = process.env.VITE_PRINTERZ_API_KEY;
+    if (!apiKey) {
+      return {
+        statusCode: 500,
+        body: JSON.stringify({ error: 'API key not configured' })
+      };
+    }
+
+    // Make the request to Printerz API
+    const response = await fetch(`https://api.printerz.dev/templates/${templateId}/render`, {
+      method: 'POST',
+      headers: {
+        'x-api-key': apiKey,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(printerzData)
+    });
+
+    // If the API call failed, return the error
+    if (!response.ok) {
+      const errorText = await response.text();
+      return {
+        statusCode: response.status,
+        body: errorText
+      };
+    }
+
+    // Get the PDF data as an ArrayBuffer
+    const pdfBuffer = await response.arrayBuffer();
+
+    // Return the PDF as binary data
+    return {
+      statusCode: 200,
+      headers: {
+        'Content-Type': 'application/pdf',
+        'Content-Disposition': 'attachment; filename="transcription.pdf"'
+      },
+      body: Buffer.from(pdfBuffer).toString('base64'),
+      isBase64Encoded: true
+    };
+  } catch (error) {
+    console.error('Error in printerz-proxy function:', error);
+    return {
+      statusCode: 500,
+      body: JSON.stringify({ error: 'Internal Server Error', message: error.message })
+    };
+  }
+};

package-lock.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@ffmpeg/ffmpeg": "^0.12.6",
     "@ffmpeg/util": "^0.12.1",
+    "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.3",
     "@tabler/icons-react": "^3.31.0",

package.json

@@ -5,11 +5,12 @@ import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
 import { marked } from 'marked';
 import { Document as DocxDocument, Paragraph, Packer } from 'docx';
-import { jsPDF } from 'jspdf';
 // Add these imports for UTF-8 font support
 import 'jspdf-autotable';
 import pdfMake from 'pdfmake/build/pdfmake';
 import pdfFonts from 'pdfmake/build/vfs_fonts';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
 
 interface TranscriptionResultProps {
   transcription: string;
@@ -20,7 +21,19 @@ export function TranscriptionResult({ transcription }: TranscriptionResultProps)
   const [isGeneratingPdf, setIsGeneratingPdf] = useState(false);
   const [isGeneratingDocx, setIsGeneratingDocx] = useState(false);
   const [fontsLoaded, setFontsLoaded] = useState(false);
-  const [pdfTitle, setPdfTitle] = useState("Transcription");
+
+  // Set default title with timestamp
+  const getDefaultTitle = () => {
+    const now = new Date();
+    return `Transcription ${now.toLocaleDateString('en-US', {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    })} ${now.toLocaleTimeString('en-US')}`;
+  };
+
+  const [pdfTitle, setPdfTitle] = useState(getDefaultTitle());
 
   useEffect(() => {
     // Initialize pdfMake with default fonts
@@ -154,15 +167,82 @@ export function TranscriptionResult({ transcription }: TranscriptionResultProps)
     saveAs(content, "transcription-files.zip");
   };
 
-  const handlePrinterzExport = () => {
-    const printerzData = {
-      title: pdfTitle, // Use the custom title from your state
-      content: transcription
-    };
+  const handlePrinterzExport = async () => {
+    try {
+      // Get current date and time in a readable format
+      const now = new Date();
+      const formattedDate = now.toLocaleString('en-US', {
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+      });
+
+      // Default title includes timestamp if user hasn't changed it
+      if (pdfTitle === "Transcription") {
+        setPdfTitle(`Transcription ${formattedDate}`);
+      }
+
+      // Prepare data for Printerz
+      const printerzData = {
+        variables: {
+          title: pdfTitle,
+          content: transcription,
+          timestamp: formattedDate
+        },
+        options: {
+          printBackground: true
+        }
+      };
+
+      const templateId = '9fa3ff8e-c6dc-49b5-93ba-3532638cfe47';
+
+      // Show loading indicator
+      setIsGeneratingPdf(true);
+
+      // Use our proxy server instead of calling Printerz directly
+      const isNetlify = typeof window !== 'undefined' &&
+                        (window.location.hostname.includes('netlify.app') ||
+                         process.env.DEPLOY_ENV === 'netlify');
+
+      const apiUrl = isNetlify
+        ? '/.netlify/functions/printerz-proxy'
+        : '/api/printerz/render';
+
+      const response = await fetch(apiUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          templateId,
+          printerzData
+        })
+      });
 
-    console.log("Sending to Printerz:", printerzData);
-    // Integration with Printerz API would go here
-    // For example: window.open("https://app.printerz.app/generate?template=your-template-id&data=" + encodeURIComponent(JSON.stringify(printerzData)), "_blank");
+      if (!response.ok) {
+        throw new Error(`Proxy error: ${response.status} ${response.statusText}`);
+      }
+
+      // Get PDF as blob
+      const pdfBuffer = await response.arrayBuffer();
+      const blob = new Blob([pdfBuffer], { type: 'application/pdf' });
+
+      // Save the file
+      saveAs(blob, `${pdfTitle.replace(/[/\\?%*:|"<>]/g, '-')}.pdf`);
+
+      // Clear loading state
+      setIsGeneratingPdf(false);
+
+    } catch (error) {
+      console.error('Error generating PDF with Printerz:', error);
+      setIsGeneratingPdf(false);
+      // Show error message to user
+      alert('Error generating PDF. Please try again later.');
+    }
   };
 
   const renderMarkdown = () => {
@@ -207,35 +287,59 @@ export function TranscriptionResult({ transcription }: TranscriptionResultProps)
         </TabsContent>
 
         <TabsContent value="pdf" className="mt-4">
-          <div className="bg-gray-50 dark:bg-gray-900 rounded-md border border-gray-200 dark:border-gray-800 p-4 min-h-80 flex flex-col items-center">
-            {isGeneratingPdf ? (
-              <div className="flex items-center justify-center h-80">
-                <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
-              </div>
-            ) : pdfUrl ? (
-              <div className="w-full h-80 overflow-auto">
-                <iframe
-                  src={pdfUrl}
-                  className="w-full h-full border-0"
-                  title="PDF Preview"
-                />
-              </div>
-            ) : (
-              <div className="flex flex-col items-center justify-center h-80 space-y-4">
-                <p className="text-gray-500">Preview your PDF before downloading</p>
-                <Button onClick={generatePdf} disabled={!fontsLoaded}>
-                  Generate PDF Preview
-                </Button>
-              </div>
-            )}
+          <div className="bg-gray-50 dark:bg-gray-900 rounded-md border border-gray-200 dark:border-gray-800 p-4">
+            {/* Add title customization field */}
+            <div className="mb-4">
+              <Label htmlFor="pdf-title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Choose a title for your PDF
+              </Label>
+              <Input
+                id="pdf-title"
+                type="text"
+                value={pdfTitle}
+                onChange={(e) => setPdfTitle(e.target.value)}
+                className="block w-full rounded-md border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                placeholder="Transcription with timestamp will be added automatically"
+              />
+            </div>
+
+            <div className="min-h-80 flex flex-col items-center">
+              {isGeneratingPdf ? (
+                <div className="flex items-center justify-center h-80">
+                  <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
+                </div>
+              ) : pdfUrl ? (
+                <div className="w-full h-80 overflow-auto">
+                  <iframe
+                    src={pdfUrl}
+                    className="w-full h-full border-0"
+                    title="PDF Preview"
+                  />
+                </div>
+              ) : (
+                <div className="flex flex-col items-center justify-center h-80 space-y-4">
+                  <p className="text-gray-500">Preview your PDF before downloading</p>
+                  <Button onClick={generatePdf} disabled={!fontsLoaded}>
+                    Generate PDF Preview
+                  </Button>
+                </div>
+              )}
+            </div>
           </div>
-          <div className="mt-4 flex justify-end">
+          <div className="mt-4 flex justify-end space-x-2">
             <Button
               onClick={() => handleDownload('pdf')}
               disabled={isGeneratingPdf || !fontsLoaded}
             >
               {isGeneratingPdf ? 'Generating...' : 'Download as PDF'}
             </Button>
+            <Button
+              onClick={handlePrinterzExport}
+              disabled={isGeneratingPdf}
+              className="bg-emerald-600 hover:bg-emerald-700"
+            >
+              {isGeneratingPdf ? 'Generating...' : 'Generate with Printerz'}
+            </Button>
           </div>
         </TabsContent>
 

src/components/TranscriptionResult.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }