1 files changed, 86 insertions, 0 deletions
diff --git a/src/components/friends/InviteFriendTile.tsx b/src/components/friends/InviteFriendTile.tsx
new file mode 100644
index 00000000..2d2b8e04
--- /dev/null
+++ b/src/components/friends/InviteFriendTile.tsx
@@ -0,0 +1,86 @@
+import React, {useState} from 'react';
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import {useSelector} from 'react-redux';
+import {RootState} from '../../store/rootReducer';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {inviteFriendService} from '../../services';
+import {normalize} from '../../utils';
+
+interface InviteFriendTileProps {
+  item: Object;
+}
+
+const InviteFriendTile: React.FC<InviteFriendTileProps> = ({item}) => {
+  const [invited, setInvited] = useState<boolean>(false);
+  const {profile} = useSelector((state: RootState) => state.user);
+  const handleInviteFriend = async () => {
+    const response = await inviteFriendService(
+      item.phoneNumber,
+      item.firstName,
+      item.lastName,
+      profile.name,
+    );
+    if (response) {
+      setInvited(response);
+    }
+  };
+
+  return (
+    <TouchableWithoutFeedback>
+      <View style={styles.container}>
+        <Text style={styles.label}>{item.firstName + ' ' + item.lastName}</Text>
+        <TouchableOpacity
+          disabled={invited}
+          style={styles.button}
+          onPress={handleInviteFriend}>
+          <Text style={styles.buttonTitle}>
+            {invited ? 'Invited' : 'Invite'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: normalize(42),
+    backgroundColor: 'thistle',
+  },
+  label: {
+    fontWeight: '500',
+    fontSize: normalize(14),
+  },
+  button: {
+    alignSelf: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 82,
+    height: 25,
+    borderColor: TAGG_LIGHT_BLUE,
+    borderWidth: 2,
+    borderRadius: 2,
+    padding: 0,
+    backgroundColor: 'transparent',
+  },
+  buttonTitle: {
+    color: TAGG_LIGHT_BLUE,
+    padding: 0,
+    fontSize: normalize(11),
+    fontWeight: '700',
+    lineHeight: normalize(13.13),
+    letterSpacing: normalize(0.6),
+    paddingHorizontal: '3.8%',
+  },
+});
+
+export default InviteFriendTile;