feat(settings): add a link to write an email to the convertion team

resolves #51
100herz · Dec 8, 2020 · 82c1cbb · 82c1cbb
1 parent d201940
commit 82c1cbb
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 28 deletions.
diff --git a/src/__mocks__/settings.ts b/src/__mocks__/settings.ts
@@ -1,4 +1,4 @@
-import { Setting } from '@models/setting'
+import { Setting } from '@models/settings'
 
 export const settingItem: Setting = { id: 1, name: 'Push Mitteilungen' }
 

diff --git a/src/components/Settings/LegalList.tsx b/src/components/Settings/LegalList.tsx
@@ -1,13 +1,15 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { Linking, StyleSheet, View } from 'react-native'
 import { Ionicons } from '@expo/vector-icons'
 import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
 import HTML from 'react-native-render-html'
 
 import Touchable from '@components/UI/Touchable'
+import Text from '@components/UI/Text'
 import { SettingsStackParamList } from '@navigations/SettingsNavigator'
-import { Legal } from '@models/Legal'
+import { Legal } from '@models/settings'
+import { legalAddition } from '@data/settings'
 import { colors, defaultStyles, DefaultStyles } from '@styles/theme'
 
 interface Props {
@@ -17,6 +19,8 @@ interface Props {
 const LegalList: React.FC<Props> = ({ data }) => {
   const navigation = useNavigation<StackNavigationProp<SettingsStackParamList>>()
 
+  const linkIcon = () => <Ionicons name="ios-arrow-round-forward" size={20} color={colors.primaryColor} />
+
   return (
     <View style={styles.listContainer}>
       {data.map(item => (
@@ -27,10 +31,17 @@ const LegalList: React.FC<Props> = ({ data }) => {
         >
           <View style={styles.listItemContainer}>
             <HTML baseFontStyle={styles.text} html={item.title.rendered} />
-            <Ionicons name="ios-arrow-round-forward" size={20} color={colors.primaryColor} />
+            {linkIcon()}
           </View>
         </Touchable>
       ))}
+
+      <Touchable onPress={() => Linking.openURL(legalAddition.href)} testID="link-mail">
+        <View style={styles.listItemContainer}>
+          <Text>{legalAddition.name}</Text>
+          {linkIcon()}
+        </View>
+      </Touchable>
     </View>
   )
 }

diff --git a/src/components/Settings/SettingsList.tsx b/src/components/Settings/SettingsList.tsx
@@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native'
 
 import Text from '@components/UI/Text'
 import Switch from '@components/UI/Switch'
-import { Setting } from '@models/setting'
+import { Setting } from '@models/settings'
 import { DefaultStyles, defaultStyles } from '@styles/theme'
 
 interface Props {

diff --git a/src/components/Settings/__tests__/LegalList.test.tsx b/src/components/Settings/__tests__/LegalList.test.tsx
@@ -1,7 +1,9 @@
 import React from 'react'
+import { Linking } from 'react-native'
 import { act, fireEvent, render } from '@testing-library/react-native'
 
 import LegalList from '../LegalList'
+import { legalAddition } from '@data/settings'
 import { legalArray } from '@__mocks__/legal'
 
 export const mockedNavigate = jest.fn()
@@ -31,4 +33,17 @@ describe('<LegalList />', () => {
 
     expect(mockedNavigate).toHaveBeenCalledTimes(1)
   })
+
+  it('should call the mailto link', () => {
+    const spy = jest.spyOn(Linking, 'openURL')
+    const { getByTestId } = render(<LegalList data={legalArray} />)
+
+    act(() => {
+      fireEvent.press(getByTestId('link-mail'))
+    })
+
+    expect(spy).toBeCalledWith(legalAddition.href)
+    spy.mockReset()
+    spy.mockRestore()
+  })
 })
diff --git a/src/components/Settings/__tests__/__snapshots__/LegalList.test.tsx.snap b/src/components/Settings/__tests__/__snapshots__/LegalList.test.tsx.snap
@@ -126,5 +126,47 @@ exports[`<LegalList /> renders correctly 1`] = `
       <Text />
     </View>
   </View>
+  <View
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "opacity": 1,
+      }
+    }
+    testID="link-mail"
+  >
+    <View
+      style={
+        Object {
+          "borderBottomColor": "#dfe3e8",
+          "borderBottomWidth": 1,
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "paddingHorizontal": 15,
+          "paddingVertical": 10,
+        }
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#333333",
+            "fontFamily": "sans",
+          }
+        }
+      >
+        Anfrage stellen
+      </Text>
+      <Text />
+    </View>
+  </View>
 </View>
 `;
diff --git a/src/data/settings.ts b/src/data/settings.ts
@@ -0,0 +1,27 @@
+import { Legal, LegalAddition, Setting } from '@models/settings'
+
+export const legalScreens: Legal[] = [
+  {
+    id: 79,
+    title: { rendered: 'Impressum' },
+    content: { rendered: '' },
+  },
+  {
+    id: 1105,
+    title: { rendered: 'Datenschutz' },
+    content: { rendered: '' },
+  },
+]
+
+export const legalAddition: LegalAddition = {
+  id: 1,
+  name: 'Anfrage stellen',
+  href: 'mailto:anfrage@convention-net.de',
+}
+
+export const settingArray: Setting[] = [
+  {
+    id: 1,
+    name: 'Push Mitteilungen',
+  },
+]
diff --git a/src/models/legal.d.ts b/src/models/legal.d.ts
diff --git a/src/models/setting.d.ts b/src/models/setting.d.ts
diff --git a/src/models/settings.d.ts b/src/models/settings.d.ts
@@ -0,0 +1,20 @@
+export declare interface Setting {
+  id: number
+  name: string
+}
+
+export declare interface Legal {
+  id: number
+  title: {
+    rendered: string
+  }
+  content: {
+    rendered: string
+  }
+}
+
+export declare interface LegalAddition {
+  id: number
+  name: string
+  href: string
+}
diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx
@@ -6,22 +6,17 @@ import { ScrollView, StyleSheet, View } from 'react-native'
 import LegalList from '@components/Settings/LegalList'
 import SocialList from '@components/Settings/SocialList'
 import { socialMediaChannels } from '@data/social'
-import { Setting } from '@models/setting'
-import { Legal } from '@models/legal'
+import { legalScreens, settingArray } from '@data/settings'
 import { defaultStyles, DefaultStyles } from '@styles/theme'
 
-export const settingArray: Setting[] = [{ id: 1, name: 'Push Mitteilungen' }]
-
-const legalScreens: Legal[] = [
-  { id: 79, title: { rendered: 'Impressum' }, content: { rendered: '' } },
-  { id: 1105, title: { rendered: 'Datenschutz' }, content: { rendered: '' } },
-]
-
 const SettingsScreen: React.FC = () => {
   return (
     <View style={styles.container}>
       <ScrollView>
-        {/* <SettingsList data={settingArray} /> */}
+        {/*
+        // TODO: Reactivate this setting after adding the push notifications
+        <SettingsList data={settingArray} />
+        */}
         <LegalList data={legalScreens} />
         <SocialList data={socialMediaChannels} />
       </ScrollView>