Add consent checkbox to submit-report screen

raethlein · raethlein · commit 7f8634700628 · 2020-04-03T11:07:37.000+02:00
diff --git a/app/mobile/screens/steps/ReportSubmitStep.js b/app/mobile/screens/steps/ReportSubmitStep.js
@@ -2,11 +2,11 @@ import React, {useState} from 'react';
 
 import PropTypes from 'prop-types';
 
-import {useTranslation} from 'react-i18next';
+import {useTranslation, Trans} from 'react-i18next';
 
-import {StyleSheet, View, ScrollView} from 'react-native';
+import {StyleSheet, View, ScrollView, Linking} from 'react-native';
 
-import {List, Avatar, Button, Card, Title, Paragraph} from 'react-native-paper';
+import {Checkbox, List, Avatar, Button, Card, Title, Paragraph, Text} from 'react-native-paper';
 
 import StepContainer from './StepContainer';
 
@@ -19,11 +19,18 @@ import InfectionRiskCard from '../../components/InfectionRiskCard';
 const styles = StyleSheet.create({
     actionButton: ACTION_BUTTON,
     actionButtonLabel: ACTION_BUTTON_LABEL,
+    consentContainer: {
+        flexDirection: "row",
+        marginTop: 8,
+        marginBottom: 8,
+        width: "90%"
+    }
 });
 
 export default function ReportSubmitStep(props) {
     const {t} = useTranslation();
     const [isSubmitting, setIsSubmitting] = useState(false);
+    const [isConsentGiven, setConsentGiven] = useState(false);
 
     const getStateToBeSaved = () => {
         const caseReport = {...props.caseReport};
@@ -59,9 +66,21 @@ export default function ReportSubmitStep(props) {
                     <ReportSummaryCard caseReport={props.caseReport} />
                 </ScrollView>
             </View>
+            <View style={styles.consentContainer}>
+                <Checkbox.Android
+                    status={isConsentGiven ? 'checked' : 'unchecked'}
+                    onPress={() => setConsentGiven(!isConsentGiven)}
+                />
+                <Text>
+                    <Trans i18nKey="report.submitReport.consent">
+                        By submitting the report, you accept that your provided information are sent to the Cotect servers for further processing. You can read more in our <Text style={{color: 'blue'}} onPress={() => Linking.openURL('http://google.com')}>privacy policy</Text>.
+                    </Trans>
+                </Text>
+            </View>
+
             <Button
                 mode="outlined"
-                disabled={isSubmitting}
+                disabled={!isConsentGiven || isSubmitting}
                 loading={isSubmitting}
                 style={styles.actionButton}
                 labelStyle={styles.actionButtonLabel}
diff --git a/app/mobile/translations/en.json b/app/mobile/translations/en.json
@@ -174,7 +174,8 @@
                 "exitAction": "Exit",
                 "successText": "We submitted the report! Thanks for your help fighting CoVid!",
                 "text": "We are submitting the report…",
-                "title": "Report Submission"
+                "title": "Report Submission",
+                "consent": "By submitting the report, you accept that your provided information are sent to the Cotect servers for further processing. You can read more in our <1>privacy policy</1>."
             },
             "symptoms": {
                 "title": "Do you have any symptoms?",
