@velocitycareerlabs/vc-renderer-sample 1.25.0-dev-build.16fb31afd → 1.25.0-dev-build.19b953994

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@velocitycareerlabs/vc-renderer-sample",
-  "version": "1.25.0-dev-build.16fb31afd",
+  "version": "1.25.0-dev-build.19b953994",
   "description": "VC Renderer Sample",
   "repository": "https://github.com/velocitycareerlabs/packages",
   "publishConfig": {
@@ -12,7 +12,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^6.0.0",
     "@mui/material": "^6.0.0",
-    "@react-pdf/renderer": "^4.1.5",
+    "@react-pdf/renderer": "^3.0.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -20,7 +20,7 @@
     "@types/node": "^16.18.119",
     "@types/react": "18.3.4",
     "@types/react-dom": "18.3.0",
-    "@velocitycareerlabs/vc-renderer": "1.25.0-dev-build.16fb31afd",
+    "@velocitycareerlabs/vc-renderer": "1.25.0-dev-build.19b953994",
     "react": "18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
@@ -58,5 +58,5 @@
       "last 1 safari version"
     ]
   },
-  "gitHead": "633ac8221e186bfc915b5007ea3253fdede52142"
+  "gitHead": "70c50ceb4c67c3800fd4e8d36c08be12a76ba9bd"
 }

package/src/App.tsx

@@ -1,14 +1,13 @@
-/* eslint-disable better-mutation/no-mutation */
 import { useCallback, useState } from 'react';
 import {
   VcsSummaryRenderer,
   VcDetailsRenderer,
 } from '@velocitycareerlabs/vc-renderer';
-import { Typography, Box, Button } from '@mui/material';
-import { pdf } from '@react-pdf/renderer';
+import { Typography, Box } from '@mui/material';
 import { Sidebar } from './components/Sidebar';
 import { SummaryFooter } from './components/SummaryFooter';
 import { VcDetailsFooter } from './components/VcDetailsFooter';
+import { PrintPdfButton } from './components/PrintPdfButton';
 import {
   PdfCredentialDetailsVcPrepared,
   PdfCredentialsDetailsVcPrepared,
@@ -43,23 +42,6 @@ const App = () => {
     });
   }, []);
 
-  const printVc = async (Component: any) => {
-    const blob = await pdf(Component).toBlob();
-    const iframe: HTMLIFrameElement = document.createElement('iframe');
-    document.body.appendChild(iframe);
-    iframe.style.display = 'none';
-    iframe.src = URL.createObjectURL(blob);
-    iframe.onload = () => {
-      setTimeout(() => {
-        iframe.focus();
-        const contectWindow = iframe?.contentWindow;
-        if (contectWindow) {
-          contectWindow.print();
-        }
-      }, 1);
-    };
-  };
-
   return (
     <div className="App">
       <Typography variant="h6" pt={8} mb={1}>
@@ -279,64 +261,52 @@ const App = () => {
       <Typography variant="h6" pt={8}>
         Printable. Using vcsPrepared
       </Typography>
-
-      <Button
-        onClick={() => printVc(<PdfCredentialDetailsVcPrepared />)}
-        variant="contained"
-      >
-        Print Credentail Details
-      </Button>
-      <Button
-        onClick={() => printVc(<PdfCredentialsDetailsVcPrepared />)}
-        variant="contained"
-        sx={{ marginLeft: 4 }}
-      >
-        Print Multiple Credentils
-      </Button>
+      <Box sx={styles.buttonContainer}>
+        <PrintPdfButton
+          pdfDocument={<PdfCredentialDetailsVcPrepared />}
+          label="Print Credentail Details"
+        />
+        <PrintPdfButton
+          pdfDocument={<PdfCredentialsDetailsVcPrepared />}
+          label="Print Multiple Credentils"
+        />
+      </Box>
 
       <Typography variant="h6" pt={8}>
         Printable. Using Raw Data
       </Typography>
-      <Button
-        onClick={() => printVc(<PdfCredentialDetailsVcRaw />)}
-        variant="contained"
-      >
-        Print Credentail Details
-      </Button>
-      <Button
-        onClick={() => printVc(<PdfCredentialsDetailsVcsRaw />)}
-        variant="contained"
-        sx={{ marginLeft: 4 }}
-      >
-        Print Multiple Credentails
-      </Button>
+      <Box sx={styles.buttonContainer}>
+        <PrintPdfButton
+          pdfDocument={<PdfCredentialDetailsVcRaw />}
+          label="Print Credentail Details"
+        />
+        <PrintPdfButton
+          pdfDocument={<PdfCredentialsDetailsVcsRaw />}
+          label="Print Multiple Credentils"
+        />
+      </Box>
 
       <Typography variant="h6" pt={8}>
         Printable. Missing Data
       </Typography>
-      <Button
-        onClick={() => printVc(<PdfCredentialDetailsVcPreparedMissingData />)}
-        variant="contained"
-      >
-        Print Credentail wo header data
-      </Button>
-      <Button
-        onClick={() => printVc(<PdfCredentialsDetailsVcPreparedMissingData />)}
-        variant="contained"
-        sx={{ marginLeft: 4 }}
-      >
-        Print Multiple Credentails wo header data
-      </Button>
+      <Box sx={styles.buttonContainer}>
+        <PrintPdfButton
+          pdfDocument={<PdfCredentialDetailsVcPreparedMissingData />}
+          label="Print Credentail wo header data"
+        />
+        <PrintPdfButton
+          pdfDocument={<PdfCredentialsDetailsVcPreparedMissingData />}
+          label="Print Multiple Credentails wo header data"
+        />
+      </Box>
 
       <Typography variant="h6" pt={8}>
         Printable. Missing Data Raw
       </Typography>
-      <Button
-        onClick={() => printVc(<PdfCredentialsDetailsVcsRawMissingData />)}
-        variant="contained"
-      >
-        Print Credentail missing data
-      </Button>
+      <PrintPdfButton
+        pdfDocument={<PdfCredentialsDetailsVcsRawMissingData />}
+        label="Print Credentail missing data"
+      />
     </div>
   );
 };
@@ -392,4 +362,9 @@ const styles = {
       height: '100px',
     },
   },
+  buttonContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    gap: '10px',
+  },
 };

package/src/components/PDFReport/index.tsx

@@ -96,9 +96,9 @@ export const PdfCredentialDetailsVcRaw = () => {
         applicantName="John Doe"
         userName="Jane Doe"
         appLogo={logo192}
-        categoriesTitle={{ [CREDENTIALS[0].did]: 'Assessments' }}
-        vcsStatus={{ [CREDENTIALS[0].did]: 'Verified' as any }}
-        sidebarItems={{ [CREDENTIALS[0].did]: sidebarItems }}
+        categoriesTitle={{ [CREDENTIALS[0].id]: 'Assessments' }}
+        vcsStatus={{ [CREDENTIALS[0].id]: 'Verified' as any }}
+        sidebarItems={{ [CREDENTIALS[0].id]: sidebarItems }}
       />
     </Document>
   );
@@ -106,25 +106,25 @@ export const PdfCredentialDetailsVcRaw = () => {
 
 export const PdfCredentialsDetailsVcsRaw = () => {
   const categoriesTitle = {
-    [CREDENTIALS[6].did]: 'Contacts',
-    [CREDENTIALS[5].did]: 'Contacts',
-    [CREDENTIALS[4].did]: 'Documents',
-    [CREDENTIALS[3].did]: 'Employment History',
-    [CREDENTIALS[2].did]: 'Badges & Achievements',
-    [CREDENTIALS[1].did]: 'Contacts',
-    [CREDENTIALS[0].did]: 'Assessments',
+    [CREDENTIALS[6].id]: 'Contacts',
+    [CREDENTIALS[5].id]: 'Contacts',
+    [CREDENTIALS[4].id]: 'Documents',
+    [CREDENTIALS[3].id]: 'Employment History',
+    [CREDENTIALS[2].id]: 'Badges & Achievements',
+    [CREDENTIALS[1].id]: 'Contacts',
+    [CREDENTIALS[0].id]: 'Assessments',
   };
   const vcsStatus = CREDENTIALS.reduce<{ [key: string]: string }>((acc, vc) => {
-    const { did } = vc;
-    acc[did] = 'Verified';
+    const { id } = vc;
+    acc[id] = 'Verified';
     return acc;
   }, {});
 
   const sidebarItemsMapped = CREDENTIALS.reduce<{
     [key: string]: React.ReactNode[];
   }>((acc, vc) => {
-    const { did } = vc;
-    acc[did] = sidebarItems;
+    const { id } = vc;
+    acc[id] = sidebarItems;
     return acc;
   }, {});
   return (
@@ -203,16 +203,16 @@ export const PdfCredentialsDetailsVcPreparedMissingData = () => {
 
 export const PdfCredentialsDetailsVcsRawMissingData = () => {
   const categoriesTitle = {
-    [CREDENTIALS[5].did]: 'Contacts',
-    [CREDENTIALS[4].did]: 'Documents',
-    [CREDENTIALS[3].did]: 'Employment History',
-    [CREDENTIALS[2].did]: 'Badges & Achievements',
-    [CREDENTIALS[1].did]: 'Contacts',
+    [CREDENTIALS[5].id]: 'Contacts',
+    [CREDENTIALS[4].id]: 'Documents',
+    [CREDENTIALS[3].id]: 'Employment History',
+    [CREDENTIALS[2].id]: 'Badges & Achievements',
+    [CREDENTIALS[1].id]: 'Contacts',
   };
   const vcsStatus = [CREDENTIALS[1]].reduce<{ [key: string]: string }>(
     (acc, vc) => {
-      const { did } = vc;
-      acc[did] = 'Verified';
+      const { id } = vc;
+      acc[id] = 'Verified';
       return acc;
     },
     {}
@@ -221,8 +221,8 @@ export const PdfCredentialsDetailsVcsRawMissingData = () => {
   const sidebarItemsMapped = [CREDENTIALS[1]].reduce<{
     [key: string]: React.ReactNode[];
   }>((acc, vc) => {
-    const { did } = vc;
-    acc[did] = sidebarItems;
+    const { id } = vc;
+    acc[id] = sidebarItems;
     return acc;
   }, {});
 

package/src/components/PrintPdfButton/index.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable better-mutation/no-mutation */
+import React from 'react';
+import { BlobProvider } from '@react-pdf/renderer';
+import { Button } from '@mui/material';
+
+type PrintPdfButtonProps = {
+  pdfDocument: React.ReactElement;
+  label: string;
+};
+
+export const PrintPdfButton: React.FC<PrintPdfButtonProps> = ({
+  pdfDocument,
+  label,
+}) => {
+  const handlePrint = React.useCallback((blobUrl: string) => {
+    const iframe = document.createElement('iframe');
+    iframe.style.display = 'none';
+    document.body.appendChild(iframe);
+    iframe.src = blobUrl;
+    iframe.onload = () => {
+      setTimeout(() => {
+        iframe.focus();
+        const { contentWindow } = iframe;
+        if (contentWindow) {
+          contentWindow.onafterprint = () => {
+            document.body.removeChild(iframe);
+            URL.revokeObjectURL(blobUrl);
+          };
+          contentWindow.print();
+        }
+      }, 100);
+    };
+  }, []);
+
+  return (
+    <BlobProvider document={pdfDocument}>
+      {({ url }) => {
+        return (
+          <Button variant="contained" onClick={() => url && handlePrint(url)}>
+            {label}
+          </Button>
+        );
+      }}
+    </BlobProvider>
+  );
+};

package/src/mocks/credentialsMapped.tsx

@@ -449,7 +449,8 @@ export const CREDENTIALS_MAPPED = [
     summary: {
       title: 'Badge',
       subTitle: 'Open Badge',
-      summaryDetail: 'Residential Electricity',
+      summaryDetail:
+        'Residential Electricity very long two rows summary description',
       logo: 'https://www.velocitynetwork.foundation/wp-content/uploads/2024/08/Residential-Electricity-Badge.jpg',
       issuerLogo:
         'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAHXPluq6GtTRPDIHRv5kJPy86uFjp5sO7hg&s',