Skip to content

Commit

Permalink
Merge pull request #31 from Endurance-Soft/datos-de-firebase
Browse files Browse the repository at this point in the history 
Link payment forms to invoice
  • Loading branch information
@WilliamCallao
WilliamCallao authored Apr 29, 2024
2 parents be23441 + 6416918 commit 9c3e7fb
Show file tree
Hide file tree
Showing 7 changed files with 289 additions and 112 deletions.
1 change: 0 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

250 changes: 169 additions & 81 deletions src/screens/FacturaScreen.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useRef, useState, useCallback} from 'react';
import { View, ScrollView, StyleSheet, Alert, TouchableOpacity } from 'react-native';
import { View, ScrollView, StyleSheet, Alert, TouchableOpacity, Text } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { captureRef } from 'react-native-view-shot';
import * as Sharing from 'expo-sharing';
Expand All @@ -12,18 +12,23 @@ import Icon from "react-native-vector-icons/AntDesign";
import { useNavigation, useFocusEffect } from '@react-navigation/native';
import { theme } from "../assets/Theme";
import { StatusBar } from 'expo-status-bar';
import { Dimensions } from 'react-native';
const screenWidth = Dimensions.get('window').width;
import useStore from '../stores/store';

const cliente = "John Doe";
const numeroCliente = "20102353001";
const fechaEmision = "06/08/2024";
const brandName = 'BRAND NAME';
const fontSizeM = screenWidth * 0.031;
const fontSizeL =screenWidth * 0.034;

const SimpleScreen = () => {
const viewRef = useRef();
const navigation = useNavigation();
const factura = PaymentStore((state) => state.facturaActual);
const numeroCuenta = factura.cliente.numeroCuenta;
const cliente = useStore(state => state.buscarClientePorCuenta(numeroCuenta));

const pagosRealizados = PaymentStore((state) => state.pagosRealizados);
const borrarPagos = PaymentStore((state) => state.borrarPagos);
const totalPagado = pagosRealizados.reduce((acc, pago) => acc + parseFloat(pago.pagado), 0).toFixed(2);
const borrarPagos = PaymentStore((state) => state.limpiarFactura);
const totalPagado = factura.notasPagadas.reduce((acc, nota) => acc + nota.detalles.reduce((accDet, det) => accDet + parseFloat(det.pagado), 0), 0).toFixed(2);

const [animationKey, setAnimationKey] = useState(Date.now());
useFocusEffect(
Expand All @@ -49,89 +54,119 @@ const SimpleScreen = () => {
const handleBorrarPagos = () => {
borrarPagos();
};

const currentDate = new Date();
const formattedDate = `${currentDate.getDate()}/${currentDate.getMonth() + 1}/${currentDate.getFullYear()}`;

return (
<SafeAreaView style={styles.flexContainer}>
<StatusBar style="ligth" backgroundColor={theme.colors.secondary} />
<StatusBar style="light" backgroundColor={theme.colors.secondary} />
<Cascading delay={200} animationKey={animationKey}>
<View style={styles.header}>
<TouchableOpacity
style={styles.back}
onPress={() => navigation.goBack()}
>
<Icon name="back" size={30} color="black" />
</TouchableOpacity>
<View style={styles.aviContainer}>
</View>
</View>
</Cascading>
<View style={styles.header}>
<TouchableOpacity
style={styles.back}
onPress={() => navigation.goBack()}
>
<Icon name="back" size={30} color="black" />
</TouchableOpacity>
<View style={styles.aviContainer}>
{/* Additional view content if needed */}
</View>
</View>
</Cascading>

<View style={styles.flexContainer}>

<ScrollView style={styles.safeArea} contentContainerStyle={styles.scrollViewContent}>
<Cascading delay={400} animationKey={animationKey}>
<View style={styles.container} ref={viewRef}>
<View style={styles.separacionInferior}>
<StyledText boldTextUpper style={styles.title}>{brandName}</StyledText>
<StyledText regularIntenceText style={{textAlign:'center'}}>Comprobante de pago</StyledText>
</View>
<View style={styles.notaSection}>
<DualTextView
leftChild={<StyledText regularIntenceText>Cliente :</StyledText>}
rightChild={<StyledText regularText> {cliente}</StyledText>}
/>
<DualTextView
leftChild={<StyledText regularIntenceText>N° Cliente :</StyledText>}
rightChild={<StyledText regularText> {numeroCliente}</StyledText>}
/>
<DualTextView
leftChild={<StyledText regularIntenceText>Fecha :</StyledText>}
rightChild={<StyledText regularText> {fechaEmision}</StyledText>}
/>
</View>
{pagosRealizados.map((pago, index) => (
<View key={index} style={styles.notaSection}>
<DualTextView
leftChild={<StyledText regularIntenceText>N° Nota :</StyledText>}
rightChild={<StyledText regularText> {pago.numeroNota}</StyledText>}
/>
<DualTextView
leftChild={<StyledText regularIntenceText>Fecha Nota :</StyledText>}
rightChild={<StyledText regularText> {pago.fechaNota}</StyledText>}
/>
<DualTextView
leftChild={<StyledText regularIntenceText>Total :</StyledText>}
rightChild={<StyledText regularText> {`${pago.total} Bs`}</StyledText>}
/>
<DualTextView
leftChild={<StyledText regularIntenceText>Pagado :</StyledText>}
rightChild={<StyledText regularText> {`${pago.pagado} Bs`}</StyledText>}
/>

<Cascading delay={400} animationKey={animationKey}>
<View style={styles.container} ref={viewRef}>
<Text style={styles.title}>{factura.nombreEmpresa}</Text>
<Text style={styles.subtitle}>{"COMPROBANTE DE PAGO"}</Text>
<Text style={{height:15}}>{""}</Text>
<View style={styles.dottedLine} />
<Text style={{height:6}}>{""}</Text>
<Text style={styles.section}>FECHA: {formattedDate}</Text>
{cliente && cliente.Nombre && (
<Text style={styles.section}>CLIENTE: {cliente.Nombre}</Text>
)}

<Text style={styles.section}>N° CUENTA: {factura.cliente.numeroCuenta}</Text>
<Text style={styles.section}>METODO DE PAGO: {factura.metodoPago}</Text>
<Text style={{height:6}}>{""}</Text>
<View style={styles.dottedLine} />
<Text style={styles.sectionTitle}>NOTAS PAGADAS (Bs.)</Text>
<View style={styles.dottedLine} />
<View style={styles.tableHeader}>
<Text style={[styles.tableHeaderText, styles.cellNota]}>NOTA</Text>
<Text style={[styles.tableHeaderText, styles.cellTotal]}>TOTAL</Text>
<Text style={[styles.tableHeaderText, styles.cellPagado]}>PAGADO</Text>
<Text style={[styles.tableHeaderText, styles.cellSaldo]}>SALDO</Text>
</View>
<View style={styles.dottedLine} />
{factura.notasPagadas.map((nota, index) => (
<View key={index}>
{nota.detalles.map((detalle, detalleIndex) => (
<View key={detalleIndex} style={styles.tableRow}>
<Text style={[styles.cell, styles.cellNota]}>
{detalle.numeroNota + '\n' + detalle.fecha}
</Text>
<Text style={[styles.cell, styles.cellTotal]}>
{detalle.total.toFixed(2)}
</Text>
<Text style={[styles.cell, styles.cellPagado]}>
{typeof detalle.pagado === 'number' ? detalle.pagado.toFixed(2) : '0.00'}
</Text>
<Text style={[styles.cell, styles.cellSaldo]}>
{typeof detalle.saldo === 'number' ? detalle.saldo.toFixed(2) : '0.00'}
</Text>
</View>
))}
<View style={styles.dottedLine} />
</View>
))}
<View style={styles.totalRow}>
<Text style={styles.cellTotal}>{"Total Pagado: "}</Text>
<Text style={[styles.cellPagado, styles.totalPagado]}>{totalPagado} Bs.</Text>
</View>
))}
<View style={styles.total}>
<DualTextView
leftChild={<StyledText regularIntenceText>Total Pagado :</StyledText>}
rightChild={<StyledText regularText> {`${totalPagado} Bs`}</StyledText>}
/>
<View style={styles.dottedLine} />
</View>
</View>
</Cascading>
</ScrollView>

<Cascading delay={500} animationKey={animationKey}>
<View style={styles.buttonContainer}>
<SimpleButton
text="Imprimir"
onPress={handlePress}
/>
</View>
<View style={styles.buttonContainer}>
<SimpleButton
text="Imprimir"
onPress={handlePress}
/>
</View>
</Cascading>
</View>
</SafeAreaView>
);
};

const styles = StyleSheet.create({
totalRow: {

flexDirection: 'row',
justifyContent: 'center',
},
totalPagado: {
fontSize: fontSizeL,
textAlign: 'center',
},
cellTotal: {
fontSize: fontSizeL,
},
sectionLabel: {
marginTop: 5,
marginLeft: 20,
fontWeight: 'bold',
fontSize: fontSizeL,
},
sectionContent: {
fontSize: fontSizeM,
},
flexContainer: {
flex: 1,
backgroundColor: theme.colors.secondary,
Expand All @@ -146,26 +181,19 @@ const styles = StyleSheet.create({
scrollViewContent: {
flexGrow: 0.7,
justifyContent: 'center',
// backgroundColor:'red',
paddingBottom: 30,
},
buttonContainer: {
marginHorizontal: 20,
paddingBottom: 20,
},
container: {
margin: 20,
padding:5,
margin: 10,
paddingTop: 40,
paddingBottom: 50,
paddingBottom: 80,
alignSelf: 'stretch',
borderRadius: 10,
backgroundColor: '#fff',
// elevation: 9,
},
separacionInferior:{
margin: 20,
alignSelf: 'stretch',
},
title: {
textAlign: 'center',
Expand All @@ -188,6 +216,66 @@ const styles = StyleSheet.create({
header:{
marginHorizontal:20,
},
title: {
fontWeight: 'bold',
fontSize: 18,
textAlign: 'center',
marginTop: 20,
},
subtitle: {
fontWeight: 'bold',
textAlign: 'center',
},
section: {
fontSize: fontSizeM,
marginLeft: 20,
},
sectionTitle: {
textAlign: 'center',
fontWeight: 'bold',
fontSize: fontSizeL,
},
tableRow: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 10,
alignItems: 'center',
},
dottedLine: {
borderBottomWidth: 2,
borderColor: 'black',
borderStyle: 'dotted',
marginVertical: 3,
},
tableHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 10,
},
tableHeaderText: {
fontWeight: 'bold',
fontSize: 13,
fontSize: fontSizeL,
},
cell: {
fontSize: fontSizeM,
paddingVertical: 5,
textAlign: 'left',
},
cellNota: {
width: screenWidth * 0.22,
},
cellFecha: {
textAlign: 'center',
},
cellPagado: {
width: screenWidth * 0.23,
textAlign: 'right',
},
cellSaldo: {
width: screenWidth * 0.2,
textAlign: 'right',
},
});

export default SimpleScreen;
60 changes: 36 additions & 24 deletions src/screens/PayScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,31 +58,43 @@ const PayScreen = ({ route }) => {
});

const onSubmit = (data) => {
PaymentStore.getState().agregarPago({
numeroNota: note.nro_nota,
fechaNota: note.Fecha,
total: note.importe_nota,
pagado: data.amount,
});
updateNota(note.id, {Saldo_pendiente: note.Saldo_pendiente - parseFloat(data.amount), Monto_pagado: note.Monto_pagado + parseFloat(data.amount) });
agregarPago({
cta_deposito: selectedBank,
cuenta: note.Cuenta|| "",
empresa_id: user.empresa_id,
fecha: selectedDate,
fecha_registro: note.Fecha_venta|| "",
modo_pago: method,
moneda: selectedCurrency,
monto: data.amount|| "",
nro_factura: note.nro_nota|| "",
observaciones: data.observations|| "",
pago_a_nota: note.id|| "",
referencia: data.reference|| "",
sucursal_id: note.sucursal_id|| "",
})
console.log("Pagos realizados:", PaymentStore.getState().pagosRealizados);
navigation.goBack();
PaymentStore.getState().establecerCliente(user.nombre, note.Cuenta);
PaymentStore.getState().establecerMetodoPago(method);
PaymentStore.getState().agregarNotaPagada({
fecha: selectedDate,
metodoPago: method,
detalles: [{
numeroNota: note.nro_nota,
fecha: note.Fecha_venta,
total: parseFloat(note.importe_nota),
pagado: parseFloat(data.amount),
saldo: parseFloat(note.Saldo_pendiente) - parseFloat(data.amount),
}]
});

updateNota(note.id, {
Saldo_pendiente: note.Saldo_pendiente - parseFloat(data.amount),
Monto_pagado: note.Monto_pagado + parseFloat(data.amount)
});

agregarPago({
cta_deposito: selectedBank,
cuenta: note.Cuenta || "",
empresa_id: user.empresa_id,
fecha: selectedDate,
fecha_registro: note.Fecha_venta || "",
modo_pago: method,
moneda: selectedCurrency,
monto: data.amount || "",
nro_factura: note.nro_nota || "",
observaciones: data.observations || "",
pago_a_nota: note.id || "",
referencia: data.reference || "",
sucursal_id: note.sucursal_id || "",
});
navigation.goBack();
};

return (
<SafeAreaView style={styles.container}>
<StatusBar style="ligth" backgroundColor={theme.colors.secondary} />
Expand Down
Loading

0 comments on commit 9c3e7fb

Please sign in to comment.