Ruta: /search-results

Componentes:

• Encabezado
  • Logo
  • Botón regresar
• Formulario Buscar
  • Textbox para escribir una consulta o búsqueda, por defecto debe contener el texto usado para la búsqueda que debe estar en el estado de la aplicación (App context) o en la URL
  • Botón principal “Buscar” (oculto al inicio)
• Grilla de ítems encontrados (tarjetas/cards clickables) (oculto al inicio)
  • Título
  • Imagen
  • Marca
  • Categoría
  • Precio actual
  • Estatus del precio (verde, amarillo, rojo)
  • Fecha de actualización (humanized format)
• Placeholder (loading)
• Botón secundario “Cargar más” o “Ver más” (oculto al inicio)
• Paginación (oculto, pendiente para un A/B testing)

Acciones:

• Al inicio: llamar a GET search-results enviando el texto recibido (mismo del textbox o la URL)
  • Si la respuesta es exitosa debe
    • Ocultar el Loading
    • Actualizar la Grilla de ítems encontrados y hacerla visible
    • Desbloquear/Mostrar botón Buscar
    • Si el total de ítems es mayor que la cantidad de ítems recibidos mostrar botón “Cargar más”
  • Si la respuesta no es exitosa debe
    • Ocultar el Placeholder (Loading)
    • Mostrar mensaje como “Algo salió mal”
    • Desbloquear/Mostrar botón Buscar
• Al hacer clic en botón Buscar debe bloquear dicho botón, ocultar la Grilla, mostrar el Loading, repetir la llamada a GET search-results
• Al hacer clic en el botón “Cargar más” debe ocultar/bloquear dicho botón, mostrar Loading (debajo del Grid, esta seguiría visible), y además repetir la llamada a GET search-results enviando el texto del textbox y el puntero del último ítem
• Al hacer clic en cualquier ítem del Grid debe guardar en el estado de la aplicación (App context) el ítem seleccionado y pasar por URL (incluyendo el ID del ítem) a la pantalla

Individual Item Details

Integraciones:

• GET search-results