feat(privacy-policy): Add privacy policy access from settings (#2607)

apps/wallet-mobile/.storybook/storybook.requires.js

@@ -123,6 +123,7 @@ const getStories = () => {
     "./src/features/Settings/Currency/ChangeCurrencyScreen.stories.tsx": require("../src/features/Settings/Currency/ChangeCurrencyScreen.stories.tsx"),
     "./src/features/Settings/EasyConfirmation/EasyConfirmationScreen.stories.tsx": require("../src/features/Settings/EasyConfirmation/EasyConfirmationScreen.stories.tsx"),
     "./src/features/Settings/EnableLoginWithOs/EnableLoginWithOsScreen.stories.tsx": require("../src/features/Settings/EnableLoginWithOs/EnableLoginWithOsScreen.stories.tsx"),
+    "./src/features/Settings/PrivacyPolicy/PrivacyPolicyScreen.stories.tsx": require("../src/features/Settings/PrivacyPolicy/PrivacyPolicyScreen.stories.tsx"),
     "./src/features/Settings/RemoveWallet/RemoveWalletScreen.stories.tsx": require("../src/features/Settings/RemoveWallet/RemoveWalletScreen.stories.tsx"),
     "./src/features/Settings/TermsOfService/TermsOfServiceScreen.stories.tsx": require("../src/features/Settings/TermsOfService/TermsOfServiceScreen.stories.tsx"),
     "./src/features/Settings/WalletSettings/WalletSettingsScreen.stories.tsx": require("../src/features/Settings/WalletSettings/WalletSettingsScreen.stories.tsx"),

apps/wallet-mobile/src/features/Settings/ApplicationSettings/ApplicationSettingsScreen.tsx

@@ -81,6 +81,12 @@ export const ApplicationSettingsScreen = () => {
             onNavigate={() => settingsNavigation.navigate('terms-of-use')}
           />
 
+          <NavigatedSettingsItem
+            icon={<Icon.TermsOfUse {...iconProps} />}
+            label={strings.privacyPolicy}
+            onNavigate={() => settingsNavigation.navigate('privacy-policy')}
+          />
+
           {features.analytics && (
             <NavigatedSettingsItem
               icon={<Icon.Analytics {...iconProps} />}
@@ -196,6 +202,7 @@ const useStrings = () => {
     crashReporting: intl.formatMessage(messages.crashReporting),
     crashReportingInfo: intl.formatMessage(messages.crashReportingInfo),
     analytics: intl.formatMessage(messages.analytics),
+    privacyPolicy: intl.formatMessage(messages.privacyPolicy),
   }
 }
 
@@ -256,6 +263,10 @@ const messages = defineMessages({
     id: 'components.settings.applicationsettingsscreen.analytics',
     defaultMessage: '!!!Analytics',
   },
+  privacyPolicy: {
+    id: 'components.settings.applicationsettingsscreen.privacyPolicy',
+    defaultMessage: '!!!Privacy Policy',
+  },
 })
 
 const styles = StyleSheet.create({

apps/wallet-mobile/src/features/Settings/PrivacyPolicy/PrivacyPolicyScreen.stories.tsx

@@ -0,0 +1,15 @@
+import {storiesOf} from '@storybook/react-native'
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+
+import {PrivacyPolicyScreen} from './PrivacyPolicyScreen'
+
+const styles = StyleSheet.create({
+  decorator: {
+    flex: 1,
+  },
+})
+
+storiesOf('PrivacyPolicyScreen', module)
+  .addDecorator((getStory) => <View style={styles.decorator}>{getStory()}</View>)
+  .add('Default', () => <PrivacyPolicyScreen />)

apps/wallet-mobile/src/features/Settings/PrivacyPolicy/PrivacyPolicyScreen.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import {ScrollView, StyleSheet} from 'react-native'
+import {SafeAreaView} from 'react-native-safe-area-context'
+
+import {StatusBar} from '../../../components'
+import {useLanguage} from '../../../i18n'
+import {PrivacyPolicy} from '../../../Legal'
+
+export const PrivacyPolicyScreen = () => {
+  const {languageCode} = useLanguage()
+
+  return (
+    <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.safeAreaView}>
+      <StatusBar type="dark" />
+
+      <ScrollView contentContainerStyle={styles.contentContainer}>
+        <PrivacyPolicy languageCode={languageCode} />
+      </ScrollView>
+    </SafeAreaView>
+  )
+}
+const styles = StyleSheet.create({
+  safeAreaView: {
+    backgroundColor: '#fff',
+    flex: 1,
+  },
+  contentContainer: {
+    padding: 16,
+  },
+})

apps/wallet-mobile/src/features/Settings/PrivacyPolicy/index.ts

@@ -0,0 +1 @@
+export {PrivacyPolicyScreen} from './PrivacyPolicyScreen'

apps/wallet-mobile/src/features/Settings/SettingsScreenNavigator.tsx

@@ -18,6 +18,7 @@ import {ChangeWalletName} from './ChangeWalletName'
 import {ChangeCurrencyScreen} from './Currency/ChangeCurrencyScreen'
 import {DisableEasyConfirmationScreen, EnableEasyConfirmationScreen} from './EasyConfirmation'
 import {EnableLoginWithOsScreen} from './EnableLoginWithOs'
+import {PrivacyPolicyScreen} from './PrivacyPolicy'
 import {RemoveWalletScreen} from './RemoveWallet'
 import {TermsOfServiceScreen} from './TermsOfService'
 import {WalletSettingsScreen} from './WalletSettings'
@@ -59,6 +60,12 @@ export const SettingsScreenNavigator = () => {
         options={{title: strings.termsOfServiceTitle}}
       />
 
+      <Stack.Screen
+        name="privacy-policy"
+        component={PrivacyPolicyScreen}
+        options={{title: strings.privacyPolicyTitle}}
+      />
+
       <Stack.Screen //
         name="enable-login-with-os"
         component={EnableLoginWithOsScreenWrapper}
@@ -225,6 +232,10 @@ const messages = defineMessages({
     id: 'components.settings.applicationsettingsscreen.about',
     defaultMessage: '!!!About',
   },
+  privacyPolicyTitle: {
+    id: 'components.settings.privacypolicyscreen.title',
+    defaultMessage: '!!!Privacy Policy',
+  },
 })
 
 const useStrings = () => {
@@ -247,5 +258,6 @@ const useStrings = () => {
     currency: intl.formatMessage(globalMessages.currency),
     aboutTitle: intl.formatMessage(messages.aboutTitle),
     appSettingsTitle: intl.formatMessage(messages.appSettingsTitle),
+    privacyPolicyTitle: intl.formatMessage(messages.privacyPolicyTitle),
   }
 }

apps/wallet-mobile/src/i18n/locales/en-US.json

@@ -250,6 +250,7 @@
   "components.settings.applicationsettingsscreen.walletType": "Wallet type",
   "components.settings.applicationsettingsscreen.analytics": "Analytics",
   "components.settings.applicationsettingsscreen.analyticsTitle": "User Insights",
+  "components.settings.applicationsettingsscreen.privacyPolicy": "Privacy Policy",
   "components.send.sendscreen.submittedTxTitle": "Transaction submitted",
   "components.send.sendscreen.submittedTxText": "Check this transaction in the list of wallet transactions",
   "components.send.sendscreen.submittedTxButton": "Go to transactions",
@@ -306,6 +307,7 @@
   "components.settings.settingsscreen.reportUrl": "https://yoroi-wallet.com/support/",
   "components.settings.settingsscreen.title": "Support",
   "components.settings.termsofservicescreen.title": "Terms of Service Agreement",
+  "components.settings.privacypolicyscreen.title": "Privacy Policy",
   "components.settings.disableeasyconfirmationscreen.disableButton": "Disable",
   "components.settings.disableeasyconfirmationscreen.disableHeading": "By disabling this option, you will be able to spend your assets only with your master password.",
   "components.settings.disableeasyconfirmationscreen.title": "Disable easy confirmation",

apps/wallet-mobile/src/navigation.tsx

@@ -215,6 +215,7 @@ export type SettingsStackRoutes = {
   'disable-easy-confirmation': undefined
   'change-password': undefined
   'change-custom-pin': undefined
+  'privacy-policy': undefined
   'enable-login-with-pin': {
     onSuccess: () => void | Promise<void>
   }