Move phone & contact to first page & making first page form

coopcycle · Jun 27, 2024 · 476d1e3 · 476d1e3
1 parent 5cc4563
commit 476d1e3
Show file tree

Hide file tree

Showing 2 changed files with 173 additions and 96 deletions.
diff --git a/src/navigation/store/NewDeliveryAddress.js b/src/navigation/store/NewDeliveryAddress.js
@@ -1,30 +1,45 @@
 import _ from 'lodash';
-import { Text } from 'native-base';
-import React from 'react';
+import { Box, Button, Input, Text } from 'native-base';
+import React, { useState } from 'react';
 import { withTranslation } from 'react-i18next';
 import { KeyboardAvoidingView, Platform, StyleSheet, View } from 'react-native';
 import { connect } from 'react-redux';
+import { AsYouType, parsePhoneNumberFromString } from 'libphonenumber-js';
 
 import AddressAutocomplete from '../../components/AddressAutocomplete';
 
 import { assertDelivery } from '../../redux/Store/actions';
 import { selectStore } from '../../redux/Store/selectors';
+import { Formik } from 'formik';
+import {
+  useBackgroundContainerColor,
+  useBackgroundHighlightColor,
+} from '../../styles/theme';
 
 function NewDelivery(props) {
-  // const [extraScrollHeight, setExtraScrollHeight] = useState(0);
+  const [validAddresses, setValidAddresses] = useState(false);
+  const [address, setAddress] = useState(null);
+  const backgroundColor = useBackgroundContainerColor();
+  const backgroundHighlightColor = useBackgroundHighlightColor();
+
+  const inputStyles = {
+    backgroundColor,
+    borderColor: backgroundHighlightColor,
+  };
 
   function onSelectAddress(address) {
+    setAddress(address);
+
     const delivery = {
       store: props.store['@id'],
       dropoff: {
         address,
-        // FIXME It shouldn't be necessary to send this
         before: 'tomorrow 12:00',
       },
     };
 
     props.assertDelivery(delivery, () => {
-      props.navigation.navigate('StoreNewDeliveryForm', { address });
+      setValidAddresses(true);
     });
   }
 
@@ -35,7 +50,7 @@ function NewDelivery(props) {
     },
   };
 
-  if (!_.isEmpty(props.error)) {
+  if (!_.isEmpty(props.deliveryError)) {
     autocompleteProps = {
       ...autocompleteProps,
       inputContainerStyle: {
@@ -45,42 +60,148 @@ function NewDelivery(props) {
     };
   }
 
+  function validate(values) {
+    let errors = { address: {} };
+
+    console.log('values', values);
+
+    if (_.isEmpty(values.address.telephone)) {
+      errors.address.telephone = props.t(
+        'STORE_NEW_DELIVERY_ERROR.EMPTY_PHONE_NUMBER',
+      );
+    } else {
+      const phoneNumber = parsePhoneNumberFromString(
+        _.trim(values.address.telephone),
+        props.country,
+      );
+      if (!phoneNumber || !phoneNumber.isValid()) {
+        errors.address.telephone = props.t('INVALID_PHONE_NUMBER');
+      }
+    }
+
+    if (_.isEmpty(values.address.contactName)) {
+      errors.address.contactName = props.t(
+        'STORE_NEW_DELIVERY_ERROR.EMPTY_CONTACT_NAME',
+      );
+    }
+
+    if (_.isEmpty(errors.address)) {
+      delete errors.address;
+    }
+
+    return errors;
+  }
+
+  let initialValues = {
+    address: {
+      telephone: '',
+      contactName: '',
+    },
+  };
+
+  function handleChangeTelephone(value, setFieldValue, setFieldTouched) {
+    setFieldValue(
+      'address.telephone',
+      new AsYouType(props.country).input(value),
+    );
+    setFieldTouched('address.telephone', true);
+  }
+
   return (
-    <KeyboardAvoidingView style={styles.content} behavior="position">
-      <Text style={styles.label}>{props.t('STORE_NEW_DELIVERY_ADDRESS')}</Text>
-      <View style={styles.container}>
-        <View style={styles.autocompleteContainer}>
-          <AddressAutocomplete
-            addresses={props.addresses}
-            onSelectAddress={onSelectAddress}
-            containerStyle={{
-              flex: 1,
-              justifyContent: 'center',
-            }}
-            style={{ borderRadius: 0 }}
-            {...autocompleteProps}
-          />
-        </View>
-        <Text style={styles.help} note>
-          {props.t('STORE_NEW_DELIVERY_ADDRESS_HELP')}
-        </Text>
-      </View>
-    </KeyboardAvoidingView>
+    <Formik
+      initialValues={initialValues}
+      validate={validate}
+      onSubmit={values => submit(values)}
+      validateOnBlur={false}
+      validateOnChange={false}>
+      {({
+        handleChange,
+        handleBlur,
+        handleSubmit,
+        values,
+        errors,
+        touched,
+        setFieldValue,
+        setFieldTouched,
+      }) => (
+        <Box p={3}>
+          <View style={[styles.formGroup, { zIndex: 1 }]}>
+            <Text style={styles.label}>
+              {props.t('STORE_NEW_DELIVERY_ADDRESS')}
+              {validAddresses && ' ✓'}
+            </Text>
+            <Text style={styles.help} note>
+              {props.t('STORE_NEW_DELIVERY_ADDRESS_HELP')}
+            </Text>
+            <View style={styles.autocompleteContainer}>
+              <AddressAutocomplete
+                addresses={props.addresses}
+                onSelectAddress={onSelectAddress}
+                containerStyle={[
+                  {
+                    flex: 1,
+                    justifyContent: 'center',
+                  },
+                  inputStyles,
+                ]}
+                style={{ borderRadius: 0 }}
+                {...autocompleteProps}
+              />
+            </View>
+          </View>
+          <View style={[styles.formGroup]}>
+            <Text style={styles.label}>
+              {props.t('STORE_NEW_DELIVERY_CONTACT_NAME')}
+            </Text>
+            <Input
+              style={[styles.textInput, inputStyles]}
+              autoCorrect={false}
+              returnKeyType="done"
+              onChangeText={handleChange('address.contactName')}
+              onBlur={handleBlur('address.contactName')}
+              value={values.address.contactName}
+            />
+            {errors.address &&
+              touched.address &&
+              errors.address.contactName && (
+                <Text note style={styles.errorText}>
+                  {errors.address.contactName}
+                </Text>
+              )}
+          </View>
+          <View style={[styles.formGroup]}>
+            <Text style={styles.label}>
+              {props.t('STORE_NEW_DELIVERY_PHONE_NUMBER')}
+            </Text>
+            <Input
+              style={[styles.textInput, inputStyles]}
+              autoCorrect={false}
+              keyboardType="phone-pad"
+              returnKeyType="done"
+              onChangeText={value =>
+                handleChangeTelephone(value, setFieldValue, setFieldTouched)
+              }
+              onBlur={handleBlur('address.telephone')}
+              value={values.address.telephone}
+            />
+            {errors.address && touched.address && errors.address.telephone && (
+              <Text note style={styles.errorText}>
+                {errors.address.telephone}
+              </Text>
+            )}
+          </View>
+          <Button onPress={handleSubmit}>
+            <Text>Submit</Text>
+          </Button>
+        </Box>
+      )}
+    </Formik>
   );
 }
 
 const styles = StyleSheet.create({
-  content: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  container: {
-    marginHorizontal: 10,
-  },
-  // @see https://github.com/mrlaessig/react-native-autocomplete-input#android
   autocompleteContainer: {
-    position: 'absolute',
-    width: '100%',
+    height: 40,
     ...Platform.select({
       android: {
         flex: 1,
@@ -99,24 +220,33 @@ const styles = StyleSheet.create({
     }),
   },
   label: {
-    paddingVertical: 10,
-    textAlign: 'center',
+    marginBottom: 5,
     fontWeight: '600',
   },
   help: {
-    paddingVertical: 5,
-    textAlign: 'center',
-    paddingTop: 50,
+    marginBottom: 5,
+    fontWeight: '400',
   },
   errorInput: {
     borderColor: '#FF4136',
   },
+  formGroup: {
+    marginBottom: 10,
+  },
+  textInput: {
+    height: 40,
+    paddingHorizontal: 10,
+  },
+  errorText: {
+    color: '#FF4136',
+    marginTop: 5,
+  },
 });
 
 function mapStateToProps(state) {
   return {
     store: selectStore(state),
-    error: state.store.assertDeliveryError,
+    deliveryError: state.store.assertDeliveryError,
     addresses: state.store.addresses,
   };
 }

diff --git a/src/navigation/store/NewDeliveryForm.js b/src/navigation/store/NewDeliveryForm.js
@@ -19,7 +19,6 @@ import {
 import { selectStore, selectTimeSlots } from '../../redux/Store/selectors';
 import TimeSlotSelector from './components/TimeSlotSelector';
 import {
-  useBackgroundColor,
   useBackgroundContainerColor,
   useBackgroundHighlightColor,
 } from '../../styles/theme';
@@ -82,14 +81,6 @@ function NewDelivery(props) {
     setIsDateTimePickerVisible(false);
   }
 
-  function handleChangeTelephone(value, setFieldValue, setFieldTouched) {
-    setFieldValue(
-      'address.telephone',
-      new AsYouType(props.country).input(value),
-    );
-    setFieldTouched('address.telephone');
-  }
-
   function submit(values) {
     const delivery = {
       store: props.store['@id'],
@@ -250,51 +241,7 @@ function NewDelivery(props) {
                 isReadOnly={true}
               />
             </View>
-            <View style={[styles.formGroup]}>
-              <Text style={styles.label}>
-                {props.t('STORE_NEW_DELIVERY_PHONE_NUMBER')}
-              </Text>
-              <Input
-                style={[styles.textInput, inputStyles]}
-                autoCorrect={false}
-                keyboardType="phone-pad"
-                returnKeyType="done"
-                onChangeText={value =>
-                  handleChangeTelephone(value, setFieldValue, setFieldTouched)
-                }
-                onBlur={handleBlur('address.telephone')}
-                value={values.address.telephone}
-              />
-              {errors.address &&
-                touched.address &&
-                errors.address.telephone &&
-                touched.address.telephone && (
-                  <Text note style={styles.errorText}>
-                    {errors.address.telephone}
-                  </Text>
-                )}
-            </View>
-            <View style={[styles.formGroup]}>
-              <Text style={styles.label}>
-                {props.t('STORE_NEW_DELIVERY_CONTACT_NAME')}
-              </Text>
-              <Input
-                style={[styles.textInput, inputStyles]}
-                autoCorrect={false}
-                returnKeyType="done"
-                onChangeText={handleChange('address.contactName')}
-                onBlur={handleBlur('address.contactName')}
-                value={values.address.contactName}
-              />
-              {errors.address &&
-                touched.address &&
-                errors.address.contactName &&
-                touched.address.contactName && (
-                  <Text note style={styles.errorText}>
-                    {errors.address.contactName}
-                  </Text>
-                )}
-            </View>
+
             <View style={[styles.formGroup]}>
               <Text style={styles.label}>
                 {props.t('STORE_NEW_DELIVERY_COMMENTS')}