diff --git a/app/lib/svgToPdf.ts b/app/lib/svgToPdf.ts index 9879713c..fe282b0b 100644 --- a/app/lib/svgToPdf.ts +++ b/app/lib/svgToPdf.ts @@ -3,12 +3,18 @@ import Handlebars from 'handlebars'; import { Credential } from '../types/credential'; import { PDF } from '../types/pdf'; -export async function convertSVGtoPDF(credential: Credential): Promise { - if (!credential['renderMethod']) { - return null; +export async function convertSVGtoPDF( + credential: Credential, publicLink: string | null, qrCodeBase64: string | null): Promise { + if (!credential['renderMethod'] || !publicLink || !qrCodeBase64) { + return null; // Ensure we have the necessary data } + const templateURL = credential.renderMethod?.[0].id; // might want to sort if there are more than one renderMethod + let source = ''; + const data = { credential: credential, qr_code: qrCodeBase64 }; + + // Fetch the template content if (templateURL) { try { const response = await fetch(templateURL); @@ -21,9 +27,8 @@ export async function convertSVGtoPDF(credential: Credential): Promise(null); const [showExportToPdfButton, setShowExportToPdfButton] = useState(false); - + const [qrCodeBase64, setQrCodeBase64] = useState(null); // State to store base64 data URL of QR code + + const qrCodeRef = useRef(null); // Reference to QRCode component to access toDataURL const isVerified = useVerifyCredential(rawCredentialRecord)?.result.verified; const inputRef = useRef(null); const disableOutsidePressHandler = inputRef.current?.isFocused() ?? false; const selectionColor = Platform.select({ ios: theme.color.brightAccent, android: theme.color.highlightAndroid }); + + useEffect(() => { + if (qrCodeRef.current) { + // Once the ref is available, extract the base64 data URL for the QR code + qrCodeRef.current.toDataURL((dataUrl: string) => { + setQrCodeBase64(dataUrl); + }); + } + }, [qrCodeRef, publicLink]); // Re-run when publicLink changes + useEffect(() => { const fetchData = async () => { + if (!qrCodeBase64 || publicLink) { + console.log('QR code or public link is missing.'); + //return; + } let rawPdf; try { - rawPdf = await convertSVGtoPDF(credential); + // Pass qrCodeBase64 directly to the function + rawPdf = await convertSVGtoPDF(credential, publicLink, qrCodeBase64); setPdf(rawPdf); } catch (e) { console.log('ERROR GENERATING PDF:'); @@ -58,7 +75,7 @@ export default function PublicLinkScreen ({ navigation, route }: PublicLinkScree }; fetchData(); - }, []); + }, [qrCodeBase64, publicLink]); // Run when qrCodeBase64 or publicLink changes const screenTitle = { [PublicLinkScreenMode.Default]: 'Public Link', @@ -74,12 +91,6 @@ export default function PublicLinkScreen ({ navigation, route }: PublicLinkScree }); } - const handleShareAsPdf = async() => { - if (pdf) { - Share.open({url: `file://${pdf.filePath}`}); - } - }; - function displayErrorModal(err: Error) { function goToErrorSource() { clearGlobalModal(); @@ -109,6 +120,63 @@ export default function PublicLinkScreen ({ navigation, route }: PublicLinkScree }); } + // Function to handle PDF generation + async function handleGeneratePDF() { + if (!qrCodeBase64) { + console.error('QR code base64 not available.'); + return; + } + try { + const generatedPdf = await convertSVGtoPDF(credential, publicLink, qrCodeBase64); // Pass the QR code data URL to PDF generator + setPdf(generatedPdf); // Store the generated PDF + } catch (error) { + console.error('Error generating PDF:', error); + } + if (pdf) { + Share.open({url: `file://${pdf.filePath}`}); + } + } + + // Button press handler for exporting PDF + async function handleShareAsPdfButton() { + if (!isVerified) { + return displayNotVerifiedModal(); // Show modal if the credential isn't verified + } + // Prompt for confirmation before proceeding + const confirmed = await displayGlobalModal({ + title: 'Are you sure?', + confirmText: 'Export to PDF', + cancelOnBackgroundPress: true, + body: ( + <> + + {publicLink !== null + ? 'This will export your credential to PDF.' + : 'You must create a public link before exporting to PDF. The link will automatically expire 1 year after creation.' + } + +