From dac3ed3c11b2a7c07c7acf5a1fa93d3e8bbd8185 Mon Sep 17 00:00:00 2001
From: Jason Liu <jasonisaliu@gmail.com>
Date: Thu, 23 Sep 2021 16:49:49 -0400
Subject: [PATCH] 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 {
             />
             <Page content={
                 <div className="space-y-5">
+                    {warning && <Alert type="error" onClose={() => setWarning(undefined)} message={warning} />}
                     <Card content={
                         <div><p>{t('common:subtitle')}</p><br /><p>{t('common:subtitle2')}</p><br /><p><b>{t('common:update1Date')}</b> - {t('common:update1')}</p><br /><p>{t('common:continueSpirit')}</p></div>
                     }/>
-
                     <Form/>
                 </div>
             }/>