SVG to PDF conversion code

openwallet-foundation-labs · Oct 25, 2023 · 6237cc1 · 6237cc1
1 parent 4a2e1f4
commit 6237cc1
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 1 deletion.
diff --git a/app/screens/PublicLinkScreen/PublicLinkScreen.tsx b/app/screens/PublicLinkScreen/PublicLinkScreen.tsx
@@ -5,6 +5,9 @@ import { TextInput } from 'react-native-paper';
 import QRCode from 'react-native-qrcode-svg';
 import Clipboard from '@react-native-clipboard/clipboard';
 import OutsidePressHandler from 'react-native-outside-press';
+import Handlebars from 'handlebars';
+import RNHTMLtoPDF from 'react-native-html-to-pdf';
+import Share from 'react-native-share';
 
 import { PublicLinkScreenProps } from './PublicLinkScreen.d';
 import dynamicStyleSheet from './PublicLinkScreen.styles';
@@ -49,6 +52,45 @@ export default function PublicLinkScreen ({ navigation, route }: PublicLinkScree
     });
   }
 
+
+  const handleShareAsPdf = async() => {
+    // templateURL = svg template from id of renderMethod in Credential
+    const templateURL = credential.renderMethod?.[0].id; // might want to sort if there are more than one renderMethod
+    let source = '';
+    if (templateURL) {
+      await fetch(templateURL)
+        .then(response => {
+          return response.text();
+        }).then(data => {
+          source = data;
+        }).catch(error => {
+          console.error('An error occurred fetching the SVG Template:', error);
+        });
+    }
+
+    const template = Handlebars.compile(source);
+    let achievement = credential.credentialSubject.hasCredential ??
+    credential.credentialSubject.achievement;
+    if (Array.isArray(achievement)) {
+      achievement = achievement[0];
+    }
+    const credentialName = achievement?.name ?? 'Unknown Credential';
+    const data = { 
+      'credentialSubject': { 'name': credentialName },
+      'credential': { 'name': credential.name },
+      'issuanceDate': credential.issuanceDate
+    };
+    const svg = template(data);
+
+    const options = {
+      html: svg,
+      fileName: `${credential.name} Credential`,
+      base64: false,
+    };
+    const pdf = await RNHTMLtoPDF.convert(options);
+    Share.open({url: `file://${pdf.filePath}`});
+  };
+
   function displayErrorModal(err: Error) {
     function goToErrorSource() {
       clearGlobalModal();
@@ -366,6 +408,21 @@ export default function PublicLinkScreen ({ navigation, route }: PublicLinkScree
             )
             }
             <View style={styles.otherOptionsContainer}>
+              {credential.renderMethod && <Button
+                title="Export To PDF"
+                buttonStyle={mixins.buttonIcon}
+                containerStyle={mixins.buttonIconContainer}
+                titleStyle={mixins.buttonIconTitle}
+                iconRight
+                onPress={handleShareAsPdf}
+                icon={
+                  <Ionicons
+                    name="document-text"
+                    size={theme.iconSize}
+                    color={theme.color.iconInactive}
+                  />
+                }
+              />}
               <Button
                 title="Add to LinkedIn Profile"
                 buttonStyle={mixins.buttonIcon}

diff --git a/app/screens/ShareHomeScreen/ShareHomeScreen.tsx b/app/screens/ShareHomeScreen/ShareHomeScreen.tsx
@@ -43,7 +43,6 @@ export default function ShareHomeScreen({ navigation, route }: ShareHomeScreenPr
       ),
     });
     if (!confirmedShare) return goToShareHome();
-
     const rawCredentialRecords = await NavigationUtil.selectCredentials({
       title: 'Share Credentials',
       instructionText: `Select the credential(s) you want to share with ${issuerName}.`,

diff --git a/app/types/credential.ts b/app/types/credential.ts
@@ -82,6 +82,13 @@ export type Proof = {
   jws?: string;
 }
 
+export type RenderMethod = {
+  id: string;
+  type: string;
+  name: string;
+  css3MediaQuery: string;
+}
+
 // https://digitalcredentials.github.io/dcc/v1/dcc-context-v1.json
 export type Credential = {
   readonly '@context': string[];         // https://w3c.github.io/vc-data-model/#contexts
@@ -94,6 +101,7 @@ export type Credential = {
   readonly credentialStatus?: CredentialStatus;
   readonly proof?: Proof;                // https://w3c.github.io/vc-data-model/#proofs-signatures
   readonly name?: string;
+  readonly renderMethod?: RenderMethod[];
 }
 
 // https://w3c-ccg.github.io/vc-status-list-2021