1 files changed, 133 insertions, 0 deletions
diff --git a/src/components/common/TaggPopup.tsx b/src/components/common/TaggPopup.tsx
new file mode 100644
index 00000000..db24adb8
--- /dev/null
+++ b/src/components/common/TaggPopup.tsx
@@ -0,0 +1,133 @@
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import * as React from 'react';
+import {Platform, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import {Image, View} from 'react-native-animatable';
+import {ArrowButton} from '..';
+import {OnboardingStackParams} from '../../routes';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import CloseIcon from '../../assets/ionicons/close-outline.svg';
+
+type TaggPopupRouteProps = RouteProp<OnboardingStackParams, 'TaggPopup'>;
+type TaggPopupNavigationProps = StackNavigationProp<
+  OnboardingStackParams,
+  'TaggPopup'
+>;
+
+interface TaggPopupProps {
+  route: TaggPopupRouteProps;
+  navigation: TaggPopupNavigationProps;
+}
+
+const TaggPopup: React.FC<TaggPopupProps> = ({route, navigation}) => {
+  /**
+   * Custom popup / Tutorial screen for Tagg
+   * Just like a  Singly Linked List, we have a next node
+   * if (next !== undefined)
+   *    Display the next button and navigate to next popup node on click
+   * else
+   *    Display close button, navigate back on close
+   */
+  const {messageHeader, messageBody, next} = route.params.popupProps;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.popup}>
+        <Image
+          style={styles.icon}
+          source={require('../../assets/icons/plus-logo.png')}
+        />
+        <View style={styles.textContainer}>
+          <Text style={styles.header}>{messageHeader}</Text>
+          <Text style={styles.subtext}>{messageBody}</Text>
+        </View>
+        {!next && (
+          <TouchableOpacity
+            style={styles.closeButton}
+            onPress={() => {
+              navigation.goBack();
+            }}>
+            <CloseIcon height={'50%'} width={'50%'} color={'white'} />
+          </TouchableOpacity>
+        )}
+      </View>
+      {next && (
+        <View style={styles.footer}>
+          <ArrowButton
+            direction="forward"
+            onPress={() => {
+              navigation.navigate('TaggPopup', {popupProps: next});
+            }}
+          />
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  whiteColor: {
+    color: 'white',
+  },
+  closeButton: {
+    position: 'relative',
+    height: '50%',
+    aspectRatio: 1,
+    left: '20%',
+  },
+  textContainer: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  icon: {
+    width: 40,
+    height: 40,
+    marginVertical: '1%',
+  },
+  header: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'justify',
+    marginBottom: '2%',
+    marginHorizontal: '2%',
+  },
+  subtext: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: '600',
+    textAlign: 'justify',
+    marginBottom: '15%',
+    marginHorizontal: '2%',
+  },
+  popup: {
+    width: SCREEN_WIDTH * 0.8,
+    height: SCREEN_WIDTH * 0.2,
+    backgroundColor: 'black',
+    borderRadius: 8,
+    flexDirection: 'row',
+    alignSelf: 'auto',
+    flexWrap: 'wrap',
+    position: 'absolute',
+    bottom: SCREEN_HEIGHT * 0.7,
+  },
+  footer: {
+    marginLeft: '50%',
+    flexDirection: 'column-reverse',
+    ...Platform.select({
+      ios: {
+        bottom: '20%',
+      },
+      android: {
+        bottom: '10%',
+      },
+    }),
+  },
+});
+export default TaggPopup;