Update BillScreen

Endurance-Soft · Mar 22, 2024 · 04cc222 · 04cc222
1 parent ea39ca8
commit 04cc222
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 56 deletions.
diff --git a/src/screens/FacturaScreen.js b/src/screens/FacturaScreen.js
@@ -1,20 +1,20 @@
 import React, { useRef } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
+import { View, 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';
-import SimpleButton from '../utils/SimpleButton';
 import StyledText from '../utils/StyledText';
+import DualTextView from '../utils/DualTextView';
+import SimpleButton from '../utils/SimpleButton';
 
 const cliente = "John Doe";
 const numeroCliente = "20102353001";
-const fecha = "06/08/2023";
+const fechaEmision = "06/08/2024";
 const pagosRealizados = [
-  { numeroNota: "215", fechaNota: "11/07/23", total: "520", pagado: "210" },
-  { numeroNota: "221", fechaNota: "05/10/23", total: "340", pagado: "340" }
+  { numeroNota: "215", fechaNota: "11/07/2024", total: "520.00", pagado: "210.00" },
+  { numeroNota: "221", fechaNota: "05/08/2024", total: "340.00", pagado: "340.00" }
 ];
-const totalPagado = "350";
-
+const totalPagado = pagosRealizados.reduce((acc, pago) => acc + parseFloat(pago.pagado), 0).toFixed(2);
 
 const SimpleScreen = () => {
   const viewRef = useRef();
@@ -25,46 +25,64 @@ const SimpleScreen = () => {
         format: 'png',
         quality: 0.8,
       });
-      await Sharing.shareAsync(uri,{dialogTitle: 'Comprobante de pago'});
+      await Sharing.shareAsync(uri, { dialogTitle: 'Comparte tu comprobante de pago' });
     } catch (error) {
       Alert.alert("Error", "No se pudo capturar o compartir el comprobante: " + error.message);
     }
   };
-
   return (
     <SafeAreaView style={styles.safeArea}>
       <View style={styles.container} ref={viewRef}>
-        <Text style={styles.text}>COMPROBANTE DE PAGO</Text>
-        <View style={styles.textLine}>
-            <Text>Cliente:</Text>
-            <Text>{cliente}</Text>
-        </View>
-        <View style={styles.textLine}>
-              <Text>N° Cliente:</Text>
-              <Text>{numeroCliente}</Text>
-            </View>
-            {pagosRealizados.map((pago, index) => (
-              <View key={index} style={styles.notaContent}>
-                <View style={styles.textLine}>
-                  <Text> Numero de Nota:</Text>
-                  <Text> {pago.numeroNota} </Text>
-                </View>
-                <View style={styles.textLine}>
-                  <Text> Fecha de nota: </Text>
-                  <Text> {pago.fechaNota} </Text>
-                </View>
-                <View style={styles.textLine}>
-                  <Text> Total: {pago.total} Bs </Text>
-                  <Text> Pagado: {pago.pagado} Bs </Text>
-                </View>
-              </View>
-            ))}
-            <View style={styles.textLine}>
-              <Text>Total Pagado:</Text>
-              <Text style={styles.title}>{totalPagado} Bs</Text>
-            </View>
+        <StyledText regularIntenseText style={styles.title}>COMPROBANTE DE PAGO</StyledText>
+        <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>}
+          rightChild={<StyledText regularText>  {fechaEmision}</StyledText>}
+        />
+        {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>
-      <SimpleButton text="Pagar" onPress={captureAndShareScreenshot} />
+      <SimpleButton 
+        text="Imprimir" 
+        onPress={ captureAndShareScreenshot}
+      />
     </SafeAreaView>
   );
 };
@@ -76,26 +94,22 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   container: {
-    alignItems: 'center',
-    justifyContent: 'center',
+    margin: 20,
     padding: 20,
-    backgroundColor: '#f9f9f9',
-  },
-  text: {
-    fontSize: 18,
-    margin: 5,
+    alignSelf: 'stretch',
+    borderWidth: 1,
+    borderColor: '#ddd',
+    backgroundColor: '#fff',
   },
-  textLine: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
+  title: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    marginBottom: 20,
+    textAlign: 'center',
   },
-  dottedLine: {
-    borderBottomWidth: 3,
-    borderBottomColor: "black",
-    borderStyle: "dotted",
-    marginVertical: 8,
+  notaSection: {
+    marginBottom: 15,
   },
 });
 
-export default SimpleScreen;
+export default SimpleScreen;
diff --git a/src/utils/DualTextView.js b/src/utils/DualTextView.js
@@ -0,0 +1,36 @@
+// DualTextView.js
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const DualTextView = ({ leftChild, rightChild, separation }) => {
+  return (
+    <View style={[styles.container, {marginHorizontal: separation}]}>
+      <View style={[styles.child, styles.leftChild]}>
+        {leftChild}
+      </View>
+      <View style={[styles.child, styles.rightChild]}>
+        {rightChild}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+  },
+  child: {
+    flex: 1,
+  },
+  leftChild: {
+    alignItems: 'flex-end',
+  },
+  rightChild: {
+    alignItems: 'flex-start',
+  },
+});
+
+export default DualTextView;