New feature : Csv Export

babel.config.js

@@ -1,7 +1,8 @@
 module.exports = {
-  presets: ["module:@react-native/babel-preset"],
-  plugins: [
-    ["@babel/plugin-proposal-decorators", { legacy: true }],
-    'react-native-reanimated/plugin'
-  ]
-}
+    presets: ['module:@react-native/babel-preset'],
+    plugins: [
+        ['@babel/plugin-proposal-decorators', { legacy: true }],
+        'react-native-reanimated/plugin',
+        ['@babel/plugin-transform-export-namespace-from']
+    ]
+};

locales/en.json

@@ -950,6 +950,13 @@
     "views.ActivityFilter.isFailed": "Failed payments",
     "views.ActivityFilter.standardInvoices": "Standard invoices",
     "views.ActivityFilter.ampInvoices": "AMP invoices",
+    "views.ActivityToCsv.title": "Download Activity",
+    "views.ActivityToCsv.csvDownloaded": "CSV file has been downloaded",
+    "views.ActivityToCsv.csvDownloadFailed": "Failed to save CSV file:",
+    "views.ActivityToCsv.csvDownloadSuccess": "Success",
+    "views.ActivityToCsv.textInputPlaceholder": "File name (optional)",
+    "views.ActivityToCsv.downloadButton": "Download CSV",
+    "views.ActivityToCsv.closeButton": "Close",
     "views.Routing.RoutingEvent.sourceChannel": "Source Channel",
     "views.Routing.RoutingEvent.destinationChannel": "Destination Channel",
     "views.Olympians.title": "Olympians",
@@ -1232,4 +1239,4 @@
     "views.PendingHTLCs.expirationHeight": "Expiration height",
     "views.PendingHTLCs.recommendationIOS": "It's recommended to leave ZEUS running while there are pending HTLCs to prevent force closes.",
     "views.PendingHTLCs.recommendationAndroid": "It's recommended to enable Persistent LND or leave ZEUS running while there are pending HTLCs to prevent force closes."
-}
+}

package.json

@@ -157,6 +157,7 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
     "@babel/plugin-transform-arrow-functions": "7.22.5",
+    "@babel/plugin-transform-export-namespace-from": "7.24.7",
     "@babel/plugin-transform-shorthand-properties": "7.22.5",
     "@babel/plugin-transform-template-literals": "7.22.5",
     "@babel/preset-env": "7.22.9",

views/Activity/Activity.tsx

@@ -6,7 +6,8 @@ import {
     Text,
     TouchableOpacity,
     View,
-    StyleSheet
+    StyleSheet,
+    Alert
 } from 'react-native';
 import { Button, Icon, ListItem } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
@@ -31,6 +32,7 @@ import { SATS_PER_BTC } from '../../stores/UnitsStore';
 
 import Filter from '../../assets/images/SVG/Filter On.svg';
 import Invoice from '../../models/Invoice';
+import JsonToCsv from './ActivityToCsv';
 
 interface ActivityProps {
     navigation: StackNavigationProp<any, any>;
@@ -55,7 +57,8 @@ export default class Activity extends React.PureComponent<
     invoicesListener: any;
 
     state = {
-        selectedPaymentForOrder: null
+        selectedPaymentForOrder: null,
+        isCsvModalVisible: false
     };
 
     async UNSAFE_componentWillMount() {
@@ -132,6 +135,21 @@ export default class Activity extends React.PureComponent<
         return 'secondaryText';
     };
 
+    handleDownloadPress = () => {
+        const { ActivityStore } = this.props;
+        const { startDate, endDate } = ActivityStore.filters;
+        const { filteredActivity } = ActivityStore;
+
+        if (!startDate || !endDate) {
+            Alert.alert('Error', 'Please select Start and End date.');
+        } else {
+            this.setState({
+                isCsvModalVisible: true,
+                filteredData: filteredActivity
+            });
+        }
+    };
+
     render() {
         const {
             navigation,
@@ -141,7 +159,7 @@ export default class Activity extends React.PureComponent<
             SettingsStore,
             route
         } = this.props;
-        const { selectedPaymentForOrder } = this.state;
+        const { selectedPaymentForOrder, isCsvModalVisible } = this.state;
 
         const { loading, filteredActivity, getActivityAndFilter } =
             ActivityStore;
@@ -225,6 +243,21 @@ export default class Activity extends React.PureComponent<
             </TouchableOpacity>
         );
 
+        const DownloadButton = () => (
+            <TouchableOpacity
+                onPress={this.handleDownloadPress}
+                accessibilityLabel={localeString('views.ActivityToCsv.title')}
+            >
+                <Icon
+                    name="download"
+                    type="feather"
+                    color={themeColor('text')}
+                    underlayColor="transparent"
+                    size={33}
+                />
+            </TouchableOpacity>
+        );
+
         return (
             <Screen>
                 <Header
@@ -237,16 +270,28 @@ export default class Activity extends React.PureComponent<
                         }
                     }}
                     rightComponent={
-                        order ? (
-                            selectedPaymentForOrder ? (
-                                <MarkPaymentButton />
-                            ) : null
-                        ) : (
-                            <FilterButton />
-                        )
+                        <View style={{ flexDirection: 'row' }}>
+                            {order ? (
+                                selectedPaymentForOrder ? (
+                                    <MarkPaymentButton />
+                                ) : null
+                            ) : (
+                                <FilterButton />
+                            )}
+                            <DownloadButton />
+                        </View>
                     }
                     navigation={navigation}
                 />
+
+                <JsonToCsv
+                    filteredActivity={filteredActivity}
+                    closeModal={() =>
+                        this.setState({ isCsvModalVisible: false })
+                    }
+                    isVisible={isCsvModalVisible}
+                />
+
                 {loading ? (
                     <View style={{ padding: 50 }}>
                         <LoadingIndicator />