Add info of downloaded CSV location

Author: shubhamkmr04

locales/en.json

@@ -1029,6 +1029,8 @@
     "views.activityExport.toDate": "To Date (End Date)",
     "views.activityExport.dateRange": "Select Date Range:",
     "views.activityExport.downloadCompleteData": "Download Complete Data",
+    "views.activityExport.explainerAndroid": "Downloaded CSV files can be found in Files > Downloads.",
+    "views.activityExport.explaineriOS": "Downloaded CSV files can be found in the Files app under the ZEUS folder.",
     "views.Routing.RoutingEvent.sourceChannel": "Source Channel",
     "views.Routing.RoutingEvent.destinationChannel": "Destination Channel",
     "views.Olympians.title": "Olympians",

views/ActivityExportOptions.tsx

@@ -5,11 +5,14 @@ import {
     StyleSheet,
     Alert,
     ScrollView,
-    Modal
+    Modal,
+    Platform
 } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
 import { inject, observer } from 'mobx-react';
 
+import Info from '../assets/images/SVG/info.svg';
+
 import Header from '../components/Header';
 import Button from '../components/Button';
 import TextInput from '../components/TextInput';
@@ -45,6 +48,7 @@ interface ActivityExportOptionsState {
     isActivityFetching: boolean;
     filteredActivity: any;
     isModalVisible: boolean;
+    showInfoModal: boolean;
     customFileName: string;
     fromDate: any;
     toDate: any;
@@ -65,6 +69,7 @@ export default class ActivityExportOptions extends React.Component<
             isActivityFetching: true,
             filteredActivity: [],
             isModalVisible: false,
+            showInfoModal: false,
             customFileName: '',
             fromDate: null,
             toDate: null,
@@ -401,6 +406,59 @@ export default class ActivityExportOptions extends React.Component<
         );
     };
 
+    renderInfoModal = () => {
+        const { showInfoModal } = this.state;
+        return (
+            <Modal
+                animationType="slide"
+                transparent
+                visible={showInfoModal}
+                onRequestClose={() => this.setState({ showInfoModal: false })}
+            >
+                <View
+                    style={{
+                        flex: 1,
+                        justifyContent: 'center',
+                        alignItems: 'center'
+                    }}
+                >
+                    <View
+                        style={{
+                            backgroundColor: themeColor('secondary'),
+                            borderRadius: 24,
+                            padding: 20,
+                            alignItems: 'center'
+                        }}
+                    >
+                        <Text
+                            style={{
+                                fontFamily: 'PPNeueMontreal-Book',
+                                color: themeColor('text'),
+                                fontSize: 20,
+                                marginBottom: 20
+                            }}
+                        >
+                            {Platform.OS === 'android'
+                                ? localeString(
+                                      'views.activityExport.explainerAndroid'
+                                  )
+                                : localeString(
+                                      'views.activityExport.explaineriOS'
+                                  )}
+                        </Text>
+                        <Button
+                            title={localeString('general.close')}
+                            onPress={() =>
+                                this.setState({ showInfoModal: false })
+                            }
+                            secondary
+                        />
+                    </View>
+                </View>
+            </Modal>
+        );
+    };
+
     render() {
         const { isActivityFetching } = this.state;
 
@@ -415,9 +473,25 @@ export default class ActivityExportOptions extends React.Component<
                             fontFamily: 'PPNeueMontreal-Book'
                         }
                     }}
+                    rightComponent={
+                        <TouchableOpacity
+                            style={{ marginRight: 6 }}
+                            onPress={() =>
+                                this.setState({ showInfoModal: true })
+                            }
+                        >
+                            <Info
+                                stroke={themeColor('text')}
+                                fill={themeColor('text')}
+                                width={24}
+                                height={24}
+                            />
+                        </TouchableOpacity>
+                    }
                     navigation={this.props.navigation}
                 />
                 {this.renderModal()}
+                {this.renderInfoModal()}
 
                 <View
                     style={{