Merge pull request #30 from Endurance-Soft/formularios-cambio

Formularios cambio

package.json

@@ -20,8 +20,9 @@
     "@react-navigation/bottom-tabs": "^6.5.20",
     "@react-navigation/native": "^6.1.14",
     "@react-navigation/native-stack": "^6.9.22",
+    "@types/react": "^18.2.77",
     "date-fns": "^3.3.1",
-    "expo": "~50.0.7",
+    "expo": "~50.0.15",
     "expo-app-loading": "^2.1.1",
     "expo-config": "^1.0.0",
     "expo-dev-client": "~3.3.11",
@@ -31,15 +32,16 @@
     "firebase": "^10.10.0",
     "react": "18.2.0",
     "react-hook-form": "^7.51.0",
-    "react-native": "0.73.4",
+    "react-native": "0.73.6",
     "react-native-modal": "^13.0.1",
     "react-native-popup-menu": "^0.16.1",
-    "react-native-safe-area-context": "^4.9.0",
-    "react-native-screens": "^3.29.0",
-    "react-native-svg": "^15.1.0",
+    "react-native-safe-area-context": "4.8.2",
+    "react-native-screens": "~3.29.0",
+    "react-native-svg": "14.1.0",
     "react-native-vector-icons": "^10.0.3",
     "react-native-view-shot": "^3.8.0",
     "remixicon": "^4.2.0",
+    "typescript": "^5.4.5",
     "zustand": "^4.5.2"
   },
   "devDependencies": {

src/components/ClientDebit.js

@@ -20,7 +20,6 @@ const ClientDebit = ({ clientInfo }) => {
       0
     ).toFixed(2)
   );
-
   const navigation = useNavigation();
 
   return (
@@ -30,7 +29,7 @@ const ClientDebit = ({ clientInfo }) => {
       <View style={clientDebitStyles.spaceButtons}>
         <SimpleButton
           text="Automático"
-          onPress={() => navigation.navigate("AutomaticPayScreen")}
+          onPress={() => navigation.navigate("SelectPayModeScreen", { clientInfo })}
           width={screenWidth * 0.4}
         />
         <SimpleButton

src/components/ClientItem.js

@@ -1,10 +1,11 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { View, Text, TouchableOpacity, StyleSheet, Dimensions } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { FontAwesome5 } from "@expo/vector-icons";
 import { theme } from '../assets/Theme';
 import StyledText from "../utils/StyledText";
 import BorderBox from "../utils/BorderBox";
+import useStore from "../stores/store";
 
 const windowWidth = Dimensions.get('window').width;
 
@@ -13,7 +14,14 @@ const ClientItem = ({ client, onSelect }) => {
   const vCuenta =client.Cuenta;
   const vBalance = parseFloat(client.NotasPendientes.reduce((total, nota) => total + nota.Saldo_pendiente, 0).toFixed(2));
   const vNotasPendientes = client.NotasPendientes.length;
-  const vUltimoPago = '';
+  const pagosRealizados = useStore(state => state.pagosRealizados);
+  const [vUltimoPago, setUltimoPago] = useState("2020-06-10");
+
+  useEffect( () => {
+    if(pagosRealizados.length > 0){
+      setUltimoPago(pagosRealizados.reduce((mayor, pago)=> pago.fecha > mayor && pago.cuenta === client.Cuenta? pago.fecha : mayor, "2020-06-10"));
+    }
+  }, [pagosRealizados]);
   return (
       <BorderBox onPress={() => onSelect(client.id)} style={{marginVertical: 10}}>
       <View style={styles.iconContainer}>
@@ -46,7 +54,7 @@ const ClientItem = ({ client, onSelect }) => {
         </View>
         <View style={styles.textLine}>
           <StyledText regularText>ultimo pago :</StyledText>
-          <StyledText regularText>2020-06-12</StyledText>
+          <StyledText regularText>{vUltimoPago}</StyledText>
         </View>
       </View>
     </BorderBox>

src/components/DateInputField.js

@@ -3,18 +3,20 @@ import { Text, TextInput, StyleSheet, View } from 'react-native';
 import { theme } from "../assets/Theme";
 import { Controller } from 'react-hook-form';
 import DateTimePicker from '@react-native-community/datetimepicker';
-import { formatDate } from 'date-fns';
+import { format, formatDate } from 'date-fns';
 
-const DateInputField = ({ control, name, title, type = 'default' }) => {
+const DateInputField = ({ control, name, title, callThrough, type = 'default' }) => {
 
     const [selectedDate, setSelectedDate] = useState(new Date());
     const [showDatePicker, setShowDatePicker] = useState(false);
 
-    const handleDateChange = (event, selectedDate) => {
-        const currentDate = selectedDate;
+    const handleDateChange =  (event, newselectedDate) => {
+        const currentDate = newselectedDate || selectedDate;
         setShowDatePicker(false);
         setSelectedDate(currentDate);
+        console.log(formatDate(currentDate, 'yyyy-MM-dd')); 
         console.log('selectedDate', selectedDate);
+        callThrough(formatDate(currentDate, 'yyyy-MM-dd'));
     };
 
     return (
@@ -24,20 +26,19 @@ const DateInputField = ({ control, name, title, type = 'default' }) => {
                 control={control}
                 name={name}
                 defaultValue=""
-                render={({ field: { onChange, value } }) => (
+                render={({ field: { onChange, onBlur, value}}) => (
                     <TextInput
                         style={styles.input}
                         onFocus={() => setShowDatePicker(true)}
+                        onBlur={onBlur}
                         onChangeText={onChange}
-                        value={formatDate(selectedDate, 'dd/MM/yyyy', { awareOfUnicodeTokens: true })}
-                        keyboardType={type === 'numeric' ? 'numeric' : 'default'}
+                        value={format(selectedDate, 'dd/MM/yyyy')}
                     />
 
                 )}
             />
             {showDatePicker && (
                 <DateTimePicker
-                    testID="dateTimePicker"
                     value={selectedDate}
                     mode="date"
                     is24Hour={true}

src/components/DropdownSelector2.js

@@ -7,7 +7,7 @@ import { theme } from "../assets/Theme";
 import { StyleSheet, Dimensions } from 'react-native';
 const screenWidth = Dimensions.get('window').width;
 
-const DropdownSelector2 = ({ title, options, selectedOption, onOptionChange, size=200 }) => {
+const DropdownSelector2 = ({ title, name, options, selectedOption, onOptionChange, size=200 }) => {
   const [menuVisible, setMenuVisible] = useState(false);
 
   const toggleMenu = () => {
@@ -25,7 +25,7 @@ const DropdownSelector2 = ({ title, options, selectedOption, onOptionChange, siz
                 {selectedOption.charAt(0).toUpperCase() + selectedOption.slice(1)}
               </Text>
             </View>
-            <FontAwesome5 name={menuVisible ? "chevron-up" : "chevron-down"} size={20} color="white" />
+            <FontAwesome5 name={menuVisible ? "chevron-up" : "chevron-down"} size={15} color="white" />
           </View>
         </MenuTrigger>
         <MenuOptions customStyles={{ optionsContainer: styles.optionsContainer, optionsWrapper: styles.optionsWrapper, }}>
@@ -76,11 +76,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     paddingVertical: 12,
-    paddingHorizontal: 25,
+    paddingHorizontal: 20,
     backgroundColor: theme.colors.tertiary,
     borderRadius: 22,
-    width: "auto",
-    maxWidth: screenWidth - 40,
+    width: 'auto',
+    maxWidth: screenWidth - 200,
     alignSelf: "center",
   },
   menuTriggerInter: {

src/components/NoteItem.js

@@ -46,7 +46,7 @@ const NoteItem = ({ note, onSelect }) => {
         <View>
           <SimpleButton 
             text="Pagar" 
-            onPress={() => navigation.navigate("PayScreen", { note })}
+            onPress={() => navigation.navigate("SelectPaymentMethodScreen", { note,  payMode: "normal"})}
           />
         </View>
       </View>

src/navigation/AppNavigator.js

@@ -8,13 +8,16 @@ import BillScreen from '../screens/BillScreen'
 import ClientPaymentScreen from '../screens/ClientPaymentScreen';
 import PayScreen from '../screens/PayScreen';
 import AutomaticPayScreen from '../screens/AutomaticPayScreen';
+import SelectPaymentMethodScreen from '../screens/SelectPaymentMethodScreen';
 import FacturaScreen from '../screens/FacturaScreen';
 import ProfileScreen from '../screens/ProfileScreen';
 import HistoryScreen from '../screens/HistoryScreen';
 import OthersScreen from '../screens/OthersScreen';
 import ActivationScreen from '../screens/ActivationScreen';
 import LoginScreen from '../screens/LoginScreen';
 import Icon from 'react-native-vector-icons/Ionicons';
+import SelectPayModeScreen from '../screens/SelectPayModeScreen';
+import SelectPaymentMethodScreen2 from '../screens/SelectPaymentMethodScreen2';
 import { theme } from '../assets/Theme';
 
 const Stack = createNativeStackNavigator();
@@ -58,6 +61,10 @@ function AppNavigator() {
           name='AutomaticPayScreen'
           component={AutomaticPayScreen}
         />
+        <Stack.Screen
+          name='SelectPaymentMethodScreen'
+          component={SelectPaymentMethodScreen}
+        />
         <Stack.Screen 
           name="Factura" 
           component={FacturaScreen}
@@ -74,6 +81,14 @@ function AppNavigator() {
           name='LoginScreen'
           component={LoginScreen}
         />
+        <Stack.Screen
+          name='SelectPayModeScreen'
+          component={SelectPayModeScreen}
+        />
+        <Stack.Screen
+          name='SelectPaymentMethodScreen2'
+          component={SelectPaymentMethodScreen2}
+        />
       </Stack.Navigator>    
     </NavigationContainer>
   );