feat: Add continue button to phone auth screen (#399)

* Add continue button to phone auth screen * Add padding to make button bigger, some margin and disable functionality * Add a more margin, add spanish translation, refactor to pass type check * Fix test
GaloyMoney · Mar 3, 2022 · d2934e6 · d2934e6
1 parent b6fc787
commit d2934e6
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 2 deletions.
diff --git a/__tests__/screens/__snapshots__/phone-auth.spec.tsx.snap b/__tests__/screens/__snapshots__/phone-auth.spec.tsx.snap
@@ -710,6 +710,75 @@ exports[`WelcomePhoneInputScreen render matches snapshot 1`] = `
               }
             />
           </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "borderRadius": 3,
+                  "overflow": "hidden",
+                },
+                Object {
+                  "borderRadius": 3,
+                },
+                undefined,
+                false,
+              ]
+            }
+          >
+            <View
+              accessibilityRole="button"
+              accessibilityState={
+                Object {
+                  "busy": false,
+                  "disabled": false,
+                }
+              }
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              nativeID="animatedComponent"
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "opacity": 1,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "backgroundColor": "#2089dc",
+                    "borderColor": "#2089dc",
+                    "borderRadius": 3,
+                    "borderWidth": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "padding": 8,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    Object {
+                      "color": "white",
+                      "fontSize": 18,
+                      "paddingVertical": 1,
+                      "textAlign": "center",
+                    }
+                  }
+                >
+                  Continue
+                </Text>
+              </View>
+            </View>
+          </View>
         </View>
         <View>
           <Text

diff --git a/app/i18n/en.json b/app/i18n/en.json
@@ -621,7 +621,8 @@
     "header": "Enter your phone number, and we'll text you an access code.",
     "headerVerify": "Verify you are human",
     "placeholder": "Phone Number",
-    "verify": "Click to Verify"
+    "verify": "Click to Verify",
+    "continue": "Continue"
   },
   "WelcomePhoneValidationScreen": {
     "errorLoggingIn": "Error logging in. Did you use the right code?",

diff --git a/app/i18n/es.json b/app/i18n/es.json
@@ -658,7 +658,8 @@
     "header": "Ingrese su número de teléfono, y le enviaremos un mensaje de texto con un código de acceso.",
     "headerVerify": "¿Eres un robot?",
     "placeholder": "Número de teléfono",
-    "verify": "No soy un robot"
+    "verify": "No soy un robot",
+    "continue": "Continuar"
   },
   "WelcomePhoneValidationScreen": {
     "errorLoggingIn": "Error al iniciar sesión. ¿Usó el código correcto?",

diff --git a/app/screens/phone-auth-screen/phone-auth.tsx b/app/screens/phone-auth-screen/phone-auth.tsx
@@ -87,6 +87,14 @@ const styles = EStyleSheet.create({
     width: "200rem",
   },
 
+  buttonContinue: {
+    alignSelf: "center",
+    backgroundColor: color.palette.blue,
+    width: "200rem",
+    marginVertical: "15rem",
+    padding: "15rem",
+  },
+
   codeContainer: {
     alignSelf: "center",
     width: "70%",
@@ -321,6 +329,14 @@ export const WelcomePhoneInputScreen: ScreenType = ({
             />
           </KeyboardAvoidingView>
         )}
+        <Button
+          buttonStyle={styles.buttonContinue}
+          title={translate("WelcomePhoneInputScreen.continue")}
+          disabled={phoneNumber ? true : false}
+          onPress={() => {
+            submitPhoneNumber()
+          }}
+        />
       </View>
       <CloseCross color={palette.darkGrey} onPress={() => navigation.goBack()} />
     </Screen>