SHAREPROMPTSpopprompts

Necesito que modifiques el cotizador de mi página web:

renatoJul 13, 2026200 LINES · 5,646 CHARS · 902 WORDS · ~1,412 TOKENS

Necesito que modifiques el cotizador de mi página web:

https://tribay-melamine.vercel.app/cotizador

Quiero implementar una nueva opción para que el cliente pueda ingresar las medidas de las piezas que necesita cortar de cada plancha de melamina.

Objetivo

Dentro de la cotización de planchas, el usuario debe poder indicar las dimensiones y cantidades de las piezas que necesita. Esta información deberá aparecer tanto en el resumen de la cotización como en el mensaje que se envía por WhatsApp.

Funcionalidad requerida

1. Agregar una sección llamada “Medidas de corte”

Esta sección debe aparecer después de que el usuario seleccione una plancha de melamina.

Debe incluir una tabla o lista con los siguientes campos:

  • Largo en milímetros.

  • Ancho en milímetros.

  • Cantidad de piezas.

  • Descripción o nombre de la pieza, opcional.

  • Sentido de veta:

    • Sin preferencia.
    • Veta horizontal.
    • Veta vertical.

Ejemplo:

| Pieza | Largo | Ancho | Cantidad | Sentido de veta | | Puerta | 700 mm | 450 mm | 2 | Vertical | | Repisa | 800 mm | 300 mm | 4 | Horizontal |

2. Botón para agregar piezas

Agregar un botón visible con el texto:

“+ Agregar medida”

Cada vez que el usuario presione el botón, debe añadirse una nueva fila para ingresar otra pieza.

Cada fila también debe tener:

  • Botón para eliminar la pieza.
  • Botón o función para duplicar la pieza.
  • Validación de campos obligatorios.

3. Unidades de medida

Permitir que el usuario seleccione entre:

  • Milímetros.
  • Centímetros.

Internamente, todos los valores deben convertirse a milímetros para realizar las validaciones y cálculos.

4. Validaciones

No permitir:

  • Medidas iguales o menores a cero.
  • Campos de largo, ancho o cantidad vacíos.
  • Cantidades decimales.
  • Piezas que superen las dimensiones de la plancha seleccionada.

Cuando una pieza no entre en la plancha, mostrar un mensaje claro como:

“Esta pieza supera las dimensiones de la plancha seleccionada.”

Considerar que una pieza podría entrar girándola 90 grados. La validación debe comprobar ambas orientaciones antes de mostrar el error.

5. Dimensiones de la plancha

El sistema debe utilizar las dimensiones reales asociadas a cada producto o formato de plancha.

En caso de que actualmente los productos no tengan guardadas sus dimensiones, agrega las propiedades necesarias al modelo de datos, por ejemplo:

sheetLength: 2440,
sheetWidth: 1830,
thickness: 18

No colocar una única medida fija para todas las planchas si existen formatos diferentes.

6. Asociación de medidas con cada producto

Las medidas ingresadas deben quedar asociadas a la plancha correspondiente dentro del carrito o cotización.

Si el usuario agrega dos colores o tipos de melamina diferentes, cada producto debe tener su propia lista de cortes.

Ejemplo:

  • Melamina Roble Amazónico:

    • 2 piezas de 700 × 450 mm.
    • 4 piezas de 800 × 300 mm.
  • Melamina Blanco:

    • 3 piezas de 600 × 400 mm.

7. Resumen de cotización

En el resumen final debe mostrarse:

  • Nombre de la melamina.
  • Color o diseño.
  • Espesor.
  • Cantidad de planchas.
  • Precio unitario.
  • Subtotal.
  • Lista de medidas de corte.
  • Cantidad total de piezas.

Las medidas deben mostrarse de forma ordenada y fácil de leer.

8. Mensaje de WhatsApp

Incluye las medidas dentro del mensaje generado para WhatsApp.

El formato debe ser similar a este:

Hola, deseo solicitar la siguiente cotización:

MELAMINA ROBLE AMAZÓNICO
Espesor: 18 mm
Cantidad: 2 planchas

MEDIDAS DE CORTE:
- 2 piezas de 700 × 450 mm – Puerta – Veta vertical
- 4 piezas de 800 × 300 mm – Repisa – Veta horizontal

Total de piezas: 6
Subtotal: S/ 000.00

El mensaje debe utilizar saltos de línea, caracteres correctamente codificados y mantener una presentación clara al abrirse en WhatsApp.

9. Persistencia

Las medidas no deben desaparecer cuando el usuario:

  • Cambie temporalmente de sección.
  • Modifique la cantidad de planchas.
  • Agregue otro producto.
  • Regrese al carrito o resumen.

Utiliza el mismo sistema de estado, contexto, store o almacenamiento local que ya usa el proyecto. No crees una arquitectura paralela innecesaria.

10. Diseño

Mantén exactamente la identidad visual actual de Tribay Melamine:

  • Colores.
  • Tipografías.
  • Bordes.
  • Botones.
  • Espaciados.
  • Diseño responsive.

La sección debe funcionar correctamente en computadora y celular.

En dispositivos móviles, las filas pueden convertirse en tarjetas para evitar desplazamiento horizontal excesivo.

11. Arquitectura y calidad del código

Antes de realizar cambios:

  1. Revisa la estructura completa del proyecto.
  2. Identifica las tecnologías utilizadas.
  3. Encuentra los componentes actuales del cotizador, carrito y WhatsApp.
  4. Reutiliza componentes, tipos y estilos existentes.
  5. No modifiques funciones que no estén relacionadas con esta implementación.
  6. No elimines ninguna funcionalidad actual.

El código debe:

  • Estar correctamente tipado.
  • Evitar el uso innecesario de any.
  • Tener componentes reutilizables.
  • Evitar duplicación de lógica.
  • Incluir validaciones.
  • Mantener la estructura actual del proyecto.

12. Resultado esperado

Implementa completamente la funcionalidad, no solo el diseño visual.

Después de terminar:

  1. Indícame qué archivos modificaste.
  2. Explica brevemente qué se agregó en cada archivo.
  3. Verifica que el proyecto compile sin errores.
  4. Ejecuta el lint y corrige los errores relacionados con los cambios.
  5. Prueba el flujo completo desde la selección de la plancha hasta el envío de la cotización por WhatsApp.
  6. No publiques ni hagas deploy sin mi autorización.
Necesito que modifiques el cotizador de mi página web: · share-prompts