feat: added an alert to go to app settings when permission is not granted (QM-1799)

bang9 · bang9 · commit dfb9322dc0b1 · 2022-09-16T12:31:55.000+09:00
diff --git a/packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelInput/SendInput.tsx b/packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelInput/SendInput.tsx
@@ -5,13 +5,16 @@ import {
   Icon,
   TextInput,
   createStyleSheet,
+  useAlert,
   useBottomSheet,
   useToast,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
 import { conditionChaining } from '@sendbird/uikit-utils';
 
 import { useLocalization, usePlatformService } from '../../../../hooks/useContext';
+import SBUError from '../../../../libs/SBUError';
+import SBUUtils from '../../../../libs/SBUUtils';
 import type { GroupChannelProps } from '../../types';
 
 type SendInputProps = GroupChannelProps['Input'] & {
@@ -21,9 +24,10 @@ type SendInputProps = GroupChannelProps['Input'] & {
 };
 const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabled }: SendInputProps) => {
   const { STRINGS } = useLocalization();
-  const { openSheet } = useBottomSheet();
   const { fileService } = usePlatformService();
   const { colors } = useUIKitTheme();
+  const { openSheet } = useBottomSheet();
+  const { alert } = useAlert();
   const toast = useToast();
 
   const onPressSend = () => {
@@ -39,7 +43,17 @@ const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabl
           onPress: async () => {
             const photo = await fileService.openCamera({
               mediaType: 'all',
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error'),
+              onOpenFailure: (error) => {
+                if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+                  alert({
+                    title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE('camera', 'UIKitSample'),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
+                }
+              },
             });
 
             if (photo) {
@@ -54,7 +68,17 @@ const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabl
             const photo = await fileService.openMediaLibrary({
               selectionLimit: 1,
               mediaType: 'all',
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error'),
+              onOpenFailure: (error) => {
+                if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+                  alert({
+                    title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE('device storage', 'UIKitSample'),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
+                }
+              },
             });
 
             if (photo && photo[0]) {
@@ -67,7 +91,7 @@ const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabl
           icon: 'document',
           onPress: async () => {
             const file = await fileService.openDocument({
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error'),
+              onOpenFailure: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error'),
             });
 
             if (file) {
diff --git a/packages/uikit-react-native/src/domain/groupChannelSettings/module/moduleContext.tsx b/packages/uikit-react-native/src/domain/groupChannelSettings/module/moduleContext.tsx
@@ -14,6 +14,8 @@ import {
 
 import ProviderLayout from '../../../components/ProviderLayout';
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../../hooks/useContext';
+import SBUError from '../../../libs/SBUError';
+import SBUUtils from '../../../libs/SBUUtils';
 import type { GroupChannelSettingsContextsType, GroupChannelSettingsModule } from '../types';
 
 export const GroupChannelSettingsContexts: GroupChannelSettingsContextsType = {
@@ -84,7 +86,17 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
           onPress: async () => {
             const file = await fileService.openCamera({
               mediaType: 'photo',
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error'),
+              onOpenFailure: (error) => {
+                if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+                  alert({
+                    title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE('camera', 'UIKitSample'),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
+                }
+              },
             });
             if (!file) return;
 
@@ -99,7 +111,17 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
             const files = await fileService.openMediaLibrary({
               selectionLimit: 1,
               mediaType: 'photo',
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error'),
+              onOpenFailure: (error) => {
+                if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+                  alert({
+                    title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE('device storage', 'UIKitSample'),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
+                }
+              },
             });
             if (!files || !files[0]) return;
 
diff --git a/packages/uikit-react-native/src/libs/SBUError.ts b/packages/uikit-react-native/src/libs/SBUError.ts
@@ -0,0 +1,26 @@
+enum SBUErrorCode {
+  ERR_UNKNOWN = 90000000,
+
+  // Platform service - 91001000 ~
+  ERR_PERMISSIONS_DENIED = 91001000,
+  ERR_DEVICE_UNAVAILABLE,
+}
+
+export default class SBUError extends Error {
+  static CODE = SBUErrorCode;
+
+  static get UNKNOWN() {
+    return new SBUError(SBUErrorCode.ERR_UNKNOWN);
+  }
+
+  static get PERMISSIONS_DENIED() {
+    return new SBUError(SBUErrorCode.ERR_PERMISSIONS_DENIED);
+  }
+  static get DEVICE_UNAVAILABLE() {
+    return new SBUError(SBUErrorCode.ERR_DEVICE_UNAVAILABLE);
+  }
+
+  constructor(public code: SBUErrorCode, message?: string) {
+    super(message);
+  }
+}
diff --git a/packages/uikit-react-native/src/libs/SBUUtils.ts b/packages/uikit-react-native/src/libs/SBUUtils.ts
@@ -0,0 +1,9 @@
+import { Linking, Platform } from 'react-native';
+
+export default class SBUUtils {
+  static openSettings() {
+    Linking.openSettings().catch(() => {
+      if (Platform.OS === 'ios') Linking.openURL('App-Prefs:root');
+    });
+  }
+}
diff --git a/packages/uikit-react-native/src/localization/StringSet.type.ts b/packages/uikit-react-native/src/localization/StringSet.type.ts
@@ -149,6 +149,11 @@ export interface StringSet {
   };
   DIALOG: {
     ALERT_DEFAULT_OK: string;
+
+    ALERT_PERMISSIONS_TITLE: string;
+    ALERT_PERMISSIONS_MESSAGE: (permission: string, appName: string) => string;
+    ALERT_PERMISSIONS_OK: string;
+
     PROMPT_DEFAULT_OK: string;
     PROMPT_DEFAULT_CANCEL: string;
     PROMPT_DEFAULT_PLACEHOLDER: string;
@@ -316,6 +321,11 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
     },
     DIALOG: {
       ALERT_DEFAULT_OK: 'OK',
+      ALERT_PERMISSIONS_TITLE: 'Allow permission',
+      ALERT_PERMISSIONS_MESSAGE: (permission, appName = 'Application') => {
+        return `${appName} need permission to access your ${permission}. Go to Settings to allow access`;
+      },
+      ALERT_PERMISSIONS_OK: 'SETTINGS',
       PROMPT_DEFAULT_OK: 'Submit',
       PROMPT_DEFAULT_CANCEL: 'Cancel',
       PROMPT_DEFAULT_PLACEHOLDER: 'Enter',
diff --git a/packages/uikit-react-native/src/platform/createFileService.expo.ts b/packages/uikit-react-native/src/platform/createFileService.expo.ts
@@ -5,6 +5,7 @@ import type * as ExpoMediaLibrary from 'expo-media-library';
 
 import { getFileExtension, getFileType } from '@sendbird/uikit-utils';
 
+import SBUError from '../libs/SBUError';
 import type { ExpoMediaLibraryPermissionResponse, ExpoPermissionResponse } from '../utils/expoPermissionGranted';
 import expoPermissionGranted from '../utils/expoPermissionGranted';
 import fileTypeGuard from '../utils/fileTypeGuard';
@@ -55,7 +56,7 @@ const createExpoFileService = ({
       if (!hasPermission) {
         const granted = await this.requestCameraPermission();
         if (!granted) {
-          options?.onOpenFailureWithToastMessage?.();
+          options?.onOpenFailure?.(SBUError.PERMISSIONS_DENIED);
           return null;
         }
       }
@@ -89,7 +90,7 @@ const createExpoFileService = ({
       if (!hasPermission) {
         const granted = await this.requestMediaLibraryPermission('read');
         if (!granted) {
-          options?.onOpenFailureWithToastMessage?.();
+          options?.onOpenFailure?.(SBUError.PERMISSIONS_DENIED);
           return null;
         }
       }
@@ -123,8 +124,8 @@ const createExpoFileService = ({
         if (response.type === 'cancel') return null;
         const { mimeType, uri, size, name } = response;
         return fileTypeGuard({ uri, size, name, type: mimeType });
-      } catch {
-        options?.onOpenFailureWithToastMessage?.();
+      } catch (e) {
+        options?.onOpenFailure?.(SBUError.UNKNOWN, e);
         return null;
       }
     }
diff --git a/packages/uikit-react-native/src/platform/createFileService.native.ts b/packages/uikit-react-native/src/platform/createFileService.native.ts
@@ -8,6 +8,7 @@ import type { Permission } from 'react-native-permissions';
 
 import { getFileExtension, getFileType } from '@sendbird/uikit-utils';
 
+import SBUError from '../libs/SBUError';
 import fileTypeGuard from '../utils/fileTypeGuard';
 import nativePermissionGranted from '../utils/nativePermissionGranted';
 import type {
@@ -87,7 +88,7 @@ const createNativeFileService = ({
       if (!hasPermission) {
         const granted = await this.requestCameraPermission();
         if (!granted) {
-          options?.onOpenFailureWithToastMessage?.();
+          options?.onOpenFailure?.(SBUError.PERMISSIONS_DENIED);
           return null;
         }
       }
@@ -109,7 +110,7 @@ const createNativeFileService = ({
       });
       if (response.didCancel) return null;
       if (response.errorCode === 'camera_unavailable') {
-        options?.onOpenFailureWithToastMessage?.();
+        options?.onOpenFailure?.(SBUError.DEVICE_UNAVAILABLE, new Error(response.errorMessage));
         return null;
       }
 
@@ -126,7 +127,7 @@ const createNativeFileService = ({
       if (!hasPermission) {
         const granted = await this.requestMediaLibraryPermission();
         if (!granted) {
-          options?.onOpenFailureWithToastMessage?.();
+          options?.onOpenFailure?.(SBUError.PERMISSIONS_DENIED);
           return null;
         }
       }
@@ -148,7 +149,7 @@ const createNativeFileService = ({
       });
       if (response.didCancel) return null;
       if (response.errorCode === 'camera_unavailable') {
-        options?.onOpenFailureWithToastMessage?.();
+        options?.onOpenFailure?.(SBUError.DEVICE_UNAVAILABLE, new Error(response.errorMessage));
         return null;
       }
 
@@ -162,7 +163,7 @@ const createNativeFileService = ({
         return fileTypeGuard({ uri, size, name, type });
       } catch (e) {
         if (!documentPickerModule.isCancel(e) && documentPickerModule.isInProgress(e)) {
-          options?.onOpenFailureWithToastMessage?.();
+          options?.onOpenFailure?.(SBUError.UNKNOWN, e);
         }
         return null;
       }
diff --git a/packages/uikit-react-native/src/platform/types.ts b/packages/uikit-react-native/src/platform/types.ts
@@ -1,3 +1,5 @@
+import type SBUError from '../libs/SBUError';
+
 export type Unsubscribe = () => void | undefined;
 export type DownloadedPath = string;
 export type FilePickerResponse = FileType | null;
@@ -23,7 +25,7 @@ export interface ClipboardServiceInterface {
 export interface FileServiceInterface extends FilePickerServiceInterface, FileSystemServiceInterface {}
 
 export interface OpenResultListener {
-  onOpenFailureWithToastMessage?: () => void;
+  onOpenFailure?: (error: SBUError, originError?: unknown) => void;
 }
 export interface OpenMediaLibraryOptions extends OpenResultListener {
   selectionLimit?: number;
diff --git a/sample/src/screens/uikit-app/GroupChannelTabs/SettingsScreen.tsx b/sample/src/screens/uikit-app/GroupChannelTabs/SettingsScreen.tsx
@@ -18,6 +18,8 @@ import {
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
 import { useBottomSheet } from '@sendbird/uikit-react-native-foundation';
+import SBUError from '@sendbird/uikit-react-native/src/libs/SBUError';
+import SBUUtils from '@sendbird/uikit-react-native/src/libs/SBUUtils';
 
 import { useAppNavigation } from '../../../hooks/useAppNavigation';
 import useAppearance from '../../../hooks/useAppearance';
@@ -56,7 +58,17 @@ const SettingsScreen = () => {
           onPress: async () => {
             const photo = await fileService.openCamera({
               mediaType: 'photo',
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error'),
+              onOpenFailure: (error) => {
+                if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+                  alert({
+                    title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE('camera', 'UIKitSample'),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
+                }
+              },
             });
 
             if (!photo) return;
@@ -70,7 +82,17 @@ const SettingsScreen = () => {
             const files = await fileService.openMediaLibrary({
               selectionLimit: 1,
               mediaType: 'photo',
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error'),
+              onOpenFailure: (error) => {
+                if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+                  alert({
+                    title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE('device storage', 'UIKitSample'),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
+                }
+              },
             });
             if (!files || !files[0]) return;
 

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@ import type * as ExpoMediaLibrary from 'expo-media-library';`
`5`	`5`
`6`	`6`	`import { getFileExtension, getFileType } from '@sendbird/uikit-utils';`
`7`	`7`
	`8`	`+import SBUError from '../libs/SBUError';`
`8`	`9`	`import type { ExpoMediaLibraryPermissionResponse, ExpoPermissionResponse } from '../utils/expoPermissionGranted';`
`9`	`10`	`import expoPermissionGranted from '../utils/expoPermissionGranted';`
`10`	`11`	`import fileTypeGuard from '../utils/fileTypeGuard';`
`@@ -55,7 +56,7 @@ const createExpoFileService = ({`
`55`	`56`	`if (!hasPermission) {`
`56`	`57`	`const granted = await this.requestCameraPermission();`
`57`	`58`	`if (!granted) {`
`58`		`- options?.onOpenFailureWithToastMessage?.();`
	`59`	`+ options?.onOpenFailure?.(SBUError.PERMISSIONS_DENIED);`
`59`	`60`	`return null;`
`60`	`61`	`}`
`61`	`62`	`}`
`@@ -89,7 +90,7 @@ const createExpoFileService = ({`
`89`	`90`	`if (!hasPermission) {`
`90`	`91`	`const granted = await this.requestMediaLibraryPermission('read');`
`91`	`92`	`if (!granted) {`
`92`		`- options?.onOpenFailureWithToastMessage?.();`
	`93`	`+ options?.onOpenFailure?.(SBUError.PERMISSIONS_DENIED);`
`93`	`94`	`return null;`
`94`	`95`	`}`
`95`	`96`	`}`
`@@ -123,8 +124,8 @@ const createExpoFileService = ({`
`123`	`124`	`if (response.type === 'cancel') return null;`
`124`	`125`	`const { mimeType, uri, size, name } = response;`
`125`	`126`	`return fileTypeGuard({ uri, size, name, type: mimeType });`
`126`		`- } catch {`
`127`		`- options?.onOpenFailureWithToastMessage?.();`
	`127`	`+ } catch (e) {`
	`128`	`+ options?.onOpenFailure?.(SBUError.UNKNOWN, e);`
`128`	`129`	`return null;`
`129`	`130`	`}`
`130`	`131`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@ import type { Permission } from 'react-native-permissions';`
`8`	`8`
`9`	`9`	`import { getFileExtension, getFileType } from '@sendbird/uikit-utils';`
`10`	`10`
	`11`	`+import SBUError from '../libs/SBUError';`
`11`	`12`	`import fileTypeGuard from '../utils/fileTypeGuard';`
`12`	`13`	`import nativePermissionGranted from '../utils/nativePermissionGranted';`
`13`	`14`	`import type {`
`@@ -87,7 +88,7 @@ const createNativeFileService = ({`
`87`	`88`	`if (!hasPermission) {`
`88`	`89`	`const granted = await this.requestCameraPermission();`
`89`	`90`	`if (!granted) {`
`90`		`- options?.onOpenFailureWithToastMessage?.();`
	`91`	`+ options?.onOpenFailure?.(SBUError.PERMISSIONS_DENIED);`
`91`	`92`	`return null;`
`92`	`93`	`}`
`93`	`94`	`}`
`@@ -109,7 +110,7 @@ const createNativeFileService = ({`
`109`	`110`	`});`
`110`	`111`	`if (response.didCancel) return null;`
`111`	`112`	`if (response.errorCode === 'camera_unavailable') {`
`112`		`- options?.onOpenFailureWithToastMessage?.();`
	`113`	`+ options?.onOpenFailure?.(SBUError.DEVICE_UNAVAILABLE, new Error(response.errorMessage));`
`113`	`114`	`return null;`
`114`	`115`	`}`
`115`	`116`
`@@ -126,7 +127,7 @@ const createNativeFileService = ({`
`126`	`127`	`if (!hasPermission) {`
`127`	`128`	`const granted = await this.requestMediaLibraryPermission();`
`128`	`129`	`if (!granted) {`
`129`		`- options?.onOpenFailureWithToastMessage?.();`
	`130`	`+ options?.onOpenFailure?.(SBUError.PERMISSIONS_DENIED);`
`130`	`131`	`return null;`
`131`	`132`	`}`
`132`	`133`	`}`
`@@ -148,7 +149,7 @@ const createNativeFileService = ({`
`148`	`149`	`});`
`149`	`150`	`if (response.didCancel) return null;`
`150`	`151`	`if (response.errorCode === 'camera_unavailable') {`
`151`		`- options?.onOpenFailureWithToastMessage?.();`
	`152`	`+ options?.onOpenFailure?.(SBUError.DEVICE_UNAVAILABLE, new Error(response.errorMessage));`
`152`	`153`	`return null;`
`153`	`154`	`}`
`154`	`155`
`@@ -162,7 +163,7 @@ const createNativeFileService = ({`
`162`	`163`	`return fileTypeGuard({ uri, size, name, type });`
`163`	`164`	`} catch (e) {`
`164`	`165`	`if (!documentPickerModule.isCancel(e) && documentPickerModule.isInProgress(e)) {`
`165`		`- options?.onOpenFailureWithToastMessage?.();`
	`166`	`+ options?.onOpenFailure?.(SBUError.UNKNOWN, e);`
`166`	`167`	`}`
`167`	`168`	`return null;`
`168`	`169`	`}`