Merge pull request #67 from discipl/feature/download-button

Download pdf feature

clerk-frontend/package.json

@@ -6,6 +6,7 @@
     "@discipl/abundance-service": "^0.4.1",
     "@discipl/core-ephemeral": "^0.7.0",
     "@discipl/paper-wallet": "^0.6.0",
+    "jspdf": "^1.5.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "^2.1.8",

clerk-frontend/src/configuration/clerk-frontend-config.json

@@ -1,5 +1,5 @@
 {
-  "DEFAULT_EPHEMERAL_ENDPOINT" : "http://localhost:3232",
+  "DEFAULT_EPHEMERAL_ENDPOINT" : "http://localhost:3000",
   "DEFAULT_EPHEMERAL_WEBSOCKET_ENDPOINT" : "ws://localhost:3233",
   "PRODUCT_NEED" : "BRP_UITTREKSEL_NEED",
   "SOURCE_ARGUMENT" : "BSN",

clerk-frontend/src/need-wizard/DeliveryStep.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import * as paperWallet from '@discipl/paper-wallet'
 import CONFIGURATION from '../configuration/clerk-frontend-config.json'
+import * as jsPDF from 'jspdf'
 
 let template = CONFIGURATION.EXPORT_TYPES['@discipl/paper-wallet'].template
 
@@ -16,9 +17,9 @@ class ConfirmStep extends Component {
     this.canvasRef = React.createRef()
   }
 
-  deliveryChanged(link,vc) {
+  deliveryChanged(canvas) {
     if (this.props.deliveryChanged) {
-      this.props.deliveryChanged(link,vc)
+      this.props.deliveryChanged(canvas)
     }
   }
 
@@ -29,10 +30,25 @@ class ConfirmStep extends Component {
 
     console.log("Issued")
 
+    let pdf = new jsPDF({
+      orientation: 'p',
+      unit: 'pt',
+      format: [595.28, 841.89]
+    })
+
     this.canvasRef.current.width = template.canvasWidth
     this.canvasRef.current.height = template.canvasHeight
 
     await paperWallet.toCanvas(vc, template, this.canvasRef.current)
+
+    let imageData = this.canvasRef.current.toDataURL('image/png')
+
+
+
+
+    pdf.addImage(imageData, 'png', 0, 0, template.canvasWidth, template.canvasHeight)
+
+    this.deliveryChanged(pdf)
   }
 
   render() {

clerk-frontend/src/need-wizard/NeedWizard.js

@@ -5,6 +5,7 @@ import NeedStep from './NeedStep'
 import ConfirmStep from './ConfirmStep'
 import DeliveryStep from './DeliveryStep'
 
+
 const MAX_STEP = 3;
 
 class NeedWizard extends Component {
@@ -45,13 +46,23 @@ class NeedWizard extends Component {
     })
   }
 
+  _download(type) {
+    if(type === 'paperWallet') {
+      this.state.pdf.save('uittreksel.pdf')
+    } else {
+      window.alert('Download option ('+type+') not supported...')
+    }
+  }
+
   renderButtons() {
     let prevButton = <button onClick={this._prev}>Vorige</button>;
     let nextButton = <button onClick={this._next}>Volgende</button>;
     let wrongInfoButton = <button>Dit klopt niet!</button>;
     let rightInfoButton = <button onClick={this._next}>Dit klopt!</button>;
-    let downloadButton = <button>Download</button>; // currently still mock
-    let appleWalletButton = <button>Download naar Apple Wallet</button>;
+
+    let downloadButton = <button onClick={this._download.bind(this, 'paperWallet')}>Download</button>; // currently still mock
+    let appleWalletButton = <button onClick={this._download.bind(this, 'appleWallet')}>Download naar Apple Wallet</button>;
+
     let finishButton = <button onClick={this._first}>Afronden</button>;
 
     if (this.state.step === 0) {
@@ -99,11 +110,10 @@ class NeedWizard extends Component {
     })
   }
 
-  deliveryChanged(attestationLink, canvas) {
+  deliveryChanged( pdf) {
     this.setState({
       ...this.state,
-      'attestationLink': attestationLink,
-      'canvas': canvas
+      'pdf': pdf
     })
   }
 

docker-compose.yml

@@ -31,4 +31,4 @@ services:
       - TLS_ORG_KEY=/certs/org.key
       - DISABLE_LOGDB=1
     ports:
-      - 4080:80
+      - 4080:4080