**EPIC** Whistleblow Module

package.json

@@ -70,6 +70,7 @@
     "expo-camera": "~15.0.16",
     "expo-clipboard": "~6.0.3",
     "expo-constants": "~16.0.2",
+    "expo-crypto": "~12.4.1",
     "expo-dev-client": "~4.0.28",
     "expo-device": "~6.0.2",
     "expo-document-picker": "~12.0.2",
@@ -177,4 +178,4 @@
     "node-fetch": "~2.6.7",
     "ws": "~8.17.1"
   }
-}
+}

src/SettingsProvider.js

@@ -1,19 +1,22 @@
 import PropTypes from 'prop-types';
 import React, { createContext, useState } from 'react';
 
-export const SettingsContext = createContext({
+export const initialContext = {
   globalSettings: {
     deprecated: {},
     filter: {},
     hdvt: {},
     navigation: 'tab',
     sections: {},
     settings: {},
+    whistleblow: {},
     widgets: []
   },
   listTypesSettings: {},
   locationSettings: {}
-});
+};
+
+export const SettingsContext = createContext(initialContext);
 
 export const SettingsProvider = ({
   initialGlobalSettings,

src/components/index.js

@@ -14,6 +14,7 @@ export * from './SUE';
 export * from './volunteer';
 export * from './wasteCalendar';
 export * from './weather';
+export * from './whistleblow';
 export * from './widgets';
 export * from './vouchers';
 

src/components/whistleblow/WhistleblowReportCode.tsx

@@ -0,0 +1,105 @@
+import { StackNavigationProp } from '@react-navigation/stack';
+import React, { useContext, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Keyboard, StyleSheet } from 'react-native';
+
+import { SettingsContext } from '../../SettingsProvider';
+import { Button, Input, LoadingModal, RegularText, Touchable, Wrapper } from '../../components';
+import { colors, texts } from '../../config';
+import { Globaleaks } from '../../helpers';
+import { Report } from '../../screens';
+
+type WhistleblowCodeData = {
+  reportCode: string;
+};
+
+export const WhistleblowReportCode = ({
+  navigation,
+  setReport
+}: {
+  navigation: StackNavigationProp<any>;
+  setReport: React.Dispatch<React.SetStateAction<Report | undefined>>;
+}) => {
+  const { globalSettings } = useContext(SettingsContext);
+  const { whistleblow = {} } = globalSettings;
+  const { globaleaks: globaleaksConfig = {} } = whistleblow;
+  const { endpoint } = globaleaksConfig;
+
+  const [isLoading, setIsLoading] = useState(false);
+  const {
+    control,
+    formState: { errors },
+    handleSubmit
+  } = useForm({
+    defaultValues: {
+      reportCode: ''
+    }
+  });
+  const globaleaks = new Globaleaks(endpoint);
+
+  const onSubmit = async (whistleblowCodeData: WhistleblowCodeData) => {
+    setIsLoading(true);
+    Keyboard.dismiss();
+
+    try {
+      const report = await globaleaks.show(whistleblowCodeData.reportCode);
+      setReport(report);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Wrapper style={styles.noPaddingTop}>
+        <Input
+          name="reportCode"
+          label={`${texts.whistleblow.inputCode}`}
+          placeholder={texts.whistleblow.inputCode}
+          autoCapitalize="none"
+          validate
+          rules={{
+            required: `${texts.whistleblow.inputCode} ${texts.whistleblow.inputErrorText}`
+          }}
+          errorMessage={errors.reportCode && errors.reportCode.message}
+          control={control}
+          disabled={isLoading}
+        />
+      </Wrapper>
+
+      <Wrapper style={styles.noPaddingTop}>
+        <Button
+          onPress={handleSubmit(onSubmit)}
+          title={texts.whistleblow.sendCode}
+          disabled={isLoading}
+        />
+
+        <Touchable onPress={() => (isLoading ? null : navigation.goBack())}>
+          <RegularText primary center>
+            {texts.whistleblow.abort}
+          </RegularText>
+        </Touchable>
+      </Wrapper>
+
+      <LoadingModal loading={isLoading} />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  noPaddingTop: {
+    paddingTop: 0
+  },
+  checkboxContainerStyle: {
+    backgroundColor: colors.surface,
+    borderWidth: 0,
+    marginLeft: 0,
+    marginRight: 0
+  },
+  checkboxTextStyle: {
+    color: colors.darkText,
+    fontWeight: 'normal'
+  }
+});

src/components/whistleblow/WhistleblowReportForm.tsx

@@ -0,0 +1,187 @@
+import { StackNavigationProp } from '@react-navigation/stack';
+import React, { useContext, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Keyboard, StyleSheet } from 'react-native';
+
+import { Button, Input, LoadingModal, RegularText, Touchable, Wrapper } from '../../components';
+import { colors, consts, texts } from '../../config';
+import { Globaleaks } from '../../helpers';
+import { SettingsContext } from '../../SettingsProvider';
+
+const { EMAIL_REGEX } = consts;
+
+type WhistleblowReportData = {
+  body: string;
+  email: string;
+  file: string;
+  title: string;
+};
+
+export const WhistleblowReportForm = ({
+  navigation,
+  setReportCode
+}: {
+  navigation: StackNavigationProp<any>;
+  setReportCode: React.Dispatch<React.SetStateAction<string>>;
+}) => {
+  const { globalSettings } = useContext(SettingsContext);
+  const { whistleblow = {} } = globalSettings;
+  const { globaleaks: globaleaksConfig = {} } = whistleblow;
+  const { endpoint, form: formConfig = {} } = globaleaksConfig;
+  const { contextId, answers: answersConfig = {}, receivers, identityProvided, score } = formConfig;
+
+  const [isLoading, setIsLoading] = useState(false);
+  const {
+    control,
+    formState: { errors },
+    handleSubmit
+  } = useForm({
+    defaultValues: {
+      body: '',
+      email: '',
+      // file: '',
+      title: ''
+    }
+  });
+  const globaleaks = new Globaleaks(endpoint);
+
+  const onSubmit = async (whistleblowReportData: WhistleblowReportData) => {
+    setIsLoading(true);
+    Keyboard.dismiss();
+
+    try {
+      const body = {
+        context_id: contextId,
+        answers: {
+          [answersConfig.email.id]: [
+            {
+              required_status: answersConfig.email.reportStatus,
+              value: whistleblowReportData.email
+            }
+          ],
+          [answersConfig.title.id]: [
+            {
+              required_status: answersConfig.title.reportStatus,
+              value: whistleblowReportData.title
+            }
+          ],
+          [answersConfig.body.id]: [
+            {
+              required_status: answersConfig.body.reportStatus,
+              value: whistleblowReportData.body
+            }
+          ]
+        },
+        identity_provided: identityProvided,
+        receivers,
+        score
+      };
+
+      // Globaleaks flow
+      const receipt = await globaleaks.report(body);
+      setReportCode(receipt);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Wrapper style={styles.noPaddingTop}>
+        <Input
+          name="email"
+          label={`${texts.whistleblow.inputMail}`}
+          placeholder={texts.whistleblow.inputMail}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          validate
+          rules={{
+            pattern: {
+              value: EMAIL_REGEX,
+              message: `${texts.whistleblow.inputMail}${texts.whistleblow.invalidMail}`
+            }
+          }}
+          errorMessage={errors.email && errors.email.message}
+          control={control}
+          disabled={isLoading}
+        />
+      </Wrapper>
+
+      <Wrapper style={styles.noPaddingTop}>
+        <Input
+          name="title"
+          label={`${texts.whistleblow.inputTitle} *`}
+          placeholder={texts.whistleblow.inputTitle}
+          validate
+          rules={{
+            required: `${texts.whistleblow.inputTitle} ${texts.whistleblow.inputErrorText}`
+          }}
+          errorMessage={errors.title && errors.title.message}
+          control={control}
+          disabled={isLoading}
+        />
+      </Wrapper>
+
+      <Wrapper style={styles.noPaddingTop}>
+        <Input
+          name="body"
+          label={`${texts.whistleblow.inputDescription} *`}
+          placeholder={texts.whistleblow.inputDescription}
+          validate
+          multiline
+          rules={{
+            required: `${texts.whistleblow.inputDescription} ${texts.whistleblow.inputErrorText}`
+          }}
+          errorMessage={errors.body && errors.body.message}
+          control={control}
+          disabled={isLoading}
+        />
+      </Wrapper>
+
+      {/* <Wrapper style={styles.noPaddingTop}>
+        <Input
+          name="file"
+          label={texts.whistleblow.inputFile}
+          placeholder={texts.whistleblow.inputFile}
+          validate
+          errorMessage={errors.file && errors.file.message}
+          control={control}
+        />
+      </Wrapper> */}
+
+      <Wrapper style={styles.noPaddingTop}>
+        <Button
+          onPress={handleSubmit(onSubmit)}
+          title={texts.whistleblow.send}
+          disabled={isLoading}
+        />
+
+        <Touchable onPress={() => (isLoading ? null : navigation.goBack())}>
+          <RegularText primary center>
+            {texts.whistleblow.abort}
+          </RegularText>
+        </Touchable>
+      </Wrapper>
+
+      <LoadingModal loading={isLoading} />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  noPaddingTop: {
+    paddingTop: 0
+  },
+  checkboxContainerStyle: {
+    backgroundColor: colors.surface,
+    borderWidth: 0,
+    marginLeft: 0,
+    marginRight: 0
+  },
+  checkboxTextStyle: {
+    color: colors.darkText,
+    fontWeight: 'normal'
+  }
+});

src/components/whistleblow/index.ts

@@ -0,0 +1,2 @@
+export * from './WhistleblowReportCode';
+export * from './WhistleblowReportForm';

src/config/Icon.tsx

@@ -166,6 +166,7 @@ export const Icon = {
   CloseCircleOutline: (props: IconProps) => <NamedIcon name="square-letter-x" {...props} />,
   Company: (props: IconProps) => <NamedIcon name="briefcase" {...props} />,
   ConstructionSite: (props: IconProps) => <SvgIcon xml={constructionSite} {...props} />,
+  Copy: (props: IconProps) => <NamedIcon name="copy" {...props} />,
   Document: (props: IconProps) => <NamedIcon name="script" {...props} />,
   DrawerMenu: (props: IconProps) => <SvgIcon xml={drawerMenu} {...props} />,
   EditSetting: (props: IconProps) => <SvgIcon xml={editSetting} {...props} />,

src/config/navigation/defaultStackConfig.tsx

@@ -74,7 +74,9 @@ import {
   WasteReminderScreen,
   WeatherScreen,
   WebScreen,
-  getTilesScreen
+  getTilesScreen,
+  WhistleblowCodeScreen,
+  WhistleblowFormScreen
 } from '../../screens';
 import {
   DetailScreen as BBBUSDetailScreen,
@@ -503,6 +505,14 @@ export const defaultStackConfig = ({
       routeName: ScreenName.Web,
       screenComponent: WebScreen,
       screenOptions: getScreenOptions({ withDrawer: isDrawer, withShare: true })
+    },
+    {
+      routeName: ScreenName.WhistleblowCode,
+      screenComponent: WhistleblowCodeScreen
+    },
+    {
+      routeName: ScreenName.WhistleblowForm,
+      screenComponent: WhistleblowFormScreen
     }
   ]
 });