moved TaggPopup to legacy

1 files changed, 143 insertions, 0 deletions

diff --git a/src/screens/onboarding/legacy/TaggPopup.tsx b/src/screens/onboarding/legacy/TaggPopup.tsx
new file mode 100644
index 00000000..e71a4d2a
--- /dev/null
+++ b/src/screens/onboarding/legacy/TaggPopup.tsx
@@ -0,0 +1,143 @@
+import {BlurView} from '@react-native-community/blur';
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import * as React from 'react';
+import {Platform, StyleSheet, Text, TouchableOpacity} from 'react-native';
+import {Image, View} from 'react-native-animatable';
+import {ArrowButton} from '../../../components/onboarding';
+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 (
+    <BlurView blurType="light" blurAmount={2} style={styles.container}>
+      <TouchableOpacity
+        style={styles.container}
+        onPressOut={() => {
+          navigation.goBack();
+        }}>
+        <View style={styles.popup}>
+          <Image
+            style={styles.icon}
+            source={require('../../../assets/icons/notificationPrompts/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>
+        )}
+      </TouchableOpacity>
+    </BlurView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+  },
+  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: SCREEN_WIDTH / 25,
+    fontWeight: '600',
+    textAlign: 'justify',
+    marginBottom: '2%',
+    marginLeft: '4%',
+  },
+  subtext: {
+    color: '#fff',
+    fontSize: SCREEN_WIDTH / 30,
+    fontWeight: '600',
+    textAlign: 'justify',
+    marginBottom: '15%',
+    marginLeft: '3%',
+  },
+  popup: {
+    width: SCREEN_WIDTH * 0.8,
+    height: SCREEN_WIDTH * 0.24,
+    backgroundColor: 'black',
+    borderRadius: 8,
+    flexDirection: 'row',
+    alignSelf: 'auto',
+    flexWrap: 'wrap',
+    position: 'absolute',
+    bottom: SCREEN_HEIGHT * 0.7,
+    padding: SCREEN_WIDTH / 40,
+  },
+  footer: {
+    marginLeft: '50%',
+    flexDirection: 'column-reverse',
+    ...Platform.select({
+      ios: {
+        bottom: '20%',
+      },
+      android: {
+        bottom: '10%',
+      },
+    }),
+  },
+});
+export default TaggPopup;