add: mvp age verification (#4331)

* add: mvp age verification * fix: button overlapping picture on android * fix: remove wrongfuly used deps * add: show duplicate id expiration date on web * add: try again to giveup screen * add: design changes * add: change duplicate messaging and add link * fix: age error text * add: update fv flow texts --------- Co-authored-by: LewisB <[email protected]>
GoodDollar · Feb 2, 2025 · aa35834 · aa35834
1 parent c8c93ec
commit aa35834
Show file tree

Hide file tree

Showing 17 changed files with 334 additions and 149 deletions.
diff --git a/src/components/common/buttons/CheckBox.jsx b/src/components/common/buttons/CheckBox.jsx
@@ -1,10 +1,30 @@
 import React from 'react'
+import { View } from 'react-native'
+import { CheckBox as WebCheckBox } from 'react-native-web'
+import RNCheckBox from '@react-native-community/checkbox'
+import { isMobileNative } from '../../../lib/utils/platform'
+import { withStyles } from '../../../lib/styles'
 
-const CheckBox = ({ onClick, children }) => (
-  <label style={{ marginBottom: 24, display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
-    <input type="checkbox" onClick={onClick} style={{ width: 24, height: 24 }} />
+const CheckBoxComponent = isMobileNative ? RNCheckBox : WebCheckBox
+const CheckBox = ({ onClick, value, styles, children }) => (
+  <View style={styles.container}>
+    <CheckBoxComponent value={value} onValueChange={onClick} style={styles.checkbox} />
     {children}
-  </label>
+  </View>
 )
 
-export default CheckBox
+const mapStylesToProps = () => ({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  checkbox: {
+    width: 24,
+    height: 24,
+    marginRight: 8,
+  },
+})
+
+export default withStyles(mapStylesToProps)(CheckBox)
+
+// export default CheckBox
diff --git a/src/components/common/buttons/CheckBox.native.jsx b/src/components/common/buttons/CheckBox.native.jsx
diff --git a/src/components/faceVerification/components/AgeCheckError.jsx b/src/components/faceVerification/components/AgeCheckError.jsx
@@ -0,0 +1,88 @@
+import React, { useEffect } from 'react'
+import { View } from 'react-native'
+import { t } from '@lingui/macro'
+
+import Text from '../../common/view/Text'
+import Separator from '../../common/layout/Separator'
+import { Section } from '../../common'
+import FaceVerificationErrorSmiley from '../../common/animations/FaceVerificationErrorSmiley'
+
+import { isMobileOnly } from '../../../lib/utils/platform'
+import { getDesignRelativeHeight, getDesignRelativeWidth } from '../../../lib/utils/sizes'
+import { withStyles } from '../../../lib/styles'
+
+import { fireEvent, FV_AGECHECKERROR } from '../../../lib/analytics/analytics'
+
+const AgeCheckError = ({ styles, displayTitle, onRetry, nav, exception }) => {
+  useEffect(() => {
+    if (!exception) {
+      return
+    }
+
+    fireEvent(FV_AGECHECKERROR)
+  }, [])
+
+  return (
+    <Section style={styles.descriptionContainer} justifyContent="space-evenly">
+      <Section.Title fontWeight="medium" textTransform="none" color="red">
+        {t`You must be 18 years or older to get verified.`}
+      </Section.Title>
+      <Section.Row justifyContent="space-around">
+        <View style={styles.halfIllustration}>
+          <FaceVerificationErrorSmiley />
+        </View>
+      </Section.Row>
+      <Section style={styles.errorSection}>
+        <Separator width={2} />
+        <View style={styles.descriptionWrapper}>
+          <Text color="primary" fontWeight="bold" fontSize={18} lineHeight={25}>
+            {t`It seems your are under 18 years of age.`}
+          </Text>
+          <Text color="primary" fontSize={18} lineHeight={25}>
+            {t`If you think this is a mistake
+                  please contact support.`}
+          </Text>
+        </View>
+        <Separator width={2} />
+      </Section>
+    </Section>
+  )
+}
+
+const getStylesFromProps = ({ theme }) => {
+  return {
+    halfIllustration: {
+      marginTop: isMobileOnly ? getDesignRelativeHeight(25) : 0,
+      marginBottom: isMobileOnly ? getDesignRelativeHeight(30) : 0,
+      width: getDesignRelativeWidth(130, false),
+      maxHeight: isMobileOnly ? getDesignRelativeHeight(97) : 'auto',
+      display: 'flex',
+      justifyContent: 'center',
+      marginRight: 0,
+      marginLeft: 0,
+    },
+    descriptionContainer: {
+      flex: 1,
+      marginBottom: 0,
+      paddingBottom: getDesignRelativeHeight(theme.sizes.defaultDouble),
+      paddingLeft: getDesignRelativeWidth(theme.sizes.default),
+      paddingRight: getDesignRelativeWidth(theme.sizes.default),
+      paddingTop: getDesignRelativeHeight(theme.sizes.default),
+      width: '100%',
+    },
+    actionsSpace: {
+      marginBottom: getDesignRelativeHeight(16),
+    },
+    errorSection: {
+      paddingBottom: 0,
+      paddingTop: 0,
+      marginBottom: 0,
+    },
+    descriptionWrapper: {
+      paddingTop: getDesignRelativeHeight(25),
+      paddingBottom: getDesignRelativeHeight(25),
+    },
+  }
+}
+
+export default withStyles(getStylesFromProps)(AgeCheckError)
diff --git a/src/components/faceVerification/components/DuplicateFoundError.jsx b/src/components/faceVerification/components/DuplicateFoundError.jsx
@@ -1,7 +1,8 @@
-import React, { useEffect } from 'react'
-import { View } from 'react-native'
+import React, { useCallback, useEffect } from 'react'
+import { Linking, View } from 'react-native'
 import { t } from '@lingui/macro'
-
+import { get } from 'lodash'
+import moment from 'moment'
 import Text from '../../common/view/Text'
 import { Section } from '../../common'
 
@@ -13,6 +14,12 @@ import FVErrorTwinSVG from '../../../assets/FaceVerification/FVErrorTwin.svg'
 import { fireEvent, FV_DUPLICATEERROR } from '../../../lib/analytics/analytics'
 
 const DuplicateFoundError = ({ styles, displayTitle, onRetry, nav, exception }) => {
+  const onLearnMore = useCallback(() => {
+    Linking.openURL('https://docs.gooddollar.org/frequently-asked-questions/troubleshooting#help-it-says-i-have-a-twin')
+  }, [])
+
+  const expiration = get(exception, 'response.enrollmentResult.duplicate.expiration')
+
   useEffect(() => {
     if (!exception) {
       return
@@ -29,23 +36,38 @@ const DuplicateFoundError = ({ styles, displayTitle, onRetry, nav, exception })
             {displayTitle}
           </Section.Title>
         )}
-        {(displayTitle ? `,\n` : '') +
-          t`Unfortunately we found 
-            your twin...`}
+        {(displayTitle ? `,\n` : '') + t`We found your twin...`}
       </Section.Title>
       <Section style={styles.errorSection}>
         <View style={styles.descriptionWrapper}>
-          <Text>
-            <Text fontSize={18} lineHeight={25} fontWeight="bold">
-              {t`You can open ONLY ONE account 
+          <Text fontSize={16} lineHeight={25} fontWeight="bold">
+            {t`You can verify ONLY ONE wallet address 
                   per person. `}
-            </Text>
-            <Text fontSize={18} lineHeight={25}>
-              {t`If this is your only active 
-                  account - please contact our support`}
-            </Text>
+          </Text>
+          <Text fontSize={18} lineHeight={25}>
+            {t`If this is your only active 
+                  account - please contact support.`}
           </Text>
         </View>
+        {expiration && (
+          <View marginTop={20}>
+            <Text fontSize={16} lineHeight={25} fontWeight="bold">
+              {t`The existing identity will expire on ${moment(expiration).format('l')}.
+               After this expiry, you may verify a different wallet address.`}
+            </Text>
+            <Text
+              color="primary"
+              fontWeight="bold"
+              fontSize={18}
+              lineHeight={26}
+              textDecorationLine="underline"
+              style={styles.learnMore}
+              onPress={onLearnMore}
+            >
+              {t`Learn More`}
+            </Text>
+          </View>
+        )}
       </Section>
       <Section.Row justifyContent="space-evenly">
         <View style={styles.errorImage}>

diff --git a/src/components/faceVerification/components/ErrorButtons.jsx b/src/components/faceVerification/components/ErrorButtons.jsx
@@ -11,22 +11,27 @@ import { withStyles } from '../../../lib/styles'
 
 const { fvTypeformUrl } = Config
 
-const ErrorButtons = ({ styles, screenProps, navigation, onRetry, reachedMax }) => {
+const ErrorButtons = ({ styles, screenProps, navigation, onRetry, reachedMax, invert = false }) => {
   const onContactSupport = useCallback(() => openLink(fvTypeformUrl), [])
 
   return (
     <View style={styles.buttonsContainer}>
       {!reachedMax ? (
-        <View>
-          <CustomButton onPress={onRetry} style={styles.actionsSpace}>
+        <View style={{ flex: 1 }}>
+          <CustomButton onPress={onRetry} style={styles.actionsSpace} mode={invert ? 'outlined' : undefined}>
             TRY AGAIN
           </CustomButton>
-          <CustomButton onPress={onContactSupport} mode="outlined">
+          <CustomButton onPress={onContactSupport} mode={invert ? undefined : 'outlined'}>
             {t`CONTACT SUPPORT`}
           </CustomButton>
         </View>
       ) : (
-        <GiveUpButton navigation={navigation} />
+        <View>
+          <GiveUpButton navigation={navigation} />
+          <CustomButton onPress={onRetry} style={styles.actionsSpace}>
+            TRY AGAIN
+          </CustomButton>
+        </View>
       )}
     </View>
   )
@@ -37,6 +42,7 @@ const getStylesFromProps = ({ theme }) => ({
     width: '100%',
   },
   actionsSpace: {
+    marginTop: 10, //native design fix
     marginBottom: getDesignRelativeHeight(16),
   },
 })

diff --git a/src/components/faceVerification/components/Instructions.jsx b/src/components/faceVerification/components/Instructions.jsx
@@ -12,7 +12,7 @@ import { CustomButton, Section, Wrapper } from '../../common'
 import { getDesignRelativeHeight, getDesignRelativeWidth, isLargeDevice } from '../../../lib/utils/sizes'
 import normalize from '../../../lib/utils/normalizeText'
 import { withStyles } from '../../../lib/styles'
-import { isBrowser } from '../../../lib/utils/platform'
+import { isBrowser, isMobile } from '../../../lib/utils/platform'
 
 // assets
 import illustration from '../../../assets/FRInstructions.png'
@@ -32,26 +32,42 @@ const Dot = () => (
   </Text>
 )
 
-const Instructions = ({ styles, onDismiss = noop, ready }) => (
+const Instructions = ({ styles, onDismiss = noop, ready, fvStarted = false }) => (
   <Wrapper>
     <Section style={styles.topContainer} grow>
       <View style={styles.mainContent}>
         <Image source={illustration} resizeMode="contain" style={styles.illustration} />
         <View style={styles.descriptionContainer}>
-          <View style={styles.descriptionWrapper}>
-            <Text style={styles.text}>
-              <Dot />
-              {t`Hold Your Camera at Eye Level`}
-            </Text>
-            <Text style={styles.text}>
-              <Dot />
-              {t`Light Your Face Evenly`}
-            </Text>
-            <Text style={styles.text}>
-              <Dot />
-              {t`Avoid Smiling & Back Light`}
-            </Text>
-          </View>
+          {!fvStarted ? (
+            <View style={styles.descriptionWrapper}>
+              {!isMobile && (
+                <Text style={styles.text}>
+                  <Dot />
+                  {t`Face Directly In Front of the Camera`}
+                </Text>
+              )}
+              <Text style={styles.text}>
+                <Dot />
+                {t`Hold Your Camera at Eye Level`}
+              </Text>
+              <Text style={styles.text}>
+                <Dot />
+                {t`Light Your Face Evenly`}
+              </Text>
+              <Text style={styles.text}>
+                <Dot />
+                {t`Avoid Smiling & Back Light`}
+              </Text>
+            </View>
+          ) : (
+            <View style={styles.warnDescriptionWrapper}>
+              <Text style={styles.warnText}>{t`Notice:
+               Face verifying for someone else's use is against the terms & service policy.`}</Text>
+              <Text
+                style={styles.warnText}
+              >{t`Doing so may result in a loss of funds and/or your account being blocked.`}</Text>
+            </View>
+          )}
         </View>
         <CustomButton
           loading={!ready}
@@ -123,6 +139,10 @@ const getStylesFromProps = ({ theme }) => ({
     flexDirection: 'column',
     alignItems: 'flex-start',
   },
+  warnDescriptionWrapper: {
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
   descriptionWrapperB: {
     backgroundColor: theme.colors.darkGray,
     borderRadius: 8,
@@ -136,6 +156,13 @@ const getStylesFromProps = ({ theme }) => ({
     fontSize: normalize(isLargeDevice ? 22 : 20),
     lineHeight: isLargeDevice ? 36 : 34,
   },
+  warnText: {
+    // textAlign: 'center',
+    fontSize: normalize(isLargeDevice ? 22 : 20),
+    lineHeight: isLargeDevice ? 36 : 34,
+    fontWeight: 'bold',
+    color: theme.colors.red,
+  },
   textB: {
     textAlign: 'left',
     fontSize: 16,

diff --git a/src/components/faceVerification/hooks/useFaceTecVerification.js b/src/components/faceVerification/hooks/useFaceTecVerification.js
@@ -125,6 +125,8 @@ export default (options = null) => {
         name = 'DuplicateFoundError'
       } else if (/face.+n.t\s+match/.test(message)) {
         name = 'NotMatchError'
+      } else if (/age check failed/.test(message)) {
+        name = 'AgeCheckError'
       } else {
         // the following code is needed to categorize exceptions
         // then we could display specific error messages