144 emission info

Resolves #144

Pulled the Emission Info button into the shared components so that it could be reused for existing emissions and added it to EmissionItem.

Also added a test for coverage :)

Emission info

Emission info
Add a button on EmissionItemScreen opening a new modal screen. This new modal screen should show some text from a markdown file, in the same way as sustainable guide is working.

What kind of markdown we have here. Are we using anything?
@akkikumar72 Same markdown mechanism as act tab / sustainable guide.
Looks like it same as https://github.com/NMF-earth/nmf-app/issues/154.
If yes, I can have a look
> Looks like it same as #154.
> If yes, I can have a look

Exact, same as #154

NODE_OPTIONS='--experimental-vm-modules --max-old-space-size=4096' npx --no-install jest app/components/InfoButton/__tests__/EmissionInfoButton.test.tsx app/screens/InfoModal/__test__/InfoModalScreen.test.tsx app/screens/Methodology/__test__/MethodologyScreen.test.tsx --passWithNoTests 2>&1

diff --git a/app/screens/AddEmission/components/InfoButton/InfoButton.styles.ts b/app/components/InfoButton/InfoButton.styles.ts
similarity index 82%
rename from app/screens/AddEmission/components/InfoButton/InfoButton.styles.ts
rename to app/components/InfoButton/InfoButton.styles.ts
index fe6092fe..7bc804ec 100644
--- a/app/screens/AddEmission/components/InfoButton/InfoButton.styles.ts
+++ b/app/components/InfoButton/InfoButton.styles.ts
@@ -2,7 +2,7 @@ import { StyleSheet } from "react-native";

 import { Layout } from "constant";

-import { Colors } from "../../../../style";
+import { Colors } from "../../style";

 export default StyleSheet.create({
   infoIcon: {
diff --git a/app/components/InfoButton/InfoButton.tsx b/app/components/InfoButton/InfoButton.tsx
new file mode 100644
index 00000000..82b65731
--- /dev/null
+++ b/app/components/InfoButton/InfoButton.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { pathOr } from "ramda";
+import { Ionicons } from "@expo/vector-icons";
+import { useNavigation, useRoute } from "@react-navigation/native";
+
+import { emissions } from "../../ducks";
+import { navigate } from "../../navigation";
+import styles from "./InfoButton.styles";
+
+const InfoButton = () => {
+  const navigation = useNavigation();
+  const navigator = navigate(navigation);
+
+  const route = useRoute();
+  const emissionId = pathOr("", ["params", "id"], route);
+
+  const { emissionModelType } =
+    useSelector((state) =>
+      emissions.selectors.getEmissionById(state, emissionId)
+    ) || {};
+
+  return (
+    <Ionicons
+      name="md-information-circle"
+      size={26}
+      style={styles.infoIcon}
+      onPress={() => navigator.openInfoModal({ emissionModelType })}
+    />
+  );
+};
+
+export default InfoButton;
diff --git a/app/screens/AddEmission/components/InfoButton/index.ts b/app/components/InfoButton/index.ts
similarity index 100%
rename from app/screens/AddEmission/components/InfoButton/index.ts
rename to app/components/InfoButton/index.ts
diff --git a/app/components/index.ts b/app/components/index.ts
index c89c25e4..72121582 100644
--- a/app/components/index.ts
+++ b/app/components/index.ts
@@ -8,6 +8,7 @@ import StickersImage from "./StickersImage";
 import SelectableListItem from "./SelectableListItem";
 import ListItem from "./ListItem";
 import HTMLImage from "./HTMLImage";
+import InfoButton from "./InfoButton";

 export {
   HTMLImage,
@@ -20,4 +21,5 @@ export {
   Button,
   Text,
   TextInput,
+  InfoButton,
 };
diff --git a/app/navigation/Navigator/AppNavigator.tsx b/app/navigation/Navigator/AppNavigator.tsx
index 6a9f069a..70b6f37a 100644
--- a/app/navigation/Navigator/AppNavigator.tsx
+++ b/app/navigation/Navigator/AppNavigator.tsx
@@ -3,10 +3,9 @@ import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";

 import ModalNavigator from "./ModalNavigator";
-import MethodologyModalNavigator from "./MethodologyModalNavigator";
+import InfoModalNavigator from "./InfoModalNavigator";
 import RootNavigator from "./RootNavigator";
 import ComingSoonScreen from "../../screens/ComingSoon";
-import Methodology from "../../screens/Methodology";

 const AppStack = createStackNavigator();

@@ -16,8 +15,8 @@ const App = (): React.ReactElement => {
       <AppStack.Navigator mode="modal">
         <AppStack.Screen
           name="AppStack"
-          component={RootNavigator}
           options={{ headerShown: false }}
+          component={RootNavigator}
         />
         <AppStack.Screen
           name="ComingSoon"
@@ -25,9 +24,9 @@ const App = (): React.ReactElement => {
           component={ModalNavigator}
         />
         <AppStack.Screen
-          name="Methodology"
-          options={Methodology.navigationOptions}
-          component={MethodologyModalNavigator}
+          name="InfoModal"
+          options={{ headerShown: false }}
+          component={InfoModalNavigator}
         />
       </AppStack.Navigator>
     </NavigationContainer>
diff --git a/app/navigation/Navigator/InfoModalNavigator.tsx b/app/navigation/Navigator/InfoModalNavigator.tsx
new file mode 100644
index 00000000..47dfb353
--- /dev/null
+++ b/app/navigation/Navigator/InfoModalNavigator.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { createStackNavigator } from "@react-navigation/stack";
+
+import InfoModalScreen from "../../screens/InfoModal";
+
+const Stack = createStackNavigator();
+
+const InfoModalNavigator = (): React.ReactElement => (
+  <Stack.Navigator>
+    <Stack.Screen
+      name="InfoModal"
+      options={InfoModalScreen.navigationOptions}
+      component={InfoModalScreen}
+    />
+  </Stack.Navigator>
+);
+
+export default InfoModalNavigator;
diff --git a/app/navigation/Navigator/MethodologyModalNavigator.tsx b/app/navigation/Navigator/MethodologyModalNavigator.tsx
deleted file mode 100644
index 3c9ca312..00000000
--- a/app/navigation/Navigator/MethodologyModalNavigator.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
-
-import MethodologyScreen from "../../screens/Methodology";
-
-const Stack = createStackNavigator();
-
-const MethodologyModalNavigator = (): React.ReactElement => (
-  <Stack.Navigator>
-    <Stack.Screen
-      name="Methodology"
-      options={MethodologyScreen.navigationOptions}
-      component={MethodologyScreen}
-    />
-  </Stack.Navigator>
-);
-
-export default MethodologyModalNavigator;
diff --git a/app/navigation/navigate.ts b/app/navigation/navigate.ts
index 3eeedc01..ad2b9946 100644
--- a/app/navigation/navigate.ts
+++ b/app/navigation/navigate.ts
@@ -8,8 +8,11 @@ const openComingSoon = (navigation) => (props = {}) => {
   navigation.navigate("ComingSoon", props);
 };

-const openMethodology = (navigation) => (props = {}) => {
-  navigation.navigate("Methodology", props);
+const openInfoModal = (navigation) => (props = {}) => {
+  navigation.navigate("InfoModal", {
+    screen: "InfoModal",
+    params: props,
+  });
 };

 /* push */
@@ -52,7 +55,7 @@ const openBudget = (navigation) => (props = {}) => {
 const navigate = (navigation) => ({
   goBack: navigation.goBack,
   openComingSoon: navigateOneTime(openComingSoon(navigation)),
-  openMethodology: navigateOneTime(openMethodology(navigation)),
+  openInfoModal: navigateOneTime(openInfoModal(navigation)),
   openBudget: navigateOneTime(openBudget(navigation)),
   openMontlyBudget: navigateOneTime(openMontlyBudget(navigation)),
   openAddEmission: navigateOneTime(openAddEmission(navigation)),
diff --git a/app/screens/AddEmission/AddEmissionScreen.navigationOptions.tsx b/app/screens/AddEmission/AddEmissionScreen.navigationOptions.tsx
index 6d107150..12ced852 100644
--- a/app/screens/AddEmission/AddEmissionScreen.navigationOptions.tsx
+++ b/app/screens/AddEmission/AddEmissionScreen.navigationOptions.tsx
@@ -1,9 +1,8 @@
 import React from "react";

-import { Text } from "../../components";
+import { Text, InfoButton } from "../../components";
 import { t } from "../../utils";
 import { Colors, ComponentsStyle } from "../../style";
-import { InfoButton } from "./components";

 const navigationOptions = () => ({
   ...ComponentsStyle.transitionBetweenScreenPresets,
diff --git a/app/screens/AddEmission/components/InfoButton/InfoButton.tsx b/app/screens/AddEmission/components/InfoButton/InfoButton.tsx
deleted file mode 100644
index b04733c5..00000000
--- a/app/screens/AddEmission/components/InfoButton/InfoButton.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-import { Ionicons } from "@expo/vector-icons";
-import { useNavigation } from "@react-navigation/native";
-
-import { navigate } from "../../../../navigation";
-import styles from "./InfoButton.styles";
-
-export default () => {
-  const navigation = useNavigation();
-  const navigator = navigate(navigation);
-  return (
-    <Ionicons
-      name="md-information-circle"
-      size={26}
-      style={styles.infoIcon}
-      onPress={navigator.openMethodology}
-    />
-  );
-};
diff --git a/app/screens/AddEmission/components/index.ts b/app/screens/AddEmission/components/index.ts
index be2df6d6..599ca664 100644
--- a/app/screens/AddEmission/components/index.ts
+++ b/app/screens/AddEmission/components/index.ts
@@ -4,14 +4,5 @@ import Custom from "./Custom";
 import Streaming from "./Streaming";
 import Electricity from "./Electricity";
 import AddEmissionButton from "./AddEmissionButton";
-import InfoButton from "./InfoButton";

-export {
-  Food,
-  Electricity,
-  Streaming,
-  Transport,
-  Custom,
-  AddEmissionButton,
-  InfoButton,
-};
+export { Food, Electricity, Streaming, Transport, Custom, AddEmissionButton };
diff --git a/app/screens/EmissionItem/EmissionItemScreen.navigationOptions.tsx b/app/screens/EmissionItem/EmissionItemScreen.navigationOptions.tsx
index d2e33da8..e3852bd4 100644
--- a/app/screens/EmissionItem/EmissionItemScreen.navigationOptions.tsx
+++ b/app/screens/EmissionItem/EmissionItemScreen.navigationOptions.tsx
@@ -1,6 +1,6 @@
 import React from "react";

-import { Text } from "../../components";
+import { Text, InfoButton } from "../../components";
 import { t } from "../../utils";
 import { Colors, ComponentsStyle } from "../../style";

@@ -11,6 +11,7 @@ const navigationOptions = () => ({
   },
   headerTintColor: Colors.grey100,
   headerBackTitleVisible: false,
+  headerRight: () => <InfoButton />,
   headerTitle: () => <Text.H1>{t("EMISSION_ITEM_TITLE")}</Text.H1>,
 });

diff --git a/app/screens/Methodology/Methodology.navigationOptions.tsx b/app/screens/InfoModal/InfoModal.navigationOptions.tsx
similarity index 60%
rename from app/screens/Methodology/Methodology.navigationOptions.tsx
rename to app/screens/InfoModal/InfoModal.navigationOptions.tsx
index e37cf6d7..ae701f5c 100644
--- a/app/screens/Methodology/Methodology.navigationOptions.tsx
+++ b/app/screens/InfoModal/InfoModal.navigationOptions.tsx
@@ -6,26 +6,40 @@ import { Layout } from "constant";

 import { Colors, ComponentsStyle } from "../../style";
 import { navigate } from "../../navigation";
-import { platform, t } from "../../utils";
+import { platform, t, ui } from "../../utils";
 import { Text } from "../../components";

 const iconStyle = { paddingRight: Layout.PADDING_HORIZONTAL };

-const navigationOptionsAndroid = () => ({
+const navigationOptionsAndroid = ({ route }) => ({
   ...ComponentsStyle.transitionBetweenScreenPresets,
   headerStyle: {
     ...ComponentsStyle.header,
   },
-  headerTitle: () => <Text.H1>{t("METHODOLOGY_SCREEN_TITLE")}</Text.H1>,
+  headerTitle: () =>
+    route.params?.emissionModelType ? (
+      <Text.H1>
+        {ui.getTranslationModelType(route.params.emissionModelType)}
+      </Text.H1>
+    ) : (
+      <Text.H1>{t("INFO_MODAL_SCREEN_METHODOLOGY")}</Text.H1>
+    ),
   headerRight: () => null,
 });

-const navigationOptionsIOS = ({ navigation }) => ({
+const navigationOptionsIOS = ({ navigation, route }) => ({
   headerStyle: {
     ...ComponentsStyle.header,
     borderBottomWidth: 0,
   },
-  headerTitle: () => <Text.H1>{t("METHODOLOGY_SCREEN_TITLE")}</Text.H1>,
+  headerTitle: () =>
+    route.params?.emissionModelType ? (
+      <Text.H1>
+        {ui.getTranslationModelType(route.params.emissionModelType)}
+      </Text.H1>
+    ) : (
+      <Text.H1>{t("INFO_MODAL_SCREEN_METHODOLOGY")}</Text.H1>
+    ),
   headerLeft: () => null,
   headerRight: () => (
     <View style={iconStyle}>
diff --git a/app/screens/Methodology/MethodologyScreen.styles.ts b/app/screens/InfoModal/InfoModalScreen.styles.ts
similarity index 100%
rename from app/screens/Methodology/MethodologyScreen.styles.ts
rename to app/screens/InfoModal/InfoModalScreen.styles.ts
diff --git a/app/screens/InfoModal/InfoModalScreen.tsx b/app/screens/InfoModal/InfoModalScreen.tsx
new file mode 100644
index 00000000..931ba9e3
--- /dev/null
+++ b/app/screens/InfoModal/InfoModalScreen.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { ScrollView } from "react-native";
+import HTML from "react-native-render-html";
+
+import styles from "./InfoModalScreen.styles";
+import navigationOptions from "./InfoModal.navigationOptions";
+import methodology from "../../../assets/methodology/methodology.json";
+import { ui } from "../../utils";
+
+const InfoModalScreen = ({ route }) => {
+  const emissionModelType = route?.params?.emissionModelType;
+  let html: string;
+  if (emissionModelType) {
+    // TODO: load corresponding html
+    html = `<h2> ${emissionModelType} placeholder </h2>`;
+  } else {
+    html = methodology[0].body;
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      <HTML
+        html={html}
+        onLinkPress={ui.onHTMLBodyLinkPress}
+        baseFontStyle={{ fontSize: 18 }}
+      />
+    </ScrollView>
+  );
+};
+
+InfoModalScreen.navigationOptions = navigationOptions;
+
+export default InfoModalScreen;
diff --git a/app/screens/InfoModal/index.ts b/app/screens/InfoModal/index.ts
new file mode 100644
index 00000000..1e9dbdc5
--- /dev/null
+++ b/app/screens/InfoModal/index.ts
@@ -0,0 +1,1 @@
+export { default } from "./InfoModalScreen";
diff --git a/app/screens/InfoModal/translations/da.json b/app/screens/InfoModal/translations/da.json
new file mode 100644
index 00000000..4ad7ae1e
--- /dev/null
+++ b/app/screens/InfoModal/translations/da.json
@@ -0,0 +1,3 @@
+{
+  "INFO_MODAL_SCREEN_METHODOLOGY": "Methodology"
+}
diff --git a/app/screens/InfoModal/translations/de.json b/app/screens/InfoModal/translations/de.json
new file mode 100644
index 00000000..4ad7ae1e
--- /dev/null
+++ b/app/screens/InfoModal/translations/de.json
@@ -0,0 +1,3 @@
+{
+  "INFO_MODAL_SCREEN_METHODOLOGY": "Methodology"
+}
diff --git a/app/screens/InfoModal/translations/en.json b/app/screens/InfoModal/translations/en.json
new file mode 100644
index 00000000..4ad7ae1e
--- /dev/null
+++ b/app/screens/InfoModal/translations/en.json
@@ -0,0 +1,3 @@
+{
+  "INFO_MODAL_SCREEN_METHODOLOGY": "Methodology"
+}
diff --git a/app/screens/InfoModal/translations/es.json b/app/screens/InfoModal/translations/es.json
new file mode 100644
index 00000000..4ad7ae1e
--- /dev/null
+++ b/app/screens/InfoModal/translations/es.json
@@ -0,0 +1,3 @@
+{
+  "INFO_MODAL_SCREEN_METHODOLOGY": "Methodology"
+}
diff --git a/app/screens/InfoModal/translations/fr.json b/app/screens/InfoModal/translations/fr.json
new file mode 100644
index 00000000..8fbc4d3a
--- /dev/null
+++ b/app/screens/InfoModal/translations/fr.json
@@ -0,0 +1,3 @@
+{
+  "INFO_MODAL_SCREEN_METHODOLOGY": "Methodologie"
+}
diff --git a/app/screens/Methodology/translations/index.ts b/app/screens/InfoModal/translations/index.ts
similarity index 89%
rename from app/screens/Methodology/translations/index.ts
rename to app/screens/InfoModal/translations/index.ts
index bddee47c..7d86e4fb 100644
--- a/app/screens/Methodology/translations/index.ts
+++ b/app/screens/InfoModal/translations/index.ts
@@ -9,7 +9,7 @@ import ru from "./ru.json";
 import pl from "./pl.json";

 interface TranslationKeys {
-  METHODOLOGY_SCREEN_TITLE: string;
+  INFO_MODAL_SCREEN_METHODOLOGY: string;
 }

 export { en, fr, de, sv, es, pt, da, ru, pl, TranslationKeys };
diff --git a/app/screens/InfoModal/translations/pl.json b/app/screens/InfoModal/translations/pl.json
new file mode 100644
index 00000000..4ad7ae1e
--- /dev/null
+++ b/app/screens/InfoModal/translations/pl.json
@@ -0,0 +1,3 @@
+{
+  "INFO_MODAL_SCREEN_METHODOLOGY": "Methodology"
+}
diff --git a/app/screens/InfoModal/translations/pt.json b/app/screens/InfoModal/translations/pt.json
new file mode 100644
index 00000000..4ad7ae1e
--- /dev/null
+++ b/app/screens/InfoModal/translations/pt.json
@@ -0,0 +1,3 @@
+{
+  "INFO_MODAL_SCREEN_METHODOLOGY": "Methodology"
+}
diff --git a/app/screens/InfoModal/translations/ru.json b/app/screens/InfoModal/translations/ru.json
new file mode 100644
index 00000000..4ad7ae1e
--- /dev/null
+++ b/app/screens/InfoModal/translations/ru.json
@@ -0,0 +1,3 @@
+{
+  "INFO_MODAL_SCREEN_METHODOLOGY": "Methodology"
+}
diff --git a/app/screens/InfoModal/translations/sv.json b/app/screens/InfoModal/translations/sv.json
new file mode 100644
index 00000000..4ad7ae1e
--- /dev/null
+++ b/app/screens/InfoModal/translations/sv.json
@@ -0,0 +1,3 @@
+{
+  "INFO_MODAL_SCREEN_METHODOLOGY": "Methodology"
+}
diff --git a/app/screens/Methodology/MethodologyScreen.tsx b/app/screens/Methodology/MethodologyScreen.tsx
deleted file mode 100644
index d82d8a74..00000000
--- a/app/screens/Methodology/MethodologyScreen.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import { ScrollView } from "react-native";
-import HTML from "react-native-render-html";
-
-import { ui } from "../../utils";
-
-import styles from "./MethodologyScreen.styles";
-import navigationOptions from "./Methodology.navigationOptions";
-import methodology from "../../../assets/methodology/methodology.json";
-
-const MethodologyScreen = () => {
-  return (
-    <ScrollView style={styles.container}>
-      <HTML
-        html={methodology[0].body}
-        onLinkPress={ui.onHTMLBodyLinkPress}
-        baseFontStyle={{ fontSize: 18 }}
-      />
-    </ScrollView>
-  );
-};
-
-MethodologyScreen.navigationOptions = navigationOptions;
-
-export default MethodologyScreen;
diff --git a/app/screens/Methodology/index.ts b/app/screens/Methodology/index.ts
deleted file mode 100644
index 53566fdf..00000000
--- a/app/screens/Methodology/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { default } from "./MethodologyScreen";
diff --git a/app/screens/Methodology/translations/da.json b/app/screens/Methodology/translations/da.json
deleted file mode 100644
index cc58c1e1..00000000
--- a/app/screens/Methodology/translations/da.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "METHODOLOGY_SCREEN_TITLE": "Methodology"
-}
diff --git a/app/screens/Methodology/translations/de.json b/app/screens/Methodology/translations/de.json
deleted file mode 100644
index cc58c1e1..00000000
--- a/app/screens/Methodology/translations/de.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "METHODOLOGY_SCREEN_TITLE": "Methodology"
-}
diff --git a/app/screens/Methodology/translations/en.json b/app/screens/Methodology/translations/en.json
deleted file mode 100644
index cc58c1e1..00000000
--- a/app/screens/Methodology/translations/en.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "METHODOLOGY_SCREEN_TITLE": "Methodology"
-}
diff --git a/app/screens/Methodology/translations/es.json b/app/screens/Methodology/translations/es.json
deleted file mode 100644
index cc58c1e1..00000000
--- a/app/screens/Methodology/translations/es.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "METHODOLOGY_SCREEN_TITLE": "Methodology"
-}
diff --git a/app/screens/Methodology/translations/fr.json b/app/screens/Methodology/translations/fr.json
deleted file mode 100644
index b48353a0..00000000
--- a/app/screens/Methodology/translations/fr.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "METHODOLOGY_SCREEN_TITLE": "Methodologie"
-}
diff --git a/app/screens/Methodology/translations/pl.json b/app/screens/Methodology/translations/pl.json
deleted file mode 100644
index cc58c1e1..00000000
--- a/app/screens/Methodology/translations/pl.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "METHODOLOGY_SCREEN_TITLE": "Methodology"
-}
diff --git a/app/screens/Methodology/translations/pt.json b/app/screens/Methodology/translations/pt.json
deleted file mode 100644
index cc58c1e1..00000000
--- a/app/screens/Methodology/translations/pt.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "METHODOLOGY_SCREEN_TITLE": "Methodology"
-}
diff --git a/app/screens/Methodology/translations/ru.json b/app/screens/Methodology/translations/ru.json
deleted file mode 100644
index cc58c1e1..00000000
--- a/app/screens/Methodology/translations/ru.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "METHODOLOGY_SCREEN_TITLE": "Methodology"
-}
diff --git a/app/screens/Methodology/translations/sv.json b/app/screens/Methodology/translations/sv.json
deleted file mode 100644
index cc58c1e1..00000000
--- a/app/screens/Methodology/translations/sv.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "METHODOLOGY_SCREEN_TITLE": "Methodology"
-}
diff --git a/app/utils/translations/resources.ts b/app/utils/translations/resources.ts
index f32c7f5e..0ca70938 100644
--- a/app/utils/translations/resources.ts
+++ b/app/utils/translations/resources.ts
@@ -5,7 +5,7 @@ import * as Emissions from "../../screens/Emissions/translations";
 import * as Settings from "../../screens/Settings/translations";
 import * as MonthlyBudget from "../../screens/MonthlyBudget/translations";
 import * as ComingSoon from "../../screens/ComingSoon/translations";
-import * as Methodology from "../../screens/Methodology/translations";
+import * as InfoModal from "../../screens/InfoModal/translations";
 import * as AddEmission from "../../screens/AddEmission/translations";
 import * as EmissionItem from "../../screens/EmissionItem/translations";
 import * as Intro from "../../screens/Intro/translations";
@@ -30,7 +30,7 @@ const en = {
   ...Emissions.en,
   ...Settings.en,
   ...ComingSoon.en,
-  ...Methodology.en,
+  ...InfoModal.en,
   ...AddEmission.en,
   ...EmissionItem.en,
   ...Intro.en,
@@ -49,7 +49,7 @@ const de = {
   ...Emissions.de,
   ...Settings.de,
   ...ComingSoon.de,
-  ...Methodology.de,
+  ...InfoModal.de,
   ...AddEmission.de,
   ...EmissionItem.de,
   ...Intro.de,
@@ -68,7 +68,7 @@ const fr = {
   ...Emissions.fr,
   ...Settings.fr,
   ...ComingSoon.fr,
-  ...Methodology.fr,
+  ...InfoModal.fr,
   ...AddEmission.fr,
   ...EmissionItem.fr,
   ...Intro.fr,
@@ -87,7 +87,7 @@ const sv = {
   ...Emissions.sv,
   ...Settings.sv,
   ...ComingSoon.sv,
-  ...Methodology.sv,
+  ...InfoModal.sv,
   ...AddEmission.sv,
   ...EmissionItem.sv,
   ...Intro.sv,
@@ -105,7 +105,7 @@ const pt = {
   ...Budget.pt,
   ...Emissions.pt,
   ...Settings.pt,
-  ...Methodology.pt,
+  ...InfoModal.pt,
   ...AddEmission.pt,
   ...EmissionItem.pt,
   ...Intro.pt,
@@ -123,7 +123,7 @@ const es = {
   ...Budget.es,
   ...Emissions.es,
   ...Settings.es,
-  ...Methodology.es,
+  ...InfoModal.es,
   ...AddEmission.es,
   ...EmissionItem.es,
   ...Intro.es,
@@ -141,7 +141,7 @@ const ru = {
   ...Budget.ru,
   ...Emissions.ru,
   ...Settings.ru,
-  ...Methodology.ru,
+  ...InfoModal.ru,
   ...AddEmission.ru,
   ...EmissionItem.ru,
   ...Intro.ru,
@@ -159,7 +159,7 @@ const pl = {
   ...Budget.pl,
   ...Emissions.pl,
   ...Settings.pl,
-  ...Methodology.pl,
+  ...InfoModal.pl,
   ...AddEmission.pl,
   ...EmissionItem.pl,
   ...Intro.pl,
@@ -177,7 +177,7 @@ const da = {
   ...Budget.da,
   ...Emissions.da,
   ...Settings.da,
-  ...Methodology.da,
+  ...InfoModal.da,
   ...AddEmission.da,
   ...EmissionItem.da,
   ...Intro.da,
@@ -194,7 +194,7 @@ export interface TranslationKeys
     Budget.TranslationKeys,
     Emissions.TranslationKeys,
     ComingSoon.TranslationKeys,
-    Methodology.TranslationKeys,
+    InfoModal.TranslationKeys,
     AddEmission.TranslationKeys,
     EmissionItem.TranslationKeys,
     Settings.TranslationKeys,

diff --git a/app/components/InfoButton/__tests__/EmissionInfoButton.test.tsx b/app/components/InfoButton/__tests__/EmissionInfoButton.test.tsx
new file mode 100644
index 00000000..54b8333b
--- /dev/null
+++ b/app/components/InfoButton/__tests__/EmissionInfoButton.test.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { create } from "react-test-renderer";
+
+import InfoButton from "..";
+
+it("renders correctly", () => {
+  const tree = create(<InfoButton />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/app/components/InfoButton/__tests__/__snapshots__/EmissionInfoButton.test.tsx.snap b/app/components/InfoButton/__tests__/__snapshots__/EmissionInfoButton.test.tsx.snap
new file mode 100644
index 00000000..04ad94ea
--- /dev/null
+++ b/app/components/InfoButton/__tests__/__snapshots__/EmissionInfoButton.test.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Ionicons
+  name="md-information-circle"
+  onPress={[Function]}
+  size={26}
+  style={
+    Object {
+      "color": "#4BB377",
+      "marginRight": 14,
+    }
+  }
+/>
+`;
diff --git a/app/screens/InfoModal/__test__/InfoModalScreen.test.tsx b/app/screens/InfoModal/__test__/InfoModalScreen.test.tsx
new file mode 100644
index 00000000..c41af3af
--- /dev/null
+++ b/app/screens/InfoModal/__test__/InfoModalScreen.test.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { create } from "react-test-renderer";
+
+import InfoModalScreen from "../InfoModalScreen";
+
+it("InfoModalScreen renders correctly", () => {
+  const tree = create(<InfoModalScreen route={null} />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/app/screens/Methodology/__test__/__snapshots__/MethodologyScreen.test.tsx.snap b/app/screens/InfoModal/__test__/__snapshots__/InfoModalScreen.test.tsx.snap
similarity index 99%
rename from app/screens/Methodology/__test__/__snapshots__/MethodologyScreen.test.tsx.snap
rename to app/screens/InfoModal/__test__/__snapshots__/InfoModalScreen.test.tsx.snap
index b7ea697e..a8b2f940 100644
--- a/app/screens/Methodology/__test__/__snapshots__/MethodologyScreen.test.tsx.snap
+++ b/app/screens/InfoModal/__test__/__snapshots__/InfoModalScreen.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`MethodologyScreen renders correctly 1`] = `
+exports[`InfoModalScreen renders correctly 1`] = `
 <RCTScrollView
   style={
     Object {
diff --git a/app/screens/Methodology/__test__/MethodologyScreen.test.tsx b/app/screens/Methodology/__test__/MethodologyScreen.test.tsx
deleted file mode 100644
index 4f20a9e0..00000000
--- a/app/screens/Methodology/__test__/MethodologyScreen.test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-import { create } from "react-test-renderer";
-
-import MethodologyScreen from "../MethodologyScreen";
-
-it("MethodologyScreen renders correctly", () => {
-  const tree = create(<MethodologyScreen />).toJSON();
-  expect(tree).toMatchSnapshot();
-});