[Wallet] Update link styles and Implement VerificationEducationScreen (…

…#1565) * Implement new Link styles and break out text buttons into a separate component * Clean up related fonts and styles * Implement VerificationEducationScreen
celo-org · Nov 5, 2019 · 154953f · 154953f
1 parent 960adfe
commit 154953f
Show file tree

Hide file tree

Showing 48 changed files with 780 additions and 2,060 deletions.
diff --git a/packages/mobile/locales/en-US/accountScreen10.json b/packages/mobile/locales/en-US/accountScreen10.json
@@ -13,8 +13,8 @@
   "enableCeloLite": "Enable Celo Lite",
   "celoLiteDetail":
     "Celo Lite mode allows you to communicate with the Celo Network through a trusted node. You can always change this mode in app settings.",
-  "testFaqHere": "<0>Celo Wallet FAQ is </0><1>here</1>",
-  "termsOfServiceHere": "<0>Terms of service are </0><1>here</1>",
+  "testFaqLink": "Celo Wallet FAQ",
+  "termsOfServiceLink": "Terms of service",
   "editProfile": "Edit Profile",
   "cancel": "Cancel",
   "changeProfilePhoto": "Change Profile Photo",

diff --git a/packages/mobile/locales/en-US/nuxNamePin1.json b/packages/mobile/locales/en-US/nuxNamePin1.json
@@ -38,9 +38,8 @@
     "validating": "Great! Validating copied invite code",
     "inviteAccepted": "🎉 Invite Accepted!",
     "askForInvite": {
-      "0":
-        "Request an invite from someone with Celo Wallet or sign up for the {{testnet}} network at ",
-      "1": "celo.org/build/wallet"
+      "0": "Request an invite from a friend on Celo or sign up for the {{testnet}} network at ",
+      "1": "celo.org/app"
     }
   },
   "enterFullName": "Please enter your first and last name",

diff --git a/packages/mobile/locales/en-US/nuxVerification2.json b/packages/mobile/locales/en-US/nuxVerification2.json
@@ -55,5 +55,14 @@
   "errorRedeemingCode": "Failed to redeem code.",
   "pleaseRetry": "Please retry verification.",
   "retryVerification": "Retry Verification",
-  "codeAccepted": "Accepted"
+  "codeAccepted": "Accepted",
+  "education": {
+    "header": "Verify Your Phone",
+    "body1": "Next, please verify your phone number.",
+    "body2":
+      "Verifying makes it easier to send and receive with friends. You can also skip this step and return to it later.",
+    "learnMore": "Learn more about phone verification",
+    "start": "Start Verification",
+    "skip": "Skip For Now"
+  }
 }
diff --git a/packages/mobile/locales/en-US/walletFlow5.json b/packages/mobile/locales/en-US/walletFlow5.json
@@ -61,7 +61,7 @@
   "testnetAlert": {
     "0": "{{testnet}}",
     "1":
-      "A friendly reminder you're using the {{testnet}} network build - the balances here are not real."
+      "A friendly reminder you're using the {{testnet}} network build - the balances are not real"
   },
   "dismiss": "Dismiss",
   "localCurrencyEqual": "Equal to <2>{{localValue}} {{localCurrencyCode}}</2>",

diff --git a/packages/mobile/locales/es-419/accountScreen10.json b/packages/mobile/locales/es-419/accountScreen10.json
@@ -13,8 +13,8 @@
   "enableCeloLite": "Habilitar Celo Lite",
   "celoLiteDetail":
     "El modo Celo Lite te permite comunicarte con la Red Celo  a través de un nodo confiable. Puedes cambiar este modo en la configuración de la aplicación.",
-  "testFaqHere": "<1>Aquí</1><0> están las preguntas frecuentes del Monedero Celo. </0>",
-  "termsOfServiceHere": "<1>Aquí</1><0> están las Condiciones de servicio.</0>",
+  "testFaqLink": "Las Preguntas Frecuentes del Monedero Celo",
+  "termsOfServiceLink": "Las Condiciones de Servicio",
   "editProfile": "Editar perfil",
   "cancel": "Cancelar",
   "changeProfilePhoto": "Cambiar la foto de perfil",

diff --git a/packages/mobile/locales/es-419/nuxNamePin1.json b/packages/mobile/locales/es-419/nuxNamePin1.json
@@ -39,9 +39,8 @@
     "validating": "Genial! Validando el código de invitación copiado",
     "inviteAccepted": "🎉 Invitación aceptada!",
     "askForInvite": {
-      "0":
-        "Solicite una invitación de alguien con Celo Monedero o regístrese en red {{testnet}} en ",
-      "1": "celo.org/build/wallet"
+      "0": "Solicite una invitación de un amigo en Celo o regístrese en la red {{testnet}} en ",
+      "1": "celo.org/app"
     }
   },
   "enterFullName": "Ingresa tu nombre y apellido",

diff --git a/packages/mobile/locales/es-419/nuxVerification2.json b/packages/mobile/locales/es-419/nuxVerification2.json
@@ -56,5 +56,14 @@
   "errorRedeemingCode": "Error al canjear el código.",
   "pleaseRetry": "Por favor reinicie la verificación.",
   "retryVerification": "Reintentar la verificación",
-  "codeAccepted": "Aceptado"
+  "codeAccepted": "Aceptado",
+  "education": {
+    "header": "~~Verify Your Phone",
+    "body1": "~~Next, please verify your phone number.",
+    "body2":
+      "~~Verifying makes it easier to send and receive with friends. You can also skip this step and return to it later.",
+    "learnMore": "~~Learn more about phone verification",
+    "start": "~~Start Verification",
+    "skip": "~~Skip For Now"
+  }
 }
diff --git a/packages/mobile/src/account/Account.tsx b/packages/mobile/src/account/Account.tsx
@@ -4,7 +4,7 @@ import { fontStyles } from '@celo/react-components/styles/fonts'
 import { anonymizedPhone, isE164Number } from '@celo/utils/src/phoneNumbers'
 import * as Sentry from '@sentry/react-native'
 import * as React from 'react'
-import { Trans, WithNamespaces, withNamespaces } from 'react-i18next'
+import { WithNamespaces, withNamespaces } from 'react-i18next'
 import { Clipboard, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import DeviceInfo from 'react-native-device-info'
 import SafeAreaView from 'react-native-safe-area-view'
@@ -257,23 +257,10 @@ export class Account extends React.Component<Props, State> {
               <Text style={fontStyles.bodySmall}>{t('version') + ' ' + this.state.version}</Text>
             </View>
             <View style={style.accountFooterText}>
-              <Trans i18nKey="testFaqHere">
-                <Text style={fontStyles.bodySmall}>Test FAQ is </Text>
-                <Link style={[fontStyles.bodySmall, fontStyles.linkInline]} onPress={this.goToFAQ}>
-                  here
-                </Link>
-              </Trans>
+              <Link onPress={this.goToFAQ}>{t('testFaqLink')}</Link>
             </View>
             <View style={style.accountFooterText}>
-              <Trans i18nKey="termsOfServiceHere">
-                <Text style={fontStyles.bodySmall}>Terms of service are </Text>
-                <Link
-                  style={[fontStyles.bodySmall, fontStyles.linkInline]}
-                  onPress={this.goToTerms}
-                >
-                  here
-                </Link>
-              </Trans>
+              <Link onPress={this.goToTerms}>{t('termsOfServiceLink')}</Link>
             </View>
           </View>
         </SafeAreaView>

diff --git a/packages/mobile/src/account/__snapshots__/Account.test.tsx.snap b/packages/mobile/src/account/__snapshots__/Account.test.tsx.snap
@@ -899,18 +899,6 @@ exports[`Account renders correctly 1`] = `
             }
           }
         >
-          <Text
-            style={
-              Object {
-                "color": "#2E3338",
-                "fontFamily": "Hind-Regular",
-                "fontSize": 14,
-                "lineHeight": 18,
-              }
-            }
-          >
-            Test FAQ is 
-          </Text>
           <View
             accessible={true}
             focusable={true}
@@ -935,31 +923,15 @@ exports[`Account renders correctly 1`] = `
                   Object {
                     "color": "#2E3338",
                     "fontFamily": "Hind-Regular",
-                    "fontSize": 14,
-                    "lineHeight": 18,
-                  },
-                  Object {
-                    "color": "#42D689",
-                    "fontFamily": "Hind-Medium",
-                    "fontSize": 14,
+                    "fontSize": 13,
                     "lineHeight": 18,
+                    "textDecorationLine": "underline",
                   },
-                  Array [
-                    Object {
-                      "color": "#2E3338",
-                      "fontFamily": "Hind-Regular",
-                      "fontSize": 14,
-                      "lineHeight": 18,
-                    },
-                    Object {
-                      "color": "#42D689",
-                      "fontFamily": "Hind-SemiBold",
-                    },
-                  ],
+                  undefined,
                 ]
               }
             >
-              here
+              testFaqLink
             </Text>
           </View>
         </View>
@@ -971,18 +943,6 @@ exports[`Account renders correctly 1`] = `
             }
           }
         >
-          <Text
-            style={
-              Object {
-                "color": "#2E3338",
-                "fontFamily": "Hind-Regular",
-                "fontSize": 14,
-                "lineHeight": 18,
-              }
-            }
-          >
-            Terms of service are 
-          </Text>
           <View
             accessible={true}
             focusable={true}
@@ -1007,31 +967,15 @@ exports[`Account renders correctly 1`] = `
                   Object {
                     "color": "#2E3338",
                     "fontFamily": "Hind-Regular",
-                    "fontSize": 14,
-                    "lineHeight": 18,
-                  },
-                  Object {
-                    "color": "#42D689",
-                    "fontFamily": "Hind-Medium",
-                    "fontSize": 14,
+                    "fontSize": 13,
                     "lineHeight": 18,
+                    "textDecorationLine": "underline",
                   },
-                  Array [
-                    Object {
-                      "color": "#2E3338",
-                      "fontFamily": "Hind-Regular",
-                      "fontSize": 14,
-                      "lineHeight": 18,
-                    },
-                    Object {
-                      "color": "#42D689",
-                      "fontFamily": "Hind-SemiBold",
-                    },
-                  ],
+                  undefined,
                 ]
               }
             >
-              here
+              termsOfServiceLink
             </Text>
           </View>
         </View>
@@ -2117,18 +2061,6 @@ exports[`Account renders correctly when dev mode active 1`] = `
             }
           }
         >
-          <Text
-            style={
-              Object {
-                "color": "#2E3338",
-                "fontFamily": "Hind-Regular",
-                "fontSize": 14,
-                "lineHeight": 18,
-              }
-            }
-          >
-            Test FAQ is 
-          </Text>
           <View
             accessible={true}
             focusable={true}
@@ -2153,31 +2085,15 @@ exports[`Account renders correctly when dev mode active 1`] = `
                   Object {
                     "color": "#2E3338",
                     "fontFamily": "Hind-Regular",
-                    "fontSize": 14,
-                    "lineHeight": 18,
-                  },
-                  Object {
-                    "color": "#42D689",
-                    "fontFamily": "Hind-Medium",
-                    "fontSize": 14,
+                    "fontSize": 13,
                     "lineHeight": 18,
+                    "textDecorationLine": "underline",
                   },
-                  Array [
-                    Object {
-                      "color": "#2E3338",
-                      "fontFamily": "Hind-Regular",
-                      "fontSize": 14,
-                      "lineHeight": 18,
-                    },
-                    Object {
-                      "color": "#42D689",
-                      "fontFamily": "Hind-SemiBold",
-                    },
-                  ],
+                  undefined,
                 ]
               }
             >
-              here
+              testFaqLink
             </Text>
           </View>
         </View>
@@ -2189,18 +2105,6 @@ exports[`Account renders correctly when dev mode active 1`] = `
             }
           }
         >
-          <Text
-            style={
-              Object {
-                "color": "#2E3338",
-                "fontFamily": "Hind-Regular",
-                "fontSize": 14,
-                "lineHeight": 18,
-              }
-            }
-          >
-            Terms of service are 
-          </Text>
           <View
             accessible={true}
             focusable={true}
@@ -2225,31 +2129,15 @@ exports[`Account renders correctly when dev mode active 1`] = `
                   Object {
                     "color": "#2E3338",
                     "fontFamily": "Hind-Regular",
-                    "fontSize": 14,
-                    "lineHeight": 18,
-                  },
-                  Object {
-                    "color": "#42D689",
-                    "fontFamily": "Hind-Medium",
-                    "fontSize": 14,
+                    "fontSize": 13,
                     "lineHeight": 18,
+                    "textDecorationLine": "underline",
                   },
-                  Array [
-                    Object {
-                      "color": "#2E3338",
-                      "fontFamily": "Hind-Regular",
-                      "fontSize": 14,
-                      "lineHeight": 18,
-                    },
-                    Object {
-                      "color": "#42D689",
-                      "fontFamily": "Hind-SemiBold",
-                    },
-                  ],
+                  undefined,
                 ]
               }
             >
-              here
+              termsOfServiceLink
             </Text>
           </View>
         </View>

diff --git a/packages/mobile/src/app/saga.test.ts b/packages/mobile/src/app/saga.test.ts
@@ -1,7 +1,6 @@
 import { REHYDRATE } from 'redux-persist/es/constants'
 import { expectSaga } from 'redux-saga-test-plan'
 import { call, select } from 'redux-saga/effects'
-import { PincodeType } from 'src/account/reducer'
 import { getPincode } from 'src/account/saga'
 import CeloAnalytics from 'src/analytics/CeloAnalytics'
 import { finishPinVerification, startPinVerification } from 'src/app/actions'
@@ -42,30 +41,6 @@ const initialState = {
   identity: {},
 }
 
-const numberVerified = {
-  app: {
-    language: 'EN',
-    numberVerified: false,
-  },
-  verify: {
-    e164PhoneNumber: '+1234',
-  },
-  web3: {
-    syncProgress: 101,
-  },
-  account: {
-    pincodeType: PincodeType.PhoneAuth,
-    e164PhoneNumber: '+1234',
-  },
-  invite: {
-    redeemComplete: true,
-  },
-  identity: {
-    startedVerification: false,
-    askedContactsPermission: true,
-  },
-}
-
 const navigationSagaTest = (testName: string, state: any, expectedScreen: any) => {
   test(testName, async () => {
     await expectSaga(navigateToProperScreen)
@@ -134,5 +109,3 @@ describe('Upload Comment Key Saga', () => {
 
 navigationSagaTest('Navigates to the nux stack with no state', null, Stacks.NuxStack)
 navigationSagaTest('Navigates to the nux stack with no language', initialState, Stacks.NuxStack)
-
-navigationSagaTest('Navigates to the verify screen', numberVerified, Screens.VerifyEducation)