--- name: email-components description: Componentes de UI para geração e visualização de e-mails seguindo o padrão de components do Easy Budget. --- # Componentes de UI para E-mails Esta skill define os componentes Blade específicos para a geração e visualização de e-mails no Easy Budget, seguindo o padrão de components estabelecido no sistema. ## Estrutura de Components ``` resources/views/components/ ├── email/ │ ├── email-header.blade.php # Cabeçalho padrão de e-mails │ ├── email-footer.blade.php # Rodapé padrão de e-mails │ ├── email-layout.blade.php # Layout base de e-mails │ ├── email-budget.blade.php # Template de e-mail de orçamento │ ├── email-invoice.blade.php # Template de e-mail de fatura │ ├── email-reminder.blade.php # Template de e-mail de lembrete │ ├── email-welcome.blade.php # Template de e-mail de boas-vindas │ ├── email-verification.blade.php # Template de e-mail de verificação │ ├── email-password.blade.php # Template de e-mail de senha │ ├── email-support.blade.php # Template de e-mail de suporte │ └── email-styles.blade.php # Estilos CSS para e-mails └── ... ``` ## 1. Email Header Component Componente para cabeçalho padrão de e-mails. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `title` | `string` | Título do e-mail | Obrigatório | | `company` | `array` | Dados da empresa | `[]` | | `showLogo` | `bool` | Exibir logo da empresa | `true` | ### Estrutura ```blade @props([ 'title', 'company' => [], 'showLogo' => true ]) {{ $title }} ``` ## 3. Email Layout Component Componente para layout base de e-mails. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `title` | `string` | Título do e-mail | Obrigatório | | `company` | `array` | Dados da empresa | `[]` | | `content` | `string` | Conteúdo do e-mail | Obrigatório | | `showHeader` | `bool` | Exibir cabeçalho | `true` | | `showFooter` | `bool` | Exibir rodapé | `true` | ### Estrutura ```blade @props([ 'title', 'company' => [], 'content', 'showHeader' => true, 'showFooter' => true ])
{!! $content !!}
``` ## 4. Email Budget Component Componente para template de e-mail de orçamento. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `budget` | `Budget` | Modelo do orçamento | Obrigatório | | `customer` | `Customer` | Cliente do orçamento | Obrigatório | | `company` | `array` | Dados da empresa | `[]` | | `actionUrl` | `string` | URL de ação (visualizar orçamento) | `null` | ### Estrutura ```blade @props([ 'budget', 'customer', 'company' => [], 'actionUrl' => null ])
``` ## 5. Email Invoice Component Componente para template de e-mail de fatura. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `invoice` | `Invoice` | Modelo da fatura | Obrigatório | | `customer` | `Customer` | Cliente da fatura | Obrigatório | | `company` | `array` | Dados da empresa | `[]` | | `paymentUrl` | `string` | URL de pagamento | `null` | ### Estrutura ```blade @props([ 'invoice', 'customer', 'company' => [], 'paymentUrl' => null ])
``` ## 6. Email Reminder Component Componente para template de e-mail de lembrete. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `type` | `string` | Tipo de lembrete (invoice, budget, etc.) | Obrigatório | | `entity` | `mixed` | Entidade do lembrete | Obrigatório | | `customer` | `Customer` | Cliente do lembrete | Obrigatório | | `company` | `array` | Dados da empresa | `[]` | | `actionUrl` | `string` | URL de ação | `null` | ### Estrutura ```blade @props([ 'type', 'entity', 'customer', 'company' => [], 'actionUrl' => null ]) @php $reminderType = match($type) { 'invoice' => 'Fatura', 'budget' => 'Orçamento', 'payment' => 'Pagamento', default => 'Lembrete' }; $reminderMessage = match($type) { 'invoice' => 'Está quase vencendo! Não perca tempo e efetue o pagamento.', 'budget' => 'Está quase expirando! Aproveite enquanto está válido.', 'payment' => 'Lembre-se de efetuar o pagamento para evitar juros.', default => 'Não perca esta oportunidade!' }; @endphp
``` ## 7. Email Welcome Component Componente para template de e-mail de boas-vindas. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `user` | `User` | Usuário recém-cadastrado | Obrigatório | | `company` | `array` | Dados da empresa | `[]` | | `loginUrl` | `string` | URL de login | `null` | ### Estrutura ```blade @props([ 'user', 'company' => [], 'loginUrl' => null ])
``` ## 8. Email Verification Component Componente para template de e-mail de verificação. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `user` | `User` | Usuário que precisa verificar | Obrigatório | | `verificationUrl` | `string` | URL de verificação | Obrigatório | | `company` | `array` | Dados da empresa | `[]` | | `expiresAt` | `string` | Data de expiração do token | `null` | ### Estrutura ```blade @props([ 'user', 'verificationUrl', 'company' => [], 'expiresAt' => null ])
``` ## 9. Email Password Component Componente para template de e-mail de senha. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `type` | `string` | Tipo de e-mail (reset, changed) | Obrigatório | | `user` | `User` | Usuário que solicitou | Obrigatório | | `resetUrl` | `string` | URL de redefinição | Obrigatório | | `company` | `array` | Dados da empresa | `[]` | | `expiresAt` | `string` | Data de expiração do token | `null` | ### Estrutura ```blade @props([ 'type', 'user', 'resetUrl', 'company' => [], 'expiresAt' => null ]) @php $emailType = match($type) { 'reset' => 'Redefinição de Senha', 'changed' => 'Senha Alterada', default => 'Alteração de Senha' }; $emailMessage = match($type) { 'reset' => 'Recebemos uma solicitação para redefinir a senha da sua conta.', 'changed' => 'Sua senha foi alterada com sucesso.', default => 'Sua senha foi alterada recentemente.' }; @endphp
``` ## 10. Email Support Component Componente para template de e-mail de suporte. ### Uso Básico ```blade ``` ### Parâmetros | Parâmetro | Tipo | Descrição | Padrão | |-----------|------|-----------|--------| | `ticket` | `Support` | Ticket de suporte | Obrigatório | | `customer` | `Customer` | Cliente do ticket | Obrigatório | | `company` | `array` | Dados da empresa | `[]` | | `ticketUrl` | `string` | URL do ticket | `null` | ### Estrutura ```blade @props([ 'ticket', 'customer', 'company' => [], 'ticketUrl' => null ])
``` ## 11. Email Styles Component Componente para estilos CSS padrão de e-mails. ### Uso Básico ```blade ``` ### Estrutura ```blade ``` ## 12. Integração com Padrões Existentes ### Uso em Mailables ```php // BudgetNotificationMail.php class BudgetNotificationMail extends Mailable { use Queueable, SerializesModels; public function __construct(public Budget $budget, public Customer $customer) { // } public function build() { $company = [ 'name' => tenant('name'), 'logo' => tenant('logo'), 'email' => tenant('email'), 'phone' => tenant('phone'), 'website' => tenant('website'), ]; return $this->subject("Orçamento #{$this->budget->code} - {$this->customer->display_name}") ->view('components.email.email-budget', [ 'budget' => $this->budget, 'customer' => $this->customer, 'company' => $company, 'actionUrl' => route('provider.budgets.show', $this->budget) ]); } } ``` ### Uso em Controllers ```php // EmailController.php public function previewBudget(Budget $budget) { $customer = $budget->customer; $company = [ 'name' => tenant('name'), 'logo' => tenant('logo'), 'email' => tenant('email'), 'phone' => tenant('phone'), 'website' => tenant('website'), ]; return view('components.email.email-budget', [ 'budget' => $budget, 'customer' => $customer, 'company' => $company, 'actionUrl' => route('provider.budgets.show', $budget) ]); } ``` ### Estilos CSS ```css /* Email Components Styles */ .email-container { max-width: 600px; margin: 0 auto; background-color: #ffffff; } .email-header { background: linear-gradient(135deg, #0d6efd 0%, #007bff 100%); color: white; } .btn-primary { background-color: #0d6efd; color: white; padding: 12px 24px; border-radius: 6px; text-decoration: none; } .status-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; } ``` ## 13. JavaScript Interatividade ### Visualização de E-mails ```javascript // email-preview.js document.addEventListener('DOMContentLoaded', function() { // Botões de visualização de e-mail const emailPreviewButtons = document.querySelectorAll('.btn-email-preview'); emailPreviewButtons.forEach(button => { button.addEventListener('click', function() { const url = this.getAttribute('data-url'); if (url) { window.open(url, '_blank', 'width=800,height=600'); } }); }); // Botões de envio de e-mail const emailSendButtons = document.querySelectorAll('.btn-email-send'); emailSendButtons.forEach(button => { button.addEventListener('click', function() { const form = this.closest('form'); if (form) { form.submit(); } }); }); }); ``` ## 14. Validação e Segurança ### Autorização ```php // EmailPolicy.php public function sendBudget(User $user, Budget $budget) { return $user->tenant_id === $budget->tenant_id; } public function sendInvoice(User $user, Invoice $invoice) { return $user->tenant_id === $invoice->tenant_id; } public function sendSupport(User $user, Support $ticket) { return $user->tenant_id === $ticket->tenant_id; } ``` ### Validations ```blade {{-- Email Budget com validação de permissões --}} @can('sendBudget', $budget) @endcan {{-- Email Invoice com validação de status --}} @can('sendInvoice', $invoice) @endcan ``` Este padrão de components para e-mails garante consistência visual, reutilização de código e manutenibilidade, seguindo os mesmos princípios estabelecidos nos outros components do sistema.