MM-46935 - Gekidou Report Problem (#6800)

* placement of 'report a problem'

* installed react-native-mail

* settings/report_problem

- Opens on Email App on Android
- Crashes on iOS if no account signed in the mail app

* new wiring

* new wiring

* tried first strategy for attachment

* tried second strategy for attachment

* Update report_problem.tsx

* revert changes to package.json

* removes unused supportEmail

* install @mattermost/react-native-turbo-mailer

* update import

* Update Podfile.lock

app/screens/settings/config.ts

@@ -66,6 +66,12 @@ export const SettingOptionConfig: Record<string, SettingConfigDetails> = {
         i18nId: t('general_settings.help'),
         testID: 'general_settings.help',
     },
+    report_problem: {
+        defaultMessage: 'Report a Problem',
+        i18nId: t('general_settings.report_problem'),
+        testID: 'general_settings.report_problem',
+    },
+
 };
 
 export const NotificationsOptionConfig: Record<string, SettingConfigDetails> = {

app/screens/settings/index.tsx

@@ -14,14 +14,14 @@ import Settings from './settings';
 import type {WithDatabaseArgs} from '@typings/database/database';
 
 const enhanced = withObservables([], ({database}: WithDatabaseArgs) => {
-    const siteName = observeConfigValue(database, 'SiteName');
     const helpLink = observeConfigValue(database, 'HelpLink');
-    const showHelp = helpLink.pipe(switchMap((link) => of$(link ? isValidUrl(link) : false)));
+    const showHelp = helpLink.pipe(switchMap((link: string) => of$(link ? isValidUrl(link) : false)));
+    const siteName = observeConfigValue(database, 'SiteName');
 
     return {
+        helpLink,
         showHelp,
         siteName,
-        helpLink,
     };
 });
 

app/screens/settings/report_problem/index.ts

@@ -0,0 +1,29 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
+import withObservables from '@nozbe/with-observables';
+
+import {observeConfigValue, observeCurrentUserId, observeCurrentTeamId} from '@queries/servers/system';
+
+import ReportProblem from './report_problem';
+
+import type {WithDatabaseArgs} from '@typings/database/database';
+
+const enhanced = withObservables([], ({database}: WithDatabaseArgs) => {
+    const buildNumber = observeConfigValue(database, 'BuildNumber');
+    const currentTeamId = observeCurrentTeamId(database);
+    const currentUserId = observeCurrentUserId(database);
+    const supportEmail = observeConfigValue(database, 'SupportEmail');
+    const version = observeConfigValue(database, 'Version');
+
+    return {
+        buildNumber,
+        currentTeamId,
+        currentUserId,
+        supportEmail,
+        version,
+    };
+});
+
+export default withDatabase(enhanced(ReportProblem));

app/screens/settings/report_problem/report_problem.tsx

@@ -0,0 +1,71 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import TurboLogger from '@mattermost/react-native-turbo-log';
+import TurboMailer from '@mattermost/react-native-turbo-mailer';
+import React from 'react';
+import {Alert, Platform} from 'react-native';
+import DeviceInfo from 'react-native-device-info';
+
+import {useTheme} from '@context/theme';
+import {preventDoubleTap} from '@utils/tap';
+
+import SettingItem from '../setting_item';
+
+type ReportProblemProps = {
+    buildNumber: string;
+    currentTeamId: string;
+    currentUserId: string;
+    supportEmail: string;
+    version: string;
+    siteName: string;
+};
+
+const ReportProblem = ({buildNumber, currentTeamId, currentUserId, siteName, supportEmail, version}: ReportProblemProps) => {
+    const theme = useTheme();
+
+    const openEmailClient = preventDoubleTap(async () => {
+        const appVersion = DeviceInfo.getVersion();
+        const appBuild = DeviceInfo.getBuildNumber();
+        const deviceId = DeviceInfo.getDeviceId();
+
+        const logPaths = await TurboLogger.getLogPaths();
+
+        const attachments = logPaths.map((path) => ({
+            path,
+            mimeType: 'message/rfc822',
+        }));
+
+        try {
+            await TurboMailer.sendMail({
+                subject: `Problem with ${siteName} React Native app`,
+                recipients: [supportEmail],
+                body: [
+                    'Please share a description of the problem:\n\n',
+                    `Current User Id: ${currentUserId}`,
+                    `Current Team Id: ${currentTeamId}`,
+                    `Server Version: ${version} (Build ${buildNumber})`,
+                    `App Version: ${appVersion} (Build ${appBuild})`,
+                    `App Platform: ${Platform.OS}`,
+                    `Device Model: ${deviceId}`, // added this one
+                ].join('\n'),
+                attachments,
+            });
+        } catch (e: any) {
+            Alert.alert('Error', e.message);
+        }
+    });
+
+    return (
+        <SettingItem
+            optionLabelTextStyle={{color: theme.linkColor}}
+            onPress={openEmailClient}
+            optionName='report_problem'
+            separator={false}
+            testID='settings.report.problem'
+            type='default'
+        />
+    );
+};
+
+export default ReportProblem;

app/screens/settings/settings.tsx

@@ -17,6 +17,7 @@ import {preventDoubleTap} from '@utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {tryOpenURL} from '@utils/url';
 
+import ReportProblem from './report_problem';
 import SettingItem from './setting_item';
 
 const CLOSE_BUTTON_ID = 'close-settings';
@@ -146,15 +147,16 @@ const Settings = ({componentId, helpLink, showHelp, siteName}: SettingsProps) =>
             />
             {Platform.OS === 'android' && <View style={styles.helpGroup}/>}
             {showHelp &&
-            <SettingItem
-                optionLabelTextStyle={{color: theme.linkColor}}
-                onPress={openHelp}
-                optionName='help'
-                separator={false}
-                testID='settings.help.option'
-                type='default'
-            />
+                <SettingItem
+                    optionLabelTextStyle={{color: theme.linkColor}}
+                    onPress={openHelp}
+                    optionName='help'
+                    separator={false}
+                    testID='settings.help.option'
+                    type='default'
+                />
             }
+            <ReportProblem siteName={siteName}/>
         </SettingContainer>
     );
 };