Merge b9235f2 into ddc0552

CHANGELOG.md

@@ -35,6 +35,29 @@
   });
   ```
 
+- Adds feedback form ([#4320](https://github.com/getsentry/sentry-react-native/pull/4328))
+
+  You can add the form component in your UI and customise it like:
+  ```jsx
+  import { FeedbackForm } from "@sentry/react-native";
+  ...
+  <FeedbackForm
+    {...props}
+    closeScreen={props.navigation.goBack}
+    styles={{
+      submitButton: {
+        backgroundColor: '#6a1b9a',
+        paddingVertical: 15,
+        borderRadius: 5,
+        alignItems: 'center',
+        marginBottom: 10,
+      },
+    }}
+    text={{namePlaceholder: 'Fullname'}}
+  />
+  ```
+  Check [the documentation](https://docs.sentry.io/platforms/react-native/user-feedback/) for more configuration options.
+
 ### Fixes
 
 - Return `lastEventId` export from `@sentry/core` ([#4315](https://github.com/getsentry/sentry-react-native/pull/4315))

packages/core/src/js/feedback/FeedbackForm.styles.ts

@@ -0,0 +1,54 @@
+import type { FeedbackFormStyles } from './FeedbackForm.types';
+
+const defaultStyles: FeedbackFormStyles = {
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#fff',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 20,
+    textAlign: 'center',
+  },
+  label: {
+    marginBottom: 4,
+    fontSize: 16,
+  },
+  input: {
+    height: 50,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    borderRadius: 5,
+    paddingHorizontal: 10,
+    marginBottom: 15,
+    fontSize: 16,
+  },
+  textArea: {
+    height: 100,
+    textAlignVertical: 'top',
+  },
+  submitButton: {
+    backgroundColor: '#6a1b9a',
+    paddingVertical: 15,
+    borderRadius: 5,
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  submitText: {
+    color: '#fff',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  cancelButton: {
+    paddingVertical: 15,
+    alignItems: 'center',
+  },
+  cancelText: {
+    color: '#6a1b9a',
+    fontSize: 16,
+  },
+};
+
+export default defaultStyles;

packages/core/src/js/feedback/FeedbackForm.tsx

@@ -0,0 +1,121 @@
+import { captureFeedback } from '@sentry/core';
+import type { SendFeedbackParams } from '@sentry/types';
+import * as React from 'react';
+import type { KeyboardTypeOptions } from 'react-native';
+import { Alert, Text, TextInput, TouchableOpacity, View } from 'react-native';
+
+import { defaultConfiguration } from './defaults';
+import defaultStyles from './FeedbackForm.styles';
+import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles,FeedbackGeneralConfiguration, FeedbackTextConfiguration } from './FeedbackForm.types';
+
+/**
+ * @beta
+ * Implements a feedback form screen that sends feedback to Sentry using Sentry.captureFeedback.
+ */
+export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFormState> {
+  public constructor(props: FeedbackFormProps) {
+    super(props);
+
+    const config: FeedbackGeneralConfiguration = { ...defaultConfiguration, ...props };
+    this.state = {
+      name: config.useSentryUser.name,
+      email: config.useSentryUser.email,
+      description: '',
+    };
+  }
+
+  public handleFeedbackSubmit: () => void = () => {
+    const { name, email, description } = this.state;
+    const { closeScreen } = this.props;
+    const config: FeedbackGeneralConfiguration = { ...defaultConfiguration, ...this.props };
+    const text: FeedbackTextConfiguration = { ...defaultConfiguration, ...this.props };
+
+    const trimmedName = name?.trim();
+    const trimmedEmail = email?.trim();
+    const trimmedDescription = description?.trim();
+
+    if ((config.isNameRequired && !trimmedName) || (config.isEmailRequired && !trimmedEmail) || !trimmedDescription) {
+      Alert.alert(text.errorTitle, text.formError);
+      return;
+    }
+
+    if ((config.isEmailRequired || trimmedEmail.length > 0) && !this._isValidEmail(trimmedEmail)) {
+      Alert.alert(text.errorTitle, text.emailError);
+      return;
+    }
+
+    const userFeedback: SendFeedbackParams = {
+      message: trimmedDescription,
+      name: trimmedName,
+      email: trimmedEmail,
+    };
+
+    closeScreen();
+    captureFeedback(userFeedback);
+  };
+
+  /**
+   * Renders the feedback form screen.
+   */
+  public render(): React.ReactNode {
+    const { closeScreen } = this.props;
+    const { name, email, description } = this.state;
+    const config: FeedbackGeneralConfiguration = { ...defaultConfiguration, ...this.props };
+    const text: FeedbackTextConfiguration = { ...defaultConfiguration, ...this.props };
+    const styles: FeedbackFormStyles = { ...defaultStyles, ...this.props.styles };
+
+    return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{text.formTitle}</Text>
+
+      <Text style={styles.label}>
+          {text.nameLabel}
+          {config.isNameRequired && ` ${text.isRequiredLabel}`}
+      </Text>
+      <TextInput
+        style={styles.input}
+        placeholder={text.namePlaceholder}
+        value={name}
+        onChangeText={(value) => this.setState({ name: value })}
+        />
+
+      <Text style={styles.label}>
+          {text.emailLabel}
+          {config.isEmailRequired && ` ${text.isRequiredLabel}`}
+      </Text>
+      <TextInput
+        style={styles.input}
+        placeholder={text.emailPlaceholder}
+        keyboardType={'email-address' as KeyboardTypeOptions}
+        value={email}
+        onChangeText={(value) => this.setState({ email: value })}
+        />
+
+      <Text style={styles.label}>
+        {text.messageLabel}
+        {` ${text.isRequiredLabel}`}
+      </Text>
+      <TextInput
+        style={[styles.input, styles.textArea]}
+        placeholder={text.messagePlaceholder}
+        value={description}
+        onChangeText={(value) => this.setState({ description: value })}
+        multiline
+      />
+
+      <TouchableOpacity style={styles.submitButton} onPress={this.handleFeedbackSubmit}>
+        <Text style={styles.submitText}>{text.submitButtonLabel}</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.cancelButton} onPress={closeScreen}>
+        <Text style={styles.cancelText}>{text.cancelButtonLabel}</Text>
+      </TouchableOpacity>
+    </View>
+    );
+  }
+
+  private _isValidEmail = (email: string): boolean => {
+    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
+    return emailRegex.test(email);
+  };
+}

packages/core/src/js/feedback/FeedbackForm.types.ts

@@ -0,0 +1,128 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+
+export interface FeedbackFormProps extends FeedbackGeneralConfiguration, FeedbackTextConfiguration {
+  closeScreen: () => void;
+  styles?: FeedbackFormStyles;
+}
+
+/**
+ * General feedback configuration
+ */
+export interface FeedbackGeneralConfiguration {
+  /**
+   * Should the email field be required?
+   */
+  isEmailRequired?: boolean;
+
+  /**
+   * Should the name field be required?
+   */
+  isNameRequired?: boolean;
+
+  /**
+   * Should the email input field be visible? Note: email will still be collected if set via `Sentry.setUser()`
+   */
+  showEmail?: boolean;
+
+  /**
+   * Should the name input field be visible? Note: name will still be collected if set via `Sentry.setUser()`
+   */
+  showName?: boolean;
+
+  /**
+   * Fill in email/name input fields with Sentry user context if it exists.
+   * The value of the email/name keys represent the properties of your user context.
+   */
+  useSentryUser?: {
+    email: string;
+    name: string;
+  };
+}
+
+/**
+ * All of the different text labels that can be customized
+ */
+export interface FeedbackTextConfiguration {
+  /**
+   * The label for the Feedback form cancel button that closes dialog
+   */
+  cancelButtonLabel?: string;
+
+  /**
+   * The label for the Feedback form submit button that sends feedback
+   */
+  submitButtonLabel?: string;
+
+  /**
+   * The title of the Feedback form
+   */
+  formTitle?: string;
+
+  /**
+   * Label for the email input
+   */
+  emailLabel?: string;
+
+  /**
+   * Placeholder text for Feedback email input
+   */
+  emailPlaceholder?: string;
+
+  /**
+   * Label for the message input
+   */
+  messageLabel?: string;
+
+  /**
+   * Placeholder text for Feedback message input
+   */
+  messagePlaceholder?: string;
+
+  /**
+   * Label for the name input
+   */
+  nameLabel?: string;
+
+  /**
+   * Placeholder text for Feedback name input
+   */
+  namePlaceholder?: string;
+
+  /**
+   * Text which indicates that a field is required
+   */
+  isRequiredLabel?: string;
+
+  /**
+   * The title of the error dialog
+   */
+  errorTitle?: string;
+
+  /**
+   * The error message when the form is invalid
+   */
+  formError?: string;
+
+  /**
+   * The error message when the email is invalid
+   */
+  emailError?: string;
+}
+
+export interface FeedbackFormStyles {
+  container?: ViewStyle;
+  title?: TextStyle;
+  label?: TextStyle;
+  input?: TextStyle;
+  textArea?: TextStyle;
+  submitButton?: ViewStyle;
+  submitText?: TextStyle;
+  cancelButton?: ViewStyle;
+  cancelText?: TextStyle;
+}
+
+export interface FeedbackFormState {
+  name: string;
+  email: string;
+  description: string;
+}

packages/core/src/js/feedback/defaults.ts

@@ -0,0 +1,44 @@
+import { getCurrentScope } from '@sentry/core';
+
+import type { FeedbackFormProps } from './FeedbackForm.types';
+
+const FORM_TITLE = 'Report a Bug';
+const NAME_PLACEHOLDER = 'Your Name';
+const NAME_LABEL = 'Name';
+const EMAIL_PLACEHOLDER = '[email protected]';
+const EMAIL_LABEL = 'Email';
+const MESSAGE_PLACEHOLDER = "What's the bug? What did you expect?";
+const MESSAGE_LABEL = 'Description';
+const IS_REQUIRED_LABEL = '(required)';
+const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
+const CANCEL_BUTTON_LABEL = 'Cancel';
+const ERROR_TITLE = 'Error';
+const FORM_ERROR = 'Please fill out all required fields.';
+const EMAIL_ERROR = 'Please enter a valid email address.';
+
+export const defaultConfiguration: Partial<FeedbackFormProps> = {
+  // FeedbackGeneralConfiguration
+  isEmailRequired: false,
+  isNameRequired: false,
+  showEmail: true,
+  showName: true,
+  useSentryUser: {
+    email: getCurrentScope().getUser().email || '',
+    name: getCurrentScope().getUser().name || '',
+  },
+
+  // FeedbackTextConfiguration
+  cancelButtonLabel: CANCEL_BUTTON_LABEL,
+  emailLabel: EMAIL_LABEL,
+  emailPlaceholder: EMAIL_PLACEHOLDER,
+  formTitle: FORM_TITLE,
+  isRequiredLabel: IS_REQUIRED_LABEL,
+  messageLabel: MESSAGE_LABEL,
+  messagePlaceholder: MESSAGE_PLACEHOLDER,
+  nameLabel: NAME_LABEL,
+  namePlaceholder: NAME_PLACEHOLDER,
+  submitButtonLabel: SUBMIT_BUTTON_LABEL,
+  errorTitle: ERROR_TITLE,
+  formError: FORM_ERROR,
+  emailError: EMAIL_ERROR,
+};

packages/core/src/js/index.ts

@@ -83,3 +83,5 @@ export {
 export type { TimeToDisplayProps } from './tracing';
 
 export { Mask, Unmask } from './replay/CustomMask';
+
+export { FeedbackForm } from './feedback/FeedbackForm';