5

Tengo una App desde la que se realizan pedidos a un restaurante.

El cliente selecciona los productos que desea del catalogo, después hace el pedido desde la app y se muestra un resumen de los productos seleccionados y el precio que tienen todos los productos. Este precio de cada producto se calcula en FormularioPlato y el precio total de todos los productos se calcula en se calcula en el State y el ResumenPedido.js

Entonces el restaurante responde desde el Panel de Administrador. Cuando el pedido esta terminado por parte del restaurante, en el panel de administración tienen un botón para marcar el pedido como terminado. Cuando marcan el pedido terminado, automáticamente envía una notificación a la App del cliente informándole : Su Pedido esta listo. Por favor, puede pasar a recogerlo. Recuerde que el coste de su comida era: ...."

Cuando el restaurante da por terminado el pedido, muestra el mensaje en la App , pero el predio del pedido se muestra en "0", el precio se encuentra en la variable { total }, la cual importo desde el archivo resumen de pedido y del State. El problema que tengo, no se como importar a la pantalla de ProgresoPedido que es la que muestra el mensaje Pero no la estoy llamando correctamente a { total } , ya que no se muestra en el mensaje,

introducir la descripción de la imagen aquí

Este elemento se importa desde pedidosContext, es por ello que no importo ResumenPedido, pero no se si lo estoy haciendo correctamente

¿ Como debo llamar a la variable { total } para traerlo ?Debo decir que tengo un State y un Context para comunicar la aplicación, pero hay algo que he olvidado y la App me da error ¿ Que debo hacer para añadir el precio total al mensaje final que recibe el cliente ? ¿ Que estoy olvidando ?

Muestro mis archivos, también muestro el Context y State

Archivo ProgresoPedido.js

import React, { useContext, useEffect, useState } from 'react'
import { StyleSheet, View } from 'react-native'
import { Container, Button, Text, H1, H3 } from 'native-base'
import globalStyles from '../styles/global'
import { useNavigation } from '@react-navigation/native'
import PedidoContext from '../context/pedidos/pedidosContext'
import firebase from '../firebase'
import Countdown from 'react-countdown'

const ProgresoPedido = () => {

const navigation = useNavigation()

  const { idpedido, total } = useContext(PedidoContext)

  const [tiempo, guardarTiempo] = useState(0)
  const [completado, guardarCompletado] = useState(false)

 useEffect(() => {
    const obtenerProducto = () => {
      firebase.db.collection('ordenes')
        .doc(idpedido)
        .onSnapshot(function(doc) {
          guardarTiempo(doc.data().tiempoentrega)
          guardarCompletado(doc.data().completado)
        })
    }
    obtenerProducto()
  }, [])

  // Muestra el tiempo en pantalla con Countdown
  const renderer = ({ minutes, seconds }) => {

    return (
      <Text style={styles.tiempo}>{minutes}:{seconds}</Text>
    )
  }
  return (
    <Container style={globalStyles.contenedor}>
      <View style={[globalStyles.contenido, { marginTop: 50 }]}>
        {tiempo === 0 && (
          <>
            <Text style={{ textAlign: 'center', fontSize: 24 }}> Hemos recibido su pedido ...</Text>
            <Text style={{ textAlign: 'center', fontSize: 24 }}>Estamos calculando el tiempo de entrega</Text>
          </>
        )}

        {!completado &&  tiempo > 0 && (
          <>
            <Text style={{ textAlign: 'center' }}> </Text>
            <Text>Tu pedido estará listo en
              <Countdown
                date={Date.now() + tiempo * 60000}
                renderer={renderer} //muestra el tiempo que queda del pedido en la pantalla
              />
            </Text>
          </>
        )}

        {completado && (
          <>
            <H1 style={styles.textoCompletado}>Tu pedido esta listo</H1>
            <H3 style={styles.textoCompletado}>Puedes pasar a recogerlo</H3>
            <Text style={[styles.textoComplPrecio, {marginVertical: 40}]}> Recuerde que el costo de la comida fue: { total } </Text>
            
            <Button tyle={ [globalStyles.boton, {marginTop:200}]}
            rounded
            block
            onPress={ () => navigation.navigate("NuevaOrden")}
            >
              <Text  style={ globalStyles.botonTexto}>Salir al Menu</Text>
            </Button>
          </>
        )} 
      </View>
    </Container>
  )
}

const styles = StyleSheet.create({
  tiempo: {
    marginBottom: 20,
    fontSize: 60,
    textAlign: 'center',
    marginTop: 80,
  },
  textoCompletado: {
    textAlign: 'center',
    textTransform: 'uppercase',
    marginBottom: 20
  },
  textoComplPrecio: {
    textAlign: 'center', 
    fontSize: 24, 
    color: '#8E44AD'
  }
})

export default ProgresoPedido

Archivo ResumenPedido

import React, { useContext, useEffect } from 'react'
import {  Alert, ScrollView } from 'react-native'
import {
  Container,
  List,
  ListItem,
  Thumbnail,
  Text,
  Left,
  Body,
  Button,
  H1
} from 'native-base'
import { useNavigation } from '@react-navigation/native'
import globalStyles from '../styles/global'
import firebase from '../firebase'

import PedidoContext from '../context/pedidos/pedidosContext'


const ResumenPedido = () => {

  const navigation = useNavigation()

  // Context del pedido realizado
  const { pedido, total, mostrarResumen, eliminarProducto, pedidoRealizado } = useContext(PedidoContext)
  //console.log(pedido)

  useEffect(() => {
    calcularTotal()
  }, [pedido])

  // se crea un buucle infinito
  /*useEffect(() => {
    calcularTotal();
  }), [pedido]*/

  // Funcin para iterar sobre el pedido y los productos que añadimos y sus cantidades
  const calcularTotal = () => {
    let nuevoTotal = 0
    nuevoTotal = pedido.reduce((nuevoTotal, articulo) => nuevoTotal + articulo.total, 0)

    mostrarResumen(nuevoTotal)
  }

  // funcion para redirecionar al progreso del pedido
  const progresoPedido = () => {
    Alert.alert(
      'Revisar el pedido',
      'Una vez realizado el pedido, no podrás cambiarlo.',
      [
        {
          text: 'Confirm',
          onPress: async () => {

            // crear un objeto
            const pedidoObjeto = {
               tiempoentrega: 0,
               completado: false,
               total: Number(total),
               orden: pedido, //array
               creado: Date.now()
            }

           // console.log(pedidoObjeto)

            try {
              const pedido = await firebase.db.collection('ordenes').add(pedidoObjeto)
              pedidoRealizado(pedido.id)
              navigation.navigate("ProgresoPedido")
            } catch (error) {
              console.log(error)
            }            
          }
        },
        { text: 'Revisar', style: 'cancel' }
      ]
    )
  }

  // Elimina un producto del arreglo de pedido final
  const confirmaEliminar = (id) => {
    Alert.alert(
      '¿Quieres eliminar este artículo ...?',
      'Una vez eliminada no podrás recuperarlo.',
      [
        {
          text: 'Confirm',
          onPress: () => {
            // eliminar producto del state
            eliminarProducto(id)
          }
        },
        { text: 'Cancelar', style: 'cancel' }
      ]
    )

  }

  return (
    <Container style={globalStyles.contenedor}>
      <ScrollView>
      <List>
        <H1 style={globalStyles.titulo}>Resumen de Producto</H1>
        {pedido.map((plato, i) => {
          const { cantidad, nombre, imagen, id, precio } = plato
          return (
            <List key={id + i}>
              <ListItem thumbnail>
                <Left>
                  <Thumbnail large square source={{ uri: imagen }} />
                </Left>
                <Body>
                  <Text> {nombre} </Text>
                  <Text>{cantidad} Unidades </Text>
                  <Text> {precio}€ Precio Unidad</Text>

                  <Button
                    onPress={() => confirmaEliminar(id)}
                    full
                    danger
                    style={{ marginTop: 20 }}
                  >
                    <Text style={[globalStyles.botonTexto, { color: '#FFF' }]}>Eliminar</Text>
                  </Button>
                </Body>
              </ListItem>
            </List>
          )
        })}
        <Text style={globalStyles.cantidad}>Total a Pagar:{total} €</Text>

        <Button
          onPress={() => navigation.navigate('Menu')}
          style={{ marginTop: 20 }}
          full
          rounded
          dark
        >
          <Text style={[globalStyles.botonTexto, { color: '#FFF' }]}>Seguir Comprando</Text>
        </Button>
 
          <Button
            onPress={() => progresoPedido()}
            style={globalStyles.botonForm}
            full

          >
            <Text style={globalStyles.botonTexto}>Confirmar</Text>
          </Button>
   
      </List>
      </ScrollView>
    </Container>
  )
}

export default ResumenPedido

Archivo pedidosState.js

import React, { useReducer } from 'react'
import PedidoReducer from './pedidosReducer'
import PedidoContext from './pedidosContext'
import { 
  SELECCIONAR_PRODUCTO,
  CONFIRMAR_ORDENAR_PLATO,
  MOSTRAR_RESUMEN,
  ELIMINAR_PRODUCTO,
  PEDIDO_ORDENADO
} from '../../types'

const PedidosState = props => {

  // Crear state inicial
  const initialState = {
    pedido: [],
    plato: null,
    total: 0,
    idpedido: ''
  }

  // useReducer con dispatch  para ejecutar las funciones
  const [state, dispatch] = useReducer(PedidoReducer, initialState)

  // Selecciona el Producto que el usuario desea ordenar
  const selecionarPlato = plato => {
    dispatch({
      type: SELECCIONAR_PRODUCTO,
      payload: plato
    })
  }

  // cuando el usuario confirma un pedido
  const guardarPedido = pedido => {
    dispatch({
      type: CONFIRMAR_ORDENAR_PLATO,
      payload: pedido
    })
  }

  // Muestra el total a pagar en el resumen de cada articulo
  const mostrarResumen = total => {
    dispatch({
      type: MOSTRAR_RESUMEN,
      payload: total
    })
  }

  // Elimina el articulo seleccionado del carro de compra
  const eliminarProducto = id => {
    dispatch({
      type: ELIMINAR_PRODUCTO,
      payload: id
    })
  }

  const pedidoRealizado = id => {
    dispatch({
      type: PEDIDO_ORDENADO,
      payload: id
    })
  }


  return (
    <PedidoContext.Provider
      value={{
        pedido: state.pedido,
        plato: state.plato,
        total: state.total,
        idpedido: state.idpedido,
        selecionarPlato,
        guardarPedido,
        mostrarResumen,
        eliminarProducto,
        pedidoRealizado
      }}
    >
      {props.children}
    </PedidoContext.Provider>
  )
}

export default PedidosState

Archivo FormularioPlato.js

import React, { useState, useContext, useEffect } from 'react'
import { StyleSheet, Alert } from 'react-native'
import {
  Container,
  Form,
  Icon,
  Input,
  startIcon,
  View,
  Text
} from 'native-base'
import { useNavigation } from '@react-navigation/native'
import globalStyles from '../styles/global'

import PedidoContext from '../context/pedidos/pedidosContext'

const FormularioPlato = () => {

  // State para la cantidad que marca el usuario de cada producto
  const [cantidad, guardarCantidad] = useState(1)
  const [total, guardarTotal] = useState(0)

  // Context 
  const { plato, guardarPedido } = useContext(PedidoContext)
  const { precio } = plato

  // Redireccionar hasta el resumen de pedido
  const navigation = useNavigation()

  // En cuanto el componente carga, calcular la cantidad a pagar
  useEffect(() => {
    calcularTotal()
  }, [cantidad])

  // Calcula el total del platillo por su cantidad
  const calcularTotal = () => {
    const totalPagar = precio * cantidad;
    guardarTotal(totalPagar);
  }

  // decrementar cantidad del producto elegido en Uno
  const decrementarCantidad = () => {
    if (cantidad > 1) {
      const nuevaCantidad = parseInt(cantidad) - 1
      guardarCantidad(nuevaCantidad)
    }
  }

  //incrementar cantidad  del producto elegido en Uno
  const incrementarCantidad = () => {
    const nuevaCantidad = parseInt(cantidad) + 1
    guardarCantidad(nuevaCantidad)
  }

  // confirma si la cantidad de produto es correcta
  const confirmarOrden = () => {
    Alert.alert(
      'Do you want to confirm your order?',
      'A confirmed order can no longer be modified',
      [
        {
          text: 'Confirm',
          onPress: () => {
            //Añade y Almacena el producto en  el pedido principal
            const pedido = {
              ...plato,
              cantidad,
              total
            }
            
           // console.log(pedido)
            guardarPedido(pedido)

            // Navegar hacia el resumen
           navigation.navigate("ResumenPedido")

          }
        },
        {
          text: 'Cancelar',
          style: 'cancel'
        }
      ]
    )
  }


  return (
    <View>
      <Form>
        <Text style={globalStyles.titulo}>Cantidad</Text>
        <Grid>
          <Col>
            <Button
              props
              dark
              style={{ height: 70, justifyContent: 'center' }}
              onPress={() => decrementarCantidad()}
            >
              <Icon style={{ fontSize: 40 }} name="remove" />
            </Button>
          </Col>
          <Input
            style={{ textAlign: 'center', fontSize: 22, marginTop: 10 }}
            value={cantidad.toString()}
            keyboardType="numeric"
            onChangeText={cantidad => guardarCantidad(cantidad)}
          />
          <Col>
            <Button
              props
              style={{ height: 70, justifyContent: 'center' }}
              onPress={() => incrementarCantidad()}
            >
              <Icon style={{ fontSize: 40 }} name="add" />
            </Button>
          </Col>
        </Grid>
        <Text style={globalStyles.cantidadSubtotal}>Subtotal:  {total}€ </Text>
      </Form>

      <Footer style={styles.footer}>
        <FooterTab>
          <Button
            style={globalStyles.boton}
            onPress={() => confirmarOrden()}
          >
            <Text style={globalStyles.botonTexto}>Añadir a La Cesta</Text>
          </Button>
        </FooterTab>
      </Footer>
    </View>
  )
}

const styles = StyleSheet.create({
  footer: {
    marginTop: '10%'
  }
})

export default FormularioPlato

Archivo PedidoReducer.js

import {
  SELECCIONAR_PRODUCTO,
  CONFIRMAR_ORDENAR_PLATO,
  MOSTRAR_RESUMEN,
  ELIMINAR_PRODUCTO,
  PEDIDO_ORDENADO
} from '../../types'

export default (state, action) => {
  switch (action.type) {
    case SELECCIONAR_PRODUCTO:
      return {
        ...state,
        plato: action.payload
      }
    case CONFIRMAR_ORDENAR_PLATO:
      return {
        ...state,
        pedido: [...state.pedido, action.payload]
      }
    case MOSTRAR_RESUMEN:
      return {
        ...state,
        total: action.payload
      }
    case ELIMINAR_PRODUCTO:
      return {
        ...state,
        pedido: state.pedido.filter(articulo => articulo.id !== action.payload)
      }
    case PEDIDO_ORDENADO:
      return {
        ...state,
        pedido: [],
        total: 0,
        idpedido: action.payload
      } 
    default:
      return state
  }
}
5
  • 1
    PedidosState debería estar envolviendo al componente padre, ¿Puedes verificar si es así? Saludos
    – g.4
    Commented el 22 sept. 2021 a las 1:03
  • Todo funciona perfectamente de este modo, solo que quiero añadir esta funcionalidad nueva. Pero me esta costando añadir el precio total del pedido al mensaje final. No recibo errores y todo funciona, pero no muestra el precio {total} Commented el 22 sept. 2021 a las 6:41
  • 1
    Entonces por ejemplo en el componente ProgresoPedido.js, si llega idpedido desde el context?
    – g.4
    Commented el 22 sept. 2021 a las 16:18
  • 1
    Parece que el bug esta bien oculto, si pudieras compartir el componente PedidoReducer, otra cosa que yo haría es verificar si se puede ver total en algún otro componente con el valor correcto en vez de 0. Por ejemplo, un console.log(total) en FormularioPlato.js que tambien usa el contexto (solo lo destructuras también ahí)
    – g.4
    Commented el 22 sept. 2021 a las 21:07
  • 1
    Edite la pregunta añadiendo el archivo PedidoReducer. El console.log en FormularioPlato funciona y me muestra la cantidad de todos los productos seleccionados, pero console.log en ProgresoPedido, tambien muestra cero. No se que se esta pasando por alto, llevo ya 4 dias Commented el 23 sept. 2021 a las 6:53

1 respuesta 1

2

Pienso que puede ser un problema relacionado al envío del formulario, pero en el formulario no veo el evento onSubmit, por lo que no puedo emular el problema exactamente de mi lado. Pero dejo una propuesta.

Usar el `total` proveniente de la orden directamente de Firebase

Cuando se confirma la orden, la app redirecciona a:

 // Navegar hacia el resumen
 navigation.navigate("ResumenPedido")

Luego, en ResumenPedido, se calcula el total y el método progresoPedido ejecuta una operación asincrónica a firebase para persistir el pedido en BD, e inmediatamente redireccionar al componente en cuestión ProgresoPedido:

try {
       const pedido = await firebase.db.collection('ordenes').add(pedidoObjeto)
       pedidoRealizado(pedido.id)
       navigation.navigate("ProgresoPedido")
    } catch (error) {
       console.log(error)
    }

Después, en ProgresoPedido se hace una consulta al pedido:

useEffect(() => {
    const obtenerProducto = () => {
      firebase.db.collection('ordenes')
        .doc(idpedido)
        .onSnapshot(function(doc) {
          guardarTiempo(doc.data().tiempoentrega)
          guardarCompletado(doc.data().completado)
        })
    }
    obtenerProducto()
  }, [])

Aquí, sugiero revisar lo que hay en doc.data(), puede que ahí venga el total del pedido. Si es así entonces se guarda el total en un nuevo estado UI en ese mismo scope:

const obtenerProducto = () => {
          firebase.db.collection('ordenes')
            .doc(idpedido)
            .onSnapshot(function(doc) {
              guardarTiempo(doc.data().tiempoentrega)
              guardarCompletado(doc.data().completado)
              //suponiendo que total viene en doc.data()
              setTotal(doc.data().total)
            })
        }

Se declara un nuevo estado UI para uso exculsivo del componente ProgresoPedido:

const ProgresoPedido = () => {

  const navigation = useNavigation()
  const { idpedido, total } = useContext(PedidoContext)
  const [tiempo, guardarTiempo] = useState(0)
  const [completado, guardarCompletado] = useState(false)
  //declaro un nuevo estado
  const [totalBD, setTotal] = useState('');
  //...demas codigo
}

Entonces, solo quedaría usar el nuevo estado totalBD en donde se requiera usar la expresión {total}, por ejemplo:

<Text style={[styles.textoComplPrecio, {marginVertical: 40}]}> 
Recuerde que el costo de la comida fue: { totalBD } 
</Text>

Espero que esta respuesta sea de ayuda.

5
  • Perfecto amigo. Solo debe editar su respuesta y la dare aceptada, lo haría yo, pero creo que debe hacerlo usted. Debe modificar setTotalDB por setTotal ya que setTotalDB daba error, por lo que cambie y setTotal si que llegaba. const [totalBD, setTotal] = useState('') y setTotal(doc.data().total) seria lo correcto. A sido de gran ayuda, sin ti no lo hubiera conseguido. Ahora seguiré con el siguiente reto, que es añadir el registro obligatorio para poder hacer pedidos. Pero no tengo ni idea de por donde empezar, seguiré buscando documentación y tutoriales. Gracias por su esfuerzo Commented el 24 sept. 2021 a las 9:19
  • Quizá en vez de hacer el registro obligatorio en la App para hacer los pedidos, añado un formulario al realizar el pedido para que el usuario añada su Nombre y apellidos, por ejemplo, y esto se refleje en el panel Web que tiene el restaurant. ¿ A usted que le parece, que seria más aconsejable dado que aún estoy aprendiendo React Native? Añadir el registro para hacer pedido lo veo más laborioso. Gracias por su apoyo Commented el 24 sept. 2021 a las 10:41
  • 1
    Que interesante, si el pago de la orden se hiciera a travez de la app entonces si veo necesario un sistema de autenticación (registro de usuario). Si el pago se hace directo en caja del restaurante, entonces me iría por lo que propones, agregar al usuario en el estado del componente y solo ir mostrando su nombre en el panel, o también solo mostrarle su número de orden, que me parece que es como lo tienes en este momento.
    – g.4
    Commented el 24 sept. 2021 a las 20:26
  • 1
    Ya agregué las correcciones setTotal que mencionas, saludos
    – g.4
    Commented el 24 sept. 2021 a las 20:27
  • Gracias, estudiare a ver donde añado el formulario para que el usuario ponga su nombre. Claro que tendré que añadirlo a la base de datos para que lo reciba el restaurant. tendre que poner una condición o algo en el resumenPedido para que el usuario este obligado a poner el nombre. A ver como lo hago, mi experiencia es corta. Gracias por su apoyo en esto Commented el 24 sept. 2021 a las 21:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.