From 6ecc054bc9ab4a64c0ea56d0c93f9e40b4ef1c2c Mon Sep 17 00:00:00 2001 From: Jason Liu Date: Thu, 23 Sep 2021 16:48:26 -0400 Subject: [PATCH 1/5] cleaned up alert banner with option to prevent closing TODO: Allow different types of alerts --- components/Alert.tsx | 41 ++++++++++++++++++++++++++++------------- 1 file changed, 28 insertions(+), 13 deletions(-) diff --git a/components/Alert.tsx b/components/Alert.tsx index 4fffdfb..a253178 100644 --- a/components/Alert.tsx +++ b/components/Alert.tsx @@ -1,24 +1,39 @@ -import {useTranslation} from 'next-i18next'; +import { useTranslation } from 'next-i18next'; interface AlertProps { - onClose: () => void; - errorMessage: string; + onClose?: () => void; + type: 'error' | 'warning'; + message: string; } function Alert(props: AlertProps): JSX.Element { const { t } = useTranslation(['index', 'errors']); + let color = 'red'; + let icon; + switch (props.type) { + case 'error': + color = 'red' + // icon = () => + // + break; + case 'warning': + color = 'yellow' + break; + } + return ( -
- {props.errorMessage} - - - {t('index:errorClose')} - - - +
+ {icon && icon()} + {props.message} + {props.onClose && + + {t('index:errorClose')} + + + }
) } From ae12a7eb9c3ae7ecc19f04e2d4785d2823aa3f2e Mon Sep 17 00:00:00 2001 From: Jason Liu Date: Thu, 23 Sep 2021 16:49:07 -0400 Subject: [PATCH 2/5] added error handling in an array added error message for unsupported browsers --- components/Form.tsx | 73 +++++++++++++++++++++++++++++---------------- 1 file changed, 47 insertions(+), 26 deletions(-) diff --git a/components/Form.tsx b/components/Form.tsx index 1e5cba7..10853f9 100644 --- a/components/Form.tsx +++ b/components/Form.tsx @@ -36,11 +36,13 @@ function Form(): JSX.Element { const [qrCode, setQrCode] = useState(undefined); const [file, setFile] = useState(undefined); - const [errorMessage, _setErrorMessage] = useState(undefined); const [loading, setLoading] = useState(false); const [passCount, setPassCount] = useState(''); const [generated, setGenerated] = useState(false); // this flag represents the file has been used to generate a pass + + const [isDisabledAppleWallet, setIsDisabledAppleWallet] = useState(false); + const [errorMessages, _setErrorMessages] = useState>([]); const hitcountHost = 'https://stats.vaccine-ontario.ca'; @@ -75,14 +77,18 @@ function Form(): JSX.Element { // Check if there is a translation and replace message accordingly const setErrorMessage = (message: string) => { if (message == undefined) { - _setErrorMessage(undefined); return; } const translation = t('errors:'.concat(message)); - _setErrorMessage(translation !== message ? translation : message); + _setErrorMessages(Array.from(new Set([...errorMessages, translation !== message ? translation : message]))); }; + const deleteErrorMessage = (message: string) =>{ + console.log(errorMessages) + _setErrorMessages(errorMessages.filter(item => item !== message)) + } + // File Input ref const inputFile = useRef(undefined) @@ -95,6 +101,8 @@ function Form(): JSX.Element { setQrCode(undefined); setFile(selectedFile); setGenerated(false); + deleteErrorMessage(t('errors:'.concat('noFileOrQrCode'))); + checkBrowserType(); } }); } @@ -261,7 +269,7 @@ function Form(): JSX.Element { setLoading(true); if (!file && !qrCode) { - setErrorMessage('noFileOrQrCode') + setErrorMessage('noFileOrQrCode'); setLoading(false); return; } @@ -289,25 +297,38 @@ function Form(): JSX.Element { setLoading(false); } } + const verifierLink = () =>
  • + + + +

    + {t('verifierLink')}  + + verifier.vaccine-ontario.ca + +

    +
    • - async function checkBrowserType() { + function checkBrowserType() { // if (isIPad13) { // setErrorMessage('Sorry. Apple does not support the use of Wallet on iPad. Please use iPhone/Safari.'); - // document.getElementById('download').setAttribute('disabled','true'); + // setIsDisabledAppleWallet(true); // } - if (!isSafari && !isChrome) { - setErrorMessage('Sorry. Apple Wallet pass can be added using Safari or Chrome only.'); - document.getElementById('download').setAttribute('disabled','true'); - } + // if (!isSafari && !isChrome) { + // setErrorMessage('Sorry. Apple Wallet pass can be added using Safari or Chrome only.'); + // setIsDisabledAppleWallet(true); + // } // if (isIOS && (!osVersion.includes('13') && !osVersion.includes('14') && !osVersion.includes('15'))) { // setErrorMessage('Sorry, iOS 13+ is needed for the Apple Wallet functionality to work') - // document.getElementById('download').setAttribute('disabled','true') - // } - // if (isIOS && !isSafari) { - // setErrorMessage('Sorry, only Safari can be used to add a Wallet Pass on iOS') - // document.getElementById('download').setAttribute('disabled','true') + // setIsDisabledAppleWallet(true); // } + if (isIOS && !isSafari) { + // setErrorMessage('Sorry, only Safari can be used to add a Wallet Pass on iOS'); + setErrorMessage('Sorry, only Safari can be used to add a Wallet Pass on iOS'); + setIsDisabledAppleWallet(true); + console.log('not safari') + } } return ( @@ -374,20 +395,20 @@ function Form(): JSX.Element { -

    + {/*

    {t('index:dataPrivacyDescription')} - {/* + {t('index:privacyPolicy')} - . */} -

    + . +

    */}
      - + {verifierLink()} {passCount && } {/* */} @@ -395,8 +416,8 @@ function Form(): JSX.Element {
    -      @@ -414,13 +435,13 @@ function Form(): JSX.Element {
    + {errorMessages.map((message, i) => + + )} }/> - - { - errorMessage && setErrorMessage(undefined)}/> - } + ) } From dfe9bed7a98f508a566afc7979e055758b2b2cfa Mon Sep 17 00:00:00 2001 From: Jason Liu Date: Thu, 23 Sep 2021 16:49:23 -0400 Subject: [PATCH 3/5] updated array keys and added supported browsers --- pages/faq.tsx | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/pages/faq.tsx b/pages/faq.tsx index 42ec2bc..d894e80 100644 --- a/pages/faq.tsx +++ b/pages/faq.tsx @@ -7,20 +7,21 @@ import Card from '../components/Card' function Faq(): JSX.Element { const { t } = useTranslation(['common', 'index', 'faq']); const questionList = [ - {description: 'Which version of iOS does this support?', answer: 'iOS 13.7 is the minimum at the moment. We are looking for adjustments for older iOSes, but it will take a bit of time.', key: 1}, - {description: 'Why have we taken time to build this?', answer: 'Gives Ontarians/organizations something easy to use (volunteered-developed, unofficial) until the official provincial app comes out in October.', key: 2}, - {description: 'Who made this?', answer: 'The same group of volunteers (Billy Lo, Ryan Slobojan, Evert Timberg, Jason Liu, Anujan Mathisekaran, Lisa Discepola, Samantha Finn, Madison Pearce) who created the all-in-one vaccine appointment finding tool at vaccine-ontario.ca.', key: 3}, - {description: 'Should I use the official provincial apps when they come out on 22nd October?', answer: 'YES. Once the official QR code from the province is available, you will also be able to refresh what\'s in your Apple Wallet as well. More details will follow.', key: 4}, - {description: 'How is the data on my vaccination receipt processed?', answer: 'It checks the receipt for an official signature from the province. If present, the receipt data is converted into Apple\'s format and then added into your iOS Wallet app.', key: 5}, - {description: 'How can organizations validate this QR code?', answer: 'Just aim your standard camera app (iPhone/Android) at the code, and it will bring up a web page that shows the verification result.', key: 6}, - {description: 'Is this free and private?', answer: 'Similar to VaxHuntersCanada, there are no commerical interests. Just volunteers trying to do our part to help the community.', key: 7}, - {description: 'Do you have plans for Android support?', answer: 'Yes. We are working with Google to gain access to the APIs required. Meanwhile, you can also use this tool to download an Apple Wallet pass and import that into Google Pay Wallet using apps such as Pass2Pay.', key: 8}, - {description: 'How about BC, Quebec and Alberta?', answer: 'We will be investigating BC shortly. If you are interested in contributing, email us at grassroots@vaccine-ontario.ca', key: 9}, - {description: 'How can I stay up-to-date on your progress?', answer: 'We will post regular updates on Twitter @grassroots_team.', key: 10}, - {description: 'I only have an emailed receipt (e.g. Red/White OHIP card users). Can I still use this tool?', answer: 'Not right now unfortunately. But we expect to be able to support that after the official app is released on 22 Oct.', key: 11}, - {description: 'What does the colour of the Apple Wallet pass mean?', answer: 'Dose 1 is shown as Orange; dose 2+ in green for easy differentiation without reading the text.', key: 12}, - {description: 'How about Apple Watch?', answer: 'If you have iCloud sync enabled, you will see the pass on the watch too.', key: 13}, - {description: 'I have more questions. Can you please help me?', answer: 'Sure. Just email us at grassroots@vaccine-ontario.ca.', key: 14} + {description: 'Which version of iOS does this support?', answer: 'iOS 13.7 is the minimum at the moment. We are looking for adjustments for older iOSes, but it will take a bit of time.'}, + {description: "What are the supported browsers?", answer: 'For iPhones, only Safari is supported for importing to your Apple Wallet. For any other devices, we recommend that you save it as photo using your browser of choice. Broswers built internally into mobile apps (e.g. Facebook, Twitter, Instagram) are known to have issues.'}, + {description: 'Why have we taken time to build this?', answer: 'Gives Ontarians/organizations something easy to use (volunteered-developed, unofficial) until the official provincial app comes out in October.'}, + {description: 'Who made this?', answer: 'The same group of volunteers (Billy Lo, Ryan Slobojan, Evert Timberg, Jason Liu, Anujan Mathisekaran, Lisa Discepola, Samantha Finn, Madison Pearce) who created the all-in-one vaccine appointment finding tool at vaccine-ontario.ca.'}, + {description: 'Should I use the official provincial apps when they come out on 22nd October?', answer: 'YES. Once the official QR code from the province is available, you will also be able to refresh what\'s in your Apple Wallet as well. More details will follow.'}, + {description: 'How is the data on my vaccination receipt processed?', answer: 'It checks the receipt for an official signature from the province. If present, the receipt data is converted into Apple\'s format and then added into your iOS Wallet app.'}, + {description: 'How can organizations validate this QR code?', answer: 'Just aim your standard camera app (iPhone/Android) at the code, and it will bring up a web page that shows the verification result.'}, + {description: 'Is this free and private?', answer: 'Similar to VaxHuntersCanada, there are no commerical interests. Just volunteers trying to do our part to help the community.'}, + {description: 'Do you have plans for Android support?', answer: 'Yes. We are working with Google to gain access to the APIs required. Meanwhile, you can also use this tool to download an Apple Wallet pass and import that into Google Pay Wallet using apps such as Pass2Pay.'}, + {description: 'How about BC, Quebec and Alberta?', answer: 'We will be investigating BC shortly. If you are interested in contributing, email us at grassroots@vaccine-ontario.ca'}, + {description: 'How can I stay up-to-date on your progress?', answer: 'We will post regular updates on Twitter @grassroots_team.'}, + {description: 'I only have an emailed receipt (e.g. Red/White OHIP card users). Can I still use this tool?', answer: 'Not right now unfortunately. But we expect to be able to support that after the official app is released on 22 Oct.'}, + {description: 'What does the colour of the Apple Wallet pass mean?', answer: 'Dose 1 is shown as Orange; dose 2+ in green for easy differentiation without reading the text.'}, + {description: 'How about Apple Watch?', answer: 'If you have iCloud sync enabled, you will see the pass on the watch too.'}, + {description: 'I have more questions. Can you please help me?', answer: 'Sure. Just email us at grassroots@vaccine-ontario.ca.'} ]; @@ -30,11 +31,11 @@ function Faq(): JSX.Element {

    {t('faq:heading')}

      - {questionList.map(question => { + {questionList.map((question, i) => { return (
      -
    1. {question.key}. {question.description}
      2. -
    2. {question.answer}
      3. +
    3. {i+1}. {question.description}
      4. +
    4. {question.answer}


      5. ); From dac3ed3c11b2a7c07c7acf5a1fa93d3e8bbd8185 Mon Sep 17 00:00:00 2001 From: Jason Liu Date: Thu, 23 Sep 2021 16:49:49 -0400 Subject: [PATCH 4/5] added warning banner for receipts without date of birth --- pages/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/pages/index.tsx b/pages/index.tsx index e221115..13ad07a 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -5,11 +5,14 @@ import {serverSideTranslations} from 'next-i18next/serverSideTranslations'; import Form from '../components/Form'; import Card from '../components/Card'; import Page from '../components/Page'; +import Alert from '../components/Alert'; import { useEffect, useState } from 'react'; function Index(): JSX.Element { const { t } = useTranslation(['common', 'index', 'errors']); + const [warning, setWarning] = useState("If you previously created a vaccination receipt before Sept. 23rd and need to add your date of birth on your vaccination receipt, please reimport your Ministry of Health official vaccination receipt again below and the date of birth will now be visible on the created receipt.") + const title = 'Grassroots - Ontario vaccination receipt to your Apple wallet'; const description = 'Stores it on iPhone with a QR code for others to validate in a privacy respecting way.'; @@ -40,10 +43,10 @@ function Index(): JSX.Element { /> + {warning && setWarning(undefined)} message={warning} />}

      {t('common:subtitle')}


      {t('common:subtitle2')}


      {t('common:update1Date')} - {t('common:update1')}


      {t('common:continueSpirit')}

    }/> -
    }/> From 803844b1055469f7c94ff3103e64b739b1ae12a9 Mon Sep 17 00:00:00 2001 From: Jason Liu Date: Thu, 23 Sep 2021 16:50:20 -0400 Subject: [PATCH 5/5] updated locales --- public/locales/en/index.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/locales/en/index.yml b/public/locales/en/index.yml index c977376..464a68e 100644 --- a/public/locales/en/index.yml +++ b/public/locales/en/index.yml @@ -13,7 +13,7 @@ downloadReceipt: Download official receipt from Ontario Ministry of Health visit: Visit ontarioHealth: Ontario Ministry of Health gotoOntarioHealth: Go to Ontario Ministry of Health -downloadSignedPDF: and enter your information to display your official vaccination receipt. Press the Share Icon at the bottom, "Save As Files" to store it onto your iPhone. +downloadSignedPDF: and enter your information to display your official vaccination receipt. Press the Share Icon at the bottom, "Save As Files" to store it onto your iPhone. If you have completed this step before, you can proceed to the next step to prevent downloading the same file multiple times. pickColor: Pick a Color pickColorDescription: Pick a background color for your pass. colorWhite: white @@ -34,7 +34,7 @@ privacyPolicy: Privacy Policy createdOnDevice: No personal data is sent to the Internet. qrCode: QR code is for verification only, with no personal info. openSourceTransparent: Source code is free and open for re-use/contributions on GitHub. -verifierLink: QR code verifier available at https://verifier.vaccine-ontario.ca +verifierLink: QR code verifier available at numPasses: receipts processed since Sept 2, 2021 demo: Video Demo whatsnew: What's New