Another attempt to fix Mobile Safari not saving photo cards correctly
* Moved photo card right underneath "Save as Photo" button * Update to latest html-to-image library (1.9.0) * Added 1px border to photo card * Hide photo card when camera opened or new file selected * Rev version to 2.1.5
This commit is contained in:
Ryan Slobojan
parent
ddd6e19266
commit
0a91eadb14
|
|
@ -1,9 +1,8 @@
|
|||
import {saveAs} from 'file-saver';
|
||||
import React, {FormEvent, useEffect, useRef, useState, Component} from "react";
|
||||
import React, {FormEvent, useEffect, useRef, useState} from "react";
|
||||
import {BrowserQRCodeReader, IScannerControls} from "@zxing/browser";
|
||||
import {Result} from "@zxing/library";
|
||||
import {useTranslation} from 'next-i18next';
|
||||
import Link from 'next/link';
|
||||
|
||||
import Card from "./Card";
|
||||
import Alert from "./Alert";
|
||||
|
|
@ -25,8 +24,7 @@ const options = [
|
|||
{ label: 'Nova Scotia', value: 'https://novascotia.flow.canimmunize.ca/en/portal'},
|
||||
{ label: 'Québec', value: 'https://covid19.quebec.ca/PreuveVaccinale'},
|
||||
{ label: 'Saskatchewan', value: 'https://services.saskatchewan.ca/#/login'},
|
||||
{ label: 'Yukon', value: 'https://service.yukon.ca/forms/en/get-covid19-proof-of-vaccination'}
|
||||
|
||||
{ label: 'Yukon', value: 'https://service.yukon.ca/forms/en/get-covid19-proof-of-vaccination'},
|
||||
]
|
||||
|
||||
function Form(): JSX.Element {
|
||||
|
|
@ -63,7 +61,6 @@ function Form(): JSX.Element {
|
|||
// const [warningMessages, _setWarningMessages] = useState<Array<string>>([]);
|
||||
const hitcountHost = 'https://stats.vaccine-ontario.ca';
|
||||
|
||||
|
||||
// Check if there is a translation and replace message accordingly
|
||||
const setAddErrorMessage = (message: string) => {
|
||||
if (!message) {
|
||||
|
|
@ -83,21 +80,9 @@ function Form(): JSX.Element {
|
|||
_setFileErrorMessages(Array.from(new Set([...addErrorMessages, translation !== message ? translation : message])));
|
||||
};
|
||||
|
||||
// const setWarningMessage = (message: string) => {
|
||||
// if (!message) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const translation = t('errors:'.concat(message));
|
||||
// _setWarningMessages(Array.from(new Set([...warningMessages, translation !== message ? translation : message])));
|
||||
// }
|
||||
|
||||
const deleteAddErrorMessage = (message: string) =>{
|
||||
_setAddErrorMessages(addErrorMessages.filter(item => item !== message))
|
||||
}
|
||||
const deleteFileErrorMessage = (message: string) =>{
|
||||
_setFileErrorMessages(addErrorMessages.filter(item => item !== message))
|
||||
}
|
||||
|
||||
// File Input ref
|
||||
const inputFile = useRef<HTMLInputElement>(undefined)
|
||||
|
|
@ -171,16 +156,13 @@ function Form(): JSX.Element {
|
|||
|
||||
// Clear out any currently-selected files
|
||||
inputFile.current.value = '';
|
||||
|
||||
|
||||
// Hide our existing pass image
|
||||
document.getElementById('shc-pass-image').hidden = true;
|
||||
|
||||
inputFile.current.click();
|
||||
}
|
||||
|
||||
async function gotoOntarioHealth(e) {
|
||||
e.preventDefault();
|
||||
// window.open('https://covid19.ontariohealth.ca','_blank'); // this created many extra steps in mobile chrome to return to the grassroots main window... if user has many windows open, they get lost (BACK button on the same window is easier for user to return)
|
||||
window.location.href = 'https://covid19.ontariohealth.ca';
|
||||
|
||||
}
|
||||
async function goToFAQ(e) {
|
||||
e.preventDefault();
|
||||
window.location.href = '/faq';
|
||||
|
|
@ -259,6 +241,9 @@ function Form(): JSX.Element {
|
|||
)
|
||||
);
|
||||
|
||||
// Hide our existing pass image
|
||||
document.getElementById('shc-pass-image').hidden = true;
|
||||
|
||||
setQrCode(undefined);
|
||||
setPayloadBody(undefined);
|
||||
setFile(undefined);
|
||||
|
|
@ -407,7 +392,6 @@ function Form(): JSX.Element {
|
|||
|
||||
setSaveLoading(false);
|
||||
} catch (e) {
|
||||
|
||||
Sentry.captureException(e);
|
||||
|
||||
setAddErrorMessage(e.message);
|
||||
|
|
@ -442,7 +426,6 @@ function Form(): JSX.Element {
|
|||
if (isMacOs) {
|
||||
setAddErrorMessage('Reminder: iOS 15+ is needed for the Apple Wallet functionality to work with Smart Health Card')
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
if (isIOS && !isSafari) {
|
||||
|
|
@ -450,7 +433,6 @@ function Form(): JSX.Element {
|
|||
setAddErrorMessage('Sorry, only Safari can be used to add a Wallet Pass on iOS');
|
||||
setIsDisabledAppleWallet(true);
|
||||
return;
|
||||
|
||||
}
|
||||
// } else if (!isIOS) {
|
||||
// setWarningMessage('Only Safari on iOS is officially supported for Wallet import at the moment - ' +
|
||||
|
|
@ -463,10 +445,6 @@ function Form(): JSX.Element {
|
|||
window.location.href = option.value;
|
||||
}
|
||||
|
||||
function promptTextCreator(value) {
|
||||
return 'Select province...';
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<form className="space-y-5" id="form" onSubmit={addToWallet}>
|
||||
|
|
@ -598,9 +576,48 @@ function Form(): JSX.Element {
|
|||
{addErrorMessages.map((message, i) =>
|
||||
<Alert message={message} key={'error-' + i} type="error" />
|
||||
)}
|
||||
{/* {warningMessages.map((message, i) =>
|
||||
<Alert message={message} key={'warning-' + i} type="warning" />
|
||||
)} */}
|
||||
<br/>
|
||||
<div id="shc-pass-image" style={{backgroundColor: "white", color: "black", fontFamily: 'Arial', fontSize: 10, width: '350px', padding: '10px', border: '1px solid', margin: '0px'}} hidden>
|
||||
<table style={{verticalAlign: "middle"}}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><img src='shield-black.svg' width='50' height='50' /></td>
|
||||
<td style={{fontSize: 20, width: 280}}>
|
||||
<span style={{marginLeft: '11px', whiteSpace: 'nowrap'}}><b>COVID-19 Vaccination Card</b></span><br/>
|
||||
<span style={{marginLeft: '11px'}}><b id='shc-card-origin'></b></span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br/>
|
||||
<br/>
|
||||
<div style={{fontSize:14, textAlign: 'center'}}>
|
||||
<span id='shc-card-name' ></span> (<span id='shc-card-dob'></span>)
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<table style={{textAlign: "center", width: "100%"}}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td id='shc-card-vaccine-name-1'></td> <td id='shc-card-vaccine-name-2'></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='shc-card-vaccine-date-1'></td> <td id='shc-card-vaccine-date-2'></td>
|
||||
</tr>
|
||||
<tr id='extraRow1' hidden>
|
||||
<td id='shc-card-vaccine-name-3'></td> <td id='shc-card-vaccine-name-4'></td>
|
||||
</tr>
|
||||
<tr id='extraRow2' hidden>
|
||||
<td id='shc-card-vaccine-date-3'></td> <td id='shc-card-vaccine-date-4'></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div id='shc-card-vaccine' style={{width:'63%', display:'block', marginLeft: 'auto', marginRight: 'auto'}}></div>
|
||||
|
||||
<div id='shc-qrcode' style={{width:'63%', display:'block', marginLeft: 'auto', marginRight: 'auto'}}></div>
|
||||
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
}/>
|
||||
|
||||
|
|
@ -627,7 +644,6 @@ function Form(): JSX.Element {
|
|||
</div>
|
||||
}/>
|
||||
</form>
|
||||
<canvas id="canvas" style={{ display: "none" }} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,114 +34,13 @@ function Page(props: PageProps): JSX.Element {
|
|||
<a href="https://github.com/billylo1/covidpass" className="underline">{t('common:gitHub')}</a>
|
||||
<a href="https://vaccine-ontario.ca" className="underline">{t('common:returnToMainSite')}</a>
|
||||
</nav>
|
||||
<div className="flex pt-4 flex-row space-x-4 justify-center text-md flex-wrap">Last updated: 2021-10-18 (v2.1.4)</div>
|
||||
<div className="flex pt-4 flex-row space-x-4 justify-center text-md flex-wrap">Last updated: 2021-10-18 (v2.1.5)</div>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<div id="pass-image" style={{backgroundColor: "orangered", color: "white", fontFamily: 'Arial', fontSize: 10, width: '350px', padding: '10px'}} hidden>
|
||||
<table style={{verticalAlign: "middle"}}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><img src='shield4.svg' width='50' height='50' /></td>
|
||||
<td style={{fontSize: 20, width: 280}}><span style={{marginLeft: '11px'}}><b>Vaccination Receipt</b></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br/>
|
||||
<br/>
|
||||
<div style={{height:12}}><b>VACCINE</b></div>
|
||||
<div id='vaccineName' style={{fontSize:28}}></div>
|
||||
<br/>
|
||||
<br/>
|
||||
<table style={{fontSize:12, border: 0 }}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style={{width: 220}}><b>AUTHORIZED ORGANIZATION</b></td>
|
||||
<td><b>VACC. DATE</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='organization' style={{width: 220}}></td>
|
||||
<td id='vaccinationDate' style={{width:120}}></td>
|
||||
</tr>
|
||||
<tr id='extraRow2' hidden>
|
||||
<td id='organization2' style={{width: 220}}></td>
|
||||
<td id='vaccinationDate2' style={{width:120}}></td>
|
||||
</tr>
|
||||
<tr id='extraRow1' hidden>
|
||||
<td id='organization1' style={{width: 220}}></td>
|
||||
<td id='vaccinationDate1' style={{width:120}}></td>
|
||||
</tr>
|
||||
<tr style={{height: 20}}></tr>
|
||||
<tr>
|
||||
<td><b>NAME</b></td>
|
||||
<td><b>DATE OF BIRTH</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='name' style={{fontSize: 12}}></td>
|
||||
<td id='dob' style={{fontSize: 12}}></td>
|
||||
</tr>
|
||||
<tr style={{height: 20}}></tr>
|
||||
<tr>
|
||||
<td><b></b></td>
|
||||
<td><b>QR CODE EXPIRY</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='null' style={{fontSize: 12}}></td>
|
||||
<td id='expiry' style={{fontSize: 12}}>2021-10-22</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br/>
|
||||
<br/>
|
||||
<div id='qrcode' style={{width:'63%', display:'block', marginLeft: 'auto', marginRight: 'auto'}}></div>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
<div id="shc-pass-image" style={{backgroundColor: "white", color: "black", fontFamily: 'Arial', fontSize: 10, width: '350px', padding: '10px'}} hidden>
|
||||
<table style={{verticalAlign: "middle"}}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><img src='shield-black.svg' width='50' height='50' /></td>
|
||||
<td style={{fontSize: 20, width: 280}}>
|
||||
<span style={{marginLeft: '11px', whiteSpace: 'nowrap'}}><b>COVID-19 Vaccination Card</b></span><br/>
|
||||
<span style={{marginLeft: '11px'}}><b id='shc-card-origin'></b></span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br/>
|
||||
<br/>
|
||||
<div style={{fontSize:14, textAlign: 'center'}}>
|
||||
<span id='shc-card-name' ></span> (<span id='shc-card-dob'></span>)
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<table style={{textAlign: "center", width: "100%"}}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td id='shc-card-vaccine-name-1'></td> <td id='shc-card-vaccine-name-2'></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id='shc-card-vaccine-date-1'></td> <td id='shc-card-vaccine-date-2'></td>
|
||||
</tr>
|
||||
<tr id='extraRow1' hidden>
|
||||
<td id='shc-card-vaccine-name-3'></td> <td id='shc-card-vaccine-name-4'></td>
|
||||
</tr>
|
||||
<tr id='extraRow2' hidden>
|
||||
<td id='shc-card-vaccine-date-3'></td> <td id='shc-card-vaccine-date-4'></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div id='shc-card-vaccine' style={{width:'63%', display:'block', marginLeft: 'auto', marginRight: 'auto'}}></div>
|
||||
|
||||
<div id='shc-qrcode' style={{width:'63%', display:'block', marginLeft: 'auto', marginRight: 'auto'}}></div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
<canvas id="canvas" style={{display: 'none'}}/>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "grassroots_covidpass",
|
||||
"version": "2.1.4",
|
||||
"version": "2.1.5",
|
||||
"author": "Billy Lo <billy@vaccine-ontario.ca>",
|
||||
"license": "MIT",
|
||||
"private": false,
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
"file-saver": "^2.0.5",
|
||||
"fs-extra": "^10.0.0",
|
||||
"fs.promises": "^0.1.2",
|
||||
"html-to-image": "^1.7.0",
|
||||
"html-to-image": "^1.9.0",
|
||||
"html2canvas": "^1.3.2",
|
||||
"jpeg-js": "^0.4.3",
|
||||
"jsqr": "^1.4.0",
|
||||
|
|
|
|||
|
|
@ -219,7 +219,4 @@ function processSHCReceipt(receipt: SHCReceipt, generic: PassDictionary) {
|
|||
)
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Integrations } from '@sentry/tracing';
|
|||
|
||||
export const initSentry = () => {
|
||||
SentryModule.init({
|
||||
release: 'grassroots_covidpass@2.1.4', // App version. Needs to be manually updated as we go unless we make the build smarter
|
||||
release: 'grassroots_covidpass@2.1.5', // App version. Needs to be manually updated as we go unless we make the build smarter
|
||||
dsn: 'https://7120dcf8548c4c5cb148cdde2ed6a778@o1015766.ingest.sentry.io/5981424',
|
||||
integrations: [
|
||||
new Integrations.BrowserTracing(),
|
||||
|
|
|
|||
Loading…
Reference in New Issue