calblueprint · wangannie · May 17, 2020 · Apr 12, 2020 · Apr 12, 2020 · Apr 12, 2020
diff --git a/assets/images/blueprint-logo.png b/assets/images/blueprint-logo.png
diff --git a/components/AuthTextField.js b/components/AuthTextField.js
@@ -35,12 +35,14 @@ function AuthTextField({
         errorColor={Colors.error}
         returnKeyType="done"
         keyboardType={
-          fieldType === 'Phone Number' || fieldType === 'Verification Code'
+          fieldType.includes('Phone Number') ||
+          fieldType === 'Verification Code'
             ? 'numeric'
             : undefined
         }
         maxLength={
-          fieldType === 'Phone Number'
+          // eslint-disable-next-line no-nested-ternary
+          fieldType.includes('Phone Number')
             ? 10
             : fieldType === 'Verification Code'
             ? 6
@@ -49,7 +51,7 @@ function AuthTextField({
         secureTextEntry={fieldType.includes('assword')}
         labelPadding={6}
       />
-      {fieldType === 'Name' && !error && (
+      {fieldType.includes('Name') && !error && (
         <Caption color={Colors.activeText}>
           Note: this is how clerks will greet you!
         </Caption>

diff --git a/components/resources/ResourceCategoryBar.js → components/resources/CategoryBar.js b/components/resources/ResourceCategoryBar.js → components/resources/CategoryBar.js
@@ -5,7 +5,7 @@ import { CategoryCard, CategoryHeadingContainer } from '../../styled/resources';
 import { Title } from '../BaseComponents';
 import CircleIcon from '../CircleIcon';
 
-function ResourceCategoryBar({ icon, title }) {
+function CategoryBar({ icon, title }) {
   return (
     <CategoryCard>
       <CircleIcon
@@ -20,9 +20,9 @@ function ResourceCategoryBar({ icon, title }) {
   );
 }
 
-ResourceCategoryBar.propTypes = {
+CategoryBar.propTypes = {
   icon: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
 };
 
-export default ResourceCategoryBar;
+export default CategoryBar;
diff --git a/components/settings/SettingsCard.js b/components/settings/SettingsCard.js
@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import Colors from '../../constants/Colors';
+import { ContentContainer, ResourceItemCard } from '../../styled/resources';
+import { Body, Subhead } from '../BaseComponents';
+
+function SettingsCard({ title, description, navigation, titleColor }) {
+  return (
+    <TouchableOpacity onPress={() => navigation()}>
+      <ResourceItemCard>
+        <ContentContainer>
+          <Subhead color={titleColor}>{title}</Subhead>
+          {description === '' || (
+            <Body color={Colors.secondaryText}>{description}</Body>
+          )}
+        </ContentContainer>
+      </ResourceItemCard>
+    </TouchableOpacity>
+  );
+}
+
+SettingsCard.propTypes = {
+  title: PropTypes.string.isRequired,
+  titleColor: PropTypes.string,
+  description: PropTypes.string,
+  navigation: PropTypes.func.isRequired,
+};
+
+SettingsCard.defaultProps = {
+  titleColor: Colors.activeText,
+  description: '',
+};
+
+export default SettingsCard;
diff --git a/lib/authUtils.js b/lib/authUtils.js
@@ -3,7 +3,14 @@ import { createPushTokens, updateCustomers } from './airtable/request';
 
 // Fields
 
-export const signUpFields = { NAME: 0, PHONENUM: 1, PASSWORD: 2, NEWPASSWORD: 3, VERIFYPASSWORD: 4, CODE: 5 };
+export const inputFields = {
+  NAME: 0,
+  PHONENUM: 1,
+  PASSWORD: 2,
+  NEWPASSWORD: 3,
+  VERIFYPASSWORD: 4,
+  CODE: 5,
+};
 
 // Encryption
 export const encryptPassword = async (customerId, password) => {

diff --git a/navigation/AppNavigator.js b/navigation/AppNavigator.js
@@ -8,6 +8,7 @@ import AuthLoadingScreen from '../screens/auth/AuthLoadingScreen';
 import DrawerContent from './DrawerContent';
 import AuthStackNavigator from './stack_navigators/AuthStack';
 import ResourcesStackNavigator from './stack_navigators/ResourcesStack';
+import SettingsStackNavigator from './stack_navigators/SettingsStack';
 import StoresStackNavigator from './stack_navigators/StoresStack';
 
 const Drawer = createDrawerNavigator();
@@ -49,6 +50,11 @@ function DrawerNavigator() {
         component={ResourcesStackNavigator}
         options={{ title: 'Resources', swipeEnabled: false }}
       />
+      <Drawer.Screen
+        name="Settings"
+        component={SettingsStackNavigator}
+        options={{ title: 'Settings', swipeEnabled: false }}
+      />
     </Drawer.Navigator>
   );
 }

diff --git a/navigation/DrawerContent.js b/navigation/DrawerContent.js
@@ -1,5 +1,6 @@
 import { DrawerItemList } from '@react-navigation/drawer';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
+import { Updates } from 'expo';
 import * as Analytics from 'expo-firebase-analytics';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -80,12 +81,13 @@ function DrawerContent(props) {
     return null;
   }
   const logout = async () => {
-    AsyncStorage.clear();
+    await AsyncStorage.clear();
     Sentry.configureScope((scope) => scope.clear());
     setTimeout(function() {
       navigation.navigate('Auth');
     }, 500);
     props.navigation.closeDrawer();
+    Updates.reload();
   };
 
   return (

diff --git a/navigation/stack_navigators/SettingsStack.js b/navigation/stack_navigators/SettingsStack.js
@@ -0,0 +1,23 @@
+import { createStackNavigator } from '@react-navigation/stack';
+import React from 'react';
+import Colors from '../../constants/Colors';
+import NameChangeScreen from '../../screens/settings/NameChangeScreen';
+import PhoneNumberChangeScreen from '../../screens/settings/PhoneNumberChangeScreen';
+import SettingsScreen from '../../screens/settings/SettingsScreen';
+
+const SettingsStack = createStackNavigator();
+
+export default function SettingsStackNavigator() {
+  return (
+    <SettingsStack.Navigator
+      screenOptions={{
+        headerShown: false,
+        cardStyle: { backgroundColor: Colors.lightest },
+        gestureEnabled: false,
+      }}>
+      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
+      <SettingsStack.Screen name="Name" component={NameChangeScreen} />
+      <SettingsStack.Screen name="Number" component={PhoneNumberChangeScreen} />
+    </SettingsStack.Navigator>
+  );
+}
diff --git a/package.json b/package.json
@@ -125,6 +125,6 @@
   },
   "private": true,
   "peerDependencies": {
-    "@unimodules/core": "*"
+    "@unimodules/core": "^5.1.2"
   }
 }
diff --git a/screens/auth/PasswordResetScreen.js b/screens/auth/PasswordResetScreen.js
@@ -21,7 +21,7 @@ import {
 import {
   encryptPassword,
   formatPhoneNumber,
-  signUpFields,
+  inputFields,
 } from '../../lib/authUtils';
 import {
   AuthScreenContainer,
@@ -46,79 +46,80 @@ export default class PasswordResetScreen extends React.Component {
       confirmed: false,
       formattedPhoneNumber: '',
       values: {
-        [signUpFields.PHONENUM]: '',
-        [signUpFields.NEWPASSWORD]: '',
-        [signUpFields.VERIFYPASSWORD]: '',
+        [inputFields.PHONENUM]: '',
+        [inputFields.NEWPASSWORD]: '',
+        [inputFields.VERIFYPASSWORD]: '',
       },
       errors: {
-        [signUpFields.PHONENUM]: '',
-        [signUpFields.NEWPASSWORD]: '',
-        [signUpFields.VERIFYPASSWORD]: '',
+        [inputFields.PHONENUM]: '',
+        [inputFields.NEWPASSWORD]: '',
+        [inputFields.VERIFYPASSWORD]: '',
       },
     };
   }
 
   // Check for an error with updated text
   // Set errors and updated text in state
-  updateError = async (text, signUpField) => {
+  updateError = async (text, inputField) => {
     let error = false;
     let errorMsg = '';
     // validate returns null if no error is found
-    switch (signUpField) {
-      case signUpFields.PHONENUM:
+    switch (inputField) {
+      case inputFields.PHONENUM:
         errorMsg = validate('phoneNumber', text);
         error = errorMsg !== null;
         break;
-      case signUpFields.NEWPASSWORD:
+      case inputFields.NEWPASSWORD:
         errorMsg = validate('password', text);
         error = errorMsg !== null;
         break;
-      case signUpFields.VERIFYPASSWORD:
+      case inputFields.VERIFYPASSWORD:
+        // Compare with new value
         errorMsg =
-          this.state.values[signUpFields.NEWPASSWORD] ===
-          this.state.values[signUpFields.VERIFYPASSWORD]
+          this.state.values[inputFields.NEWPASSWORD] === text
             ? null
             : 'Passwords must match';
         error = errorMsg !== null;
         break;
       default:
         console.log('Not reached');
     }
-    if (error) {
-      this.setState({ confirmed: false });
-    } else if (
-      this.state.verified &&
-      this.state.values[signUpFields.NEWPASSWORD] ===
-        this.state.values[signUpFields.VERIFYPASSWORD]
-    ) {
-      this.setState({ confirmed: true });
-    }
     this.setState((prevState) => ({
-      errors: { ...prevState.errors, [signUpField]: errorMsg },
-      values: { ...prevState.values, [signUpField]: text },
+      errors: { ...prevState.errors, [inputField]: errorMsg },
+      values: { ...prevState.values, [inputField]: text },
+      confirmed:
+        // Compare with new verifyPassword value
+        inputField === inputFields.VERIFYPASSWORD
+          ? prevState.verified &&
+            prevState.values[inputFields.NEWPASSWORD] === text &&
+            !error
+          : prevState.verified &&
+            prevState.values[inputFields.NEWPASSWORD] ===
+              prevState.values[inputFields.VERIFYPASSWORD] &&
+            !error,
     }));
 
     return error;
   };
 
   // onBlur callback is required in case customer taps on field, does nothing, and taps out
-  onBlur = async (signUpField) => {
-    await this.updateError(signUpField);
+  onBlur = async (inputField) => {
+    await this.updateError(inputField);
   };
 
   // onTextChange does a check before updating errors
   // It can only remove errors, not trigger them
-  onTextChange = async (text, signUpField) => {
+  onTextChange = async (text, inputField) => {
     // Only update error if there is currently an error
     if (
-      this.state.errors[signUpField] ||
-      signUpField === signUpFields.NEWPASSWORD ||
-      signUpFields.VERIFYPASSWORD
+      this.state.errors[inputField] ||
+      inputField === inputFields.NEWPASSWORD ||
+      inputFields.VERIFYPASSWORD
     ) {
-      await this.updateError(text, signUpField);
+      await this.updateError(text, inputField);
     } else {
       this.setState((prevState) => ({
-        values: { ...prevState.values, [signUpField]: text },
+        values: { ...prevState.values, [inputField]: text },
       }));
     }
   };
@@ -132,7 +133,7 @@ export default class PasswordResetScreen extends React.Component {
     if (!duplicate) {
       return;
     }
-    const number = '+1'.concat(this.state.values[signUpFields.PHONENUM]);
+    const number = '+1'.concat(this.state.values[inputFields.PHONENUM]);
     const phoneProvider = new firebase.auth.PhoneAuthProvider();
     try {
       const verificationId = await phoneProvider.verifyPhoneNumber(
@@ -167,7 +168,7 @@ export default class PasswordResetScreen extends React.Component {
   findCustomer = async () => {
     const formattedPhoneNumber = formatPhoneNumber(
       // eslint-disable-next-line react/no-access-state-in-setstate
-      this.state.values[signUpFields.PHONENUM]
+      this.state.values[inputFields.PHONENUM]
     );
     this.setState({ formattedPhoneNumber });
     try {
@@ -187,15 +188,15 @@ export default class PasswordResetScreen extends React.Component {
     // We use the record ID generated by Airtable as the salt to encrypt
     const encrypted = await encryptPassword(
       this.state.customer.id,
-      this.state.values[signUpFields.NEWPASSWORD]
+      this.state.values[inputFields.NEWPASSWORD]
     );
     // Update the created record with the encrypted password
     await updateCustomers(this.state.customer.id, { password: encrypted });
     this.setState({ success: true });
   };
 
   render() {
-    const validNumber = !this.state.errors[signUpFields.PHONENUM];
+    const validNumber = !this.state.errors[inputFields.PHONENUM];
     return (
       <AuthScreenContainer>
         <AuthScrollContainer
@@ -225,26 +226,26 @@ export default class PasswordResetScreen extends React.Component {
               <FormContainer>
                 <AuthTextField
                   fieldType="New Password"
-                  value={this.state.values[signUpFields.NEWPASSWORD]}
+                  value={this.state.values[inputFields.NEWPASSWORD]}
                   onBlurCallback={(value) => {
-                    this.updateError(value, signUpFields.NEWPASSWORD);
+                    this.updateError(value, inputFields.NEWPASSWORD);
                     this.scrollView.scrollToEnd({ animated: true });
                   }}
                   changeTextCallback={(text) =>
-                    this.onTextChange(text, signUpFields.NEWPASSWORD)
+                    this.onTextChange(text, inputFields.NEWPASSWORD)
                   }
-                  error={this.state.errors[signUpFields.NEWPASSWORD]}
+                  error={this.state.errors[inputFields.NEWPASSWORD]}
                 />
                 <AuthTextField
                   fieldType="Re-enter New Password"
-                  value={this.state.values[signUpFields.VERIFYPASSWORD]}
+                  value={this.state.values[inputFields.VERIFYPASSWORD]}
                   onBlurCallback={(value) =>
-                    this.updateError(value, signUpFields.VERIFYPASSWORD)
+                    this.updateError(value, inputFields.VERIFYPASSWORD)
                   }
                   changeTextCallback={(text) =>
-                    this.onTextChange(text, signUpFields.VERIFYPASSWORD)
+                    this.onTextChange(text, inputFields.VERIFYPASSWORD)
                   }
-                  error={this.state.errors[signUpFields.VERIFYPASSWORD]}
+                  error={this.state.errors[inputFields.VERIFYPASSWORD]}
                 />
               </FormContainer>
               <FilledButtonContainer
@@ -278,15 +279,15 @@ export default class PasswordResetScreen extends React.Component {
               <FormContainer>
                 <AuthTextField
                   fieldType="Phone Number"
-                  value={this.state.values[signUpFields.PHONENUM]}
+                  value={this.state.values[inputFields.PHONENUM]}
                   onBlurCallback={(value) =>
-                    this.updateError(value, signUpFields.PHONENUM)
+                    this.updateError(value, inputFields.PHONENUM)
                   }
                   changeTextCallback={(text) => {
                     this.scrollView.scrollToEnd({ animated: true });
-                    this.onTextChange(text, signUpFields.PHONENUM);
+                    this.onTextChange(text, inputFields.PHONENUM);
                   }}
-                  error={this.state.errors[signUpFields.PHONENUM]}
+                  error={this.state.errors[inputFields.PHONENUM]}
                 />
               </FormContainer>
               <FilledButtonContainer