Skip to content

Commit

Permalink
Add timeSlots and choices default
Browse files Browse the repository at this point in the history
  • Loading branch information
Pierre-LHOSTE committed Sep 11, 2024
1 parent 3350663 commit 6da0490
Show file tree
Hide file tree
Showing 5 changed files with 89 additions and 55 deletions.
5 changes: 4 additions & 1 deletion src/i18n/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -302,13 +302,16 @@
"STORE_NEW_DELIVERY_ENTER_COMMENTS": "Induce any useful information (intercom...)",
"STORE_NEW_DELIVERY_WEIGHT": "Custom weight",
"STORE_NEW_DELIVERY_ENTER_WEIGHT": "Enter a custom weight",
"STORE_NEW_DELIVERY_PACKAGES": "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",
"STORE_NEW_DELIVERY_ERROR": {
"EMPTY_TIME_SLOT": "Please select a time slot",
"EMPTY_CONTACT_NAME": "Please provide a name for the recipient",
"EMPTY_PHONE_NUMBER": "Please provide a phone number"
"EMPTY_PHONE_NUMBER": "Please provide a phone number",
"EMPTY_WEIGHT": "Please provide a weight",
"EMPTY_PACKAGES": "Please select packages"
},
"STORE_DELIVERY": "Delivery #{{id}}",
"DELIVERY_STATE": {
Expand Down
7 changes: 5 additions & 2 deletions src/i18n/locales/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -289,14 +289,17 @@
"STORE_NEW_DELIVERY_COMMENTS": "Informations d'accès",
"STORE_NEW_DELIVERY_ENTER_COMMENTS": "Indiquez toute information utile (interphone…)",
"STORE_NEW_DELIVERY_WEIGHT": "Poids personnalisé",
"STORE_NEW_DELIVERY_ENTER_WEIGHT": "Entrez le poids du colis",
"STORE_NEW_DELIVERY_ENTER_WEIGHT": "Entrez le poids du paquet",
"STORE_NEW_DELIVERY_PACKAGES": "Paquets",
"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",
"STORE_NEW_DELIVERY_ERROR": {
"EMPTY_TIME_SLOT": "Veuillez choisir une tranche horaire",
"EMPTY_CONTACT_NAME": "Veuillez fournir le nom d'une personne à contacter",
"EMPTY_PHONE_NUMBER": "Veuillez fournir un numéro de téléphone"
"EMPTY_PHONE_NUMBER": "Veuillez fournir un numéro de téléphone",
"EMPTY_WEIGHT": "Veillez fournir le poids du colis",
"EMPTY_PACKAGES": "Veillez sélectionner les paquets"
},
"STORE_DELIVERY": "Livraison #{{id}}",
"DELIVERY_STATE": {
Expand Down
124 changes: 76 additions & 48 deletions src/navigation/store/NewDeliveryForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { withTranslation } from 'react-i18next';
import { InteractionManager, Platform, StyleSheet, View } from 'react-native';
import KeyboardManager from 'react-native-keyboard-manager';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import { connect } from 'react-redux';
import { connect, useDispatch } from 'react-redux';

import { TouchableOpacity } from 'react-native-gesture-handler';
import {
Expand Down Expand Up @@ -38,15 +38,14 @@ function NewDelivery(props) {
const [selectedTimeSlot, setSelectedTimeSlot] = useState('');
const backgroundColor = useBackgroundContainerColor();
const backgroundHighlightColor = useBackgroundHighlightColor();
const [selectValue, setSelectValue] = React.useState(null);
const [selectedChoice, setSelectedChoice] = React.useState(null);
const [packages, setPackages] = useState([]);
const dispatch = useDispatch();

const {
t,
loadTimeSlot,
store,
timeSlots,
createDelivery,
navigation,
hasTimeSlot,
route,
Expand All @@ -59,10 +58,30 @@ function NewDelivery(props) {
borderColor: backgroundHighlightColor,
};

useEffect(() => {
if (selectedTimeSlot) return;
if (store.timeSlot && store.timeSlot.trim() !== '') {
setSelectedTimeSlot(store.timeSlot);
} else if (timeSlots.length > 0) {
setSelectedTimeSlot(timeSlots[0]['@id']);
}
}, [store.timeSlot, timeSlots]);

Check failure on line 68 in src/navigation/store/NewDeliveryForm.js

View workflow job for this annotation

GitHub Actions / Basic tests

React Hook useEffect has a missing dependency: 'selectedTimeSlot'. Either include it or remove the dependency array

useEffect(() => {
if (!selectedTimeSlot || !timeSlots.length) return;
dispatch(
loadTimeSlotChoices(timeSlots.find(ts => ts['@id'] === selectedTimeSlot)),
);
}, [selectedTimeSlot, loadTimeSlotChoices, timeSlots]);

Check failure on line 75 in src/navigation/store/NewDeliveryForm.js

View workflow job for this annotation

GitHub Actions / Basic tests

React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array. Outer scope values like 'loadTimeSlotChoices' aren't valid dependencies because mutating them doesn't re-render the component

useEffect(() => {
if (choices.length) setSelectedChoice(choices[0].value);
}, [choices]);

useEffect(() => {
InteractionManager.runAfterInteractions(() => {
loadTimeSlot(store);
loadTimeSlots(store);
dispatch(loadTimeSlots(store));
dispatch(loadTimeSlot(store));
});
// This will add a "OK" button above keyboard, to dismiss keyboard
if (Platform.OS === 'ios') {
Expand All @@ -76,7 +95,7 @@ function NewDelivery(props) {
KeyboardManager.setEnableAutoToolbar(false);
}
};
}, [loadTimeSlot, loadTimeSlots, store]);
}, [store]);

Check failure on line 98 in src/navigation/store/NewDeliveryForm.js

View workflow job for this annotation

GitHub Actions / Basic tests

React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array

useEffect(() => {
setPackages(
Expand All @@ -89,20 +108,8 @@ function NewDelivery(props) {
);
}, [tempPackages]);

Check failure on line 109 in src/navigation/store/NewDeliveryForm.js

View workflow job for this annotation

GitHub Actions / Basic tests

React Hook useEffect has an unnecessary dependency: 'tempPackages'. Either exclude it or remove the dependency array. Outer scope values like 'tempPackages' aren't valid dependencies because mutating them doesn't re-render the component

useEffect(() => {
if (timeSlots.length > 0) {
setSelectedTimeSlot(timeSlots[0].name);
}
}, [timeSlots]);

useEffect(() => {
setSelectValue(null);
if (selectedTimeSlot) {
loadTimeSlotChoices(timeSlots.find(ts => ts.name === selectedTimeSlot));
}
}, [selectedTimeSlot, loadTimeSlotChoices, timeSlots]);

function incrementQuantity(packageType) {
function incrementQuantity(packageType, setFieldTouched) {
setFieldTouched('packages');
setPackages(prev => {
return prev.map(item => {
if (item.type === packageType) {
Expand All @@ -113,7 +120,8 @@ function NewDelivery(props) {
});
}

function decrementQuantity(packageType) {
function decrementQuantity(packageType, setFieldTouched) {
setFieldTouched('packages');
setPackages(prev => {
return prev.map(item => {
if (item.type === packageType) {
Expand All @@ -125,7 +133,7 @@ function NewDelivery(props) {
}

function updateSelectedTimeSlot(timeSlot) {
setSelectedTimeSlot(timeSlot.name);
setSelectedTimeSlot(timeSlot['@id']);
}

function showDateTimePicker() {
Expand All @@ -149,29 +157,31 @@ function NewDelivery(props) {
comments: values.comments,
weight: values.weight * 1000,
packages: packages.filter(item => item.quantity > 0),
...(selectValue
? { timeSlot: selectValue }
...(selectedChoice
? { timeSlot: selectedChoice }
: { before: values.before }),
},
};

console.log(delivery);

// createDelivery(delivery, () =>
// navigation.navigate('StoreHome'),
// );
dispatch(createDelivery(delivery, () => navigation.navigate('StoreHome')));
}

function validate(values) {
let errors = {};

if (hasTimeSlot && !selectValue) {
errors = {
...errors,
timeSlot: t('STORE_NEW_DELIVERY_ERROR.EMPTY_TIME_SLOT'),
};
if (hasTimeSlot && !selectedChoice) {
errors.timeSlot = t('STORE_NEW_DELIVERY_ERROR.EMPTY_TIME_SLOT');
}

if (!values.weight && store.weightRequired) {
errors.weight = t('STORE_NEW_DELIVERY_ERROR.EMPTY_WEIGHT');
}

if (!packages.some(item => item.quantity) && store.packagesRequired) {
errors.packages = t('STORE_NEW_DELIVERY_ERROR.EMPTY_PACKAGES');
}
return errors;
}

Expand Down Expand Up @@ -228,7 +238,7 @@ function NewDelivery(props) {
}

setFieldValue('weight', value);
setFieldTouched('weight', true);
setFieldTouched('weight');
}

const delivery = route.params?.delivery;
Expand Down Expand Up @@ -292,8 +302,8 @@ function NewDelivery(props) {
</View> */}
{hasTimeSlot ? (
<TimeSlotSelector
selectValue={selectValue}
setSelectValue={setSelectValue}
selectValue={selectedChoice}
setSelectValue={setSelectedChoice}
errors={errors}
touched={touched}
setFieldValue={setFieldValue}
Expand All @@ -316,7 +326,9 @@ function NewDelivery(props) {
<View style={[styles.formGroup]}>
<Text style={styles.label}>
{t('STORE_NEW_DELIVERY_WEIGHT')}{' '}
<Text style={styles.optional}>({t('OPTIONAL')})</Text>
{!store.weightRequired ? (
<Text style={styles.optional}>({t('OPTIONAL')})</Text>
) : null}
</Text>
<FormInput
keyboardType="numeric"
Expand All @@ -330,15 +342,20 @@ function NewDelivery(props) {
value={values.weight}
placeholder={t('STORE_NEW_DELIVERY_ENTER_WEIGHT')}
/>
{errors.address && touched.address && errors.address.weight && (
{errors.weight && touched.weight && (
<Text note style={styles.errorText}>
{errors.address.weight}
{errors.weight}
</Text>
)}
</View>

<View style={[styles.formGroup]}>
<Text style={styles.label}>Packages</Text>
<Text style={styles.label}>
{t('STORE_NEW_DELIVERY_PACKAGES')}{' '}
{!store.packagesRequired ? (
<Text style={styles.optional}>({t('OPTIONAL')})</Text>
) : null}
</Text>
<View
style={{
gap: 16,
Expand All @@ -359,21 +376,32 @@ function NewDelivery(props) {
key={index}>
<Range
onPress={() => {}}
onPressIncrement={() => incrementQuantity(item.type)}
onPressDecrement={() => decrementQuantity(item.type)}
onPressIncrement={() =>
incrementQuantity(item.type, setFieldTouched)
}
onPressDecrement={() =>
decrementQuantity(item.type, setFieldTouched)
}
quantity={item.quantity}
/>
<TouchableOpacity
style={{
flex: 1,
}}
onPress={() => incrementQuantity(item.type)}>
onPress={() =>
incrementQuantity(item.type, setFieldTouched)
}>
<Text>{item.type}</Text>
</TouchableOpacity>
</View>
);
})}
</View>
{errors.packages && (
<Text note style={styles.errorText}>
{errors.packages}
</Text>
)}
</View>
</ModalFormWrapper>
)}
Expand Down Expand Up @@ -421,11 +449,11 @@ function mapStateToProps(state) {

function mapDispatchToProps(dispatch) {
return {
createDelivery: (delivery, onSuccess) =>
dispatch(createDelivery(delivery, onSuccess)),
loadTimeSlot: store => dispatch(loadTimeSlot(store)),
loadTimeSlots: store => dispatch(loadTimeSlots(store)),
loadTimeSlotChoices: timeSlot => dispatch(loadTimeSlotChoices(timeSlot)),
// createDelivery: (delivery, onSuccess) =>
// dispatch(createDelivery(delivery, onSuccess)),
// loadTimeSlot: store => dispatch(loadTimeSlot(store)),
// loadTimeSlots: store => dispatch(loadTimeSlots(store)),
// loadTimeSlotChoices: timeSlot => dispatch(loadTimeSlotChoices(timeSlot)),
};
}

Expand Down
6 changes: 3 additions & 3 deletions src/navigation/store/components/TimeSlotSelector.js
Original file line number Diff line number Diff line change
Expand Up @@ -86,12 +86,12 @@ export default function TimeSlotSelector({
style={[
{
borderColor:
selectedTimeSlot === timeSlot.name
selectedTimeSlot === timeSlot['@id']
? 'transparent'
: backgroundHighlightColor,
},
styles.button,
!(selectedTimeSlot === timeSlot.name) && {
!(selectedTimeSlot === timeSlot['@id']) && {
backgroundColor: 'transparent',
},
]}
Expand All @@ -100,7 +100,7 @@ export default function TimeSlotSelector({
numberOfLines={1}
style={{
color:
selectedTimeSlot === timeSlot.name ? 'white' : '#878787',
selectedTimeSlot === timeSlot['@id'] ? 'white' : '#878787',
}}>
{timeSlot.name}
</Text>
Expand Down
2 changes: 1 addition & 1 deletion src/redux/Store/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export function loadTimeSlots(store) {
.then(res => {
dispatch(loadTimeSlotsSuccess(res['hydra:member']));
dispatch(setLoading(false));
dispatch(loadTimeSlotChoices(res['hydra:member'][0]));
// dispatch(loadTimeSlotChoices(res['hydra:member'][0]));
})
.catch(e => {
dispatch(setLoading(false));
Expand Down

0 comments on commit 6da0490

Please sign in to comment.