2 files changed, 203 insertions, 0 deletions
diff --git a/src/components/notifications/NotificationPill.tsx b/src/components/notifications/NotificationPill.tsx
new file mode 100644
index 00000000..7017d2e7
--- /dev/null
+++ b/src/components/notifications/NotificationPill.tsx
@@ -0,0 +1,202 @@
+import React, {useEffect, useState, useRef} from 'react';
+import {Image, StyleSheet, Text, View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {SCREEN_WIDTH, isIPhoneX, numberWithCommas} from '../../utils';
+import {
+  NOTIFICATION_ICON_GRADIENT,
+  CHIN_HEIGHT,
+  NAV_BAR_HEIGHT,
+} from '../../constants';
+import {getNotificationsUnreadCount} from '../../services';
+import {normalize} from 'react-native-elements';
+import PillIcon4 from '../../assets/images/Group 479.svg';
+
+interface NotificationPillProps {
+  showIcon: boolean;
+}
+
+export const NotificationPill: React.FC<NotificationPillProps> = ({
+  showIcon,
+}) => {
+  const [iconStart, setIconStart] = useState<number[]>([0, -100]);
+  const [tipStart, setTipStart] = useState<number[]>([0, -100]);
+  const [notificationSets, setNotificationSets] = useState({});
+  const [timeCount, setTimeCount] = useState<boolean>(false);
+  const [timeOut, setTimeOut] = useState<boolean>(false);
+  const iconRef = useRef(null);
+  const tipRef = useRef(null);
+  const pillTip = require('../../assets/images/purple-tip.png');
+
+  const navBarPos = 20;
+
+  // If there are notifications, determines the size of the pill
+  // and sets points for correct placement
+  useEffect(() => {
+    setTimeout(() => {
+      if (iconRef.current) {
+        iconRef.current.measure(
+          (
+            _fx: number,
+            _fy: number,
+            width: number,
+            height: number,
+            _px: number,
+            _py: number,
+          ) => {
+            if (tipRef.current) {
+              tipRef.current.measure(
+                (
+                  __fx: number,
+                  __fy: number,
+                  width2: number,
+                  __height: number,
+                  __px: number,
+                  __py: number,
+                ) => {
+                  const x = SCREEN_WIDTH / 2 - width / 2;
+                  const y = isIPhoneX()
+                    ? CHIN_HEIGHT + NAV_BAR_HEIGHT + navBarPos
+                    : NAV_BAR_HEIGHT + navBarPos;
+                  setIconStart([x, y]);
+                  setTipStart([width / 2 - width2 / 2, height - 1]);
+                  setTimeCount(true);
+                },
+              );
+            }
+          },
+        );
+      } else {
+      }
+    }, 100);
+  }, [notificationSets, iconRef, tipRef]);
+
+  // Used so that pill disappears after 5 seconds
+  useEffect(() => {
+    if (timeCount) {
+      setTimeout(() => {
+        setTimeOut(true);
+      }, 5000);
+    }
+  }, [timeCount]);
+
+  // Gets data from backend to check for unreads
+  useEffect(() => {
+    const getCount = async () => {
+      const data = await getNotificationsUnreadCount();
+      setTimeout(() => {
+        setNotificationSets(data);
+      }, 100);
+    };
+
+    getCount();
+  }, []);
+
+  return (
+    <>
+      {notificationSets &&
+        Object.keys(notificationSets).length !== 0 &&
+        showIcon &&
+        !timeOut && (
+          <View
+            style={[
+              styles.purpleContainer,
+              {bottom: iconStart[1], left: iconStart[0]},
+            ]}
+            ref={iconRef}>
+            <LinearGradient
+              colors={NOTIFICATION_ICON_GRADIENT}
+              style={styles.iconPurple}>
+              {notificationSets.CMT && (
+                <>
+                  <Image
+                    source={require('../../assets/images/pill-icon-1.png')}
+                    style={styles.indicationIcon}
+                  />
+                  <Text style={styles.text}>
+                    {numberWithCommas(notificationSets.CMT)}
+                  </Text>
+                </>
+              )}
+              {notificationSets.FR_REQ && (
+                <>
+                  <Image
+                    source={require('../../assets/images/pill-icon-2.png')}
+                    style={styles.indicationIcon}
+                  />
+                  <Text style={styles.text}>
+                    {numberWithCommas(notificationSets.FR_REQ)}
+                  </Text>
+                </>
+              )}
+              {notificationSets.P_VIEW && (
+                <>
+                  <Image
+                    source={require('../../assets/images/pill-icon-3.png')}
+                    style={styles.indicationIcon}
+                  />
+                  <Text style={styles.text}>
+                    {numberWithCommas(notificationSets.P_VIEW)}
+                  </Text>
+                </>
+              )}
+              {notificationSets.MOM_TAG && (
+                <>
+                  <PillIcon4 style={styles.indicationIcon} />
+                  <Text style={styles.text}>
+                    {numberWithCommas(notificationSets.MOM_TAG)}
+                  </Text>
+                </>
+              )}
+            </LinearGradient>
+            <Image
+              style={[styles.tip, {top: tipStart[1], left: tipStart[0]}]}
+              source={pillTip}
+              ref={tipRef}
+            />
+          </View>
+        )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  purpleContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    position: 'absolute',
+    zIndex: 999,
+  },
+  iconPurple: {
+    padding: 5,
+    borderRadius: 15,
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  text: {
+    margin: 2,
+    color: 'white',
+    fontSize: normalize(10),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 5,
+  },
+  tip: {
+    position: 'absolute',
+    zIndex: 999,
+    height: 12,
+    flex: 1,
+    resizeMode: 'contain',
+  },
+  indicationIcon: {
+    height: 14,
+    width: 14,
+    margin: 2,
+    marginLeft: 5,
+  },
+  svgIndicationIcon: {
+    height: 14,
+    width: 14,
+    margin: 3,
+  },
+});
diff --git a/src/components/notifications/index.ts b/src/components/notifications/index.ts
index 733b56f1..077c26a4 100644
--- a/src/components/notifications/index.ts
+++ b/src/components/notifications/index.ts
@@ -1,2 +1,3 @@
 export {default as Notification} from './Notification';
 export {InviteFriendsPrompt} from './NotificationPrompts';
+export {NotificationPill} from './NotificationPill';