enable non-iOS device to add to wallet with warning message

components/Form.tsx

@@ -43,6 +43,7 @@ function Form(): JSX.Element {
 
     const [isDisabledAppleWallet, setIsDisabledAppleWallet] = useState<boolean>(false);
     const [errorMessages, _setErrorMessages] = useState<Array<string>>([]);
+    const [warningMessages, _setWarningMessages] = useState<Array<string>>([]);
     const hitcountHost = 'https://stats.vaccine-ontario.ca';
 
 
@@ -84,6 +85,15 @@ function Form(): JSX.Element {
         _setErrorMessages(Array.from(new Set([...errorMessages, translation !== message ? translation : message])));
     };
 
+    const setWarningMessage = (message: string) => {
+        if (message == undefined) {
+            return;
+        }
+
+        const translation = t('errors:'.concat(message));
+        _setWarningMessages(Array.from(new Set([...warningMessages, translation !== message ? translation : message])));
+    }
+
     const deleteErrorMessage = (message: string) =>{
         console.log(errorMessages)
         _setErrorMessages(errorMessages.filter(item => item !== message))
@@ -328,6 +338,10 @@ function Form(): JSX.Element {
             setErrorMessage('Sorry, only Safari can be used to add a Wallet Pass on iOS');
             setIsDisabledAppleWallet(true);
             console.log('not safari')
+        } else if (!isIOS) {
+            setWarningMessage('Only Safari is officially supported at the moment. ' +
+                'Please download a compitable apps on other platform to open .pkpass');
+            setIsDisabledAppleWallet(false);
         }
     }
 
@@ -438,6 +452,9 @@ function Form(): JSX.Element {
                         {errorMessages.map((message, i) =>
                             <Alert message={message} key={'error-' + i} type="error" />
                         )}
+                        {warningMessages.map((message, i) =>
+                            <Alert message={message} key={'warning-' + i} type="warning" />
+                        )}
                     </div>
                 }/>
             </form>
@@ -446,4 +463,4 @@ function Form(): JSX.Element {
     )
 }
 
-export default Form;
+export default Form;