1 files changed, 135 insertions, 0 deletions
diff --git a/src/components/friends/InviteFriendTile.tsx b/src/components/friends/InviteFriendTile.tsx
new file mode 100644
index 00000000..95ebf16a
--- /dev/null
+++ b/src/components/friends/InviteFriendTile.tsx
@@ -0,0 +1,135 @@
+import React, {useEffect, useState} from 'react';
+import {
+  Alert,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {ERROR_SOMETHING_WENT_WRONG} from '../../constants/strings';
+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 [formatedPhoneNumber, setFormattedPhoneNumber] = useState<string>('');
+  const handleInviteFriend = async () => {
+    const response = await inviteFriendService(
+      item.phoneNumber,
+      item.firstName,
+      item.lastName,
+    );
+    if (response) {
+      setInvited(response);
+    } else {
+      Alert.alert(ERROR_SOMETHING_WENT_WRONG);
+    }
+  };
+
+  useEffect(() => {
+    const formatPhoneNumer = () => {
+      const unformatted_number: string = item.phoneNumber;
+      const part_one: string = unformatted_number.substring(2, 5);
+      const part_two: string = unformatted_number.substring(5, 8);
+      const part_three: string = unformatted_number.substring(
+        8,
+        unformatted_number.length,
+      );
+      const temp = '(' + part_one + ')' + part_two + '-' + part_three;
+      setFormattedPhoneNumber(temp);
+    };
+    formatPhoneNumer();
+  });
+
+  return (
+    <TouchableWithoutFeedback>
+      <View style={styles.container}>
+        <View style={styles.bodyContainer}>
+          <Text style={styles.label}>
+            {item.firstName + ' ' + item.lastName}
+          </Text>
+          <Text style={styles.phoneNumber}>{formatedPhoneNumber}</Text>
+        </View>
+        <TouchableOpacity
+          disabled={invited}
+          style={[
+            styles.button,
+            invited ? styles.pendingButton : styles.inviteButton,
+          ]}
+          onPress={handleInviteFriend}>
+          <Text
+            style={[
+              styles.buttonTitle,
+              invited ? styles.pendingButtonTitle : styles.inviteButtonTitle,
+            ]}>
+            {invited ? 'Pending' : 'Invite'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: normalize(42),
+    marginBottom: '5%',
+  },
+  bodyContainer: {
+    flexDirection: 'column',
+    height: normalize(42),
+    justifyContent: 'space-around',
+  },
+  label: {
+    fontWeight: '500',
+    fontSize: normalize(14),
+  },
+  phoneNumber: {
+    fontSize: normalize(12),
+    fontWeight: '400',
+    color: '#6C6C6C',
+    letterSpacing: normalize(0.1),
+  },
+  button: {
+    alignSelf: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 82,
+    height: 25,
+    borderWidth: 2,
+    borderRadius: 2,
+    padding: 0,
+    borderColor: TAGG_LIGHT_BLUE,
+  },
+  pendingButton: {
+    backgroundColor: TAGG_LIGHT_BLUE,
+  },
+  inviteButton: {
+    backgroundColor: 'transparent',
+  },
+  buttonTitle: {
+    padding: 0,
+    fontSize: normalize(11),
+    fontWeight: '700',
+    lineHeight: normalize(13.13),
+    letterSpacing: normalize(0.6),
+    paddingHorizontal: '3.8%',
+  },
+  pendingButtonTitle: {
+    color: 'white',
+  },
+  inviteButtonTitle: {
+    color: TAGG_LIGHT_BLUE,
+  },
+});
+
+export default InviteFriendTile;