updated tagg prompt component to be more generic

1 files changed, 40 insertions, 22 deletions

diff --git a/src/components/common/TaggPrompt.tsx b/src/components/common/TaggPrompt.tsx
index 5cd3ac3f..75f3009b 100644
--- a/src/components/common/TaggPrompt.tsx
+++ b/src/components/common/TaggPrompt.tsx
@@ -1,13 +1,15 @@
 import * as React from 'react';
-import {Platform, Text, StyleSheet, TouchableOpacity} from 'react-native';
+import {StyleSheet, Text, TouchableOpacity} from 'react-native';
 import {Image, View} from 'react-native-animatable';
-import {SCREEN_HEIGHT} from '../../utils';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {normalize, SCREEN_HEIGHT} from '../../utils';
 
 type TaggPromptProps = {
   messageHeader: string;
-  messageBody: string;
-  logoType: string;
+  messageBody: string | Element;
+  logoType: 'plus' | 'tagg';
+  hideCloseButton?: boolean;
+  noPadding?: boolean;
   onClose: () => void;
 };
 
@@ -15,27 +17,43 @@ const TaggPrompt: React.FC<TaggPromptProps> = ({
   messageHeader,
   messageBody,
   logoType,
+  hideCloseButton,
+  noPadding,
   onClose,
 }) => {
   /**
    * Generic prompt for Tagg
    */
 
+  const logo = () => {
+    switch (logoType) {
+      case 'plus':
+        return require('../../assets/icons/plus-logo.png');
+      case 'tagg':
+      default:
+        return require('../../assets/images/logo-purple.png');
+    }
+  };
+
   return (
-    <View style={styles.container}>
-      <Image
-        style={styles.icon}
-        source={require('../../assets/icons/plus-logo.png')}
-      />
+    <View
+      style={[
+        styles.container,
+        {paddingTop: noPadding ? 0 : SCREEN_HEIGHT / 10},
+        {paddingBottom: noPadding ? 0 : SCREEN_HEIGHT / 50},
+      ]}>
+      <Image style={styles.icon} source={logo()} />
       <Text style={styles.header}>{messageHeader}</Text>
       <Text style={styles.subtext}>{messageBody}</Text>
-      <TouchableOpacity
-        style={styles.closeButton}
-        onPress={() => {
-          onClose();
-        }}>
-        <CloseIcon height={'50%'} width={'50%'} color="gray" />
-      </TouchableOpacity>
+      {!hideCloseButton && (
+        <TouchableOpacity
+          style={styles.closeButton}
+          onPress={() => {
+            onClose();
+          }}>
+          <CloseIcon height={'50%'} width={'50%'} color="gray" />
+        </TouchableOpacity>
+      )}
     </View>
   );
 };
@@ -47,8 +65,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: 'white',
     height: SCREEN_HEIGHT / 4.5,
-    paddingTop: SCREEN_HEIGHT / 10,
-    paddingBottom: SCREEN_HEIGHT / 50,
   },
   closeButton: {
     position: 'relative',
@@ -58,22 +74,24 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-end',
   },
   icon: {
-    width: 40,
-    height: 40,
+    width: normalize(40),
+    height: normalize(40),
   },
   header: {
     color: 'black',
-    fontSize: 16,
+    fontSize: normalize(16),
     fontWeight: '600',
     textAlign: 'center',
     marginTop: '2%',
   },
   subtext: {
     color: 'gray',
-    fontSize: 12,
+    fontSize: normalize(12),
     fontWeight: '500',
+    lineHeight: normalize(20),
     textAlign: 'center',
     marginTop: '2%',
+    width: '95%',
   },
 });
 export default TaggPrompt;