From 690087375ee6975e7292abf1494d8d2a7379fcc6 Mon Sep 17 00:00:00 2001
From: WilliamCallao <96638909+WilliamCallao@users.noreply.github.com>
Date: Sun, 24 Mar 2024 09:08:29 -0400
Subject: [PATCH] Update FacturaScreen

---
 src/PaymentStore.js            |   2 +-
 src/navigation/AppNavigator.js |   1 +
 src/screens/FacturaScreen.js   | 122 +++++++++++++++++++++++----------
 src/screens/PayScreen.js       |  21 +++---
 4 files changed, 96 insertions(+), 50 deletions(-)

diff --git a/src/PaymentStore.js b/src/PaymentStore.js
index e35f058..5ce5a81 100644
--- a/src/PaymentStore.js
+++ b/src/PaymentStore.js
@@ -1,4 +1,4 @@
-import create from 'zustand'
+import {create} from 'zustand'
 
 const PaymentStore = create((set) => ({
   pagosRealizados: [],
diff --git a/src/navigation/AppNavigator.js b/src/navigation/AppNavigator.js
index 44b191b..ffc9a7e 100644
--- a/src/navigation/AppNavigator.js
+++ b/src/navigation/AppNavigator.js
@@ -58,6 +58,7 @@ function AppNavigator() {
         <Stack.Screen 
           name="Factura" 
           component={FacturaScreen} 
+          options={{ headerShown: false }} 
         />
       </Stack.Navigator>
     </NavigationContainer>
diff --git a/src/screens/FacturaScreen.js b/src/screens/FacturaScreen.js
index 5704cc0..ae81a99 100644
--- a/src/screens/FacturaScreen.js
+++ b/src/screens/FacturaScreen.js
@@ -1,5 +1,5 @@
-import React, { useRef } from 'react';
-import { View, StyleSheet, Alert, TouchableOpacity } from 'react-native';
+import React, { useRef, useState, useCallback} from 'react';
+import { View, ScrollView, StyleSheet, Alert, TouchableOpacity } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { captureRef } from 'react-native-view-shot';
 import * as Sharing from 'expo-sharing';
@@ -7,17 +7,30 @@ import StyledText from '../utils/StyledText';
 import DualTextView from '../utils/DualTextView';
 import SimpleButton from '../utils/SimpleButton';
 import PaymentStore from '../PaymentStore';
+import Cascading from '../animation/CascadingFadeInView';
+import Icon from "react-native-vector-icons/AntDesign";
+import { useNavigation, useFocusEffect } from '@react-navigation/native';
+import { theme } from "../../constants.js";
+import { StatusBar } from 'expo-status-bar';
 
 const cliente = "John Doe";
 const numeroCliente = "20102353001";
 const fechaEmision = "06/08/2024";
+const brandName = 'BRAND NAME';
 
 const SimpleScreen = () => {
   const viewRef = useRef();
+  const navigation = useNavigation();
   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 [animationKey, setAnimationKey] = useState(Date.now());
+  useFocusEffect(
+  useCallback(() => {
+      setAnimationKey(Date.now());
+  }, [])
+  );
   const captureAndShareScreenshot = async () => {
     try {
       const uri = await captureRef(viewRef, {
@@ -34,92 +47,127 @@ const SimpleScreen = () => {
     Alert.alert("Borrado", "Todos los pagos han sido borrados.");
   };
   return (
-    <SafeAreaView style={styles.safeArea}>
+    <>
+    <StatusBar style="ligth" backgroundColor={theme.colors.primary} />
+    <ScrollView style={styles.safeArea}>
+    <Cascading delay={100} 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}>
+                    {/* <Text style={styles.avi}>Nº 150</Text>
+                    <Text style={styles.avi}>130. Bs</Text> */}
+                </View>
+            </View>
+        </Cascading>
       <View style={styles.container} ref={viewRef}>
-        <StyledText regularIntenseText style={styles.title}>COMPROBANTE DE PAGO</StyledText>
+        <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
-          separation={10}
           leftChild={<StyledText regularIntenceText>Cliente  :</StyledText>}
           rightChild={<StyledText regularText>  {cliente}</StyledText>}
         />
         <DualTextView
-          separation={10}
           leftChild={<StyledText regularIntenceText>N° Cliente  :</StyledText>}
           rightChild={<StyledText regularText>  {numeroCliente}</StyledText>}
         />
         <DualTextView
-          separation={10}
-          leftChild={<StyledText regularIntenceText>Fecha de Emisión  :</StyledText>}
+          leftChild={<StyledText regularIntenceText>Fecha  :</StyledText>}
           rightChild={<StyledText regularText>  {fechaEmision}</StyledText>}
         />
+        </View>
         {pagosRealizados.map((pago, index) => (
           <View key={index} style={styles.notaSection}>
             <DualTextView
-              separation={10}
               leftChild={<StyledText regularIntenceText>N° Nota  :</StyledText>}
               rightChild={<StyledText regularText>  {pago.numeroNota}</StyledText>}
             />
             <DualTextView
-              separation={10}
               leftChild={<StyledText regularIntenceText>Fecha Nota  :</StyledText>}
               rightChild={<StyledText regularText>  {pago.fechaNota}</StyledText>}
             />
             <DualTextView
-              separation={10}
               leftChild={<StyledText regularIntenceText>Total  :</StyledText>}
               rightChild={<StyledText regularText>  {`${pago.total} Bs`}</StyledText>}
             />
             <DualTextView
-              separation={10}
               leftChild={<StyledText regularIntenceText>Pagado  :</StyledText>}
               rightChild={<StyledText regularText>  {`${pago.pagado} Bs`}</StyledText>}
             />
-            
+
           </View>
         ))}
-        <DualTextView
-          separation={10}
-          leftChild={<StyledText regularIntenceText>Total Pagado  :</StyledText>}
-          rightChild={<StyledText regularText>  {`${totalPagado} Bs`}</StyledText>}
+        <View style={styles.total}>
+          <DualTextView
+            leftChild={<StyledText regularIntenceText>Total Pagado  :</StyledText>}
+            rightChild={<StyledText regularText>  {`${totalPagado} Bs`}</StyledText>}
+          />
+        </View>
+      </View>
+      <View style={{marginHorizontal:20}}>
+        <SimpleButton
+          text="Imprimir"
+          onPress={ captureAndShareScreenshot}
         />
-        
       </View>
-      <SimpleButton 
-        text="Imprimir" 
-        onPress={ captureAndShareScreenshot}
-      />
-      <SimpleButton 
-        text="Borrar todos los pagos" 
+      {/* <SimpleButton
+        text="Borrar todos los pagos"
         onPress={handleBorrarPagos}
         style={{ marginTop: 10 }} // Añade un poco de margen entre los botones
-      />
-      
-    </SafeAreaView>
+      /> */}
+
+    </ScrollView>
+    </>
   );
 };
 
 const styles = StyleSheet.create({
   safeArea: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
+    paddingTop: 35,
+    backgroundColor:'#fff' 
   },
   container: {
     margin: 20,
-    padding: 20,
+    padding:5,
+    paddingTop: 40,
+    paddingBottom: 50,
     alignSelf: 'stretch',
-    borderWidth: 1,
-    borderColor: '#ddd',
+    borderRadius: 10,
     backgroundColor: '#fff',
+    elevation: 9,
+  },
+  separacionInferior:{
+    margin: 20,
+    alignSelf: 'stretch',
   },
   title: {
-    fontSize: 22,
-    fontWeight: 'bold',
-    marginBottom: 20,
     textAlign: 'center',
   },
   notaSection: {
-    marginBottom: 15,
+    marginBottom: 10,
+    marginTop: 10,
+  },
+  total:{
+    marginTop:20,
+  },
+  back: {
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: theme.colors.otherWhite,
+    borderRadius: 20,
+    width: 60,
+    height: 60,
+},
+  header:{
+    marginHorizontal:20,
+    flex:1,
   },
 });
 
diff --git a/src/screens/PayScreen.js b/src/screens/PayScreen.js
index e04bdc7..57686be 100644
--- a/src/screens/PayScreen.js
+++ b/src/screens/PayScreen.js
@@ -16,7 +16,6 @@ const screenHeight = Dimensions.get("window").height;
 const PayScreen = ({ route }) => {
     const { note } = route.params;
     const navigation = useNavigation();
-    //const { itemClient } = route.params;
     const [animationKey, setAnimationKey] = useState(Date.now());
     useFocusEffect(
         useCallback(() => {
@@ -51,17 +50,15 @@ const PayScreen = ({ route }) => {
     });
 
     const onSubmit = (data) => {
-        console.log(data);
-        // Aquí puedes agregar la lógica para guardar los datos
-        //navigation.navigate("ClientPaymentScreen", { itemClient: item });
-        PaymentStore.getState().agregarPago({
-            numeroNota: note.nro_nota,
-            fechaNota: note.Fecha,
-            total: note.importe_nota,
-            pagado: data.amount,
-          });
-          
-          console.log("Pagos realizados:", PaymentStore.getState().pagosRealizados);
+    console.log(data);
+    PaymentStore.getState().agregarPago({
+        numeroNota: note.nro_nota,
+        fechaNota: note.Fecha,
+        total: note.importe_nota,
+        pagado: data.amount,
+    });
+    console.log("Pagos realizados:", PaymentStore.getState().pagosRealizados);
+    navigation.goBack();
     };
 
     return (