\r\n\r\n <!DOCTYPE html>rn<html>rn<head>rn <meta charset="UTF-8" \/>rn <title>Out for Delivery<\/title>rn<\/head>rn<body style="font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 20px; text-align: center;">rnrn <div style="background: #ffffff; padding: 20px; border-radius: 8px; max-width: 600px; margin: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);">rnrn <div style="background-color: #28a745; color: white; padding: 15px; font-size: 22px; font-weight: bold; border-top-left-radius: 8px; border-top-right-radius: 8px;">rn Your Order Is Out for Delivery! \ud83d\ude9arn <\/div>rnrn <div style="padding: 20px; font-size: 16px; color: #333; text-align: left;">rn <p style="margin: 0 0 10px;">Hello, <%= name %><\/p>rn <p style="margin: 0 0 10px;">Good news! Your package is out for delivery and will arrive soon. \ud83d\udce6<\/p>rn <p style="margin: 0 0 10px;"><strong>Tracking Number:<\/strong> <%= trackingNumber %><\/p>rn <p style="margin: 0 0 10px;">We appreciate your business and can't wait for you to receive your order!<\/p>rnrn <a href="https:\/\/yourwebsite.com\/track?trackingNumber=<%= trackingNumber %>"rn style="background-color: #28a745; color: white; text-decoration: none; padding: 12px 18px; border-radius: 5px; display: inline-block; margin-top: 15px; font-weight: bold;">rn Track Your Packagern <\/a>rn <\/div>rnrn <div style="background-color: #f4f4f4; padding: 10px; font-size: 14px; color: #555; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;">rn Thank you for choosing us! \ud83d\udecd\ufe0frn <\/div>rn <\/div>rn<\/body>rn<\/html>\r\n <\/code>\r\n <\/pre>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\n\n\nPor fim, crie um modelo para notificar os usu\u00e1rios de que o pedido foi entregue, criando um arquivo chamado delivered.html<\/code> na pasta<\/code> src\/email-templates\/html<\/code> e adicionando o seguinte c\u00f3digo:<\/p>\n\n\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n HTML <\/button>\r\n <\/li>\r\n\r\n \r\n \r\n <\/ul>\r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n
\r\n <\/svg>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n\r\n <!DOCTYPE html>rn<html>rn<head>rn <meta charset="UTF-8" \/>rn <title>Order Delivered<\/title>rn<\/head>rn<body style="font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 20px; text-align: center;">rnrn <div style="background: #ffffff; padding: 20px; border-radius: 8px; max-width: 600px; margin: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);">rnrn <div style="background-color: #ffc107; color: white; padding: 15px; font-size: 22px; font-weight: bold; border-top-left-radius: 8px; border-top-right-radius: 8px;">rn Your Order Has Been Delivered! \ud83c\udf89rn <\/div>rnrn <div style="padding: 20px; font-size: 16px; color: #333; text-align: left;">rn <p style="margin: 0 0 10px;">Hello, <%= name %><\/p>rn <p style="margin: 0 0 10px;">We're happy to inform you that your package has been successfully delivered. \ud83c\udf81<\/p>rn <p style="margin: 0 0 10px;"><strong>Tracking Number:<\/strong> <%= trackingNumber %><\/p>rn <p style="margin: 0 0 10px;">We hope you enjoy your purchase! If you have any questions, feel free to contact us.<\/p>rnrn <a href="https:\/\/yourwebsite.com\/track?trackingNumber=<%= trackingNumber %>"rn style="background-color: #ffc107; color: white; text-decoration: none; padding: 12px 18px; border-radius: 5px; display: inline-block; margin-top: 15px; font-weight: bold;">rn Track Your Orderrn <\/a>rn <\/div>rnrn <div style="background-color: #f4f4f4; padding: 10px; font-size: 14px; color: #555; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;">rn Thank you for shopping with us! \ud83d\udecd\ufe0frn <\/div>rn <\/div>rn<\/body>rn<\/html>\r\n <\/code>\r\n <\/pre>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\n\n\nPara gerenciar e renderizar modelos de e-mail dinamicamente, voc\u00ea precisa criar uma classe que carregue e organize modelos para diferentes status de pedido. Esta classe recuperar\u00e1 o modelo certo e o renderizar\u00e1 com dados espec\u00edficos de cada cliente. Para isso, crie um novo arquivo chamado index.ts<\/code> na pasta src\/email-templates <\/code> e adicione o seguinte c\u00f3digo:<\/p>\n\n\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n PHP <\/button>\r\n <\/li>\r\n\r\n \r\n \r\n <\/ul>\r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n
\r\n <\/svg>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n\r\n import { readFileSync } from "fs";rnimport { EmailTemplate, OrderStatus } from "..\/types";rnimport ejs from "ejs";rnrnexport class EmailTemplateManager {rn private templates: Map<OrderStatus, EmailTemplate>;rnrn constructor() {rn this.templates = new Map();rn this.loadTemplates();rn }rnrn private loadTemplates() {rn \/\/ Load each template for different statusesrn const statuses: OrderStatus[] = [rn "shipped",rn "out_for_delivery",rn "delivered",rn ];rn const subjects: Record<OrderStatus, string> = {rn shipped: "Your Order Has Been Shipped! \u2708\ufe0f",rn out_for_delivery: "Your Order is Out for Delivery! \ud83d\ude9a",rn delivered: "Your Order Has Been Delivered! \ud83c\udf89",rn };rnrn statuses.forEach((status) => {rn const htmlTemplate = readFileSync(rn `src\/email-templates\/html\/${status}.html`,rn "utf-8"rn );rnrn this.templates.set(status, {rn subject: subjects[status],rn html: htmlTemplate,rn });rn });rn }rnrn getTemplate(status: OrderStatus): EmailTemplate {rn const template = this.templates.get(status);rn if (!template) {rn throw new Error(`No template found for status: ${status}`);rn }rn return template;rn }rnrn renderTemplate(templateString: string, data: Record<string, any>): string {rn return ejs.render(templateString, data); \/\/ Render the template with the provided datarn }rn}\r\n <\/code>\r\n <\/pre>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\n\n\nEsta classe inicializa uma vari\u00e1vel privada chamada templates, que armazena os modelos de e-mail em um Map para pesquisa r\u00e1pida com base no status do pedido. Usar um Map garante uma recupera\u00e7\u00e3o eficiente e evita a leitura repetida de arquivos do disco. A classe tamb\u00e9m define os seguintes m\u00e9todos:<\/p>\n\n\n\n
\nloadTemplates<\/code> (privado) l\u00ea modelos HTML dos arquivos e os armazena no Map templates, juntamente com suas respectivas linhas de assunto.<\/li>\n\n\n\ngetTemplate<\/code> recupera o modelo de e-mail para um determinado status de pedido e gera um erro se nenhum modelo for encontrado.<\/li>\n\n\n\nrenderTemplate<\/code> usa o EJS para renderizar dinamicamente um modelo com os dados fornecidos.<\/li>\n<\/ul>\n\n\n\nImplementa\u00e7\u00e3o da funcionalidade de envio de e-mails<\/h2>\n\n\n\n Com os modelos de e-mail configurados, a pr\u00f3xima etapa \u00e9 implementar a funcionalidade de envio de notifica\u00e7\u00f5es. Isso envolve colocar trabalhos de e-mail na fila e process\u00e1-los de forma ass\u00edncrona.<\/p>\n\n\n\n
Mas antes de fazer isso, voc\u00ea precisa instalar algumas depend\u00eancias executando o seguinte comando:<\/p>\n\n\n\n
npm i mailgun.js@11.1.0 form-data@4.0.2 bullmq@5.41.2 ioredis@5.5.0<\/code><\/p>\n\n\n\nAqui est\u00e1 uma vis\u00e3o geral de cada uma dessas depend\u00eancias:<\/p>\n\n\n\n
\nmailgun.js<\/code> \u00e9 um cliente Node.js para interagir com a API do Mailgun. Voc\u00ea usar\u00e1 isso para enviar e-mails transacionais.<\/li>\n\n\n\nform-data<\/code> \u00e9 um pacote exigido pelo mailgun.js<\/code> para lidar com envios de formul\u00e1rios ao enviar e-mails.<\/li>\n\n\n\nbullmq<\/code> \u00e9 uma biblioteca de fila de trabalhos para lidar com tarefas ass\u00edncronas. Isso permite colocar notifica\u00e7\u00f5es por e-mail na fila e process\u00e1-las em segundo plano.<\/li>\n\n\n\nioredis<\/code> \u00e9 um cliente Redis para Node.js, usado pelo BullMQ para armazenar e gerenciar trabalhos na fila.<\/li>\n<\/ul>\n\n\n\nEm seguida, voc\u00ea precisa definir um cliente da API do Mailgun que usar\u00e1 para enviar e-mails. Para isso, crie um novo arquivo em src\/config\/mailgun.config.ts<\/code> e adicione o seguinte c\u00f3digo:<\/p>\n\n\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n PHP <\/button>\r\n <\/li>\r\n\r\n \r\n \r\n <\/ul>\r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n
\r\n <\/svg>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n\r\n import FormData from "form-data";rnimport Mailgun from "mailgun.js";rnrnconst mailgun = new Mailgun(FormData);rnexport const mgClient = mailgun.client({rn username: "api",rn key: process.env.MAILGUN_API_KEY,rn});\r\n <\/code>\r\n <\/pre>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\n\n\nEste c\u00f3digo configura e exporta um cliente Mailgun usando a biblioteca mailgun.js<\/code> e o form-data<\/code>, permitindo que sua aplica\u00e7\u00e3o envie e-mails atrav\u00e9s da API do Mailgun com a chave de API armazenada nas vari\u00e1veis de ambiente.<\/p>\n\n\n\nAgora, voc\u00ea precisa definir uma conex\u00e3o Redis que ser\u00e1 usada pelo BullMQ para armazenar e gerenciar trabalhos em segundo plano. Para fazer isso, crie um novo arquivo chamado redis.config.ts<\/code> na pasta src\/config<\/code> e adicione o c\u00f3digo abaixo:<\/p>\n\n\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n PHP <\/button>\r\n <\/li>\r\n\r\n \r\n \r\n <\/ul>\r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n
\r\n <\/svg>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n\r\n import IORedis from "ioredis";rnrnexport const redisConfig = new IORedis({rn host: process.env.REDIS_HOST,rn port: parseInt(process.env.REDIS_PORT),rn maxRetriesPerRequest: null,rn});\r\n <\/code>\r\n <\/pre>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\n\n\nVoc\u00ea precisa configurar uma fila BullMQ para as notifica\u00e7\u00f5es de envio, que lidar\u00e1 com os trabalhos de notifica\u00e7\u00e3o por e-mail em segundo plano usando a conex\u00e3o Redis definida na etapa anterior. Para isso, crie um novo arquivo chamado queues.config.ts<\/code> na pasta src\/config<\/code> e adicione o seguinte c\u00f3digo:<\/p>\n\n\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n PHP <\/button>\r\n <\/li>\r\n\r\n \r\n \r\n <\/ul>\r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n
\r\n <\/svg>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n \r\n \r\n\r\n import { Queue } from "bullmq";rnimport { redisConfig } from ".\/redis.config";rnrnexport const QUEUE_NAMES = {rn SHIPPING_NOTICATIONS: "shipping-notifications",rn};rnrnexport const JOB_NAMES = {rn SEND_NOTIFICATION: "send-notification",rn};rnrnexport const SHIPPING_NOTICATIONS_QUEUE = new Queue(rn QUEUE_NAMES.SHIPPING_NOTICATIONS,rn {rn connection: redisConfig,rn }rn);\r\n <\/code>\r\n <\/pre>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\n\n\nEste c\u00f3digo tamb\u00e9m define nomes para a fila e o tipo de trabalho que podem ser usados em outras partes da aplica\u00e7\u00e3o para evitar strings hardcoded.<\/p>\n\n\n\n
Por fim, crie um novo arquivo em src\/services\/notifications.service.ts<\/code> e adicione o seguinte c\u00f3digo:<\/p>\n\n\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n PHP <\/button>\r\n <\/li>\r\n\r\n \r\n \r\n <\/ul>\r\n