Layout do Módulo de Gerenciamento de E-mail Transacional para Eventos
Objetivo da Página: Criar uma interface de backoffice intuitiva para que organizadores de eventos possam gerenciar e personalizar os e-mails transacionais enviados aos participantes. A página permitirá configurar o e-mail de confirmação de inscrição, e-mails automáticos ("É Hoje!" e "Agradecimento") e criar/enviar e-mails avulsos.
Layout Geral da Página:
Título Principal da Página: "Gerenciamento de E-mails do Evento: [Nome do Evento]".
Navegação/Abas (se aplicável): Se este módulo for acessado por uma nova aba "✉️ E-mail" no menu do evento âncora, a página deve se sentir integrada ao restante do backoffice.
Estrutura do Conteúdo: A página deve ser organizada em seções claras e distintas para cada tipo de e-mail. Utilizar cards ou painéis expansíveis para cada seção pode ser uma boa abordagem. Seções de Configuração de E-mail (repetir estrutura similar para cada tipo de e-mail, com as particularidades): 1. Seção: "E-mail de Confirmação de Inscrição"
Título da Seção: "✉️ Confirmação de Inscrição"
Controles:
Campo de Texto (Input): "Assunto do E-mail" (pré-preenchido com o assunto atual, se houver, ou um placeholder como "Sua inscrição para {{nome_evento}} está confirmada!").
Editor de Texto Rico (WYSIWYG): "Corpo da Mensagem". Este editor deve permitir:
Formatação básica: Negrito, Itálico, Listas (ordenadas e não ordenadas), Links.
Inserção de Imagem: Opção para o usuário fazer upload ou linkar uma imagem de capa para o e-mail (ou indicar que usará a imagem padrão do evento).
Botão/Dropdown: "Inserir Variável" (para tags como {{nome_participante}}, {{nome_evento}}, {{data_evento}}, {{link_bilhete}}).
Preview Simples: Uma pequena área de preview ao lado ou abaixo do editor mostrando uma simulação básica do e-mail.
Botões de Ação: "Salvar Alterações" e "Restaurar para o Padrão". 2. Seção: "E-mail 'É Hoje!'"
Título da Seção: "☀️ E-mail: É Hoje!"
Controles:
Switch/Toggle: "Ativar Envio Automático" (com um texto explicativo: "Se ativo, será enviado no primeiro dia do evento às 06:00.").
Campo de Texto (Input): "Assunto do E-mail" (com placeholder/sugestão: "🎉 É Hoje! O evento {{nome_evento}} começa em breve!").
Editor de Texto Rico (WYSIWYG): "Corpo da Mensagem" (inicialmente em branco ou com sugestão simples).
Botão/Dropdown: "Inserir Variável".
Preview Simples.
Botão de Ação: "Salvar Configurações do E-mail 'É Hoje!'". 3. Seção: "E-mail de Agradecimento Pós-Evento"
Título da Seção: "🙏 E-mail de Agradecimento"
Controles:
Switch/Toggle: "Ativar Envio Automático" (com texto explicativo: "Se ativo, será enviado no dia seguinte ao término do evento às 06:00, apenas para participantes com check-in.").
Campo de Texto (Input): "Assunto do E-mail" (com placeholder/sugestão: "Obrigado por participar do {{nome_evento}}! 🌟").
Editor de Texto Rico (WYSIWYG): "Corpo da Mensagem" (inicialmente em branco ou com sugestão simples, talvez incentivando um link para pesquisa de satisfação).
Botão/Dropdown: "Inserir Variável".
Preview Simples.
Botão de Ação: "Salvar Configurações do E-mail de Agradecimento". 4. Seção: "📧 Enviar E-mail Avulso"
Título da Seção: "📢 Comunicado Avulso"
Controles:
Campo de Texto (Input): "Assunto do E-mail".
Editor de Texto Rico (WYSIWYG): "Corpo da Mensagem".
Botão/Dropdown: "Inserir Variável".
Seleção de Destinatários (Filtro por Ingresso):
Um componente de seleção múltipla (ex: multi-select dropdown, lista de checkboxes) listando todos os "Tipos de Ingresso" configurados para o evento.
Rótulo: "Enviar para os seguintes tipos de ingresso (deixe em branco para todos os inscritos confirmados):".
Feedback de Contagem: Um texto dinâmico: "Este e-mail será enviado para aproximadamente X participantes."
Botões de Ação: "Enviar E-mail de Teste (para mim)" e um botão principal "Enviar Comunicado Agora".
Sub-seção (Opcional, mas recomendado): "Histórico de Envios Avulsos"
Uma tabela simples mostrando: Assunto, Data/Hora do Envio, Segmento(s) de Ingresso (se houver), Nº de Destinatários. Estilo Visual Geral:
Utilizar um design limpo, moderno e profissional, consistente com a identidade visual do Beevent (se houver uma definida).
Priorizar a clareza e facilidade de uso para os organizadores de eventos.
Usar ícones de forma sutil para melhorar a identificação das seções ou ações.
Feedback visual claro para ações como "Salvar" (ex: toasts de sucesso/erro).
O editor WYSIWYG deve ser simples, oferecendo apenas as funcionalidades essenciais para não sobrecarregar o usuário. Considerações Adicionais para o v0:
Mostrar como seria a aparência de uma variável/tag (ex: {{nome_participante}}) dentro do editor ou em uma lista de variáveis disponíveis.
Indicar claramente quais campos são para "Assunto" e quais são para o "Corpo" do e-mail.
Se possível, simular o estado "desativado" e "ativado" para os toggles de envio automático. Lembre-se, Gestor, que este é um ponto de partida para o v0.dev. Você pode precisar iterar no prompt ou nos resultados gerados. O objetivo é ter um bom direcionamento visual para a equipe de desenvolvimento. Avise se precisar de mais alguma ajuda ou ajuste neste prompt!
Implementei a funcionalidade completa de drag & drop para upload de imagens no módulo de gerenciamento de e-mails! 🎉
Estados Dinâmicos:
URL.createObjectURL() para preview