Esta sección presenta un mapeo de pantallas y fuentes de datos dinámicas a fin de ilustrar los contenidos y la lógica en los distintos puntos del proceso del pedido.
Inicio de la app y Login | |
| La pantalla del login tiene un usuario pre establecido, Spin Plus provee el usuario de acuerdo con algunas apis, en food no existe el alcance para la gestión y creación de usuarios ya que Spin Food vive dentro de Spin Plus. En esta pantalla se consumen varias apis las cuales fungen como una simulación de un login previo. En estas apis se genera un Token de acceso el cual se usa para las peticiones siguientes. Este token tiene un tiempo limitado de duración. https://qa.apigee.digitalfemsa.services/tr/spinfood/wii/v1/spinfood/users/login |
| La ambientación de Spin Food esta en el apartado de “Ir a SpinFood“ |
Home de Spin Food | |
| En el primer inicio es necesario activar los permisos de ubicación del dispositivo para poder continuar |
| En el home de Spin Food esta la dirección preestablecida o un mensaje para agregar una difracción de entrega así como los negocios cerca de acuerdo a la ubicación capturada por el dispositivo. Los negocios tienen asignado una categoría la cual filtra los negocios así como se listan los mimos. Paths: b2c/business/near/common?latitude=${useCoodinates.lat}&longitude=${useCoodinates.lng} |
Búsqueda por negocio o producto, considerando la ubicación del usuario Paths: b2c/business/near/common?latitude=${useCoodinates.lat}&longitude=${useCoodinates.lng} | |
| El filtro por categoria separa los negocios de acuerdo a esta misma y la ubicación |
Vistas de los negocios | |
| En esta pantalla se obtiene la información especifica del Negocio la cual viene filtrada por categoría, se consume un api la cual trae la información detallada del negocio, como Horarios menús, categorías en su menu así como los tipos de Delivery que tiene Path: `b2b/${idBussines}/menu/products-by-category` |
| Aqui se muestra el detalle del producto con la información consultada del api anterior. Esta pantalla tiene como funcionalidad editar el numero de items del producto así como agregarlo al carrito de compras |
| Cuando se completa la acción de agregar al carrito aparece un banner en la parte inferior con el detalle del precio y unidad. este banner manda a el detalle del carrito de compra |
Carrito de compras | |
| En este apartado se elimina los items del carrito guardándolos en local |
| El detalle de la compra recopila la información del carrito de compra y se agrega la propina y la funcionalidad del código de promoción, esta pantalla consume un api para registrar la compra. Solo se permiten operaciones en efectivo por el momento Post: /orders |
| Pantalla donde se redime un código de promoción `b2c/${idBussines}/promotion` |
| En esta pantalla se agrega la propina informada en el path de Post: /orders |
Seguimiento de una compra | |
| Al concluir con la compra se obtiene un IdOrder el cual se pasa com parámetro al api, donde se consulta la información necesaria para pintar la información del seguimiento del pedido Patch: |
| Al entrar a la pantalla del seguimiento del la compra se consume este segundo api la cual trae información detallada del delivery de la compra. orders/infoDeliveryman/${orderId} |
| Detalle de los items del pedido |
| Información de costos dentro del api: orders/infoDeliveryman/${orderId} |
Direcciones | |
| Esta pantalla contiene un listado de las direcciones guardadas por el cliente, si no tiene ninguna dirección solo se mostrara el botón de agregar nueva dirección, Al dar tap en agregar nueva dirección iremos a un buscador de direcciones. Path: '/b2c/addresses' |
| El buscador de direcciones se realiza mediante |
| Detalle de la dirección seleccionada anterior mente ubicándola el punto GPS en el mapa. Al dar confirmar dirección nos redirigirla a un formulario para completar la información de la nueva dirección |
| Formulario que recopila la informacion de la dirección buscada con el autocomplete de google, Este formulario concentra una serie de validaciones que envía la información al siguiente path Path: post '/b2c/addresses' |
Centro de ayuda | |
En ese apartado de tiene dos opciones las preguntas mas solicitadas o si tuviste alguna incidencia con tu pedido:
Al dar tap en cualquiera de las dos opciones te llevara al detalle de cualquier opción | |
En esta pantalla se obtiene las preguntas frecuentes de acuerdo a un api. En la cual en front filtramos por el tipo de pregunta y en que nivel del centro de ayuda se encuentra así como si tiene una acción.
| |
| En esta pantalla obtenemos el detalle de la pregunta si como la acción de calificar si la pregunta fue util o no mediante este path:
/faq/qualifyquestion |
Chat soporte | |
El chat de soporte se utiliza firebase y un componente GiftedChat y libreria utilizada react-native-gifted-chat, las siguientes colecciones de firebase son las que se utilizan para almacenar los mensages con su IdUser Colecciones: chats → mensajes | |
Historial de Pedidos | |
En esta pantalla usamos un get /orders para obtener el historial de pedidos. | |
El detalle de cada pedido va directo al track de delivery de infinitec | |