summaryrefslogtreecommitdiffhomepage
path: root/app/components/Support.js
diff options
context:
space:
mode:
Diffstat (limited to 'app/components/Support.js')
-rw-r--r--app/components/Support.js323
1 files changed, 163 insertions, 160 deletions
diff --git a/app/components/Support.js b/app/components/Support.js
index 0b3e88676a..fa4e6cf62d 100644
--- a/app/components/Support.js
+++ b/app/components/Support.js
@@ -23,10 +23,10 @@ type SupportState = {
export type SupportProps = {
account: AccountReduxState,
- onClose: () => void;
- onViewLog: (string) => void;
- onCollectLog: (Array<string>) => Promise<string>;
- onSend: (email: string, message: string, savedReport: string) => void;
+ onClose: () => void,
+ onViewLog: (string) => void,
+ onCollectLog: (Array<string>) => Promise<string>,
+ onSend: (email: string, message: string, savedReport: string) => void,
};
export default class Support extends Component<SupportProps, SupportState> {
@@ -43,28 +43,27 @@ export default class Support extends Component<SupportProps, SupportState> {
onChangeEmail = (email: string) => {
this.setState({ email: email });
- }
+ };
onChangeDescription = (description: string) => {
this.setState({ message: description });
- }
+ };
onViewLog = () => {
-
- this._getLog()
- .then((path) => {
- this.props.onViewLog(path);
- });
- }
+ this._getLog().then((path) => {
+ this.props.onViewLog(path);
+ });
+ };
_getLog(): Promise<string> {
const accountsToRedact = this.props.account.accountHistory;
const { savedReport } = this.state;
- return savedReport ?
- Promise.resolve(savedReport) :
- this.props.onCollectLog(accountsToRedact)
- .then( path => {
- return new Promise(resolve => this.setState({ savedReport: path }, () => resolve(path)));
+ return savedReport
+ ? Promise.resolve(savedReport)
+ : this.props.onCollectLog(accountsToRedact).then((path) => {
+ return new Promise((resolve) =>
+ this.setState({ savedReport: path }, () => resolve(path)),
+ );
});
}
@@ -76,39 +75,46 @@ export default class Support extends Component<SupportProps, SupportState> {
} else {
this._sendProblemReport();
}
- }
+ };
_sendProblemReport() {
- this.setState({
- sendState: 'LOADING',
- }, () => {
- this._getLog()
- .then((path) => {
- return this.props.onSend(this.state.email, this.state.message, path);
- })
- .then( () => {
- this.setState({
- sendState: 'SUCCESS',
- });
- })
- .catch( () => {
- this.setState({
- sendState: 'FAILED',
+ this.setState(
+ {
+ sendState: 'LOADING',
+ },
+ () => {
+ this._getLog()
+ .then((path) => {
+ return this.props.onSend(this.state.email, this.state.message, path);
+ })
+ .then(() => {
+ this.setState({
+ sendState: 'SUCCESS',
+ });
+ })
+ .catch(() => {
+ this.setState({
+ sendState: 'FAILED',
+ });
});
- });
- });
+ },
+ );
}
render() {
-
const { sendState } = this.state;
- const header = <View style={styles.support__header}>
- <Text style={styles.support__title}>Report a problem</Text>
- { (sendState === 'INITIAL' || sendState === 'CONFIRM_NO_EMAIL') && <Text style={styles.support__subtitle}>
- { 'To help you more effectively, your app\'s log file will be attached to this message. Your data will remain secure and private, as it is anonymised before being sent over an encrypted channel.' }
- </Text>
- }
- </View>;
+ const header = (
+ <View style={styles.support__header}>
+ <Text style={styles.support__title}>Report a problem</Text>
+ {(sendState === 'INITIAL' || sendState === 'CONFIRM_NO_EMAIL') && (
+ <Text style={styles.support__subtitle}>
+ {
+ "To help you more effectively, your app's log file will be attached to this message. Your data will remain secure and private, as it is anonymised before being sent over an encrypted channel."
+ }
+ </Text>
+ )}
+ </View>
+ );
const content = this._renderContent();
@@ -116,16 +122,17 @@ export default class Support extends Component<SupportProps, SupportState> {
<Layout>
<Container>
<View style={styles.support}>
- <Button style={styles.support__close} onPress={ this.props.onClose } testName="support__close">
+ <Button
+ style={styles.support__close}
+ onPress={this.props.onClose}
+ testName="support__close">
<Img height={24} width={24} style={styles.support__close_icon} source="icon-back" />
<Text style={styles.support__close_title}>Settings</Text>
</Button>
<View style={styles.support__container}>
+ {header}
- { header }
-
- { content }
-
+ {content}
</View>
</View>
</Container>
@@ -134,154 +141,150 @@ export default class Support extends Component<SupportProps, SupportState> {
}
_renderContent() {
- switch(this.state.sendState) {
- case 'INITIAL':
- case 'CONFIRM_NO_EMAIL':
- return this._renderForm();
- case 'LOADING':
- return this._renderLoading();
- case 'SUCCESS':
- return this._renderSent();
- case 'FAILED':
- return this._renderFailed();
- default:
- return null;
+ switch (this.state.sendState) {
+ case 'INITIAL':
+ case 'CONFIRM_NO_EMAIL':
+ return this._renderForm();
+ case 'LOADING':
+ return this._renderLoading();
+ case 'SUCCESS':
+ return this._renderSent();
+ case 'FAILED':
+ return this._renderFailed();
+ default:
+ return null;
}
}
_renderForm() {
-
- return <View style={styles.support__content}>
- <View style={styles.support__form}>
- <View style={styles.support__form_row}>
- <TextInput style={styles.support__form_email}
- placeholder="Your email"
- defaultValue={ this.state.email }
- onChangeText={ this.onChangeEmail }
- keyboardType="email-address" />
- </View>
- <View style={styles.support__form_row_message}>
- <View style={styles.support__form_message_scroll_wrap}>
- <TextInput style={styles.support__form_message}
- placeholder="Describe your problem"
- defaultValue={ this.state.message }
- multiline={ true }
- onChangeText={ this.onChangeDescription }
- testName="support__form_message"/>
+ return (
+ <View style={styles.support__content}>
+ <View style={styles.support__form}>
+ <View style={styles.support__form_row}>
+ <TextInput
+ style={styles.support__form_email}
+ placeholder="Your email"
+ defaultValue={this.state.email}
+ onChangeText={this.onChangeEmail}
+ keyboardType="email-address"
+ />
</View>
- </View>
- <View style={styles.support__footer}>
- {
- this.state.sendState === 'CONFIRM_NO_EMAIL'
+ <View style={styles.support__form_row_message}>
+ <View style={styles.support__form_message_scroll_wrap}>
+ <TextInput
+ style={styles.support__form_message}
+ placeholder="Describe your problem"
+ defaultValue={this.state.message}
+ multiline={true}
+ onChangeText={this.onChangeDescription}
+ testName="support__form_message"
+ />
+ </View>
+ </View>
+ <View style={styles.support__footer}>
+ {this.state.sendState === 'CONFIRM_NO_EMAIL'
? this._renderNoEmailWarning()
- : this._renderActionButtons()
- }
+ : this._renderActionButtons()}
+ </View>
</View>
</View>
- </View>;
+ );
}
_renderNoEmailWarning() {
- return <View>
- <Text style={styles.support__no_email_warning}>
- You are about to send the problem report without a way for us to get back to you. If you want an answer to your report you will have to enter an email address.
- </Text>
- <GreenButton
- disabled={ !this.validate() }
- onPress={ this.onSend }
- testName='support__send_logs'>
- Send anyway
- </GreenButton>
- </View>;
+ return (
+ <View>
+ <Text style={styles.support__no_email_warning}>
+ You are about to send the problem report without a way for us to get back to you. If you
+ want an answer to your report you will have to enter an email address.
+ </Text>
+ <GreenButton
+ disabled={!this.validate()}
+ onPress={this.onSend}
+ testName="support__send_logs">
+ Send anyway
+ </GreenButton>
+ </View>
+ );
}
_renderActionButtons() {
return [
- <BlueButton key={1}
- onPress={ this.onViewLog }
- testName='support__view_logs'>
+ <BlueButton key={1} onPress={this.onViewLog} testName="support__view_logs">
<Label>View app logs</Label>
- <Img source='icon-extLink' height={16} width={16} />
+ <Img source="icon-extLink" height={16} width={16} />
</BlueButton>,
- <GreenButton key={2}
- disabled={ !this.validate() }
- onPress={ this.onSend }
- testName='support__send_logs'>
+ <GreenButton
+ key={2}
+ disabled={!this.validate()}
+ onPress={this.onSend}
+ testName="support__send_logs">
Send
- </GreenButton>
+ </GreenButton>,
];
}
_renderLoading() {
- return <View style={styles.support__content}>
- <View style={styles.support__form}>
- <View style={styles.support__form_row}>
- <View style={styles.support__status_icon}>
- <Img source="icon-spinner" height={60} width={60} alt="" />
- </View>
- <View style={styles.support__status_security__secure}>
- Secure Connection
+ return (
+ <View style={styles.support__content}>
+ <View style={styles.support__form}>
+ <View style={styles.support__form_row}>
+ <View style={styles.support__status_icon}>
+ <Img source="icon-spinner" height={60} width={60} alt="" />
+ </View>
+ <View style={styles.support__status_security__secure}>Secure Connection</View>
+ <Text style={styles.support__send_status}>Sending...</Text>
</View>
- <Text style={styles.support__send_status}>
- Sending...
- </Text>
</View>
</View>
- </View>;
+ );
}
_renderSent() {
- return <View style={styles.support__content}>
- <View style={styles.support__form}>
- <View style={styles.support__form_row}>
- <View style={styles.support__status_icon}>
- <Img source="icon-success" height={60} width={60} alt="" />
- </View>
- <Text style={styles.support__status_security__secure}>
- Secure Connection
- </Text>
- <Text style={styles.support__send_status}>
- Sent
- </Text>
+ return (
+ <View style={styles.support__content}>
+ <View style={styles.support__form}>
+ <View style={styles.support__form_row}>
+ <View style={styles.support__status_icon}>
+ <Img source="icon-success" height={60} width={60} alt="" />
+ </View>
+ <Text style={styles.support__status_security__secure}>Secure Connection</Text>
+ <Text style={styles.support__send_status}>Sent</Text>
- <Text style={styles.support__subtitle}>
- Thanks! We will look into this.
- </Text>
- { this.state.email.trim().length > 0 ?
- <Text style={styles.support__subtitle}>If needed we will contact you on {'\u00A0'}
- <Text style={styles.support__sent_email}>{ this.state.email }</Text>
- </Text>
- : null }
+ <Text style={styles.support__subtitle}>Thanks! We will look into this.</Text>
+ {this.state.email.trim().length > 0 ? (
+ <Text style={styles.support__subtitle}>
+ If needed we will contact you on {'\u00A0'}
+ <Text style={styles.support__sent_email}>{this.state.email}</Text>
+ </Text>
+ ) : null}
+ </View>
</View>
</View>
- </View>;
+ );
}
_renderFailed() {
- return <View style={styles.support__content}>
- <View style={styles.support__form}>
- <View style={styles.support__form_row}>
- <View style={styles.support__status_icon}>
- <Img source="icon-fail" height={60} width={60} alt="" />
+ return (
+ <View style={styles.support__content}>
+ <View style={styles.support__form}>
+ <View style={styles.support__form_row}>
+ <View style={styles.support__status_icon}>
+ <Img source="icon-fail" height={60} width={60} alt="" />
+ </View>
+ <Text style={styles.support__status_security__secure}>Secure Connection</Text>
+ <Text style={styles.support__send_status}>Failed to send</Text>
</View>
- <Text style={styles.support__status_security__secure}>
- Secure Connection
- </Text>
- <Text style={styles.support__send_status}>
- Failed to send
- </Text>
+ </View>
+ <View style={styles.support__footer}>
+ <BlueButton onPress={() => this.setState({ sendState: 'INITIAL' })}>
+ Edit message
+ </BlueButton>
+ <GreenButton onPress={this.onSend} testName="support__send_logs">
+ Try again
+ </GreenButton>
</View>
</View>
- <View style={styles.support__footer}>
- <BlueButton onPress={ () => this.setState({ sendState: 'INITIAL' }) }>
- Edit message
- </BlueButton>
- <GreenButton
- onPress={ this.onSend }
- testName='support__send_logs'>
- Try again
- </GreenButton>
- </View>
- </View>;
+ );
}
}
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.