Merge pull request #15 from samuelyeungkc/main

Enable Add to Wallet button for non-iOS devices with warning messages

components/Form.tsx

@@ -44,6 +44,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';
 
 
@@ -77,7 +78,7 @@ function Form(): JSX.Element {
 
     // Check if there is a translation and replace message accordingly
     const setErrorMessage = (message: string) => {
-        if (message == undefined) {
+        if (!message) {
             return;
         }
 
@@ -85,6 +86,15 @@ function Form(): JSX.Element {
         _setErrorMessages(Array.from(new Set([...errorMessages, 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 deleteErrorMessage = (message: string) =>{
         console.log(errorMessages)
         _setErrorMessages(errorMessages.filter(item => item !== message))
@@ -339,6 +349,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 on iOS is officially supported for Wallet import at the moment - ' +
+                'for other platforms, please ensure you have an application which can open Apple Wallet .pkpass files');
+            setIsDisabledAppleWallet(false);
         }
     }
 
@@ -449,6 +463,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>
                 }/>
 
@@ -479,4 +496,4 @@ function Form(): JSX.Element {
     )
 }
 
-export default Form;
+export default Form;