update AcceptTerms, TermsOfService

* add stories * fix styling * remove hocs
Emurgo · Jul 20, 2021 · 911451a · 911451a
1 parent 307d8d8
commit 911451a
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 90 deletions.
diff --git a/src/components/FirstRun/AcceptTermsOfServiceScreen.js b/src/components/FirstRun/AcceptTermsOfServiceScreen.js
@@ -1,24 +1,23 @@
 // @flow
 
 import React from 'react'
-import {connect} from 'react-redux'
-import {compose} from 'redux'
+import {useDispatch} from 'react-redux'
 import {SafeAreaView} from 'react-native-safe-area-context'
-import {withStateHandlers, withHandlers} from 'recompose'
-import {ScrollView, Platform} from 'react-native'
+import {ScrollView, Platform, View} from 'react-native'
 import {injectIntl, defineMessages, type IntlShape} from 'react-intl'
 
 import TermsOfService from '../Common/TermsOfService'
 import {Checkbox, Button, StatusBar, PleaseWaitModal} from '../UiKit'
 import {FIRST_RUN_ROUTES} from '../../RoutesList'
-import {isSystemAuthEnabledSelector} from '../../selectors'
 import {acceptAndSaveTos, setSystemAuth, signin} from '../../actions'
 import {canBiometricEncryptionBeEnabled} from '../../helpers/deviceSettings'
 import {CONFIG} from '../../config/config'
 
 import styles from './styles/AcceptTermsOfServiceScreen.styles'
 import globalMessages from '../../i18n/global-messages'
 
+import type {Navigation} from '../../types/navigation'
+
 const messages = defineMessages({
   aggreeClause: {
     id: 'components.firstrun.acepttermsofservicescreen.aggreeClause',
@@ -39,86 +38,75 @@ const messages = defineMessages({
 
 type Props = {
   intl: IntlShape,
-  acceptedTos: boolean,
-  setAcceptedTos: (accepted: boolean) => any,
-  handleAccepted: () => any,
-  savingConsent: boolean,
+  navigation: Navigation,
+}
+
+const AcceptTermsOfServiceScreen = ({intl, navigation}: Props) => {
+  const [acceptedTos, setAcceptedTos] = React.useState(false)
+  const [savingConsent, setSavingConsent] = React.useState(false)
+
+  const dispatch = useDispatch()
+  const handleAccepted = async () => {
+    setSavingConsent(true)
+    await dispatch(acceptAndSaveTos())
+
+    const canSystemAuthBeEnabled = await canBiometricEncryptionBeEnabled()
+
+    // temporary disable biometric auth for Android SDK >= 29
+    // TODO(v-almonacid): re-enable for Android SDK >= 29 once the module
+    // is updated
+    const shouldNotEnableBiometricAuth =
+      Platform.OS === 'android' && CONFIG.ANDROID_BIO_AUTH_EXCLUDED_SDK.includes(Platform.Version)
+
+    if (canSystemAuthBeEnabled && !shouldNotEnableBiometricAuth) {
+      await dispatch(setSystemAuth(true))
+      // note(v-almonacid) here we don't setSavingConsent(false)
+      // because signin() will likely unmount the component before the
+      // update is dispatched
+      dispatch(signin())
+    } else {
+      setSavingConsent(false)
+      navigation.navigate(FIRST_RUN_ROUTES.CUSTOM_PIN)
+    }
+  }
+
+  return (
+    <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.safeAreaView}>
+      <StatusBar type="dark" />
+
+      <ScrollView contentContainerStyle={styles.contentContainer}>
+        <TermsOfService />
+      </ScrollView>
+
+      <Spacer />
+
+      <Footer>
+        <Checkbox
+          checked={acceptedTos}
+          text={intl.formatMessage(messages.aggreeClause)}
+          onChange={setAcceptedTos}
+          testID="acceptTosCheckbox"
+        />
+
+        <Spacer />
+
+        <Button
+          onPress={handleAccepted}
+          disabled={!acceptedTos}
+          title={intl.formatMessage(messages.continueButton)}
+          testID="acceptTosButton"
+        />
+      </Footer>
+
+      <PleaseWaitModal
+        title={intl.formatMessage(messages.savingConsentModalTitle)}
+        spinnerText={intl.formatMessage(globalMessages.pleaseWait)}
+        visible={savingConsent}
+      />
+    </SafeAreaView>
+  )
 }
+export default injectIntl(AcceptTermsOfServiceScreen)
 
-const AcceptTermsOfServiceScreen = ({intl, acceptedTos, setAcceptedTos, handleAccepted, savingConsent}: Props) => (
-  <SafeAreaView style={styles.safeAreaView}>
-    <StatusBar type="dark" />
-
-    <ScrollView>
-      <TermsOfService />
-    </ScrollView>
-
-    <Checkbox
-      style={styles.checkbox}
-      checked={acceptedTos}
-      text={intl.formatMessage(messages.aggreeClause)}
-      onChange={setAcceptedTos}
-      testID="acceptTosCheckbox"
-    />
-    <Button
-      onPress={handleAccepted}
-      disabled={!acceptedTos}
-      title={intl.formatMessage(messages.continueButton)}
-      testID="acceptTosButton"
-    />
-
-    <PleaseWaitModal
-      title={intl.formatMessage(messages.savingConsentModalTitle)}
-      spinnerText={intl.formatMessage(globalMessages.pleaseWait)}
-      visible={savingConsent}
-    />
-  </SafeAreaView>
-)
-
-export default injectIntl(
-  compose(
-    connect(
-      (state) => ({
-        isSystemAuthEnabled: isSystemAuthEnabledSelector(state),
-      }),
-      {acceptAndSaveTos, setSystemAuth, signin},
-    ),
-    withStateHandlers(
-      {
-        acceptedTos: false,
-        savingConsent: false,
-      },
-      {
-        setAcceptedTos: () => (acceptedTos) => ({acceptedTos}),
-        setSavingConsent: () => (savingConsent) => ({savingConsent}),
-      },
-    ),
-    withHandlers({
-      handleAccepted:
-        ({navigation, acceptAndSaveTos, setSystemAuth, setSavingConsent, signin}) =>
-        async () => {
-          setSavingConsent(true)
-          await acceptAndSaveTos()
-
-          const canSystemAuthBeEnabled = await canBiometricEncryptionBeEnabled()
-
-          // temporary disable biometric auth for Android SDK >= 29
-          // TODO(v-almonacid): re-enable for Android SDK >= 29 once the module
-          // is updated
-          const shouldNotEnableBiometricAuth =
-            Platform.OS === 'android' && CONFIG.ANDROID_BIO_AUTH_EXCLUDED_SDK.includes(Platform.Version)
-
-          if (canSystemAuthBeEnabled && !shouldNotEnableBiometricAuth) {
-            await setSystemAuth(true)
-            // note(v-almonacid) here we don't setSavingConsent(false)
-            // because signin() will likely unmount the component before the
-            // update is dispatched
-            signin()
-          } else {
-            setSavingConsent(false)
-            navigation.navigate(FIRST_RUN_ROUTES.CUSTOM_PIN)
-          }
-        },
-    }),
-  )(AcceptTermsOfServiceScreen),
-)
+const Footer = ({children}: {children: React$Node}) => <View style={styles.footer}>{children}</View>
+const Spacer = () => <View style={styles.spacer} />
diff --git a/src/components/FirstRun/styles/AcceptTermsOfServiceScreen.styles.js b/src/components/FirstRun/styles/AcceptTermsOfServiceScreen.styles.js
@@ -6,9 +6,14 @@ export default StyleSheet.create({
   safeAreaView: {
     backgroundColor: '#fff',
     flex: 1,
+  },
+  contentContainer: {
     padding: 16,
   },
-  checkbox: {
-    marginVertical: 15,
+  footer: {
+    paddingHorizontal: 16,
+  },
+  spacer: {
+    height: 16,
   },
 })
diff --git a/src/components/Settings/TermsOfServiceScreen.js b/src/components/Settings/TermsOfServiceScreen.js
@@ -10,10 +10,10 @@ import TermsOfService from '../Common/TermsOfService'
 import styles from './styles/TermsOfServiceScreen.styles'
 
 const TermsOfServiceScreen = () => (
-  <SafeAreaView style={styles.safeAreaView}>
+  <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.safeAreaView}>
     <StatusBar type="dark" />
 
-    <ScrollView>
+    <ScrollView contentContainerStyle={styles.contentContainer}>
       <TermsOfService />
     </ScrollView>
   </SafeAreaView>

diff --git a/src/components/Settings/TermsOfServiceScreen.stories.js b/src/components/Settings/TermsOfServiceScreen.stories.js
@@ -0,0 +1,18 @@
+// @flow
+
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+
+import {storiesOf} from '@storybook/react-native'
+
+import TermsOfServiceScreen from './TermsOfServiceScreen'
+
+const styles = StyleSheet.create({
+  termsOfServiceScreen: {
+    flex: 1,
+  },
+})
+
+storiesOf('TermsOfServiceScreen', module)
+  .addDecorator((getStory) => <View style={styles.termsOfServiceScreen}>{getStory()}</View>)
+  .add('Default', () => <TermsOfServiceScreen />)
diff --git a/src/components/Settings/styles/TermsOfServiceScreen.styles.js b/src/components/Settings/styles/TermsOfServiceScreen.styles.js
@@ -6,6 +6,8 @@ export default StyleSheet.create({
   safeAreaView: {
     backgroundColor: '#fff',
     flex: 1,
+  },
+  contentContainer: {
     padding: 16,
   },
 })