2861: Add data privacy agreement for feedback help form

native/package.json

@@ -55,6 +55,7 @@
     "@react-native-community/netinfo": "^11.3.2",
     "@react-native-firebase/app": "^19.1.2",
     "@react-native-firebase/messaging": "^19.1.2",
+    "@react-native-community/checkbox": "0.5",
     "@react-navigation/elements": "^1.3.31",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/stack": "^6.4.1",

native/src/components/Feedback.tsx

@@ -1,18 +1,20 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Text } from 'react-native'
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
 import styled from 'styled-components/native'
 
 import buildConfig from '../constants/buildConfig'
 import useNavigate from '../hooks/useNavigate'
+import useSnackbar from '../hooks/useSnackbar'
 import Caption from './Caption'
 import FeedbackButtons from './FeedbackButtons'
 import { SendingStatusType } from './FeedbackContainer'
 import HorizontalLine from './HorizontalLine'
 import LoadingSpinner from './LoadingSpinner'
 import Note from './Note'
 import NothingFound from './NothingFound'
+import PrivacyCheckbox from './PrivacyCheckbox'
 import InputSection from './base/InputSection'
 import TextButton from './base/TextButton'
 
@@ -59,55 +61,62 @@
   const navigation = useNavigate().navigation
 
   const isSearchFeedback = searchTerm !== undefined
+  const [privacyCheckedFilter, setPrivacyCheckedFilter] = useState(false)
+  const showSnackbar = useSnackbar()
   const submitDisabled = isPositiveFeedback === null && comment.trim().length === 0 && !searchTerm
 
   if (sendingStatus === 'sending') {
     return <LoadingSpinner />
   }
 
   if (sendingStatus === 'successful') {
     return (
       <Wrapper>
         <Caption title={t('thanksHeadline')} />
         <Text>{t('thanksMessage')}</Text>
         <StyledButton onPress={navigation.goBack} text={t('common:close')} />
       </Wrapper>
     )
   }
 
   return (
     <KeyboardAwareScrollView>
       <Wrapper>
         {isSearchFeedback ? (
           <>
             <NothingFound />
             <HorizontalLine />
             <InputSection title={t('searchTermDescription')} value={searchTerm} onChange={setSearchTerm} />
           </>
         ) : (
           <>
             <Caption title={t('headline')} />
             <FeedbackButtons isPositiveFeedback={isPositiveFeedback} setIsPositiveFeedback={setIsPositiveFeedback} />
           </>
         )}
         <InputSection
           title={t('commentHeadline')}
           description={t('commentDescription', { appName: buildConfig().appName })}
           value={comment}
           onChange={onCommentChanged}
           multiline
           showOptional
         />
         <InputSection
           title={t('contactMailAddress')}
           value={contactMail}
           onChange={onFeedbackContactMailChanged}
           keyboardType='email-address'
           showOptional
         />
         {sendingStatus === 'failed' && <Description>{t('failedSendingFeedback')}</Description>}
+        <PrivacyCheckbox
+          checked={privacyCheckedFilter}
+          setChecked={setPrivacyCheckedFilter}
+          showSnackbar={showSnackbar}
+        />
         {!isSearchFeedback && submitDisabled && <Note text={t('note')} />}
-        <StyledButton disabled={submitDisabled} onPress={onSubmit} text={t('send')} />
+        <StyledButton disabled={submitDisabled || !privacyCheckedFilter} onPress={onSubmit} text={t('send')} />
       </Wrapper>
     </KeyboardAwareScrollView>
   )

native/src/components/PrivacyCheckbox.tsx

@@ -0,0 +1,54 @@
+import React, { ReactElement } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import styled from 'styled-components/native'
+
+import openExternalUrl from '../utils/openExternalUrl'
+import Link from './Link'
+import { SnackbarType } from './SnackbarContainer'
+import Checkbox from './base/Checkbox'
+
+const FlexContainer = styled.Pressable`
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  flex: 1;
+`
+
+const StyledLink = styled(Link)`
+  color: ${props => props.theme.colors.linkColor};
+  text-decoration: underline solid ${props => props.theme.colors.linkColor};
+  align-self: center;
+`
+
+const StyledLabel = styled.Text`
+  color: ${props => props.theme.colors.textColor};
+  font-family: ${props => props.theme.fonts.native.decorativeFontRegular};
+  padding: 4px;
+  cursor: pointer;
+`
+
+type PrivacyCheckboxProps = {
+  checked: boolean
+  setChecked: (checked: boolean) => void
+  showSnackbar: (snackbar: SnackbarType) => void
+}
+
+const PrivacyCheckbox = ({ checked, setChecked, showSnackbar }: PrivacyCheckboxProps): ReactElement => {
+  const { t } = useTranslation('common')
+  const link = 'https://integreat-app.de/datenschutz/'
+  return (
+    <FlexContainer onPress={() => setChecked(!checked)}>
+      <StyledLabel>
+        <Trans i18nKey='common:privacyAgreement'>
+          This gets replaced
+          <StyledLink url={link} onPress={() => openExternalUrl(link, showSnackbar)} text={t('privacyAgreementLink')}>
+            by react-i18next
+          </StyledLink>
+        </Trans>
+      </StyledLabel>
+      <Checkbox checked={checked} setChecked={setChecked} />
+    </FlexContainer>
+  )
+}
+
+export default PrivacyCheckbox

native/src/components/base/Checkbox.tsx

@@ -0,0 +1,33 @@
+import CheckBox from '@react-native-community/checkbox'
+import React, { ReactElement } from 'react'
+import styled from 'styled-components/native'
+
+const StyledCheckbox = styled(CheckBox)`
+  cursor: pointer;
+  accent-color: ${props => props.theme.colors.themeColor};
+  width: 16px;
+  height: 16px;
+  align-self: end;
+`
+
+const FlexEnd = styled.View`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  right: 12px;
+  justify-content: flex-end;
+`
+
+type CheckboxProps = {
+  checked: boolean
+  setChecked: (checked: boolean) => void
+}
+
+const Checkbox = ({ checked, setChecked }: CheckboxProps): ReactElement => (
+  <FlexEnd>
+    {/* https://github.com/react-native-checkbox/react-native-checkbox/blob/develop/README.md */}
+    <StyledCheckbox disabled={false} value={checked} onValueChange={() => setChecked(!checked)} />
+  </FlexEnd>
+)
+
+export default Checkbox

translations/translations.json

@@ -1090,7 +1090,9 @@
       "showLess": "Weniger anzeigen",
       "optional": "optional",
       "back": "Zurück",
-      "ok": "Ok"
+      "ok": "Ok",
+      "privacyAgreement": "Ich habe die <1>Datenschutzerklärung</1> gelesen und stimme der Verarbeitung und Speicherung meiner Daten zu.",
+      "privacyAgreementLink": "Datenschutzerklärung"
     },
     "am": {
       "copied": "ተቀድቷል",
@@ -1202,7 +1204,9 @@
       "showLess": "Show less",
       "optional": "optional",
       "back": "Back",
-      "ok": "Ok"
+      "ok": "Ok",
+      "privacyAgreement": "I have read the <1>privacy policy</1> and agree to the processing and storage of my data.",
+      "privacyAgreementLink": "privacy policy"
     },
     "es": {
       "copied": "Copiado",

web/src/components/Feedback.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -8,6 +8,7 @@
 import FeedbackButtons from './FeedbackButtons'
 import { SendingStatusType } from './FeedbackContainer'
 import Note from './Note'
+import PrivacyCheckbox from './PrivacyCheckbox'
 import Input from './base/Input'
 import InputSection from './base/InputSection'
 import TextButton from './base/TextButton'
@@ -73,45 +74,47 @@
 
   const isSearchFeedback = searchTerm !== undefined
   const commentTitle = isSearchFeedback ? 'wantedInformation' : 'commentHeadline'
+  const [privacyCheckedFilter, setPrivacyCheckedFilter] = useState(false)
   const sendFeedbackDisabled = isPositiveFeedback === null && comment.trim().length === 0 && !searchTerm
 
   if (sendingStatus === 'successful') {
     return (
       <Container>
         <div>{t('thanksMessage')}</div>
         {!!closeFeedback && !isSearchFeedback && <TextButton onClick={closeFeedback} text={t('common:close')} />}
       </Container>
     )
   }
 
   return (
     <Container $fullWidth={isSearchFeedback}>
       {isSearchFeedback ? (
         <>
           {noResults && <Failure errorMessage='search:nothingFound' />}
           <InputSection id='searchTerm' title={t('searchTermDescription')}>
             <Input id='searchTerm' value={searchTerm} onChange={setSearchTerm} />
           </InputSection>
         </>
       ) : (
         <FeedbackButtons isPositive={isPositiveFeedback} onRatingChange={onFeedbackChanged} />
       )}
 
       <InputSection
         id='comment'
         title={t(commentTitle)}
         description={t('commentDescription', { appName: buildConfig().appName })}
         showOptional>
         <Input id='comment' value={comment} onChange={onCommentChanged} multiline />
       </InputSection>
 
       <InputSection id='email' title={t('contactMailAddress')} showOptional>
         <Input id='email' value={contactMail} onChange={onContactMailChanged} />
       </InputSection>
 
       {!isSearchFeedback && sendFeedbackDisabled && <Note text={t('note')} />}
       {sendingStatus === 'failed' && <ErrorSendingStatus role='alert'>{t('failedSendingFeedback')}</ErrorSendingStatus>}
-      <StyledTextButton disabled={sendFeedbackDisabled} onClick={onSubmit} text={t('send')} />
+      <PrivacyCheckbox checked={privacyCheckedFilter} setChecked={setPrivacyCheckedFilter} id='privacyAgreement' />
+      <StyledTextButton disabled={sendFeedbackDisabled || !privacyCheckedFilter} onClick={onSubmit} text={t('send')} />
     </Container>
   )
 }

web/src/components/PrivacyCheckbox.tsx

@@ -0,0 +1,30 @@
+import React, { ReactElement } from 'react'
+import { Trans } from 'react-i18next'
+import { Link } from 'react-router-dom'
+
+import Checkbox from './base/Checkbox'
+
+type PrivacyCheckboxProps = {
+  checked: boolean
+  setChecked: (checked: boolean) => void
+  id: string
+}
+
+const PrivacyCheckbox = ({ checked, setChecked, id }: PrivacyCheckboxProps): ReactElement => {
+  const link = 'https://integreat-app.de/datenschutz/'
+  return (
+    <Checkbox
+      checked={checked}
+      setChecked={setChecked}
+      label={
+        <Trans i18nKey='common:privacyAgreement'>
+          This gets replaced
+          <Link to={link}>by react-i18next</Link>
+        </Trans>
+      }
+      id={id}
+    />
+  )
+}
+
+export default PrivacyCheckbox

web/src/components/base/Checkbox.tsx

@@ -31,15 +31,15 @@ const FlexEnd = styled.div`
 type CheckboxProps = {
   checked: boolean
   setChecked: (checked: boolean) => void
-  label: string
+  label: string | ReactElement
   id: string
 }
 
 const Checkbox = ({ checked, setChecked, label, id }: CheckboxProps): ReactElement => (
   <Container>
     <StyledLabel htmlFor={id}>{label}</StyledLabel>
     <FlexEnd>
-      <StyledCheckbox type='checkbox' id={id} value={label} checked={checked} onChange={() => setChecked(!checked)} />
+      <StyledCheckbox type='checkbox' id={id} checked={checked} onChange={() => setChecked(!checked)} />
     </FlexEnd>
   </Container>
 )

yarn.lock

@@ -2614,6 +2614,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-clipboard/clipboard/-/clipboard-1.14.1.tgz#835f82fc86881a0808a8405f2576617bb5383554"
   integrity sha512-SM3el0A28SwoeJljVNhF217o0nI4E7RfalLmuRQcT1/7tGcxUjgFa3jyrEndYUct8/uxxK5EUNGUu1YEDqzxqw==
 
+"@react-native-community/[email protected]":
+  version "0.5.17"
+  resolved "https://registry.yarnpkg.com/@react-native-community/checkbox/-/checkbox-0.5.17.tgz#80dd335ca5c61ac2ca4525a21d8fef3f7a021ef7"
+  integrity sha512-ZZx/eOH3SIxBg+hvA2zRd7lX5zPQEWcZU8C8Dn7WLdpJkiTkPmIUDFHWrmzxCnwZcyoD+BIt6gUZPKGGb9WmeQ==
+
 "@react-native-community/[email protected]":
   version "12.3.6"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-12.3.6.tgz#e8a7910bebc97266fd5068649013a03958021fc4"