2861: Add data privacy agreement for feedback help form

[simomps]

Short description

Add a checkbox in the feedback form with a label about "if you read the privacy policy" with the link to said policy in it

Proposed Changes

• Add new component PrivacyCheckbox
• Add PrivacyCheckbox component in native and web to Feedback component
• Add PrivacyCheckbox component to MalteHelpForm in native and web
• Add Checkbox.tsx component to native with a new package (https://github.com/react-native-checkbox/react-native-checkbox/blob/develop/README.md)
• Add privacyAgreement & privacyAgreementLink to translation.json "common"
• Add condition to Feedback.tsx send button only if Checkbox is checked

Side effects

• Condition to send feedback changed
• New package added

Testing

• Test in web by opening new Feedback
• Test in native by opening new Feedback (tested on android by me)
• Test in web by checking the MalteHelpForm
• Test in native by checking the MalteHelpForm

Fixes: 2861

[steffenkleinle]

Thanks for the PR, really well done! I have a few (mostly minor) things that could perhaps still be improved. Let me know if you have some questions or think that I am wrong about something :)

[bahaaTuffaha]

Use yarn ts:check at the terminal to look for what the typescript is complaining about...

You can always check if everything is good before pushing by running the following commands:
yarn test
yarn lint
yarn ts:check
And finally yarn prettier:write

[simomps]

So typescript is complaining about the language prop and its declaration in Feedback

Property 'language' is missing in type and 'language' is declared here

As an example (same error occurring in native and web):

But i don't understand the error message/ don't know how to fix it

[steffenkleinle]

So typescript is complaining about the language prop and its declaration in Feedback

Property 'language' is missing in type and 'language' is declared here

As an example (same error occurring in native and web):

But i don't understand the error message/ don't know how to fix it

You have to pass a language in the test files, i.e. Feedback.spec.tsx (mind the .spec)

[steffenkleinle]

Thanks, looks great!
Tested on firefox.

Three minor things that would be nice to have, even though they are not a must:

• If possible, adding a small test each for Checkbox and PrivacyCheckbox (native) and PrivacyCheckbox (web) would be cool that just asserts clicking one selects the checkbox and twice deselects the checkbox (should be possible to nearly copy/paste 1:1)
• The checkbox on web could be a little bigger in my opinion, I think the touch target is quite small (even though clicking the text works as well)
• CodeScene is complaining about increased complexity on both native and web Feedback.tsx. This can probably be fixed by extracting the condition like this:

const sendFeedbackDisabled = ... || privacyPolicyAccepted
...
<StyledTextButton disabled={sendFeedbackDisabled} onClick={onSubmit} text={t('send')} />

[steffenkleinle]

One more thing: Please squash your merge commits to combine your commits into only one commit by pressing the arrow on auto merge or merge, depending how you merge :)

[steffenkleinle]

Sorry, I found another issue on native (android):
The checkbox is on top of the text, please fix :)