autocomplete: Create component to warn unsibscribed @-mentionee.

Creates a component 'MentionedUserNotSubscribed' that can be used to
shows a warning when an @-mentioned user is not subscribed to a stream
they are mentioned in, with a button to subscribe them.

Author: agrawal-d

src/message/MentionedUserNotSubscribed.js

@@ -0,0 +1,71 @@
+/* @flow strict-local */
+
+import React, { Component } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+
+import type { Auth, Stream, Dispatch, Narrow, UserOrBot, GetText } from '../types';
+import { withGetText } from '../boot/TranslationProvider';
+import { connect } from '../react-redux';
+import * as api from '../api';
+import { ZulipButton, RawLabel } from '../common';
+import { getAuth, getStreamInNarrow, getUserForId } from '../selectors';
+import styles from '../styles';
+
+type SelectorProps = {|
+  auth: Auth,
+  stream: { ...Stream },
+  user: UserOrBot,
+|};
+
+type Props = $ReadOnly<{|
+  narrow: Narrow,
+  userId: number,
+  onDismiss: (user: UserOrBot) => void,
+  dispatch: Dispatch,
+  ...SelectorProps,
+  _: GetText,
+|}>;
+
+class MentionedUserNotSubscribed extends Component<Props> {
+  subscribeToStream = () => {
+    const { auth, stream, user } = this.props;
+    api.subscriptionAdd(auth, [{ name: stream.name }], [user.email]);
+    this.handleDismiss();
+  };
+
+  handleDismiss = () => {
+    const { user, onDismiss } = this.props;
+    onDismiss(user);
+  };
+
+  render() {
+    const { user, _ } = this.props;
+
+    const alertTitle = _.intl.formatMessage(
+      {
+        id: '{username} will not be notified unless you subscribe them to this stream.',
+        defaultMessage: '{username} will not be notified unless you subscribe them to this stream.',
+      },
+      { username: user.full_name },
+    );
+
+    return (
+      <View>
+        <TouchableOpacity onPress={this.handleDismiss} style={styles.mentionedUserNotSubscribed}>
+          <RawLabel style={styles.mentionedUserNotSubscribedText} text={alertTitle} />
+          <ZulipButton
+            style={styles.mentionedUserNotSubscribedButton}
+            text="Subscribe"
+            onPress={this.subscribeToStream}
+          />
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+export default connect<SelectorProps, _, _>((state, props) => ({
+  auth: getAuth(state),
+  stream: getStreamInNarrow(state, props.narrow),
+  user: getUserForId(state, props.userId),
+}))(withGetText(MentionedUserNotSubscribed));

src/styles/composeBoxStyles.js

@@ -16,4 +16,22 @@ export default {
     flex: 1,
     color: 'white',
   },
+  mentionedUserNotSubscribed: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    backgroundColor: 'rgb(230, 203, 67)',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderTopWidth: 1,
+    borderTopColor: 'rgb(214, 161, 54)',
+  },
+  mentionedUserNotSubscribedText: {
+    flex: 1,
+    color: 'white',
+  },
+  mentionedUserNotSubscribedButton: {
+    backgroundColor: 'orange',
+    padding: 6,
+  },
 };

static/translations/messages_en.json

@@ -107,6 +107,7 @@
   "Enable notifications": "Enable notifications",
   "Jot down something": "Jot down something",
   "Message {recipient}": "Message {recipient}",
+  "{username} will not be notified unless you subscribe them to this stream.": "{username} will not be notified unless you subscribe them to this stream.",
   "Send private message": "Send private message",
   "View private messages": "View private messages",
   "(This user has been deactivated)": "(This user has been deactivated)",