From 9bfe0e99124d054af4b1fe3505fc91c65e4e3d15 Mon Sep 17 00:00:00 2001
From: Sumukha Hegde <SUMUKHA214@GMAIL.COM>
Date: Fri, 27 Aug 2021 21:59:34 +0530
Subject: [PATCH] [FIX] Show button attachment on messages (#2980)

* [FIX] Show button attachment in message list

fixes: #2684

* Changed the Button and theme, text theme and how to call the function

* Fix the props passed in Message

* Function to context

* Added button attachment to stories

* New snapshot

Co-authored-by: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
Co-authored-by: Reinaldo Neto <reinaldonetof@hotmail.com>
Co-authored-by: Levy Costa <levycosta471@gmail.com>
Co-authored-by: Diego Mello <diegolmello@gmail.com>
---
 .../__snapshots__/Storyshots.test.js.snap     | 268 +++++++++++++++++-
 app/containers/message/Attachments.js         |  36 ++-
 app/containers/message/index.js               |  10 +
 app/views/RoomView/index.js                   |   1 +
 storybook/stories/Message.js                  |  28 +-
 5 files changed, 333 insertions(+), 10 deletions(-)

diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
index 6f0df6b98..181619f41 100644
--- a/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -40334,6 +40334,268 @@ exports[`Storyshots Message Sequential thread messages following thread reply 1`
 </RCTScrollView>
 `;
 
+exports[`Storyshots Message Show a button as attachment 1`] = `
+<RCTScrollView
+  style={
+    Object {
+      "backgroundColor": "#ffffff",
+    }
+  }
+>
+  <View>
+    <View
+      accessible={true}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "backgroundColor": null,
+          "opacity": 1,
+        }
+      }
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "column",
+                "paddingHorizontal": 14,
+                "paddingVertical": 4,
+                "width": "100%",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "row",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 4,
+                    "height": 36,
+                    "width": 36,
+                  },
+                  Object {
+                    "marginTop": 4,
+                  },
+                ]
+              }
+            >
+              <View
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "opacity": 1,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "overflow": "hidden",
+                      },
+                      Object {
+                        "borderRadius": 4,
+                        "height": 36,
+                        "width": 36,
+                      },
+                    ]
+                  }
+                >
+                  <FastImageView
+                    resizeMode="cover"
+                    source={
+                      Object {
+                        "headers": undefined,
+                        "priority": "high",
+                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=36",
+                      }
+                    }
+                    style={
+                      Object {
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "marginLeft": 46,
+                  },
+                  Object {
+                    "marginLeft": 10,
+                  },
+                ]
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "justifyContent": "space-between",
+                  }
+                }
+              >
+                <View
+                  accessible={true}
+                  focusable={true}
+                  onClick={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "flexShrink": 1,
+                      "opacity": 1,
+                    }
+                  }
+                >
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      Array [
+                        Object {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "System",
+                          "fontSize": 16,
+                          "fontWeight": "500",
+                          "lineHeight": 22,
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "#0d0e12",
+                        },
+                      ]
+                    }
+                  >
+                    diego.mello
+                  </Text>
+                </View>
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "System",
+                        "fontSize": 12,
+                        "fontWeight": "400",
+                        "marginLeft": 8,
+                        "textAlign": "left",
+                      },
+                      Object {
+                        "color": "#9ca2a8",
+                      },
+                    ]
+                  }
+                >
+                  10:00 AM
+                </Text>
+              </View>
+              <View />
+              <Text
+                style={
+                  Object {
+                    "backgroundColor": "transparent",
+                    "fontFamily": "System",
+                    "fontSize": 16,
+                    "fontWeight": "400",
+                    "textAlign": "left",
+                  }
+                }
+              >
+                Test Button
+              </Text>
+              <View
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "backgroundColor": "#1d74f5",
+                    "borderRadius": 2,
+                    "height": 48,
+                    "justifyContent": "center",
+                    "marginBottom": 12,
+                    "opacity": 1,
+                    "paddingHorizontal": 14,
+                  }
+                }
+              >
+                <Text
+                  accessibilityLabel="Text button"
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "System",
+                        "fontSize": 16,
+                        "fontWeight": "500",
+                        "textAlign": "center",
+                      },
+                      Object {
+                        "color": "#ffffff",
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  Text button
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
 exports[`Storyshots Message Static avatar 1`] = `
 <RCTScrollView
   style={
@@ -43674,7 +43936,7 @@ exports[`Storyshots Message Thumbnail from server 1`] = `
                         ]
                       }
                     >
-                      Joker
+                      Title
                     </Text>
                   </View>
                   <View
@@ -43730,7 +43992,7 @@ exports[`Storyshots Message Thumbnail from server 1`] = `
                     }
                   >
                     <Text
-                      accessibilityLabel="Some crazy texts"
+                      accessibilityLabel="Image text"
                       style={
                         Array [
                           Object {
@@ -43754,7 +44016,7 @@ exports[`Storyshots Message Thumbnail from server 1`] = `
                         ]
                       }
                     >
-                      Some crazy texts
+                      Image text
                     </Text>
                   </Text>
                 </View>
diff --git a/app/containers/message/Attachments.js b/app/containers/message/Attachments.js
index 0d068e9fd..0600e6d69 100644
--- a/app/containers/message/Attachments.js
+++ b/app/containers/message/Attachments.js
@@ -1,11 +1,35 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { dequal } from 'dequal';
 import PropTypes from 'prop-types';
+import { Text } from 'react-native';
 
 import Image from './Image';
 import Audio from './Audio';
 import Video from './Video';
 import Reply from './Reply';
+import Button from '../Button';
+import styles from './styles';
+import MessageContext from './Context';
+
+const AttachedActions = ({
+	attachment, theme
+}) => {
+	const { onAnswerButtonPress } = useContext(MessageContext);
+
+	const attachedButtons = attachment.actions.map((element) => {
+		if (element.type === 'button') {
+			return <Button theme={theme} onPress={() => onAnswerButtonPress(element.msg)} title={element.text} />;
+		}	else {
+			return null;
+		}
+	});
+	return (
+		<>
+			<Text style={styles.text}>{attachment.text}</Text>
+			{attachedButtons}
+		</>
+	);
+};
 
 const Attachments = React.memo(({
 	attachments, timeFormat, showAttachment, getCustomEmoji, theme
@@ -24,6 +48,9 @@ const Attachments = React.memo(({
 		if (file.video_url) {
 			return <Video key={file.video_url} file={file} showAttachment={showAttachment} getCustomEmoji={getCustomEmoji} theme={theme} />;
 		}
+		if (file.actions && file.actions.length > 0) {
+			return <AttachedActions attachment={file} theme={theme} />;
+		}
 
 		// eslint-disable-next-line react/no-array-index-key
 		return <Reply key={index} index={index} attachment={file} timeFormat={timeFormat} getCustomEmoji={getCustomEmoji} theme={theme} />;
@@ -38,5 +65,12 @@ Attachments.propTypes = {
 	theme: PropTypes.string
 };
 Attachments.displayName = 'MessageAttachments';
+AttachedActions.propTypes = {
+	attachment: PropTypes.shape({
+		actions: PropTypes.array,
+		text: PropTypes.string
+	}),
+	theme: PropTypes.string
+};
 
 export default Attachments;
diff --git a/app/containers/message/index.js b/app/containers/message/index.js
index 467c634a6..1583b204a 100644
--- a/app/containers/message/index.js
+++ b/app/containers/message/index.js
@@ -41,6 +41,7 @@ class MessageContainer extends React.Component {
 		onEncryptedPress: PropTypes.func,
 		onDiscussionPress: PropTypes.func,
 		onThreadPress: PropTypes.func,
+		onAnswerButtonPress: PropTypes.func,
 		errorActionsShow: PropTypes.func,
 		replyBroadcast: PropTypes.func,
 		reactionInit: PropTypes.func,
@@ -64,6 +65,7 @@ class MessageContainer extends React.Component {
 		onEncryptedPress: () => {},
 		onDiscussionPress: () => {},
 		onThreadPress: () => {},
+		onAnswerButtonPress: () => {},
 		errorActionsShow: () => {},
 		replyBroadcast: () => {},
 		reactionInit: () => {},
@@ -190,6 +192,13 @@ class MessageContainer extends React.Component {
 		}
 	}
 
+	onAnswerButtonPress = (msg) => {
+		const { onAnswerButtonPress } = this.props;
+		if (onAnswerButtonPress) {
+			onAnswerButtonPress(msg, undefined, false);
+		}
+	}
+
 	onIgnoredMessagePress = () => {
 		this.setState({ isManualUnignored: true });
 	}
@@ -366,6 +375,7 @@ class MessageContainer extends React.Component {
 					onDiscussionPress: this.onDiscussionPress,
 					onReactionLongPress: this.onReactionLongPress,
 					onLinkPress: this.onLinkPress,
+					onAnswerButtonPress: this.onAnswerButtonPress,
 					jumpToMessage,
 					threadBadgeColor,
 					toggleFollowThread,
diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js
index b4eeeadd3..2f1b128ed 100644
--- a/app/views/RoomView/index.js
+++ b/app/views/RoomView/index.js
@@ -974,6 +974,7 @@ class RoomView extends React.Component {
 					onEncryptedPress={this.onEncryptedPress}
 					onDiscussionPress={this.onDiscussionPress}
 					onThreadPress={this.onThreadPress}
+					onAnswerButtonPress={this.sendMessage}
 					showAttachment={this.showAttachment}
 					reactionInit={this.onReactionInit}
 					replyBroadcast={this.replyBroadcast}
diff --git a/storybook/stories/Message.js b/storybook/stories/Message.js
index 015ab6f20..cc916ca1e 100644
--- a/storybook/stories/Message.js
+++ b/storybook/stories/Message.js
@@ -855,14 +855,30 @@ stories.add('Custom style', () => (
 	<Message msg='Message' style={[styles.normalize, { backgroundColor: '#ddd' }]} />
 ));
 
-stories.add('Thumbnail from server', () => (
+stories.add('Show a button as attachment', () => (
 	<Message
-		msg='this is a thumbnail'
 		attachments={[{
-			text: 'Some crazy texts',
-			thumb_url: 'https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg',
-			title: 'Joker',
-			title_link: 'https://www.imdb.com/title/tt7286456/'
+			text: 'Test Button',
+			actions: [
+				{
+					type: 'button',
+					text: 'Text button',
+					msg: 'Response message',
+					msg_in_chat_window: true
+				}
+			]
+		}]}
+	/>
+));
+
+stories.add('Thumbnail from server', () => (
+	<Message
+		msg='this is a thumbnail'
+		attachments={[{
+			text: 'Image text',
+			thumb_url: 'https://images-na.ssl-images-amazon.com/images/I/71jKxPAMFbL._AC_SL1500_.jpg',
+			title: 'Title',
+			title_link: 'https://github.com/RocketChat/Rocket.Chat.ReactNative/pull/2975'
 		}]}
 	/>
 ));