fix: request permissions before using camera/media library in image picker

dev-client/.depcheckrc

@@ -16,6 +16,7 @@
     "eslint-plugin-prettier",
     "expo-crypto",
     "expo-dev-client",
+    "expo-modules-core",
     "metro-react-native-babel-preset",
     "react-devtools",
     "react-native-gradle-plugin",

dev-client/src/components/ImagePicker.tsx → dev-client/src/components/inputs/image/ImagePicker.tsx

@@ -23,6 +23,8 @@ import {
   launchCameraAsync,
   launchImageLibraryAsync,
   MediaTypeOptions,
+  useCameraPermissions,
+  useMediaLibraryPermissions,
 } from 'expo-image-picker';
 import {createAssetAsync} from 'expo-media-library';
 
@@ -35,6 +37,7 @@ import {
   ModalHandle,
   ModalTrigger,
 } from 'terraso-mobile-client/components/modals/Modal';
+import {PermissionsRequestModal} from 'terraso-mobile-client/components/modals/PermissionsRequestModal';
 import {Column} from 'terraso-mobile-client/components/NativeBaseAdapters';
 import {OverlaySheet} from 'terraso-mobile-client/components/sheets/OverlaySheet';
 
@@ -56,10 +59,16 @@ export const decodeBase64Jpg = (base64: string) =>
 
 type Props = {
   onPick: (result: Photo) => void;
+  featureName: string;
   children: ModalTrigger;
 };
 
-export const ImagePicker = ({onPick, children, ...modalProps}: Props) => {
+export const ImagePicker = ({
+  onPick,
+  children,
+  featureName,
+  ...modalProps
+}: Props) => {
   const {t} = useTranslation();
   const ref = useRef<ModalHandle>(null);
 
@@ -74,35 +83,51 @@ export const ImagePicker = ({onPick, children, ...modalProps}: Props) => {
       onPick(response.assets[0]);
     }
     ref.current?.onClose();
-  }, [onPick, ref]);
+  }, [onPick]);
 
-  const onUseGallery = useCallback(async () => {
+  const onUseMediaLibrary = useCallback(async () => {
     const response = await launchImageLibraryAsync({
       mediaTypes: MediaTypeOptions.Images,
     });
     if (!response.canceled) {
       onPick(response.assets[0]);
     }
     ref.current?.onClose();
-  }, [onPick, ref]);
+  }, [onPick]);
 
-  const onCancel = useCallback(() => ref.current?.onClose(), [ref]);
+  const onCancel = useCallback(() => ref.current?.onClose(), []);
 
   return (
     <OverlaySheet ref={ref} trigger={children} Closer={null} {...modalProps}>
       <Column padding="lg" space="md">
-        <Button
-          _text={{textTransform: 'uppercase'}}
-          onPress={onUseCamera}
-          rightIcon={<Icon name="photo-camera" />}>
-          {t('image.use_camera')}
-        </Button>
-        <Button
-          _text={{textTransform: 'uppercase'}}
-          onPress={onUseGallery}
-          rightIcon={<Icon name="photo-library" />}>
-          {t('image.choose_from_gallery')}
-        </Button>
+        <PermissionsRequestModal
+          title={t('permissions.camera_title')}
+          body={t('permissions.camera_body', {feature: featureName})}
+          usePermissions={useCameraPermissions}
+          permissionedAction={onUseCamera}>
+          {onRequestAction => (
+            <Button
+              _text={{textTransform: 'uppercase'}}
+              onPress={onRequestAction}
+              rightIcon={<Icon name="photo-camera" />}>
+              {t('image.use_camera')}
+            </Button>
+          )}
+        </PermissionsRequestModal>
+        <PermissionsRequestModal
+          title={t('permissions.gallery_title')}
+          body={t('permissions.gallery_body', {feature: featureName})}
+          usePermissions={useMediaLibraryPermissions}
+          permissionedAction={onUseMediaLibrary}>
+          {onRequestAction => (
+            <Button
+              _text={{textTransform: 'uppercase'}}
+              onPress={onRequestAction}
+              rightIcon={<Icon name="photo-library" />}>
+              {t('image.choose_from_gallery')}
+            </Button>
+          )}
+        </PermissionsRequestModal>
         <Button
           _text={{textTransform: 'uppercase'}}
           variant="outline"

dev-client/src/components/inputs/PickImageButton.tsx → dev-client/src/components/inputs/image/PickImageButton.tsx

@@ -18,16 +18,20 @@
 import {Pressable} from 'react-native';
 
 import {Icon} from 'terraso-mobile-client/components/icons/Icon';
-import {ImagePicker, Photo} from 'terraso-mobile-client/components/ImagePicker';
+import {
+  ImagePicker,
+  Photo,
+} from 'terraso-mobile-client/components/inputs/image/ImagePicker';
 import {Box} from 'terraso-mobile-client/components/NativeBaseAdapters';
 
 type Props = {
+  featureName: string;
   onPick: (photo: Photo) => void;
 };
 
-export const PickImageButton = ({onPick}: Props) => {
+export const PickImageButton = ({featureName, onPick}: Props) => {
   return (
-    <ImagePicker onPick={onPick}>
+    <ImagePicker featureName={featureName} onPick={onPick}>
       {onOpen => (
         <Pressable onPress={onOpen}>
           <Box

dev-client/src/components/modals/PermissionsRequestModal.tsx

@@ -0,0 +1,80 @@
+/*
+ * Copyright © 2024 Technology Matters
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/.
+ */
+
+import {useCallback, useRef} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Linking} from 'react-native';
+
+import {createPermissionHook} from 'expo-modules-core';
+
+import {ConfirmModal} from 'terraso-mobile-client/components/modals/ConfirmModal';
+import {ModalHandle} from 'terraso-mobile-client/components/modals/Modal';
+
+type PermissionHook = ReturnType<typeof createPermissionHook>;
+
+type Props = {
+  title: string;
+  body: string;
+  usePermissions: PermissionHook;
+  permissionedAction?: () => void;
+  children: (onOpen: () => void) => React.ReactNode;
+};
+
+export const PermissionsRequestModal = ({
+  title,
+  body,
+  usePermissions,
+  permissionedAction,
+  children,
+}: Props) => {
+  const {t} = useTranslation();
+  const ref = useRef<ModalHandle>(null);
+  const [permissions, requestPermissions] = usePermissions();
+
+  const onRequestAction = useCallback(async () => {
+    if (permissions === null) {
+      return;
+    }
+
+    if (permissions.granted) {
+      if (permissionedAction !== undefined) {
+        permissionedAction();
+      }
+    } else if (permissions.canAskAgain) {
+      const result = await requestPermissions();
+      if (result.granted && permissionedAction !== undefined) {
+        permissionedAction();
+      }
+    } else {
+      ref.current?.onOpen();
+    }
+  }, [permissionedAction, permissions, requestPermissions]);
+
+  return (
+    <>
+      <ConfirmModal
+        ref={ref}
+        isConfirmError={false}
+        actionName={t('general.open_settings')}
+        title={title}
+        body={body}
+        handleConfirm={Linking.openSettings}
+      />
+      {children(onRequestAction)}
+    </>
+  );
+};

dev-client/src/screens/ColorAnalysisScreen/ColorAnalysisHomeScreen.tsx

@@ -28,7 +28,7 @@ import {IconButton} from 'terraso-mobile-client/components/icons/IconButton';
 import {
   decodeBase64Jpg,
   PhotoWithBase64,
-} from 'terraso-mobile-client/components/ImagePicker';
+} from 'terraso-mobile-client/components/inputs/image/ImagePicker';
 import {
   ActionButton,
   ActionsModal,

dev-client/src/screens/ColorAnalysisScreen/ColorAnalysisScreen.tsx

@@ -17,7 +17,7 @@
 
 import {useMemo, useState} from 'react';
 
-import {Photo} from 'terraso-mobile-client/components/ImagePicker';
+import {Photo} from 'terraso-mobile-client/components/inputs/image/ImagePicker';
 import {DEFAULT_STACK_NAVIGATOR_OPTIONS} from 'terraso-mobile-client/navigation/constants';
 import {
   ColorAnalysisContext,

dev-client/src/screens/ColorAnalysisScreen/components/ColorCropScreen.tsx

@@ -38,7 +38,7 @@ import {Icon} from 'terraso-mobile-client/components/icons/Icon';
 import {
   Photo,
   PhotoWithBase64,
-} from 'terraso-mobile-client/components/ImagePicker';
+} from 'terraso-mobile-client/components/inputs/image/ImagePicker';
 import {
   Box,
   Column,

dev-client/src/screens/SlopeScreen/SlopeMeterScreen.tsx

@@ -17,24 +17,23 @@
 
 import {useCallback, useEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
-import {Linking} from 'react-native';
 
 import {CameraView, useCameraPermissions} from 'expo-camera';
 import * as ScreenOrientation from 'expo-screen-orientation';
 import {DeviceMotion} from 'expo-sensors';
 
-import {Button, Link} from 'native-base';
+import {Button} from 'native-base';
 
 import {updateSoilData} from 'terraso-client-shared/soilId/soilIdSlice';
 
 import {BigCloseButton} from 'terraso-mobile-client/components/buttons/BigCloseButton';
 import {Icon} from 'terraso-mobile-client/components/icons/Icon';
+import {PermissionsRequestModal} from 'terraso-mobile-client/components/modals/PermissionsRequestModal';
 import {
   Box,
   Column,
   Heading,
   Row,
-  Text,
 } from 'terraso-mobile-client/components/NativeBaseAdapters';
 import {InfoOverlaySheetButton} from 'terraso-mobile-client/components/sheets/InfoOverlaySheetButton';
 import {useNavigation} from 'terraso-mobile-client/navigation/hooks/useNavigation';
@@ -47,7 +46,7 @@ const toDegrees = (rad: number) => Math.round(Math.abs((rad * 180) / Math.PI));
 
 export const SlopeMeterScreen = ({siteId}: {siteId: string}) => {
   const {t} = useTranslation();
-  const [permission, requestPermission] = useCameraPermissions();
+  const [permission] = useCameraPermissions();
   const [deviceTiltDeg, setDeviceTiltDeg] = useState<number | null>(null);
   const navigation = useNavigation();
   const dispatch = useDispatch();
@@ -100,20 +99,19 @@ export const SlopeMeterScreen = ({siteId}: {siteId: string}) => {
                 <Box flex={1} bg="#00000080" />
               </Column>
             </CameraView>
-          ) : permission?.canAskAgain ? (
-            <Button size="lg" onPress={requestPermission}>
-              {t('slope.steepness.camera_grant')}
-            </Button>
           ) : (
-            <>
-              <Heading variant="h6">{t('slope.steepness.no_camera')}</Heading>
-              <Text variant="body1" textAlign="center">
-                {t('slope.steepness.no_camera_explanation')}
-              </Text>
-              <Link onPress={Linking.openSettings}>
-                {t('general.open_settings')}
-              </Link>
-            </>
+            <PermissionsRequestModal
+              title={t('permissions.camera_title')}
+              body={t('permissions.camera_body', {
+                feature: t('slope.steepness.slope_meter'),
+              })}
+              usePermissions={useCameraPermissions}>
+              {onRequest => (
+                <Button size="lg" onPress={onRequest}>
+                  {t('slope.steepness.camera_grant')}
+                </Button>
+              )}
+            </PermissionsRequestModal>
           )}
         </Box>
         <Column alignItems="center">

dev-client/src/screens/SoilScreen/ColorScreen/ColorGuideScreen.tsx

@@ -23,7 +23,10 @@ import {Button} from 'native-base';
 
 import {BulletList} from 'terraso-mobile-client/components/BulletList';
 import {Icon} from 'terraso-mobile-client/components/icons/Icon';
-import {ImagePicker, Photo} from 'terraso-mobile-client/components/ImagePicker';
+import {
+  ImagePicker,
+  Photo,
+} from 'terraso-mobile-client/components/inputs/image/ImagePicker';
 import {
   Box,
   Column,
@@ -125,7 +128,9 @@ export const ColorGuideScreen = (props: SoilPitInputScreenProps) => {
         <Button variant="link" onPress={onGoBack}>
           {t('soil.color.guide.go_back')}
         </Button>
-        <ImagePicker onPick={onTakePhoto}>
+        <ImagePicker
+          featureName={t('soil.color.featureName')}
+          onPick={onTakePhoto}>
           {onOpen => (
             <Button
               _text={{textTransform: 'uppercase'}}

dev-client/src/screens/SoilScreen/ColorScreen/components/CameraWorkflow.tsx

@@ -21,8 +21,8 @@ import {useTranslation} from 'react-i18next';
 import {Button} from 'native-base';
 
 import {Icon} from 'terraso-mobile-client/components/icons/Icon';
-import {Photo} from 'terraso-mobile-client/components/ImagePicker';
-import {PickImageButton} from 'terraso-mobile-client/components/inputs/PickImageButton';
+import {Photo} from 'terraso-mobile-client/components/inputs/image/ImagePicker';
+import {PickImageButton} from 'terraso-mobile-client/components/inputs/image/PickImageButton';
 import {
   Box,
   Column,
@@ -53,7 +53,10 @@ export const CameraWorkflow = (props: SoilPitInputScreenProps) => {
   return (
     <Column>
       <Box alignItems="center" paddingVertical="lg">
-        <PickImageButton onPick={onPickImage} />
+        <PickImageButton
+          featureName={t('soil.color.featureName')}
+          onPick={onPickImage}
+        />
       </Box>
       <Column
         backgroundColor="grey.300"

dev-client/src/translations/en.json

@@ -435,12 +435,18 @@
     },
     "required": "Required",
     "character_limit": "{{current}} / {{limit}} characters",
-    "open_settings": "Open Settings",
+    "open_settings": "Go to settings",
     "yes": "Yes",
     "no": "No",
     "next": "Next",
     "proceed": "Proceed"
   },
+  "permissions": {
+    "camera_title": "LandPKS Soil ID needs to access your camera",
+    "camera_body": "To use {{feature}}, grant LandPKS Soil ID access to your camera in device settings.",
+    "gallery_title": "LandPKS Soil ID needs to access your photo gallery",
+    "gallery_body": "To use {{feature}}, grant LandPKS Soil ID access to your photo gallery in device settings."
+  },
   "errors": {
     "generic": "Error saving soil ID information."
   },
@@ -715,6 +721,7 @@
     },
     "color": {
       "title": "Soil Color",
+      "featureName": "Soil Color",
       "info": {
         "p1": "Soil color can tell you a lot about soil, including:",
         "bullet1": "Which minerals are present",