Diseño de la Sección "Enviar plantilla" para Campañas de WhatsAppCrea una nueva sección de una plataforma para envío de campañas de WhatsApp, ubicada completamente dentro de la zona gris del layout de la imagen EmptyScreenPortal.png. Usa el mismo estilo visual que la imagen SectionExamplePortal.png: diseño limpio, moderno, minimalista, con tipografía clara, íconos simples y colores planos. Aplica el sistema visual de Auronix (menú lateral, encabezado, buscador, etc.).Principios de Diseño Visual:Usar componentes planos.Sin sombras duras.Esquinas redondeadas.Tipografía clara y jerarquía visual ordenada.Navegación intuitiva entre pasos.Dentro del área gris, diseña una sección llamada "Enviar plantilla" con un flujo tipo wizard de 5 pasos, mostrados en la parte superior como navegación horizontal por etapas. Cada paso se presenta como una pantalla distinta:Flujo del Wizard (5 Pasos):Paso 1: "Configuración del envío"Campo para seleccionar campaña: Dropdown para elegir una campaña existente o escribir el nombre de una nueva, mediante una opción “Crear nueva Campaña”.Remitente (dropdown). Son números de teléfono y nombre de ese Remitente, por ejemplo Ventas +54113432423.Opciones de Programación de Envío:Enviar ahora (seleccionada por defecto): Selector tipo Switch horizontal. Debajo de este aparece, si se selecciona Programar envío, todo lo relacionado en el punto debajo.Programar envío: Radio button o similar. Al seleccionar esta opción, se despliegan los siguientes campos:Fecha de inicio (con selector de calendario).Hora de inicio (con selector de hora).Fecha de fin (con selector de calendario) (opcional).Hora de fin (con selector de hora)(opcional).Enviar entre los horarios (opcional):Horario desde (con selector de hora).Horario hasta (con selector de hora).Elegir días de envío: Checkboxes para Lun, Mar, Mié, Jue, Vie, Sáb, Dom (opcional).Paso 2: "Contenido y Plantilla"Dropdown para seleccionar una plantilla de mensaje previamente aprobada. Debe tener un buscador dentro del dropdown, porque hay más de 10 listadas (el resto se ven al hacer scroll dentro del dropdown.)Botón para crear una nueva plantilla: Opcionalmente con el punto anterior, un botón que te lleve a otra sección para crearla. Este botón y el dropdown anterior deben aparecer en la misma línea horizontal del layout.Variables de la plantilla: Una vez elegida la plantilla en el dropdown, aparecen las variables reconocidas. Son dinámicas, dependientes del contenido. Un ejemlo es que al elegir una plantilla en el dropdown debe tener las variables TELEFONO, NOMBRE, FECHA, HORA. Este texto deberá aparecer una vez elegida la plantilla, no antes.Instructivo de archivo CSV y variables: Para completar las variables de la plantilla (por ejemplo: nombre, monto, enlace). No se debe dar espacio para cargar las variables manualmente aquí, estas se cargarán vía CSV en el siguiente paso.Vista previa del mensaje: En un mockup de celular estilo sistema, que se actualiza conforme se llenan los campos. El mockup de la plantilla se ve del lado derecho como un panel vertical, similar a la imagen MockupExamplePortal.png. Luego en el siguiente paso se completarán las variables con los datos del primer registro del CSV. Antes de este paso no aparece ninguna vista previa (en configuración).Organiza este contenido de forma que el probar envío aparezca primero y ocupe solo una línea horizontal. Debajo todo lo relacionado a la carga del CSV.Paso 3: "Elige los destinatarios"Campo para seleccionar destinatarios:Cargar archivo CSV: Opción principal para subir los destinatarios.Captura de pantalla de ejemplo de CSV: Incluir una pequeña captura de pantalla de cómo debería ser el archivo de ejemplo para la carga de destinatarios.Descarga de CSV con nombres de columnas, para completar solo los datos. Debe poder descargarse y tener los nombres de columas con la primera siendo TELEFONO, luego las de la plantilla elegida.Instrucciones para el CSV: La primera columna debe llamarse TELEFONO. Luego, cada columna debe tener como encabezado el nombre de la VARIABLE correspondiente (ejemplo: NOMBRE, FECHA, HORA). Los nombres de las columnas no deben tener espacios al final.Confirmación de contactos: Una vez subido el CSV, se debe nombrar cuántos contactos están siendo incluidos.Probar envío: Incluir la posibilidad de realizar un "Envío de prueba" a un máximo de 3 números, sin que esto haga avanzar el proceso. Sería un envío intermedio para chequear la funcionalidad. Son 3 campos de número de teléfono y un botón de Enviar. Para ver tanto los campos como el botón, se debe expandir hacia abajo desde la derecha con un ícono de chevron. Hasta tanto no se expanda, se ve el título Probar envío y un texto “Puedes probar enviarte la plantilla a un máximo de 3 líneas antes de lanzarlo a tus clientes reales”.Paso 4: "Excluir destinatarios"Campo para agregar una lista negra (excluir destinatarios): Contactos a los que no debe enviarse la campaña.Carga por CSV: Se suben por CSV.Template de CSV: Proporcionar un template de CSV con las columnas creadas y los números que ya estaban excluyendo.Confirmación de exclusión: Una vez subido el CSV, se debe nombrar cuántos contactos están siendo excluidos del CSV de destinatarios anterior. Estos números excluidos aparecen cuando se les pone check a los ítems.Listas negras preexistentes: También se debe dar la posibilidad de seleccionar (con un checkbox) otras listas negras previamente subidas por la empresa. No se ve el texto de cada lista “45 líneas excluidas” hasta tanto no le de check a cada lista.Listas obligatorias: Algunas listas, como "PROFECO", deben estar seleccionadas por defecto y con el checkbox en estado disabled (no se puede quitar ese check).Deben poder cliquearse como un link cada lista, para descargar CSV de qué números están excluidos en cada una.Paso 5: Resumen claro: Mostrar un resumen claro con todos los datos ingresados (destinatarios, plantilla, variables, programación, listas negras).Botón principal: “Confirmar y enviar”.Confirmación: Mostrar un modal centrado con:Ícono de check.Mensaje: “Envío realizado con éxito”.Descripción: “En los próximos minutos los mensajes llegarán a cada usuario cargado. Puedes revisar el avance del envío en tiempo real desde el Monitor de envíos.”Botones: “Volver a Inicio”, “Ir a Monitor de envíos”, “Hacer otro envío”.Vista previa, se sigue viendo en el panel derecho.Consideraciones Adicionales:No mostrar panel de resumen ni dashboard después del flujo. Este diseño termina en el paso de confirmación.No tomar como referencia visual el archivo Capturas de pantalla envío de plantillas por Send.png, ya que corresponde a una versión anterior con un estilo visual retro que no se desea replicar. Pero sí sirve para aclarar cualquier duda de la interacción actual.Referencias de Imágenes (ubicadas en la carpeta compartida):EmptyScreenPortal.pngSectionExamplePortal.pngMockupExamplePortal.png
Voy a crear la sección "Enviar plantilla" para campañas de WhatsApp siguiendo el diseño moderno y minimalista de Auronix. El componente incluirá un wizard de 5 pasos con navegación horizontal y un panel de vista previa móvil.
He creado la sección "Enviar plantilla" para campañas de WhatsApp siguiendo exactamente las especificaciones solicitadas. El diseño incluye:
🎨 Diseño Visual:
📱 Wizard de 5 Pasos:
🔧 Funcionalidades:
📱 Vista Previa:
El componente está completamente funcional y listo para integrar con el backend de la plataforma.