refactor: add snackbar warning if not mobile on odk redirect

hotosm · May 24, 2024 · abe470d · abe470d
1 parent 66294f3
commit abe470d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/src/frontend/src/components/DialogTaskActions.jsx b/src/frontend/src/components/DialogTaskActions.jsx
@@ -206,12 +206,21 @@ export default function Dialog({ taskId, feature, map, view }) {
             type="submit"
             className="fmtm-font-bold !fmtm-rounded fmtm-text-sm !fmtm-py-2 !fmtm-w-full fmtm-flex fmtm-justify-center"
             onClick={() => {
-              const xformId = projectInfo.xform_id;
+              const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+                navigator.userAgent,
+              );
 
-              try {
-                document.location.href = `odkcollect://form/${xformId}?task_id=${taskId}`;
-              } catch (error) {
-                document.location.href = 'https://play.google.com/store/apps/details?id=org.odk.collect.android';
+              if (isMobile) {
+                document.location.href = `odkcollect://form/${projectInfo.xform_id}?task_id=${taskId}`;
+              } else {
+                dispatch(
+                  CommonActions.SetSnackBar({
+                    open: true,
+                    message: 'Requires a mobile phone with ODK Collect.',
+                    variant: 'warning',
+                    duration: 3000,
+                  }),
+                );
               }
             }}
           />

diff --git a/src/frontend/src/components/ProjectDetailsV2/FeatureSelectionPopup.tsx b/src/frontend/src/components/ProjectDetailsV2/FeatureSelectionPopup.tsx
@@ -3,6 +3,7 @@
 import React, { useEffect, useState } from 'react';
 import CoreModules from '@/shared/CoreModules';
 import AssetModules from '@/shared/AssetModules';
+import { CommonActions } from '@/store/slices/CommonSlice';
 import Button from '@/components/common/Button';
 import { ProjectActions } from '@/store/slices/ProjectSlice';
 import environment from '@/environment';
@@ -15,7 +16,6 @@ import MapStyles from '@/hooks/MapStyles';
 type TaskFeatureSelectionPopupPropType = {
   taskId: number;
   featureProperties: TaskFeatureSelectionProperties | null;
-  taskId: number;
   taskFeature: Record<string, any>;
   map: any;
   view: any;
@@ -162,10 +162,22 @@ const TaskFeatureSelectionPopup = ({
                   );
                 }
 
-                try {
+                const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+                  navigator.userAgent,
+                );
+
+                if (isMobile) {
+                  // Load entity in ODK Collect by intent
                   document.location.href = `odkcollect://form/${xformId}?task_id=${taskId}&existing=${entityUuid}`;
-                } catch (error) {
-                  document.location.href = 'https://play.google.com/store/apps/details?id=org.odk.collect.android';
+                } else {
+                  dispatch(
+                    CommonActions.SetSnackBar({
+                      open: true,
+                      message: 'Requires a mobile phone with ODK Collect.',
+                      variant: 'warning',
+                      duration: 3000,
+                    }),
+                  );
                 }
               }}
             />