Necesito que modifiques el cotizador de mi página web:
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:
- Revisa la estructura completa del proyecto.
- Identifica las tecnologías utilizadas.
- Encuentra los componentes actuales del cotizador, carrito y WhatsApp.
- Reutiliza componentes, tipos y estilos existentes.
- No modifiques funciones que no estén relacionadas con esta implementación.
- 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:
- Indícame qué archivos modificaste.
- Explica brevemente qué se agregó en cada archivo.
- Verifica que el proyecto compile sin errores.
- Ejecuta el lint y corrige los errores relacionados con los cambios.
- Prueba el flujo completo desde la selección de la plancha hasta el envío de la cotización por WhatsApp.
- No publiques ni hagas deploy sin mi autorización.
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: ```ts 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: ```text 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.