Add loadPackages

coopcycle · Sep 20, 2024 · dfef2a7 · dfef2a7
1 parent 65fa20a
commit dfef2a7
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 50 deletions.
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -303,6 +303,7 @@
     "STORE_NEW_DELIVERY_WEIGHT": "Custom weight",
     "STORE_NEW_DELIVERY_ENTER_WEIGHT": "Enter a custom weight",
     "STORE_NEW_DELIVERY_PACKAGES": "Packages",
+    "STORE_NEW_DELIVERY_NO_PACKAGES": "No packages",
     "STORE_NEW_DELIVERY_DROPOFF_BEFORE": "Dropoff before",
     "STORE_NEW_DELIVERY_TIME_SLOT": "Time slot",
     "STORE_NEW_DELIVERY_SELECT_TIME_SLOT": "Select a time slot",

diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
@@ -291,6 +291,7 @@
     "STORE_NEW_DELIVERY_WEIGHT": "Poids personnalisé",
     "STORE_NEW_DELIVERY_ENTER_WEIGHT": "Entrez le poids du paquet",
     "STORE_NEW_DELIVERY_PACKAGES": "Paquets",
+    "STORE_NEW_DELIVERY_NO_PACKAGES": "Aucun paquet",
     "STORE_NEW_DELIVERY_DROPOFF_BEFORE": "À déposer avant",
     "STORE_NEW_DELIVERY_TIME_SLOT": "Tranche horaire",
     "STORE_NEW_DELIVERY_SELECT_TIME_SLOT": "Choisissez une tranche horaire",

diff --git a/src/navigation/store/NewDeliveryForm.js b/src/navigation/store/NewDeliveryForm.js
@@ -4,14 +4,20 @@ import moment from 'moment';
 import { Box, Button, HStack, Text, VStack } from 'native-base';
 import React, { useEffect, useState } from 'react';
 import { withTranslation } from 'react-i18next';
-import { InteractionManager, Platform, StyleSheet, View } from 'react-native';
+import {
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import KeyboardManager from 'react-native-keyboard-manager';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import { connect, useDispatch } from 'react-redux';
 
-import { TouchableOpacity } from 'react-native-gesture-handler';
 import {
   createDelivery,
+  loadPackages,
   loadTimeSlot,
   loadTimeSlotChoices,
   loadTimeSlots,
@@ -39,7 +45,7 @@ function NewDelivery(props) {
   const backgroundColor = useBackgroundContainerColor();
   const backgroundHighlightColor = useBackgroundHighlightColor();
   const [selectedChoice, setSelectedChoice] = React.useState(null);
-  const [packages, setPackages] = useState([]);
+  const [packagesCount, setPackagesCount] = useState([]);
   const dispatch = useDispatch();
 
   const {
@@ -51,6 +57,7 @@ function NewDelivery(props) {
     route,
     country,
     choices,
+    packages,
   } = props;
 
   const inputStyles = {
@@ -82,6 +89,7 @@ function NewDelivery(props) {
     InteractionManager.runAfterInteractions(() => {
       dispatch(loadTimeSlots(store));
       dispatch(loadTimeSlot(store));
+      dispatch(loadPackages(store));
     });
     // This will add a "OK" button above keyboard, to dismiss keyboard
     if (Platform.OS === 'ios') {
@@ -98,21 +106,22 @@ function NewDelivery(props) {
   }, [store, dispatch]);
 
   useEffect(() => {
-    setPackages(
-      tempPackages.map(item => {
+    if (!packages) return;
+    setPackagesCount(
+      packages.map(item => {
         return {
-          type: item,
+          name: item.name,
           quantity: 0,
         };
       }),
     );
-  }, []);
+  }, [packages]);
 
   function incrementQuantity(packageType, setFieldTouched) {
     setFieldTouched('packages');
-    setPackages(prev => {
+    setPackagesCount(prev => {
       return prev.map(item => {
-        if (item.type === packageType) {
+        if (item.name === packageType) {
           item.quantity += 1;
         }
         return item;
@@ -122,9 +131,9 @@ function NewDelivery(props) {
 
   function decrementQuantity(packageType, setFieldTouched) {
     setFieldTouched('packages');
-    setPackages(prev => {
+    setPackagesCount(prev => {
       return prev.map(item => {
-        if (item.type === packageType) {
+        if (item.name === packageType) {
           item.quantity -= 1;
         }
         return item;
@@ -156,15 +165,13 @@ function NewDelivery(props) {
         },
         comments: values.comments,
         weight: values.weight * 1000,
-        packages: packages.filter(item => item.quantity > 0),
+        packages: packagesCount.filter(item => item.quantity > 0),
         ...(selectedChoice
           ? { timeSlot: selectedChoice }
           : { before: values.before }),
       },
     };
 
-    console.log(delivery);
-
     dispatch(createDelivery(delivery, () => navigation.navigate('StoreHome')));
   }
 
@@ -179,7 +186,7 @@ function NewDelivery(props) {
       errors.weight = t('STORE_NEW_DELIVERY_ERROR.EMPTY_WEIGHT');
     }
 
-    if (!packages.some(item => item.quantity) && store.packagesRequired) {
+    if (!packagesCount.some(item => item.quantity) && store.packagesRequired) {
       errors.packages = t('STORE_NEW_DELIVERY_ERROR.EMPTY_PACKAGES');
     }
     return errors;
@@ -361,41 +368,45 @@ function NewDelivery(props) {
                 gap: 16,
                 marginTop: 4,
               }}>
-              {packages.map((item, index) => {
-                return (
-                  <View
-                    style={[
-                      {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        width: '100%',
-                        gap: 16,
-                        backgroundColor,
-                      },
-                    ]}
-                    key={index}>
-                    <Range
-                      onPress={() => {}}
-                      onPressIncrement={() =>
-                        incrementQuantity(item.type, setFieldTouched)
-                      }
-                      onPressDecrement={() =>
-                        decrementQuantity(item.type, setFieldTouched)
-                      }
-                      quantity={item.quantity}
-                    />
-                    <TouchableOpacity
-                      style={{
-                        flex: 1,
-                      }}
-                      onPress={() =>
-                        incrementQuantity(item.type, setFieldTouched)
-                      }>
-                      <Text>{item.type}</Text>
-                    </TouchableOpacity>
-                  </View>
-                );
-              })}
+              {packages && packages.length ? (
+                packagesCount.map((item, index) => {
+                  return (
+                    <View
+                      style={[
+                        {
+                          flexDirection: 'row',
+                          alignItems: 'center',
+                          width: '100%',
+                          gap: 16,
+                          backgroundColor,
+                        },
+                      ]}
+                      key={index}>
+                      <Range
+                        onPress={() => {}}
+                        onPressIncrement={() =>
+                          incrementQuantity(item.name, setFieldTouched)
+                        }
+                        onPressDecrement={() =>
+                          decrementQuantity(item.name, setFieldTouched)
+                        }
+                        quantity={item.quantity}
+                      />
+                      <TouchableOpacity
+                        style={{
+                          flex: 1,
+                        }}
+                        onPress={() =>
+                          incrementQuantity(item.name, setFieldTouched)
+                        }>
+                        <Text>{item.name}</Text>
+                      </TouchableOpacity>
+                    </View>
+                  );
+                })
+              ) : (
+                <Text>{t('STORE_NEW_DELIVERY_NO_PACKAGES')}</Text>
+              )}
             </View>
             {errors.packages && (
               <Text note style={styles.errorText}>
@@ -436,6 +447,7 @@ function mapStateToProps(state) {
   const timeSlots = selectTimeSlots(state);
   const choices = state.store.choices;
   const hasTimeSlot = timeSlots.length > 0;
+  const packages = state.store.packages;
 
   return {
     country: state.app.settings.country.toUpperCase(),
@@ -444,6 +456,7 @@ function mapStateToProps(state) {
     hasTimeSlot,
     timeSlots,
     choices,
+    packages,
   };
 }
 

diff --git a/src/redux/Store/actions.js b/src/redux/Store/actions.js
@@ -16,7 +16,27 @@ export const INIT_SUCCESS = '@store/INIT_SUCCESS';
 export const LOAD_TIME_SLOTS_SUCCESS = '@store/LOAD_TIME_SLOTS_SUCCESS';
 export const LOAD_TIME_SLOT_CHOICES_SUCCESS =
   '@store/LOAD_TIME_SLOT_CHOICES_SUCCESS';
+export const LOAD_PACKAGES_SUCCESS = '@store/LOAD_PACKAGES_SUCCESS';
 
+export const loadPackagesSuccess = createAction(LOAD_PACKAGES_SUCCESS);
+export function loadPackages(store) {
+  return (dispatch, getState) => {
+    const { app } = getState();
+    const { httpClient } = app;
+
+    dispatch(setLoading(true));
+
+    return httpClient
+      .get(`${store['@id']}/packages`)
+      .then(res => {
+        dispatch(loadPackagesSuccess(res['hydra:member']));
+        dispatch(setLoading(false));
+      })
+      .catch(e => {
+        dispatch(setLoading(false));
+      });
+  };
+}
 export const loadTimeSlotsSuccess = createAction(LOAD_TIME_SLOTS_SUCCESS);
 export function loadTimeSlots(store) {
   return (dispatch, getState) => {

diff --git a/src/redux/Store/reducers.js b/src/redux/Store/reducers.js
@@ -4,6 +4,7 @@ import {
   INIT_SUCCESS,
   LOAD_ADDRESSES_SUCCESS,
   LOAD_DELIVERIES_SUCCESS,
+  LOAD_PACKAGES_SUCCESS,
   LOAD_TASKS_SUCCESS,
   LOAD_TIME_SLOTS_SUCCESS,
   LOAD_TIME_SLOT_CHOICES_SUCCESS,
@@ -128,6 +129,12 @@ export default (state = initialState, action = {}) => {
         timeSlots: action.payload,
       };
 
+    case LOAD_PACKAGES_SUCCESS:
+      return {
+        ...state,
+        packages: action.payload,
+      };
+
     case LOAD_TASKS_SUCCESS:
       const { delivery, pickup, dropoff } = action.payload;