Merge pull request #328 from OpenDTU-App/290-highlight-where-the-user-can-report-bugs-and-leave-feedback-oss-playstore

Add infos for feedback and bug reporting

Author: CommanderRedYT

src/components/AppInfos.tsx

@@ -0,0 +1,110 @@
+import type { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box } from 'react-native-flex-layout';
+import { Icon, IconButton, Text } from 'react-native-paper';
+
+import {
+  setBugreportInfoDismissed,
+  setFeedbackInfoDismissed,
+} from '@/slices/settings';
+
+import { colors } from '@/constants';
+import { useAppDispatch, useAppSelector } from '@/store';
+
+const AppInfos: FC = () => {
+  const { t } = useTranslation();
+
+  const feedbackInfoDismissed = useAppSelector(
+    store => store.settings.feedbackInfoDismissed,
+  );
+  const bugreportInfoDismissed = useAppSelector(
+    store => store.settings.bugreportInfoDismissed,
+  );
+
+  const dispatch = useAppDispatch();
+
+  const handleHideFeedbackInfo = () => {
+    dispatch(setFeedbackInfoDismissed());
+  };
+
+  const handleHideBugreportInfo = () => {
+    dispatch(setBugreportInfoDismissed());
+  };
+
+  return (
+    <>
+      {!feedbackInfoDismissed ? (
+        <Box
+          style={{
+            marginHorizontal: 12,
+            padding: 8,
+            backgroundColor: colors.info,
+            borderRadius: 16,
+            marginBottom: 8,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <Box
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              flex: 1,
+              alignItems: 'center',
+              gap: 8,
+            }}
+          >
+            <Box mh={8}>
+              <Icon size={24} source="file-document" />
+            </Box>
+            <Box style={{ flex: 1 }}>
+              <Text variant="titleMedium">{t('appInfos.feedback')}</Text>
+              <Text style={{ color: colors.onInfo }}>
+                {t('appInfos.feedbackDescription')}
+              </Text>
+            </Box>
+          </Box>
+          <IconButton icon="close" onPress={handleHideFeedbackInfo} />
+        </Box>
+      ) : null}
+      {!bugreportInfoDismissed ? (
+        <Box
+          style={{
+            marginHorizontal: 12,
+            padding: 8,
+            backgroundColor: colors.info,
+            borderRadius: 16,
+            marginBottom: 8,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <Box
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              flex: 1,
+              alignItems: 'center',
+              gap: 8,
+            }}
+          >
+            <Box mh={8}>
+              <Icon size={24} source="bug" />
+            </Box>
+            <Box style={{ flex: 1 }}>
+              <Text variant="titleMedium">{t('appInfos.bugReporting')}</Text>
+              <Text style={{ color: colors.onInfo, flex: 1 }}>
+                {t('appInfos.bugReportingDescription')}
+              </Text>
+            </Box>
+            <IconButton icon="close" onPress={handleHideBugreportInfo} />
+          </Box>
+        </Box>
+      ) : null}
+    </>
+  );
+};
+
+export default AppInfos;

src/constants.ts

@@ -1,7 +1,12 @@
 export const colors = {
   success: '#4caf50',
+  onSuccess: '#fff',
   error: '#f44336',
+  onError: '#fff',
   warning: '#ff9800',
+  onWarning: '#fff',
+  info: '#0a5591',
+  onInfo: '#fff',
   dark: {
     successSurface: '#164016',
     onSuccessSurface: '#c0e5c0',
@@ -28,3 +33,6 @@ export const maximumTestedOpenDtuFirmwareVersion = 'v24.4.12';
 
 export const weblateUrl =
   'https://weblate.commanderred.xyz/engage/opendtu-react-native/';
+
+export const bugreportUrl =
+  'https://github.com/OpenDTU-App/opendtu-react-native/issues/new';

src/slices/settings.ts

@@ -41,6 +41,8 @@ const initialState: SettingsState = {
   enableFetchOpenDTUReleases: DidNotAskYet,
   debugEnabled: false,
   lastAppVersion: packageJson.version,
+  feedbackInfoDismissed: false,
+  bugreportInfoDismissed: false,
 };
 
 const log = rootLogging.extend('SettingsSlice');
@@ -267,6 +269,12 @@ const settingsSlice = createSlice({
     setLastAppVersion: (state, action: SetLastAppVersionAction) => {
       state.lastAppVersion = action.payload.version;
     },
+    setFeedbackInfoDismissed: state => {
+      state.feedbackInfoDismissed = true;
+    },
+    setBugreportInfoDismissed: state => {
+      state.bugreportInfoDismissed = true;
+    },
   },
 });
 
@@ -295,6 +303,8 @@ export const {
   setEnableFetchOpenDTUReleases,
   updateLastAppVersion,
   setLastAppVersion,
+  setFeedbackInfoDismissed,
+  setBugreportInfoDismissed,
 } = settingsSlice.actions;
 
 export const { reducer: SettingsReducer } = settingsSlice;

src/translations

@@ -51,6 +51,10 @@ export interface SettingsState {
 
   // database
   databaseConfigs: DatabaseConfig[];
+
+  // modals & infos
+  feedbackInfoDismissed: boolean;
+  bugreportInfoDismissed: boolean;
 }
 
 // Redux Actions

src/types/settings.ts

@@ -1,5 +1,6 @@
 import { useTheme } from 'react-native-paper';
 
+import AppInfos from '@/components/AppInfos';
 import DeviceOfflineWrapper from '@/components/DeviceOfflineWrapper';
 import DeviceStatus from '@/components/DeviceStatus';
 import ImportantStatusValues from '@/components/ImportantStatusValues';
@@ -13,6 +14,7 @@ const LivedataTab = () => {
     <StyledView theme={theme}>
       <DeviceOfflineWrapper>
         <StyledScrollView theme={theme} disableSafeBottomMargin>
+          <AppInfos />
           <DeviceStatus />
           <ImportantStatusValues />
         </StyledScrollView>

src/views/navigation/tabs/LivedataTab.tsx

@@ -3,9 +3,10 @@ import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Box } from 'react-native-flex-layout';
 import { Badge, List, Text, useTheme } from 'react-native-paper';
+import Toast from 'react-native-toast-message';
 import { useDispatch } from 'react-redux';
 
-import { ScrollView, View } from 'react-native';
+import { Linking, ScrollView, View } from 'react-native';
 
 import { setDebugEnabled } from '@/slices/settings';
 
@@ -21,13 +22,17 @@ import useIsConnected from '@/hooks/useIsConnected';
 import useRequireMultiplePresses from '@/hooks/useRequireMultiplePresses';
 import useSettings from '@/hooks/useSettings';
 
-import { spacing } from '@/constants';
+import { rootLogging } from '@/utils/log';
+
+import { bugreportUrl, spacing } from '@/constants';
 import { StyledView } from '@/style';
 
 import type { NavigationProp, ParamListBase } from '@react-navigation/native';
 import { useNavigation } from '@react-navigation/native';
 import packageJson from '@root/package.json';
 
+const log = rootLogging.extend('MainSettingsTab');
+
 const MainSettingsTab: FC = () => {
   const navigation = useNavigation() as NavigationProp<ParamListBase>;
   const { t } = useTranslation();
@@ -123,6 +128,22 @@ const MainSettingsTab: FC = () => {
     navigation.navigate('LicensesScreen');
   }, [navigation]);
 
+  const handleBugReporting = useCallback(async () => {
+    // open github issues
+    const url = bugreportUrl;
+
+    // open url in browser
+    if (await Linking.canOpenURL(url)) {
+      await Linking.openURL(url);
+    } else {
+      log.error(`Cannot open URL: ${url}`);
+      Toast.show({
+        type: 'error',
+        text1: t('cannotOpenUrl'),
+      });
+    }
+  }, [t]);
+
   const handleDebugScreen = useCallback(() => {
     navigation.navigate('DebugScreen');
   }, [navigation]);
@@ -295,6 +316,12 @@ const MainSettingsTab: FC = () => {
               }
               onPress={handleAbout}
             />
+            <List.Item
+              title={t('settings.bugReporting')}
+              description={t('settings.bugReportingDescription')}
+              left={props => <List.Icon {...props} icon="bug" />}
+              onPress={handleBugReporting}
+            />
             <List.Item
               title={t('settings.licenses')}
               description={t('settings.licensesDescription')}