7 files changed, 137 insertions, 8 deletions

diff --git a/src/assets/images/badgeTutorial.png b/src/assets/images/badgeTutorial.png
new file mode 100644
index 00000000..0e900c3b
--- /dev/null
+++ b/src/assets/images/badgeTutorial.png
diff --git a/src/assets/images/badgeTutorial@2x.png b/src/assets/images/badgeTutorial@2x.png
new file mode 100644
index 00000000..dfdc946a
--- /dev/null
+++ b/src/assets/images/badgeTutorial@2x.png
diff --git a/src/assets/images/badgeTutorial@3x.png b/src/assets/images/badgeTutorial@3x.png
new file mode 100644
index 00000000..10b92360
--- /dev/null
+++ b/src/assets/images/badgeTutorial@3x.png
diff --git a/src/components/profile/BadgeTutorialScreen.tsx b/src/components/profile/BadgeTutorialScreen.tsx
new file mode 100644
index 00000000..360162f8
--- /dev/null
+++ b/src/components/profile/BadgeTutorialScreen.tsx
@@ -0,0 +1,74 @@
+import React, {useState} from 'react';
+import {
+  Image,
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {PROFILE_CUTOUT_TOP_Y} from '../../constants';
+import {normalize} from '../../utils';
+import {UniversityIcon} from './';
+import {UniversityIconProps} from './UniversityIcon';
+
+const BadgeTutorialScreen: React.FC<UniversityIconProps> = ({
+  layout,
+  university,
+  university_class,
+}) => {
+  const [showModal, setShowModal] = useState(true);
+
+  return (
+    <Modal
+      animationType="fade"
+      transparent
+      visible={showModal}
+      presentationStyle="overFullScreen">
+      <TouchableOpacity
+        onPress={() => setShowModal(false)}
+        style={styles.viewWrapper}>
+        <View style={styles.textContainerStyles}>
+          <Text style={styles.textStyles}>
+            Tap on the univeristy icon to edit your badges!
+          </Text>
+        </View>
+        <View
+          style={{
+            left: layout.left,
+            top: PROFILE_CUTOUT_TOP_Y * 1.02 - layout.top,
+            width: layout.width,
+            height: layout.height,
+          }}>
+          <UniversityIcon
+            {...{
+              university,
+              university_class,
+              needsShadow: true,
+            }}
+          />
+          <Image source={require('../../assets/images/badgeTutorial.png')} />
+        </View>
+      </TouchableOpacity>
+    </Modal>
+  );
+};
+const styles = StyleSheet.create({
+  viewWrapper: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalView: {
+    backgroundColor: '#fff',
+  },
+  textContainerStyles: {top: '30%', width: '60%', alignSelf: 'center'},
+  textStyles: {
+    color: 'white',
+    fontWeight: '700',
+    fontSize: normalize(20),
+    lineHeight: normalize(25),
+    textAlign: 'center',
+  },
+});
+
+export default BadgeTutorialScreen;
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 9dc58501..2eb5121f 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -1,13 +1,14 @@
-import React, {useState} from 'react';
+import React, {useLayoutEffect, useRef, useState} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {useSelector} from 'react-redux';
 import {PROFILE_CUTOUT_TOP_Y} from '../../constants';
 import {RootState} from '../../store/rootreducer';
 import {ScreenType} from '../../types';
-import {normalize} from '../../utils';
+import {hasSeenBadgeTutorial, normalize} from '../../utils';
 import BadgeDetailView from '../common/BadgeDetailView';
 import Avatar from './Avatar';
+import BadgeTutorialScreen from './BadgeTutorialScreen';
 import FriendsCount from './FriendsCount';
 import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer';
 import UniversityIcon from './UniversityIcon';
@@ -39,8 +40,37 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
   const [showBadgeView, setBadgeViewVisible] = useState(false);
   const [firstName, lastName] = [...name.split(' ')];
 
+  const containerRef = useRef(null);
+  const childRef = useRef(null);
+  const [measure, setMeasure] = useState(null);
+  const [showBadgeTutorial, setShowBadgeTutorial] = useState(false);
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      measureStuff();
+    }, 1000);
+  }, []);
+
+  const measureStuff = async () => {
+    const badgeSeen = await hasSeenBadgeTutorial();
+    console.log('BADGE SEEN', badgeSeen);
+    if (!badgeSeen && containerRef.current && childRef.current) {
+      childRef?.current?.measureLayout(
+        containerRef.current,
+        (left, top, width, height) => {
+          console.log(left, top, width, height);
+          setMeasure({left, top, width, height});
+          setShowBadgeTutorial(true);
+        },
+        (error) => {
+          setShowBadgeTutorial(false);
+          console.log(error);
+        },
+      );
+    }
+  };
+
   return (
-    <View style={styles.container}>
+    <View ref={containerRef} style={styles.container}>
       <ProfileMoreInfoDrawer
         isOpen={drawerVisible}
         isBlocked={isBlocked}
@@ -49,7 +79,13 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
         userXName={userXName}
         setIsOpen={setDrawerVisible}
       />
-
+      {measure && (
+        <BadgeTutorialScreen
+          university={university}
+          university_class={university_class}
+          layout={measure}
+        />
+      )}
       <View style={styles.row}>
         <Avatar
           style={styles.avatar}
@@ -65,12 +101,20 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
               <Text style={styles.name}>{lastName}</Text>
             </View>
           )}
+
           <View style={styles.friendsAndUniversity}>
             <FriendsCount screenType={screenType} userXId={userXId} />
+
             <TouchableOpacity onPress={() => setBadgeViewVisible(true)}>
-              <UniversityIcon
-                {...{university, university_class, needsShadow: true}}
-              />
+              <View ref={childRef}>
+                <UniversityIcon
+                  {...{
+                    university,
+                    university_class,
+                    needsShadow: true,
+                  }}
+                />
+              </View>
             </TouchableOpacity>
             {showBadgeView && (
               <BadgeDetailView
diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx
index cfe1366d..6e1c7d4e 100644
--- a/src/components/profile/UniversityIcon.tsx
+++ b/src/components/profile/UniversityIcon.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {ImageStyle, StyleProp, StyleSheet, ViewProps} from 'react-native';
 import {Image, Text, View} from 'react-native-animatable';
-import {getUniversityBadge, getUniversityClass, normalize} from '../../utils';
 import {UniversityType} from '../../types';
+import {getUniversityBadge, getUniversityClass, normalize} from '../../utils';
 
 export interface UniversityIconProps extends ViewProps {
   university: UniversityType;
diff --git a/src/utils/common.ts b/src/utils/common.ts
index cec0e1b5..868d7b8e 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -138,6 +138,17 @@ export const extractContacts = async () => {
   return retrievedContacts;
 };
 
+export const hasSeenBadgeTutorial = async () => {
+  if ((await AsyncStorage.getItem('hasSeenBadgeTutorial')) === 'true') {
+    return true;
+  }
+  return false;
+};
+
+export const setHasSeenBadgeTutorial = async () => {
+  await AsyncStorage.setItem('hasSeenBadgeTutorial', 'true');
+};
+
 export const getUniversityBadge = (
   university: UniversityType,
   type: UniversityBadgeType,