feat: Add copy button for email and number (#786)

Author: iamsivin

src/i18n/en.json

@@ -169,7 +169,8 @@
     "OPERATING_SYSTEM": "Operating System",
     "INITIATED_AT": "Initiated at",
     "INITIATED_FROM": "Initiated from",
-    "IP_ADDRESS": "IP Address"
+    "IP_ADDRESS": "IP Address",
+    "CLIPBOARD_SUCCESS": "Copied to clipboard"
   },
   "CONVERSATION_PARTICIPANTS": {
     "TITLE": "Conversation participants",

src/screens/ConversationDetails/components/ContactDetails.js

@@ -1,10 +1,13 @@
 import React, { useMemo } from 'react';
-import { StyleSheet } from 'react-native';
+import i18n from 'i18n';
+import { StyleSheet, View } from 'react-native';
 import { useTheme } from '@react-navigation/native';
 import PropTypes from 'prop-types';
 import { Icon, Text, Pressable } from 'components';
+import Clipboard from '@react-native-clipboard/clipboard';
 
 import { openNumber } from 'src/helpers/UrlHelper';
+import { showToast } from 'helpers/ToastHelper';
 
 const createStyles = theme => {
   const { spacing } = theme;
@@ -15,8 +18,9 @@ const createStyles = theme => {
       alignItems: 'center',
       marginTop: spacing.smaller,
       marginBottom: spacing.micro,
+      gap: spacing.micro,
     },
-    detailText: {
+    copyButton: {
       marginLeft: spacing.micro,
     },
   });
@@ -33,20 +37,39 @@ const ContactDetails = ({ type, value, iconName }) => {
   const { colors } = theme;
   const styles = useMemo(() => createStyles(theme), [theme]);
 
+  // Avoid rendering if the value is empty or whitespace (Case: identifier)
+  if (!value || value === ' ') {
+    return null;
+  }
+
   const onClickOpen = () => {
     if (type === 'phoneNumber') {
       openNumber({ phoneNumber: value });
     } else {
       return;
     }
   };
+
+  const showCopyButton = type === 'phoneNumber' || type === 'email';
+
+  const onClickCopy = () => {
+    Clipboard.setString(value);
+    showToast({ message: i18n.t('CONVERSATION_DETAILS.CLIPBOARD_SUCCESS') });
+  };
   return (
-    <Pressable style={styles.detailsContainer} onPress={() => onClickOpen()}>
+    <View style={styles.detailsContainer}>
       <Icon icon={iconName} color={colors.primaryColor} size={14} />
-      <Text sm color={colors.textDark} style={styles.detailText}>
-        {value}
-      </Text>
-    </Pressable>
+      <Pressable onPress={() => onClickOpen()}>
+        <Text sm color={colors.textDark}>
+          {value}
+        </Text>
+      </Pressable>
+      {showCopyButton && (
+        <Pressable style={styles.copyButton} onPress={() => onClickCopy()}>
+          <Icon icon="copy-outline" color={colors.text} size={14} />
+        </Pressable>
+      )}
+    </View>
   );
 };