fix(email): corrige acentuacoes e adiciona dependencia radio-group
- Corrige todas as acentuacoes em portugues nos templates de e-mail - Adiciona @radix-ui/react-radio-group como dependencia 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
esdrasrenan
parent
61c36dbb7c
commit
d990450698
1 changed files with 44 additions and 44 deletions
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
* Sistema de Templates de E-mail
|
||||
* Sistema de Chamados Raven
|
||||
* Design inspirado em boas praticas de e-mail marketing
|
||||
* Design inspirado em boas práticas de e-mail marketing
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
|
|
@ -29,7 +29,7 @@ export type TemplateData = Record<string, unknown>
|
|||
// ============================================
|
||||
|
||||
const COLORS = {
|
||||
// Primarias - cyan do sistema
|
||||
// Primárias - cyan do sistema
|
||||
primary: "#00e8ff",
|
||||
primaryDark: "#00d6eb",
|
||||
primaryForeground: "#020617",
|
||||
|
|
@ -140,7 +140,7 @@ function getStatusStyle(status: string): { bg: string; color: string; label: str
|
|||
function getPriorityStyle(priority: string): { bg: string; color: string; label: string } {
|
||||
const priorityMap: Record<string, { bg: string; color: string; label: string }> = {
|
||||
LOW: { bg: COLORS.priorityLowBg, color: COLORS.priorityLow, label: "Baixa" },
|
||||
MEDIUM: { bg: COLORS.priorityMediumBg, color: COLORS.priorityMedium, label: "Media" },
|
||||
MEDIUM: { bg: COLORS.priorityMediumBg, color: COLORS.priorityMedium, label: "Média" },
|
||||
HIGH: { bg: COLORS.priorityHighBg, color: COLORS.priorityHigh, label: "Alta" },
|
||||
URGENT: { bg: COLORS.priorityUrgentBg, color: COLORS.priorityUrgent, label: "Urgente" },
|
||||
}
|
||||
|
|
@ -193,7 +193,7 @@ function textLink(label: string, url: string): string {
|
|||
return `<a href="${escapeHtml(url)}" style="color:${COLORS.primaryDark};text-decoration:none;font-weight:500;">${escapeHtml(label)}</a>`
|
||||
}
|
||||
|
||||
// Card de informacoes do ticket
|
||||
// Card de informações do ticket
|
||||
function ticketInfoCard(data: {
|
||||
reference: number | string
|
||||
subject: string
|
||||
|
|
@ -205,7 +205,7 @@ function ticketInfoCard(data: {
|
|||
}): string {
|
||||
const rows: string[] = []
|
||||
|
||||
// Numero do chamado com destaque
|
||||
// Número do chamado com destaque
|
||||
rows.push(`
|
||||
<tr>
|
||||
<td style="padding:12px 16px;border-bottom:1px solid ${COLORS.borderLight};">
|
||||
|
|
@ -259,7 +259,7 @@ function ticketInfoCard(data: {
|
|||
`)
|
||||
}
|
||||
|
||||
// Solicitante e Responsavel
|
||||
// Solicitante e Responsável
|
||||
if (data.requesterName || data.assigneeName) {
|
||||
rows.push(`
|
||||
<tr>
|
||||
|
|
@ -274,7 +274,7 @@ function ticketInfoCard(data: {
|
|||
` : ""}
|
||||
${data.assigneeName ? `
|
||||
<td style="width:50%;">
|
||||
<span style="color:${COLORS.textMuted};font-size:13px;font-weight:500;display:block;margin-bottom:4px;">Responsavel</span>
|
||||
<span style="color:${COLORS.textMuted};font-size:13px;font-weight:500;display:block;margin-bottom:4px;">Responsável</span>
|
||||
<span style="color:${COLORS.textPrimary};font-size:14px;">${escapeHtml(data.assigneeName)}</span>
|
||||
</td>
|
||||
` : ""}
|
||||
|
|
@ -285,7 +285,7 @@ function ticketInfoCard(data: {
|
|||
`)
|
||||
}
|
||||
|
||||
// Data de criacao
|
||||
// Data de criação
|
||||
if (data.createdAt) {
|
||||
rows.push(`
|
||||
<tr>
|
||||
|
|
@ -308,7 +308,7 @@ function ticketInfoCard(data: {
|
|||
`
|
||||
}
|
||||
|
||||
// Sistema de estrelas de avaliacao
|
||||
// Sistema de estrelas de avaliação
|
||||
function ratingStars(rateUrl: string): string {
|
||||
const stars: string[] = []
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
|
|
@ -353,7 +353,7 @@ function baseTemplate(content: string, data: TemplateData): string {
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>${escapeHtml(data.subject ?? "Notificacao")}</title>
|
||||
<title>${escapeHtml(data.subject ?? "Notificação")}</title>
|
||||
<!--[if mso]>
|
||||
<noscript>
|
||||
<xml>
|
||||
|
|
@ -404,7 +404,7 @@ function baseTemplate(content: string, data: TemplateData): string {
|
|||
Este e-mail foi enviado pelo Sistema de Chamados Raven.
|
||||
</p>
|
||||
<p style="margin:0;">
|
||||
${textLink("Gerenciar notificacoes", preferencesUrl)}
|
||||
${textLink("Gerenciar notificações", preferencesUrl)}
|
||||
<span style="color:${COLORS.textMuted};margin:0 12px;">|</span>
|
||||
${textLink("Central de ajuda", helpUrl)}
|
||||
</p>
|
||||
|
|
@ -455,7 +455,7 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
Seu chamado foi registrado com sucesso.
|
||||
</p>
|
||||
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;">
|
||||
Nossa equipe ira analisa-lo e entrar em contato em breve.
|
||||
Nossa equipe irá analisá-lo e entrar em contato em breve.
|
||||
</p>
|
||||
|
||||
${ticketInfoCard({
|
||||
|
|
@ -474,7 +474,7 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
)
|
||||
},
|
||||
|
||||
// Resolucao de chamado
|
||||
// Resolução de chamado
|
||||
ticket_resolved: (data) => {
|
||||
const viewUrl = data.viewUrl as string
|
||||
const rateUrl = data.rateUrl as string
|
||||
|
|
@ -491,7 +491,7 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
Chamado resolvido
|
||||
</h1>
|
||||
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;text-align:center;">
|
||||
Seu chamado foi marcado como resolvido. Esperamos que o atendimento tenha sido satisfatorio!
|
||||
Seu chamado foi marcado como resolvido. Esperamos que o atendimento tenha sido satisfatório!
|
||||
</p>
|
||||
|
||||
${ticketInfoCard({
|
||||
|
|
@ -505,7 +505,7 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
data.resolutionSummary
|
||||
? `
|
||||
<div style="background:${COLORS.successBg};border-radius:12px;padding:20px;margin:24px 0;border-left:4px solid ${COLORS.success};">
|
||||
<p style="color:${COLORS.success};font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin:0 0 8px 0;">Resumo da resolucao</p>
|
||||
<p style="color:${COLORS.success};font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin:0 0 8px 0;">Resumo da resolução</p>
|
||||
<p style="color:${COLORS.textPrimary};font-size:14px;line-height:1.6;margin:0;">${escapeHtml(data.resolutionSummary)}</p>
|
||||
</div>
|
||||
`
|
||||
|
|
@ -516,7 +516,7 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
|
||||
<div style="text-align:center;">
|
||||
<p style="color:${COLORS.textPrimary};font-size:18px;font-weight:600;margin:0 0 8px 0;">Como foi o atendimento?</p>
|
||||
<p style="color:${COLORS.textSecondary};font-size:14px;margin:0;">Sua avaliacao nos ajuda a melhorar!</p>
|
||||
<p style="color:${COLORS.textSecondary};font-size:14px;margin:0;">Sua avaliação nos ajuda a melhorar!</p>
|
||||
${ratingStars(rateUrl)}
|
||||
</div>
|
||||
|
||||
|
|
@ -528,15 +528,15 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
)
|
||||
},
|
||||
|
||||
// Atribuicao de chamado
|
||||
// Atribuição de chamado
|
||||
ticket_assigned: (data) => {
|
||||
const viewUrl = data.viewUrl as string
|
||||
const isForRequester = data.isForRequester as boolean
|
||||
|
||||
const title = isForRequester ? "Agente atribuido" : "Novo chamado atribuido"
|
||||
const title = isForRequester ? "Agente atribuído" : "Novo chamado atribuído"
|
||||
const message = isForRequester
|
||||
? `O agente <strong>${escapeHtml(data.assigneeName)}</strong> foi atribuido ao seu chamado e em breve entrara em contato.`
|
||||
: `Um novo chamado foi atribuido a voce. Por favor, verifique os detalhes abaixo.`
|
||||
? `O agente <strong>${escapeHtml(data.assigneeName)}</strong> foi atribuído ao seu chamado e em breve entrará em contato.`
|
||||
: `Um novo chamado foi atribuído a você. Por favor, verifique os detalhes abaixo.`
|
||||
|
||||
return baseTemplate(
|
||||
`
|
||||
|
|
@ -564,7 +564,7 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
)
|
||||
},
|
||||
|
||||
// Mudanca de status
|
||||
// Mudança de status
|
||||
ticket_status: (data) => {
|
||||
const viewUrl = data.viewUrl as string
|
||||
const oldStatus = getStatusStyle(data.oldStatus as string)
|
||||
|
|
@ -608,17 +608,17 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
)
|
||||
},
|
||||
|
||||
// Novo comentario
|
||||
// Novo comentário
|
||||
ticket_comment: (data) => {
|
||||
const viewUrl = data.viewUrl as string
|
||||
|
||||
return baseTemplate(
|
||||
`
|
||||
<h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;">
|
||||
Nova atualizacao
|
||||
Nova atualização
|
||||
</h1>
|
||||
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;">
|
||||
<strong>${escapeHtml(data.authorName)}</strong> adicionou um comentario ao seu chamado.
|
||||
<strong>${escapeHtml(data.authorName)}</strong> adicionou um comentário ao seu chamado.
|
||||
</p>
|
||||
|
||||
${ticketInfoCard({
|
||||
|
|
@ -657,10 +657,10 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
</div>
|
||||
|
||||
<h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
|
||||
Redefinicao de senha
|
||||
Redefinição de senha
|
||||
</h1>
|
||||
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 32px 0;text-align:center;">
|
||||
Recebemos uma solicitacao para redefinir a senha da sua conta. Se voce nao fez essa solicitacao, pode ignorar este e-mail.
|
||||
Recebemos uma solicitação para redefinir a senha da sua conta. Se você não fez essa solicitação, pode ignorar este e-mail.
|
||||
</p>
|
||||
|
||||
<div style="text-align:center;margin:32px 0;">
|
||||
|
|
@ -668,14 +668,14 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
</div>
|
||||
|
||||
<p style="color:${COLORS.textMuted};font-size:13px;margin:32px 0 0 0;text-align:center;line-height:1.6;">
|
||||
Este link expira em 24 horas. Se voce nao solicitou a redefinicao de senha, pode ignorar este e-mail com seguranca.
|
||||
Este link expira em 24 horas. Se você não solicitou a redefinição de senha, pode ignorar este e-mail com segurança.
|
||||
</p>
|
||||
`,
|
||||
data
|
||||
)
|
||||
},
|
||||
|
||||
// Verificacao de e-mail
|
||||
// Verificação de e-mail
|
||||
email_verify: (data) => {
|
||||
const verifyUrl = data.verifyUrl as string
|
||||
|
||||
|
|
@ -691,7 +691,7 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
Confirme seu e-mail
|
||||
</h1>
|
||||
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 32px 0;text-align:center;">
|
||||
Clique no botao abaixo para confirmar seu endereco de e-mail e ativar sua conta.
|
||||
Clique no botão abaixo para confirmar seu endereço de e-mail e ativar sua conta.
|
||||
</p>
|
||||
|
||||
<div style="text-align:center;margin:32px 0;">
|
||||
|
|
@ -699,14 +699,14 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
</div>
|
||||
|
||||
<p style="color:${COLORS.textMuted};font-size:13px;margin:32px 0 0 0;text-align:center;line-height:1.6;">
|
||||
Se voce nao criou uma conta, pode ignorar este e-mail com seguranca.
|
||||
Se você não criou uma conta, pode ignorar este e-mail com segurança.
|
||||
</p>
|
||||
`,
|
||||
data
|
||||
)
|
||||
},
|
||||
|
||||
// Convite de usuario
|
||||
// Convite de usuário
|
||||
invite: (data) => {
|
||||
const inviteUrl = data.inviteUrl as string
|
||||
|
||||
|
|
@ -719,10 +719,10 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
</div>
|
||||
|
||||
<h1 style="color:${COLORS.textPrimary};font-size:26px;font-weight:700;margin:0 0 12px 0;text-align:center;">
|
||||
Voce foi convidado!
|
||||
Você foi convidado!
|
||||
</h1>
|
||||
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 24px 0;text-align:center;">
|
||||
<strong>${escapeHtml(data.inviterName)}</strong> convidou voce para acessar o Sistema de Chamados Raven.
|
||||
<strong>${escapeHtml(data.inviterName)}</strong> convidou você para acessar o Sistema de Chamados Raven.
|
||||
</p>
|
||||
|
||||
<table width="100%" cellpadding="0" cellspacing="0" style="background:${COLORS.cardAlt};border-radius:12px;border:1px solid ${COLORS.border};margin:24px 0;">
|
||||
|
|
@ -730,7 +730,7 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
<td style="padding:16px 20px;border-bottom:1px solid ${COLORS.borderLight};">
|
||||
<table width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:100px;">Funcao</td>
|
||||
<td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:100px;">Função</td>
|
||||
<td style="color:${COLORS.textPrimary};font-size:14px;font-weight:600;">${escapeHtml(data.roleName)}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -759,7 +759,7 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
</div>
|
||||
|
||||
<p style="color:${COLORS.textMuted};font-size:13px;margin:24px 0 0 0;text-align:center;line-height:1.6;">
|
||||
Este convite expira em 7 dias. Se voce nao esperava este convite, pode ignora-lo com seguranca.
|
||||
Este convite expira em 7 dias. Se você não esperava este convite, pode ignorá-lo com segurança.
|
||||
</p>
|
||||
`,
|
||||
data
|
||||
|
|
@ -780,7 +780,7 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
Novo acesso detectado
|
||||
</h1>
|
||||
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 24px 0;text-align:center;">
|
||||
Detectamos um novo acesso a sua conta. Se foi voce, pode ignorar este e-mail.
|
||||
Detectamos um novo acesso à sua conta. Se foi você, pode ignorar este e-mail.
|
||||
</p>
|
||||
|
||||
<table width="100%" cellpadding="0" cellspacing="0" style="background:${COLORS.cardAlt};border-radius:12px;border:1px solid ${COLORS.border};margin:24px 0;">
|
||||
|
|
@ -808,7 +808,7 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
<td style="padding:16px 20px;">
|
||||
<table width="100%" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:120px;">Endereco IP</td>
|
||||
<td style="color:${COLORS.textMuted};font-size:13px;font-weight:500;width:120px;">Endereço IP</td>
|
||||
<td style="color:${COLORS.textPrimary};font-size:14px;font-family:monospace;">${escapeHtml(data.ipAddress)}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -817,7 +817,7 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
</table>
|
||||
|
||||
<p style="color:${COLORS.textMuted};font-size:13px;margin:24px 0 0 0;text-align:center;line-height:1.6;">
|
||||
Se voce nao reconhece este acesso, recomendamos alterar sua senha imediatamente.
|
||||
Se você não reconhece este acesso, recomendamos alterar sua senha imediatamente.
|
||||
</p>
|
||||
`,
|
||||
data
|
||||
|
|
@ -840,10 +840,10 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
SLA em risco
|
||||
</h1>
|
||||
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0 0 8px 0;text-align:center;">
|
||||
O chamado abaixo esta proximo de violar o SLA.
|
||||
O chamado abaixo está próximo de violar o SLA.
|
||||
</p>
|
||||
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;text-align:center;">
|
||||
<strong>Acao necessaria!</strong>
|
||||
<strong>Ação necessária!</strong>
|
||||
</p>
|
||||
|
||||
${ticketInfoCard({
|
||||
|
|
@ -891,7 +891,7 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
O chamado abaixo violou o SLA estabelecido.
|
||||
</p>
|
||||
<p style="color:${COLORS.textSecondary};font-size:15px;line-height:1.7;margin:0;text-align:center;">
|
||||
<strong>Atencao urgente necessaria!</strong>
|
||||
<strong>Atenção urgente necessária!</strong>
|
||||
</p>
|
||||
|
||||
${ticketInfoCard({
|
||||
|
|
@ -922,7 +922,7 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
}
|
||||
|
||||
// ============================================
|
||||
// Exportacao
|
||||
// Exportação
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
|
|
@ -931,13 +931,13 @@ const templates: Record<TemplateName, (data: TemplateData) => string> = {
|
|||
export function renderTemplate(name: TemplateName, data: TemplateData): string {
|
||||
const template = templates[name]
|
||||
if (!template) {
|
||||
throw new Error(`Template "${name}" nao encontrado`)
|
||||
throw new Error(`Template "${name}" não encontrado`)
|
||||
}
|
||||
return template(data)
|
||||
}
|
||||
|
||||
/**
|
||||
* Retorna a lista de templates disponiveis
|
||||
* Retorna a lista de templates disponíveis
|
||||
*/
|
||||
export function getAvailableTemplates(): TemplateName[] {
|
||||
return Object.keys(templates) as TemplateName[]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue