Add ModalFormWrapper component for reusable modal form layout

coopcycle · Jul 1, 2024 · 6537448 · 6537448
1 parent 9f8e993
commit 6537448
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 144 deletions.
diff --git a/src/navigation/store/ModalFormWrapper.js b/src/navigation/store/ModalFormWrapper.js
@@ -0,0 +1,23 @@
+import { SafeAreaView } from 'react-native';
+import { useBackgroundContainerColor } from '../../styles/theme';
+import { Box, Button, VStack } from 'native-base';
+
+export default function ModalFormWrapper({ children, handleSubmit, t }) {
+  const backgroundColor = useBackgroundContainerColor();
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor }}>
+      <VStack
+        flex={1}
+        justifyContent="space-between"
+        style={{
+          backgroundColor,
+        }}>
+        <Box p="3">{children}</Box>
+        <Box p="3">
+          <Button onPress={handleSubmit}>{t('SUBMIT')}</Button>
+        </Box>
+      </VStack>
+    </SafeAreaView>
+  );
+}
diff --git a/src/navigation/store/NewDeliveryAddress.js b/src/navigation/store/NewDeliveryAddress.js
@@ -21,6 +21,7 @@ import {
   useBackgroundContainerColor,
   useBackgroundHighlightColor,
 } from '../../styles/theme';
+import ModalFormWrapper from './ModalFormWrapper';
 
 function NewDelivery(props) {
   const [validAddresses, setValidAddresses] = useState(false);
@@ -148,89 +149,73 @@ function NewDelivery(props) {
         setFieldValue,
         setFieldTouched,
       }) => (
-        <SafeAreaView
-          style={{
-            flex: 1,
-            backgroundColor: backgroundColor,
-          }}>
-          <VStack
-            flex={1}
-            justifyContent="space-between"
-            style={{ backgroundColor }}>
-            <Box p={3}>
-              <View style={[styles.formGroup, { zIndex: 1 }]}>
-                <Text style={styles.label}>
-                  {props.t('STORE_NEW_DELIVERY_ADDRESS')}
-                  {validAddresses && ' ✓'}
+        <ModalFormWrapper handleSubmit={handleSubmit} t={props.t}>
+          <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>
-                <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>
-            </Box>
-            <Box p={3}>
-              <Button onPress={handleSubmit}>{props.t('SUBMIT')}</Button>
-            </Box>
-          </VStack>
-        </SafeAreaView>
+              )}
+          </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>
+        </ModalFormWrapper>
       )}
     </Formik>
   );

diff --git a/src/navigation/store/NewDeliveryForm.js b/src/navigation/store/NewDeliveryForm.js
@@ -28,6 +28,7 @@ import {
   useBackgroundContainerColor,
   useBackgroundHighlightColor,
 } from '../../styles/theme';
+import ModalFormWrapper from './ModalFormWrapper';
 
 function NewDelivery(props) {
   const [isDateTimePickerVisible, setIsDateTimePickerVisible] = useState(false);
@@ -245,69 +246,55 @@ function NewDelivery(props) {
         setFieldValue,
         setFieldTouched,
       }) => (
-        <SafeAreaView
-          style={{
-            flex: 1,
-            backgroundColor: backgroundColor,
-          }}>
-          <VStack
-            flex={1}
-            justifyContent="space-between"
-            style={{ backgroundColor }}>
-            <Box p="3">
-              <View style={[styles.formGroup]}>
-                <Text style={styles.label}>
-                  {props.t('STORE_NEW_DELIVERY_ADDRESS')}
-                </Text>
-                <Input
-                  variant="filled"
-                  style={[styles.textInput, inputStyles]}
-                  value={delivery?.address.streetAddress}
-                  isReadOnly={true}
-                />
-              </View>
+        <ModalFormWrapper handleSubmit={handleSubmit} t={props.t}>
+          <View style={[styles.formGroup]}>
+            <Text style={styles.label}>
+              {props.t('STORE_NEW_DELIVERY_ADDRESS')}
+            </Text>
+            <Input
+              variant="filled"
+              style={[styles.textInput, inputStyles]}
+              value={delivery?.address.streetAddress}
+              isReadOnly={true}
+            />
+          </View>
 
-              <View style={[styles.formGroup]}>
-                <Text style={styles.label}>
-                  {props.t('STORE_NEW_DELIVERY_COMMENTS')}
-                </Text>
-                <Input
-                  style={[styles.textInput, styles.textarea, inputStyles]}
-                  autoCorrect={false}
-                  multiline={true}
-                  onChangeText={handleChange('delivery.address.description')}
-                  onBlur={handleBlur('delivery.address.description')}
-                  value={values.delivery.address.description}
-                />
-              </View>
-              {props.hasTimeSlot && (
-                <TimeSlotSelector
-                  selectValue={selectValue}
-                  setSelectValue={setSelectValue}
-                  errors={errors}
-                  touched={touched}
-                  setFieldValue={setFieldValue}
-                  setFieldTouched={setFieldTouched}
-                  updateSelectedTimeSlot={updateSelectedTimeSlot}
-                  timeSlots={props.timeSlots}
-                  choices={props.choices}
-                  selectedTimeSlot={selectedTimeSlot}
-                />
-              )}
-              {!props.hasTimeSlot &&
-                renderDateTimePicker(
-                  initialValues,
-                  values,
-                  errors,
-                  setFieldValue,
-                  setFieldTouched,
-                )}
-            </Box>
-            <Box p="3">
-              <Button onPress={handleSubmit}>{props.t('SUBMIT')}</Button>
-            </Box>
-          </VStack>
-        </SafeAreaView>
+          <View style={[styles.formGroup]}>
+            <Text style={styles.label}>
+              {props.t('STORE_NEW_DELIVERY_COMMENTS')}
+            </Text>
+            <Input
+              style={[styles.textInput, styles.textarea, inputStyles]}
+              autoCorrect={false}
+              multiline={true}
+              onChangeText={handleChange('delivery.address.description')}
+              onBlur={handleBlur('delivery.address.description')}
+              value={values.delivery.address.description}
+            />
+          </View>
+          {props.hasTimeSlot && (
+            <TimeSlotSelector
+              selectValue={selectValue}
+              setSelectValue={setSelectValue}
+              errors={errors}
+              touched={touched}
+              setFieldValue={setFieldValue}
+              setFieldTouched={setFieldTouched}
+              updateSelectedTimeSlot={updateSelectedTimeSlot}
+              timeSlots={props.timeSlots}
+              choices={props.choices}
+              selectedTimeSlot={selectedTimeSlot}
+            />
+          )}
+          {!props.hasTimeSlot &&
+            renderDateTimePicker(
+              initialValues,
+              values,
+              errors,
+              setFieldValue,
+              setFieldTouched,
+            )}
+        </ModalFormWrapper>
       )}
     </Formik>
   );