diff --git a/components/Form.tsx b/components/Form.tsx index c7477c6..7425cc5 100644 --- a/components/Form.tsx +++ b/components/Form.tsx @@ -69,10 +69,13 @@ function Form(): JSX.Element { // Currently selected QR Code / File. Only one of them is set. const [qrCode, setQrCode] = useState(undefined); const [file, setFile] = useState(undefined); + const [file2, setFile2] = useState(undefined); + const [payloadBody, setPayloadBody] = useState(undefined); const [saveLoading, setSaveLoading] = useState(false); const [fileLoading, setFileLoading] = useState(false); + const [file2Loading, setFile2Loading] = useState(false); const [generated, setGenerated] = useState(false); // this flag represents the file has been used to generate a pass @@ -112,8 +115,14 @@ function Form(): JSX.Element { // File Input ref const inputFile = useRef(undefined) + const inputFile2 = useRef(undefined) + + // Add event listener to listen for file change events useEffect(() => { + + let payloadBody; + if (inputFile && inputFile.current) { inputFile.current.addEventListener('change', async () => { let selectedFile = inputFile.current.files[0]; @@ -127,19 +136,28 @@ function Form(): JSX.Element { deleteAddErrorMessage(t('errors:'.concat('noFileOrQrCode'))); _setFileErrorMessages([]); checkBrowserType(); - const payloadBody = await getPayload(selectedFile); - - //TODO: feature flagging - - await createDataUrlForDisplay(selectedFile); + payloadBody = await getPayload(selectedFile); + await storeFileToLocalStorageBase64('receipt', selectedFile); await renderPhoto(payloadBody); } }); } + if (inputFile2 && inputFile2.current) { + inputFile2.current.addEventListener('change', async () => { + let selectedFile2 = inputFile2.current.files[0]; + if (selectedFile2) { + setFile2Loading(true); + setFile2(selectedFile2); + await storeFileToLocalStorageBase64('extra', selectedFile2); + payloadBody.extraUrl = 'extra'; + setFile2Loading(false); + } + }); + } checkBrowserType(); - }, [inputFile]) + }, [inputFile, inputFile2]) - async function createDataUrlForDisplay(file: File) { + async function storeFileToLocalStorageBase64(key: string, file: File) { if (window.localStorage) { @@ -147,36 +165,21 @@ function Form(): JSX.Element { const buffer = Buffer.from(await new Response(file).arrayBuffer()); let dataUrl = `data:${file.type};base64,${buffer.toString("base64")}`; - localStorage.setItem('pdfDataUrl', dataUrl); + localStorage.setItem(key, dataUrl); } } - async function showPDF() { - let dataUrl = localStorage.getItem('pdfDataUrl'); - // console.log(dataUrl) - let script = `function debugBase64(base64URL){ - var win = window.open(); - win.document.write(''); - } - debugBase64('${dataUrl}'); - `; - - let hrefValue = `javascript:${script};` - document.getElementById('mylink').setAttribute('href', hrefValue); - - } - async function getPayload(file) : Promise { try { const payload = await getPayloadBodyFromFile(file); - - //TODO: feature flagging - // const buffer = Buffer.from(await new Response(file).arrayBuffer()); - // let dataUrl = `data:${file.type};base64,${buffer.toString("base64")}`; + payload.dataUrl = "receipt"; + console.log(file2); - // payload.dataUrl = dataUrl; + if (file2) { + payload.extraUrl = file2.name; + } setPayloadBody(payload); setFileLoading(false); @@ -229,6 +232,11 @@ function Form(): JSX.Element { inputFile.current.click(); } + async function showFile2Dialog() { + inputFile2.current.click(); + + } + async function goToFAQ(e : any) { e.preventDefault(); window.location.href = '/faq'; @@ -487,7 +495,7 @@ function Form(): JSX.Element { // setAddErrorMessage('Sorry. Apple Wallet pass can be added using Safari or Chrome only.'); // setIsDisabledAppleWallet(true); // } - + const uaIsiOS15 = getUA.includes('15_'); if (isIOS && ((!osVersion.startsWith('15')) && !uaIsiOS15)) { const message = `Not iOS15 error: osVersion=${osVersion} UA=${getUA}`; @@ -592,6 +600,52 @@ function Form(): JSX.Element { }/> + +

The picture will be saved in your browser (in local storage, private). You can view it as extra info on your Wallet Pass' details pane.

+
+ +
+ + + + +
+
+ + + + {(file2) && +
+ + + + + { + file2 && file2.name + } + +
+ } + {fileErrorMessages.map((message, i) => + + )} + + }/> + {showDoseOption &&

@@ -615,7 +669,7 @@ function Form(): JSX.Element { } />} -

    diff --git a/public/displayLocallySavedItem.html b/public/displayLocallySavedItem.html new file mode 100644 index 0000000..a409912 --- /dev/null +++ b/public/displayLocallySavedItem.html @@ -0,0 +1,64 @@ + + + + + + + + + + +
    + +
    + + + + + \ No newline at end of file diff --git a/src/payload.ts b/src/payload.ts index 7ea16d7..379089d 100644 --- a/src/payload.ts +++ b/src/payload.ts @@ -44,6 +44,7 @@ export interface PayloadBody { receipts: HashTable; shcReceipt: SHCReceipt; dataUrl?: string; + extraUrl?: string; } export class Payload { @@ -52,6 +53,7 @@ export class Payload { shcReceipt: SHCReceipt; rawData: string; dataUrl?: string; + extraUrl?: string; backgroundColor: string; labelColor: string; foregroundColor: string; @@ -67,6 +69,8 @@ export class Payload { this.shcReceipt = body.shcReceipt; this.rawData = body.rawData; this.dataUrl = body.dataUrl; + this.extraUrl = body.extraUrl; + this.generic = { headerFields: [], primaryFields: [], @@ -83,19 +87,27 @@ export class Payload { this.img1x = Constants.img1xBlack; this.img2x = Constants.img2xBlack; - let displayLocallyStoredPDFUrl = window.location.href + "displayLocallyStoredPDF.html"; - console.log(displayLocallyStoredPDFUrl) - const attributedValue = `View`; - console.log('*** attributedValue ***'); - console.log(attributedValue); + if (this.dataUrl) { + let displayLocallyStoredPDFUrl = window.location.href + "displayLocallyStoredItem.html?item=receipt" ; + const attributedValue = `View Receipt`; + + this.generic.backFields.push({ + key: "original", + label: "Original receipt (saved locally in Safari)", + attributedValue: attributedValue + }); + } + + if (this.extraUrl) { + let extraUrl = window.location.href + "displayLocallyStoredItem.html?item=extra" ; + const attributedValue = `View Extra Info`; + this.generic.backFields.push({ + key: "extra", + label: "Extra image", + attributedValue: attributedValue + }); + } - //TODO: feature flagging - - this.generic.backFields.push({ - key: "original", - label: "Original receipt (saved locally in Safari)", - attributedValue: attributedValue - }); } } } diff --git a/src/process.ts b/src/process.ts index 34253c1..ee96a44 100644 --- a/src/process.ts +++ b/src/process.ts @@ -6,12 +6,15 @@ import * as Decode from './decode'; import {getScannedJWS, verifyJWS, decodeJWS} from "./shc"; import { PDFPageProxy } from 'pdfjs-dist/types/src/display/api'; +import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry"; // import {PNG} from 'pngjs' // import {decodeData} from "./decode"; // import {Result} from "@zxing/library"; -PdfJS.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PdfJS.version}/pdf.worker.js` +PdfJS.GlobalWorkerOptions.workerSrc = pdfjsWorker; + +// PdfJS.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PdfJS.version}/pdf.worker.js` export async function getPayloadBodyFromFile(file: File): Promise { // Read file