covidpass-greenpass-su-ipho.../pages/index.tsx

123 lines
5.6 KiB
TypeScript
Raw Normal View History

import {NextSeo} from 'next-seo';
2021-07-02 20:55:26 +02:00
import {useTranslation} from 'next-i18next';
import {serverSideTranslations} from 'next-i18next/serverSideTranslations';
2021-07-02 20:55:26 +02:00
import Form from '../components/Form';
import Card from '../components/Card';
import Page from '../components/Page';
import Alert from '../components/Alert';
2021-09-28 09:09:42 +02:00
import React, { useEffect, useState } from 'react';
2021-10-10 20:08:49 +02:00
import { isIOS, isSafari, isAndroid, osVersion, isMacOs} from 'react-device-detect';
import usePassCount from "../src/hooks/use_pass_count";
2021-09-28 09:09:42 +02:00
import Link from 'next/link'
function Index(): JSX.Element {
2021-07-02 20:55:26 +02:00
const { t } = useTranslation(['common', 'index', 'errors']);
const passCount = usePassCount();
const displayPassCount = (passCount? `${passCount} receipts have been processed successfully to date!` : '');
2021-07-09 03:22:14 +02:00
2021-09-25 07:15:35 +02:00
const [warningMessages, _setWarningMessages] = useState<Array<string>>([]);
const setWarningMessage = (message: string) => {
if (!message) return;
const translation = t('errors:'.concat(message));
_setWarningMessages(Array.from(new Set([...warningMessages, translation !== message ? translation : message])));
};
const deleteWarningMessage = (message: string) => _setWarningMessages(warningMessages.filter(item => item !== message));
2021-09-28 09:02:16 +02:00
useEffect(() => {
if ((isIOS && !isMacOs) && !isSafari) {
setWarningMessage("iPhone users, only Safari is supported at the moment. Please switch to Safari to prevent any unexpected errors.");
} else {
2021-10-10 20:08:49 +02:00
if (isAndroid) {
2021-10-16 21:50:55 +02:00
if (Number(osVersion.split('.')[0]) >= 8) {
setWarningMessage("Hi Android user! Check out our new Add to Google Pay button!");
2021-10-10 20:08:49 +02:00
} else {
setWarningMessage("Sorry, Add to Google Pay is only available to Android 8.1+");
2021-10-10 20:08:49 +02:00
}
}
2021-09-28 09:02:16 +02:00
}
2021-09-29 15:33:10 +02:00
}, []);
2021-10-21 19:30:03 +02:00
const title = 'Grassroots - vaccination QR Code import for Apple and Android devices. Supports BC AB SK MB ON QC NS YK NT NY NJ CA LA VA HI UT DE';
const description = 'Grassroots imports vaccination QR codes and stores them on Apple and Android devices in a convenient, secure, and privacy-respecting way. Supports SHC QR codes from BC AB SK MB ON QC NS YK NT NY NJ CA LA VA HI UT DE';
2021-07-02 20:55:26 +02:00
return (
<>
<NextSeo
2021-07-09 03:22:14 +02:00
title={title}
2021-07-09 03:19:04 +02:00
description={description}
openGraph={{
2021-08-27 18:36:27 +02:00
url: 'https://grassroots.vaccine-ontario.ca/',
2021-07-09 03:22:14 +02:00
title: title,
2021-07-09 03:19:04 +02:00
description: description,
2021-10-15 16:47:32 +02:00
images: [
{
url: 'https://grassroots.vaccine-ontario.ca/grassroots.jpg',
width: 400,
height: 400,
alt: description,
}
],
2021-07-09 03:22:14 +02:00
site_name: title,
}}
twitter={{
handle: '@grassroots_team',
site: '@grassroots_team',
cardType: 'summary_large_image',
}}
/>
<Page content={
<div className="space-y-5">
{warningMessages.map((message, i) =>
2021-09-28 09:02:16 +02:00
<Alert message={message} key={'error-' + i} type="warning" onClose={() => deleteWarningMessage(message)} />
)}
<Card content={
<div><p>{t('common:subtitle')}</p><br /><p>{t('common:subtitle2')}</p><br />
<b>{displayPassCount}</b><br/><br/>
2021-10-20 23:41:36 +02:00
<b>Native support for Android - COVID card in your Google Pay wallet</b> - Oct 20th update:
<br />
<br />
<ul className="list-decimal list-outside" style={{ marginLeft: '20px' }}>
<li>(Often-requested) support added for importing proof-of-vaccination into Google Pay on Android 8.1+</li>
2021-10-20 23:41:36 +02:00
<li>Android users can also add a shortcut to your home screen to access your COVID card with a single tap</li>
2021-10-17 23:58:48 +02:00
<li>You can now scan QR codes directly off of paper or a screen with your camera, eliminating the need to upload PDFs or pictures</li>
<li>Support added for importing QR codes from images as well as from PDFs</li>
</ul><br />
<p>{t('common:continueSpirit')}</p>
2021-10-21 01:48:09 +02:00
<br />
<Link href="https://youtu.be/O9jtIjj9BnY">
{/* <a className="underline" target="_blank"> */}
<a className="underline">
{t('index:androidDemo')}
2021-10-21 01:48:09 +02:00
</a>
</Link>&nbsp;&nbsp;&nbsp;
2021-10-22 22:57:08 +02:00
<Link href="https://www.youtube.com/watch?v=XAg8IoIdlsU">
{/* <a className="underline" target="_blank"> */}
<a className="underline">
{t('index:iosDemo')}
2021-09-28 09:09:42 +02:00
</a>
2021-10-21 01:48:09 +02:00
</Link>
</div>
}/>
<Form/>
</div>
}/>
</>
)
}
2021-09-19 18:21:59 +02:00
2021-07-03 11:59:59 +02:00
export async function getStaticProps({ locale }) {
2021-07-02 20:55:26 +02:00
return {
props: {
...(await serverSideTranslations(locale, ['common', 'index', 'errors'])),
},
};
}
export default Index;