From 17e80eb6a096cfcf5d2baf4ed51cf8f58b83b85c Mon Sep 17 00:00:00 2001
From: Evan Kaloudis <zeusln@tutanota.com>
Date: Sat, 21 Oct 2023 23:28:07 -0400
Subject: [PATCH] Settings: Help, Support ZEUS, and Social Media views

---
 Navigation.ts                             | 10 ++-
 locales/en.json                           | 10 ++-
 views/Settings/Help.tsx                   | 24 ++++--
 views/Settings/Settings.tsx               | 52 ++++++++++++-
 views/Settings/SocialMedia.tsx            | 89 +++++++++++++++++++++++
 views/Settings/{About.tsx => Support.tsx} | 23 ++++--
 6 files changed, 185 insertions(+), 23 deletions(-)
 create mode 100644 views/Settings/SocialMedia.tsx
 rename views/Settings/{About.tsx => Support.tsx} (76%)

diff --git a/Navigation.ts b/Navigation.ts
index 5264d4ebc..52382e74a 100644
--- a/Navigation.ts
+++ b/Navigation.ts
@@ -42,8 +42,9 @@ import SelectCurrency from './views/Settings/SelectCurrency';
 import Display from './views/Settings/Display';
 import CertInstallInstructions from './views/Settings/CertInstallInstructions';
 import SignVerifyMessage from './views/Settings/SignVerifyMessage';
-import About from './views/Settings/About';
+import Support from './views/Settings/Support';
 import Help from './views/Settings/Help';
+import SocialMedia from './views/Settings/SocialMedia';
 import Sponsors from './views/Settings/Sponsors';
 import Olympians from './views/Settings/Olympians';
 import Gods from './views/Settings/Gods';
@@ -175,8 +176,8 @@ const AppScenes = {
     Display: {
         screen: Display
     },
-    About: {
-        screen: About
+    Support: {
+        screen: Support
     },
     Help: {
         screen: Help
@@ -387,6 +388,9 @@ const AppScenes = {
     },
     ChangeAddress: {
         screen: ChangeAddress
+    },
+    SocialMedia: {
+        screen: SocialMedia
     }
 };
 
diff --git a/locales/en.json b/locales/en.json
index dd62576ae..03b77ece0 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -88,6 +88,12 @@
     "general.content": "Content",
     "general.lightningInvoice": "Lightning invoice",
     "general.or": "or",
+    "views.Settings.Support.title": "Support ZEUS",
+    "views.Settings.Support.titleAlt": "Merch and Support",
+    "views.Settings.SocialMedia.title": "Social media",
+    "views.Settings.SocialMedia.twitter": "X / Twitter",
+    "views.Settings.Support.store": "ZEUS merch store",
+    "nostr.nostr": "Nostr",
     "nostr.keys": "Nostr keys",
     "nostr.pubkey": "Nostr pubkey",
     "nostr.privkey": "Nostr private key",
@@ -676,8 +682,8 @@
     "views.Settings.connectNode": "Connect a node",
     "views.Settings.Help.docs": "Zeus Documentation",
     "views.Settings.Help.github": "GitHub Issues",
-    "views.Settings.Help.telegram": "Telegram Group",
-    "views.Settings.Help.twitter": "Twitter (DMs open)",
+    "views.Settings.Help.telegram": "Telegram (we will not DM you)",
+    "views.Settings.Help.email": "Email support",
     "views.Settings.POS.enableSquare": "Enable Square POS integration",
     "views.Settings.POS.squareAccessToken": "Square Access token",
     "views.Settings.POS.squareLocationId": "Square Location ID",
diff --git a/views/Settings/Help.tsx b/views/Settings/Help.tsx
index 9f75aefea..a02da9b4b 100644
--- a/views/Settings/Help.tsx
+++ b/views/Settings/Help.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FlatList, View } from 'react-native';
+import { FlatList, Linking, View } from 'react-native';
 import { Icon, ListItem } from 'react-native-elements';
 
 import Header from '../../components/Header';
@@ -35,12 +35,8 @@ function Help(props: HelpProps) {
             url: 'https://github.com/ZeusLN/zeus/issues'
         },
         {
-            label: localeString('views.Settings.Help.telegram'),
-            url: 'https://t.me/ZeusLN'
-        },
-        {
-            label: localeString('views.Settings.Help.twitter'),
-            url: 'https://twitter.com/ZeusLN'
+            label: localeString('views.Settings.Help.email'),
+            email: 'support@zeusln.com'
         }
     ];
 
@@ -65,7 +61,19 @@ function Help(props: HelpProps) {
                             borderBottomWidth: 0,
                             backgroundColor: 'transparent'
                         }}
-                        onPress={() => UrlUtils.goToUrl(item.url)}
+                        onPress={() => {
+                            if (item.email) {
+                                const url = `to:${item.email}`;
+                                Linking.canOpenURL(url).then(
+                                    (supported: boolean) => {
+                                        if (supported) {
+                                            Linking.openURL(url);
+                                        }
+                                    }
+                                );
+                            }
+                            if (item.url) UrlUtils.goToUrl(item.url);
+                        }}
                     >
                         <ListItem.Content>
                             <ListItem.Title
diff --git a/views/Settings/Settings.tsx b/views/Settings/Settings.tsx
index 700a0436a..dfd9200fe 100644
--- a/views/Settings/Settings.tsx
+++ b/views/Settings/Settings.tsx
@@ -7,6 +7,7 @@ import {
     TouchableOpacity,
     TouchableWithoutFeedback
 } from 'react-native';
+import { Icon } from 'react-native-elements';
 import { inject, observer } from 'mobx-react';
 
 import BlockIcon from '../../assets/images/SVG/Block.svg';
@@ -18,7 +19,6 @@ import SignIcon from '../../assets/images/SVG/Pen.svg';
 import CurrencyIcon from '../../assets/images/SVG/Currency.svg';
 import BrushIcon from '../../assets/images/SVG/Brush.svg';
 import LanguageIcon from '../../assets/images/SVG/Globe.svg';
-import HelpIcon from '../../assets/images/SVG/Help Icon.svg';
 import NodeOn from '../../assets/images/SVG/Node On.svg';
 import Olympus from '../../assets/images/SVG/Olympus.svg';
 import POS from '../../assets/images/SVG/POS.svg';
@@ -988,6 +988,45 @@ export default class Settings extends React.Component<
                             </TouchableOpacity>
                         </View>
                     )}
+
+                    <View
+                        style={{
+                            backgroundColor: themeColor('secondary'),
+                            width: '90%',
+                            borderRadius: 10,
+                            alignSelf: 'center',
+                            marginTop: 5,
+                            marginBottom: 5
+                        }}
+                    >
+                        <TouchableOpacity
+                            style={styles.columnField}
+                            onPress={() => navigation.navigate('Support')}
+                        >
+                            <View style={{ paddingLeft: 5, paddingTop: 4 }}>
+                                <Icon
+                                    name="favorite"
+                                    color={themeColor('text')}
+                                    underlayColor="transparent"
+                                    size={25}
+                                />
+                            </View>
+                            <Text
+                                style={{
+                                    ...styles.columnText,
+                                    color: themeColor('text')
+                                }}
+                            >
+                                {localeString(
+                                    'views.Settings.Support.titleAlt'
+                                )}
+                            </Text>
+                            <View style={styles.ForwardArrow}>
+                                <ForwardIcon />
+                            </View>
+                        </TouchableOpacity>
+                    </View>
+
                     <View
                         style={{
                             backgroundColor: themeColor('secondary'),
@@ -1000,10 +1039,15 @@ export default class Settings extends React.Component<
                     >
                         <TouchableOpacity
                             style={styles.columnField}
-                            onPress={() => navigation.navigate('About')}
+                            onPress={() => navigation.navigate('Help')}
                         >
                             <View style={{ paddingLeft: 5, paddingTop: 4 }}>
-                                <HelpIcon />
+                                <Icon
+                                    name="support"
+                                    color={themeColor('text')}
+                                    underlayColor="transparent"
+                                    size={25}
+                                />
                             </View>
                             <Text
                                 style={{
@@ -1011,7 +1055,7 @@ export default class Settings extends React.Component<
                                     color: themeColor('text')
                                 }}
                             >
-                                {localeString('general.about')}
+                                {localeString('general.help')}
                             </Text>
                             <View style={styles.ForwardArrow}>
                                 <ForwardIcon />
diff --git a/views/Settings/SocialMedia.tsx b/views/Settings/SocialMedia.tsx
new file mode 100644
index 000000000..99347b38c
--- /dev/null
+++ b/views/Settings/SocialMedia.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { FlatList, View } from 'react-native';
+import { Icon, ListItem } from 'react-native-elements';
+
+import Header from '../../components/Header';
+import Screen from '../../components/Screen';
+
+import { localeString } from '../../utils/LocaleUtils';
+import { themeColor } from '../../utils/ThemeUtils';
+import UrlUtils from '../../utils/UrlUtils';
+
+interface HelpProps {
+    navigation: any;
+}
+
+function Help(props: HelpProps) {
+    const { navigation } = props;
+
+    const renderSeparator = () => (
+        <View
+            style={{
+                height: 1,
+                backgroundColor: themeColor('separator')
+            }}
+        />
+    );
+
+    const SOCIAL_ITEMS = [
+        {
+            label: localeString('nostr.nostr'),
+            url: 'https://nostr.band/npub1xnf02f60r9v0e5kty33a404dm79zr7z2eepyrk5gsq3m7pwvsz2sazlpr5'
+        },
+        {
+            label: localeString('views.Settings.Help.telegram'),
+            url: 'https://t.me/ZeusLN'
+        },
+        {
+            label: localeString('views.Settings.SocialMedia.twitter'),
+            url: 'https://twitter.com/ZeusLN'
+        }
+    ];
+
+    return (
+        <Screen>
+            <Header
+                leftComponent="Back"
+                centerComponent={{
+                    text: localeString('views.Settings.SocialMedia.title'),
+                    style: {
+                        color: themeColor('text'),
+                        fontFamily: 'Lato-Regular'
+                    }
+                }}
+                navigation={navigation}
+            />
+            <FlatList
+                data={SOCIAL_ITEMS}
+                renderItem={({ item }) => (
+                    <ListItem
+                        containerStyle={{
+                            borderBottomWidth: 0,
+                            backgroundColor: 'transparent'
+                        }}
+                        onPress={() => UrlUtils.goToUrl(item.url)}
+                    >
+                        <ListItem.Content>
+                            <ListItem.Title
+                                style={{
+                                    color: themeColor('text'),
+                                    fontFamily: 'Lato-Regular'
+                                }}
+                            >
+                                {item.label}
+                            </ListItem.Title>
+                        </ListItem.Content>
+                        <Icon
+                            name="keyboard-arrow-right"
+                            color={themeColor('secondaryText')}
+                        />
+                    </ListItem>
+                )}
+                keyExtractor={(item, index) => `${item.label}-${index}`}
+                ItemSeparatorComponent={renderSeparator}
+            />
+        </Screen>
+    );
+}
+
+export default Help;
diff --git a/views/Settings/About.tsx b/views/Settings/Support.tsx
similarity index 76%
rename from views/Settings/About.tsx
rename to views/Settings/Support.tsx
index e7528e5c3..c31924ed5 100644
--- a/views/Settings/About.tsx
+++ b/views/Settings/Support.tsx
@@ -7,12 +7,13 @@ import Screen from '../../components/Screen';
 
 import { localeString } from '../../utils/LocaleUtils';
 import { themeColor } from '../../utils/ThemeUtils';
+import UrlUtils from '../../utils/UrlUtils';
 
-interface AboutProps {
+interface SupportProps {
     navigation: any;
 }
 
-function About(props: AboutProps) {
+function Support(props: SupportProps) {
     const { navigation } = props;
 
     const renderSeparator = () => (
@@ -26,7 +27,14 @@ function About(props: AboutProps) {
 
     const ABOUT_ITEMS = [
         { label: localeString('views.Sponsors.title'), path: 'Sponsors' },
-        { label: localeString('general.help'), path: 'Help' }
+        {
+            label: localeString('views.Settings.Support.store'),
+            url: 'https://store.zeusln.app'
+        },
+        {
+            label: localeString('views.Settings.SocialMedia.title'),
+            path: 'SocialMedia'
+        }
     ];
 
     return (
@@ -34,7 +42,7 @@ function About(props: AboutProps) {
             <Header
                 leftComponent="Back"
                 centerComponent={{
-                    text: localeString('general.about'),
+                    text: localeString('views.Settings.Support.title'),
                     style: {
                         color: themeColor('text'),
                         fontFamily: 'Lato-Regular'
@@ -50,7 +58,10 @@ function About(props: AboutProps) {
                             borderBottomWidth: 0,
                             backgroundColor: 'transparent'
                         }}
-                        onPress={() => navigation.navigate(item.path)}
+                        onPress={() => {
+                            if (item.path) navigation.navigate(item.path);
+                            if (item.url) UrlUtils.goToUrl(item.url);
+                        }}
                     >
                         <ListItem.Content>
                             <ListItem.Title
@@ -75,4 +86,4 @@ function About(props: AboutProps) {
     );
 }
 
-export default About;
+export default Support;