Feat new help settings (#389)

* WIP: new settings help page [branch ch16758]

* WIP: lint

* WIP: prettier

* feat: new settings help screen

* feat: send logs in new settings help page

* fix: title of settings help page

* chore(e2e): help settings chat with support test

* fix: reverted file permissions

* fix: medcryptor settings

* chore: prettier

* chore: revert package.json to dev

app/components/messaging/chat-state.js

@@ -207,6 +207,12 @@ class ChatState extends RoutedState {
     startDMWithUsername(username) {
         this.startChat([contactStore.getContact(username)]);
     }
+
+    @action
+    async addContactAndStartChat(username) {
+        const contact = await contactStore.whitelabel.getContact(username);
+        this.startChat([contact]);
+    }
 }
 
 const chatState = new ChatState();

app/components/settings/settings-level-1.js

@@ -212,7 +212,7 @@ export default class SettingsLevel1 extends SafeComponent {
                     />
                     <SettingsItem
                         title="title_help"
-                        onPress={() => settingsState.transition('logs')}
+                        onPress={() => settingsState.transition('help')}
                         leftComponent={this.leftSettingsIcon('help', vars.helpSettingsIconColor)}
                     />
 

app/components/settings/settings-level-2.js

@@ -1,20 +1,24 @@
 import React from 'react';
 import { observer } from 'mobx-react/native';
-import { View } from 'react-native';
+import { View, Linking, Alert, NativeModules } from 'react-native';
+import stringify from 'json-stringify-safe';
+import moment from 'moment';
 import SafeComponent from '../shared/safe-component';
 import { vars } from '../../styles/styles';
 import BasicSettingsItem from './basic-settings-item';
 import ToggleItem from './toggle-item';
-import { User, clientApp } from '../../lib/icebear';
+import { User, clientApp, config } from '../../lib/icebear';
 import { mainState, settingsState } from '../states';
 import { tx } from '../utils/translator';
 import payments from '../payments/payments';
 import PaymentsQuotas from '../payments/payments-quotas';
 import ProfileEdit from './profile-edit';
 import AccountEdit from './account-edit';
 import AccountUpgrade from './account-upgrade';
-import Logs from '../logs/logs';
 import keychain from '../../lib/keychain-bridge';
+import chatState from '../messaging/chat-state';
+import buttons from '../helpers/buttons';
+import whiteLabelComponents from '../../components/whitelabel/white-label-components';
 
 const bgStyle = {
     flexGrow: 1,
@@ -28,6 +32,41 @@ const spacer = {
     height: 24
 };
 
+const PEERIO_SUPPORT_USERNAME = 'support';
+
+// uses react-native-mail module
+const { RNMail } = NativeModules;
+
+const mapFormat = ({ time, msg, color }, k) => ({
+    msg: msg && (typeof msg === 'string' ? msg : stringify(msg)),
+    time: moment(time).format(`HH:mm:ss.SSS`),
+    k,
+    key: `${time}:${k}`,
+    color
+});
+
+const mapGlue = ({ msg, time }) => `${time}: ${msg}`;
+
+const sendLogs = () => {
+    const subject = `Support // logs from ${User.current ? User.current.username : 'n/a'}`;
+    const recipients = config.logRecipients;
+    if (console.logVersion) console.logVersion();
+    console.log('attempting to send email');
+    const body = `<pre>${console.stack
+        .map(mapFormat)
+        .map(mapGlue)
+        .join('\n')}</pre>`;
+    RNMail.mail(
+        { subject, recipients, body, isHTML: true },
+        error => error && Alert.alert(`Error sending logs`, error)
+    );
+};
+
+const startChatWithSupport = async () => {
+    chatState.addContactAndStartChat(PEERIO_SUPPORT_USERNAME);
+    settingsState.stack.clear();
+};
+
 @observer
 export default class SettingsLevel2 extends SafeComponent {
     testTwoFactorAuthPrompt(cancelable) {
@@ -75,6 +114,32 @@ export default class SettingsLevel2 extends SafeComponent {
         );
     }
 
+    help() {
+        return (
+            <View style={bgStyle}>
+                <whiteLabelComponents.SettingsHelpButton title="title_helpCenter" untappable>
+                    {buttons.blueTextButton('button_visit', () =>
+                        Linking.openURL('https://support.peerio.com/hc/en-us')
+                    )}
+                </whiteLabelComponents.SettingsHelpButton>
+                <whiteLabelComponents.SettingsHelpButton
+                    title="title_contactPeerioSupport"
+                    untappable>
+                    {buttons.blueTextButton(
+                        'button_chat',
+                        startChatWithSupport,
+                        null,
+                        null,
+                        'button_chat'
+                    )}
+                </whiteLabelComponents.SettingsHelpButton>
+                <BasicSettingsItem title="title_sendLogsToSupport" untappable>
+                    {buttons.blueTextButton('button_send', sendLogs)}
+                </BasicSettingsItem>
+            </View>
+        );
+    }
+
     quotas = () => <PaymentsQuotas />;
 
     profile = () => <ProfileEdit />;
@@ -83,8 +148,6 @@ export default class SettingsLevel2 extends SafeComponent {
 
     upgrade = () => <AccountUpgrade />;
 
-    logs = () => <Logs />;
-
     autoLoginToggle() {
         const user = User.current;
         const state = user;

app/components/settings/settings-level-3.js

@@ -5,6 +5,7 @@ import TwoFactorAuth from './two-factor-auth';
 import Display from './display';
 import Notifications from './notifications';
 import settingsState from './settings-state';
+import Logs from '../logs/logs';
 
 @observer
 export default class SettingsLevel3 extends SafeComponent {
@@ -14,6 +15,8 @@ export default class SettingsLevel3 extends SafeComponent {
 
     notifications = () => <Notifications />;
 
+    logs = () => <Logs />;
+
     renderThrow() {
         const component = this[settingsState.subroute];
         return component && component();

app/components/settings/settings-state.js

@@ -24,7 +24,7 @@ class SettingsState extends RoutedState {
         twoFactorAuth: 'title_2FA',
         notifications: 'title_notifications',
         display: 'title_displayPreferences',
-        logs: 'title_help'
+        help: 'title_help'
     };
 
     get title() {

app/components/whitelabel/medcryptor/medcryptor-settings-help-button.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { View } from 'react-native';
+import { observer } from 'mobx-react/native';
+import SafeComponent from '../../shared/safe-component';
+
+@observer
+export default class MedcryptorSettingsHelpButton extends SafeComponent {
+    renderThrow() {
+        return <View />;
+    }
+}

app/components/whitelabel/medcryptor/medcryptor-white-label-components.js

@@ -5,10 +5,12 @@ import MedcryptorChatList from './medcryptor-chat-list';
 import MedcryptorChat from './medcryptor-chat';
 import MedcryptorContactAddWarning from './medcryptor-contact-add-warning';
 import MedcryptorChannelInvite from './medcryptor-channel-invite';
+import MedcryptorSettingsHelpButton from './medcryptor-settings-help-button';
 import MedcryptorManageAccountButton from './medcryptor-manage-account-button';
 
 export default {
     ContactAddWarning: MedcryptorContactAddWarning,
+    SettingsHelpButton: MedcryptorSettingsHelpButton,
     ManageAccountButton: MedcryptorManageAccountButton,
     ChatList: MedcryptorChatList,
     Chat: MedcryptorChat,

app/components/whitelabel/peerio/peerio-settings-help-button.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { observer } from 'mobx-react/native';
+import SafeComponent from '../../shared/safe-component';
+import BasicSettingsItem from '../../settings/basic-settings-item';
+
+@observer
+export default class PeerioSettingsHelpButton extends SafeComponent {
+    renderThrow() {
+        const { title, untappable } = this.props;
+        return (
+            <BasicSettingsItem title={title} untappable={untappable}>
+                {this.props.children}
+            </BasicSettingsItem>
+        );
+    }
+}

app/components/whitelabel/peerio/peerio-white-label-components.js

@@ -3,11 +3,13 @@ import LoadingScreen from '../../../components/layout/loading-screen';
 import ChatList from '../../../components/messaging/chat-list';
 import Chat from '../../../components/messaging/chat';
 import PeerioContactAddWarning from './peerio-contact-add-warning';
+import PeerioSettingsHelpButton from './peerio-settings-help-button';
 import ChannelInvite from '../../messaging/channel-invite';
 import PeerioManageAccountButton from './peerio-manage-account-button';
 
 export default {
     ContactAddWarning: PeerioContactAddWarning,
+    SettingsHelpButton: PeerioSettingsHelpButton,
     ManageAccountButton: PeerioManageAccountButton,
     ChatList,
     Chat,

package.json

@@ -50,6 +50,7 @@
     "test-android-contacts": "TEST_FEATURE=contacts/contacts npm run test-android-feature",
     "test-android-fileUpload": "TEST_FEATURE=files/fileUpload npm run test-android-feature",
     "test-android-folders": "TEST_FEATURE=files/folders npm run test-android-feature",
+    "test-android-settings-help": "TEST_FEATURE=settings/help npm run test-android-feature",
     "gp-peerio": "npm run build-android && bash scripts/release_android.sh && fastlane android alpha",
     "commit-msg": "validate-commit-msg",
     "prettier": "prettier -l --write '{app,test}/**/*.js'",

test/code/pages/messaging/chatPage.js

@@ -5,6 +5,10 @@ class ChatPage extends Page {
         return this.getWhenVisible(`~textInputMessage`);
     }
 
+    get textInputExists() {
+        return this.checkIfPresent(`~textInputMessage`);
+    }
+
     get buttonSendMessage() {
         return this.getWhenVisible('~buttonSendMessage');
     }

test/code/pages/settings/settingsPage.js

@@ -36,6 +36,14 @@ class SettingsPage extends Page {
     get copyButton() {
         return this.getWhenVisible('~popupButton-copy');
     }
+
+    get helpButton() {
+        return this.getWhenPresent('~title_help');
+    }
+
+    get chatButton() {
+        return this.getWhenVisible('~button_chat');
+    }
 }
 
 module.exports = SettingsPage;

test/code/steps/chat.js

@@ -144,3 +144,9 @@ Then(/(?:I am|they are) in the chat list page/, async function() {
 Then('I fill my chatlist', async function() {
     await this.chatListPage.testAction2();
 });
+
+Then('A chat opens with the support user', async function() {
+    await this.app.pause(2000); // Necessary else it will always return false
+    const textInputExists = await this.chatPage.textInputExists;
+    textInputExists.should.be.true; // eslint-disable-line
+});

test/code/steps/profileSettings.js

@@ -60,3 +60,12 @@ When('I can see my account key', async function() {
 
     await this.settingsPage.copyButton.click();
 });
+
+When('I go to help settings', async function() {
+    await this.homePage.settingsTab.click();
+    await this.settingsPage.helpButton.click();
+});
+
+When('I tap Chat button in help settings', async function() {
+    await this.settingsPage.chatButton.click();
+});

test/spec/settings/help.feature

@@ -0,0 +1,11 @@
+@mobile @help
+Feature: Mobile Help page
+    As a user confused and looking for help in Peerio, I want to be able to find 
+    and view a help page that simply contains contact information for support and 
+    support guides, so that I can find an answer to my problem. 
+
+ Scenario: I want to chat with support
+    Given I log in as new user
+    Then  I go to help settings
+    When  I tap Chat button in help settings
+    Then  A chat opens with the support user