Add package page title and description and fix styles

coopcycle · Nov 12, 2024 · c1bc5fb · c1bc5fb
1 parent 49f0e80
commit c1bc5fb
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 11 deletions.
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -294,6 +294,8 @@
     "STORE_NEW_DELIVERY_PICKUP_USE_CUSTOM_ADDRESS": "Use a custom address",
     "STORE_NEW_DELIVERY_DROPOFF_TITLE": "Dropoff address",
     "STORE_NEW_DELIVERY_DROPOFF_DESCRIPTION": "Fill in the information about the dropoff address and the contact details",
+    "STORE_NEW_DELIVERY_PACKAGES_TITLE": "Time slot and packages",
+    "STORE_NEW_DELIVERY_PACKAGES_DESCRIPTION": "Select a time slot, the weight of the package if necessary and the packages to deliver",
     "STORE_NEW_DELIVERY": "New delivery",
     "STORE_NEW_DELIVERY_ADDRESS": "Address",
     "STORE_NEW_DELIVERY_SEARCH_CLIENT": "Search for a client",

diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
@@ -280,6 +280,8 @@
     "STORE_NEW_DELIVERY_PICKUP_USE_CUSTOM_ADDRESS": "Utiliser une adresse personnalisée",
     "STORE_NEW_DELIVERY_DROPOFF_TITLE": "Adresse de dépôt",
     "STORE_NEW_DELIVERY_DROPOFF_DESCRIPTION": "Remplissez les informations de livraison ainsi que la personne à contacter",
+    "STORE_NEW_DELIVERY_PACKAGES_TITLE": "Tranche horaire et paquets",
+    "STORE_NEW_DELIVERY_PACKAGES_DESCRIPTION": "Sélectionnez une tranche horaire a respecter, le poids du colis si nécessaire et les paquets à livrer",
     "STORE_NEW_DELIVERY": "Nouvelle livraison",
     "STORE_NEW_DELIVERY_ADDRESS": "Adresse",
     "STORE_NEW_DELIVERY_SEARCH_CLIENT": "Rechercher un client",

diff --git a/src/navigation/store/NewDeliveryAddress.js b/src/navigation/store/NewDeliveryAddress.js
@@ -173,16 +173,14 @@ function NewDeliveryAddress(props) {
       }) => (
         <ModalFormWrapper handleSubmit={handleSubmit} t={t}>
           <View style={[styles.formGroup, { zIndex: 2 }]}>
-            <View style={styles.header}>
+            <View style={[styles.header, styles.label]}>
               <IconCircleArrowDownFilled
                 size={24}
                 fill={primaryColor}
                 color={backgroundColor}
                 stroke={10}
               />
-              <Text style={styles.label}>
-                {t('STORE_NEW_DELIVERY_DROPOFF_TITLE')}
-              </Text>
+              <Text>{t('STORE_NEW_DELIVERY_DROPOFF_TITLE')}</Text>
             </View>
             <Text style={styles.optional}>
               {t('STORE_NEW_DELIVERY_DROPOFF_DESCRIPTION')}
@@ -362,7 +360,7 @@ const styles = StyleSheet.create({
   header: {
     display: 'flex',
     flexDirection: 'row',
-    alignContent: 'center',
+    alignItems: 'center',
     gap: 5,
   },
   formGroup: {

diff --git a/src/navigation/store/NewDeliveryForm.js b/src/navigation/store/NewDeliveryForm.js
@@ -14,14 +14,18 @@ import KeyboardManager from 'react-native-keyboard-manager';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import { connect, useDispatch } from 'react-redux';
 
+import { IconPackage } from '@tabler/icons-react-native';
 import {
   loadPackages,
   loadTimeSlot,
   loadTimeSlotChoices,
   loadTimeSlots,
 } from '../../redux/Store/actions';
 import { selectStore, selectTimeSlots } from '../../redux/Store/selectors';
-import { useBackgroundContainerColor } from '../../styles/theme';
+import {
+  useBackgroundContainerColor,
+  usePrimaryColor,
+} from '../../styles/theme';
 import Range from '../checkout/ProductDetails/Range';
 import ModalFormWrapper from './ModalFormWrapper';
 import FormInput from './components/FormInput';
@@ -31,6 +35,7 @@ function DeliveryForm(props) {
   const [isDateTimePickerVisible, setIsDateTimePickerVisible] = useState(false);
   const [selectedTimeSlot, setSelectedTimeSlot] = useState('');
   const backgroundColor = useBackgroundContainerColor();
+  const primaryColor = usePrimaryColor();
   const [selectedChoice, setSelectedChoice] = React.useState(null);
   const [packagesCount, setPackagesCount] = useState([]);
   const dispatch = useDispatch();
@@ -276,6 +281,19 @@ function DeliveryForm(props) {
         setFieldTouched,
       }) => (
         <ModalFormWrapper handleSubmit={handleSubmit} t={t}>
+          <View style={[styles.formGroup, { zIndex: 2 }]}>
+            <View style={[styles.header, styles.label]}>
+              <IconPackage
+                size={24}
+                stroke={primaryColor}
+                color={backgroundColor}
+              />
+              <Text>{t('STORE_NEW_DELIVERY_PACKAGES_TITLE')}</Text>
+            </View>
+            <Text style={styles.optional}>
+              {t('STORE_NEW_DELIVERY_PACKAGES_DESCRIPTION')}
+            </Text>
+          </View>
           {hasTimeSlot ? (
             <TimeSlotSelector
               selectValue={selectedChoice}
@@ -406,6 +424,12 @@ function DeliveryForm(props) {
 }
 
 const styles = StyleSheet.create({
+  header: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+  },
   label: {
     marginBottom: 8,
     fontWeight: '500',

diff --git a/src/navigation/store/NewDeliveryPickup.js b/src/navigation/store/NewDeliveryPickup.js
@@ -180,16 +180,14 @@ function NewDeliveryPickup(props) {
       }) => (
         <ModalFormWrapper handleSubmit={handleSubmit} t={t}>
           <View style={[styles.formGroup, { zIndex: 2 }]}>
-            <View style={styles.header}>
+            <View style={[styles.header, styles.label]}>
               <IconCircleArrowUpFilled
                 size={24}
                 fill={primaryColor}
                 color={backgroundColor}
                 stroke={10}
               />
-              <Text style={styles.label}>
-                {t('STORE_NEW_DELIVERY_PICKUP_TITLE')}
-              </Text>
+              <Text>{t('STORE_NEW_DELIVERY_PICKUP_TITLE')}</Text>
             </View>
             <Text style={styles.optional}>
               {t('STORE_NEW_DELIVERY_PICKUP_DESCRIPTION')}
@@ -389,7 +387,7 @@ const styles = StyleSheet.create({
   header: {
     display: 'flex',
     flexDirection: 'row',
-    alignContent: 'center',
+    alignItems: 'center',
     gap: 5,
   },
   formGroup: {