\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 \u00faltimo, crea una plantilla para notificar a los usuarios que su pedido ha sido entregado. Para ello, crea un archivo llamado delivered.html<\/code> en la carpeta<\/code> src\/email-templates\/html<\/code> y a\u00f1ade el siguiente 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 gestionar y renderizar plantillas de email de forma din\u00e1mica, tienes que crear una clase que cargue y organice las plantillas para los diferentes estados de los pedidos. Esta clase recuperar\u00e1 la plantilla correcta y la renderizar\u00e1 con los datos espec\u00edficos de cada cliente. Para ello, crea un nuevo archivo llamado index.ts<\/code> en la carpeta src\/email-templates <\/code>y a\u00f1ade el siguiente 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 clase inicializa una variable privada llamada templates que almacena plantillas de email en un objeto Map para poder buscarlas r\u00e1pidamente en funci\u00f3n del estado del pedido. Usar un Map garantiza una recuperaci\u00f3n eficiente y evita tener que leer repetidamente los archivos del disco. La clase tambi\u00e9n define los siguientes m\u00e9todos:<\/p>\n\n\n\n
\nloadTemplates<\/code> (privado) lee las plantillas HTML de los archivos y las almacena en el Map templates, junto con sus correspondientes l\u00edneas de asunto.<\/li>\n\n\n\ngetTemplate<\/code> recupera la plantilla de email para un determinado estado del pedido y arroja un error si no se encuentra ninguna plantilla.<\/li>\n\n\n\nrenderTemplate<\/code> utiliza EJS para renderizar din\u00e1micamente una plantilla con los datos proporcionados.<\/li>\n<\/ul>\n\n\n\nImplementaci\u00f3n de la funcionalidad de env\u00edo de emails<\/h2>\n\n\n\n Con las plantillas de email listas, el siguiente paso es implementar la funcionalidad para enviar notificaciones. Esto implica poner en cola los trabajos de email y procesarlos de forma as\u00edncrona.<\/p>\n\n\n\n
Pero antes de poder hacerlo, tienes que instalar algunas dependencias ejecutando el siguiente 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\nAqu\u00ed tienes un resumen de cada una de estas dependencias:<\/p>\n\n\n\n
\nmailgun.js<\/code> es un cliente de Node.js para interactuar con la API de Mailgun. Lo usar\u00e1s para enviar emails transaccionales.<\/li>\n\n\n\nform-data<\/code> es un paquete que requiere mailgun.js<\/code> para manejar los env\u00edos de formularios al mandar emails.<\/li>\n\n\n\nbullmq<\/code> es una biblioteca de colas de trabajos para manejar tareas as\u00edncronas. Te permite poner en cola las notificaciones por email y procesarlas en segundo plano.<\/li>\n\n\n\nioredis<\/code> es un cliente de Redis para Node.js que utiliza BullMQ para almacenar y gestionar los trabajos en cola.<\/li>\n<\/ul>\n\n\n\nA continuaci\u00f3n, tienes que definir un cliente de la API de Mailgun que usar\u00e1s para enviar emails. Para ello, crea un nuevo archivo en src\/config\/mailgun.config.ts<\/code> y a\u00f1ade el siguiente 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 y exporta un cliente de Mailgun usando la biblioteca mailgun.js<\/code> y form-data<\/code>. Esto permite a tu aplicaci\u00f3n enviar emails mediante la API de Mailgun con la clave de API almacenada en variables de entorno.<\/p>\n\n\n\nAhora, tienes que definir una conexi\u00f3n de Redis que BullMQ utilizar\u00e1 para almacenar y gestionar trabajos en segundo plano. Para ello, crea un nuevo archivo llamado redis.config.ts<\/code> en la carpeta src\/config<\/code> y a\u00f1ade el siguiente 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 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\nTienes que configurar una cola de BullMQ para las notificaciones de env\u00edo que gestionar\u00e1 los trabajos de notificaci\u00f3n por email en segundo plano mediante la conexi\u00f3n de Redis que definiste en el paso anterior. Para ello, crea un nuevo archivo llamado queues.config.ts<\/code> en la carpeta src\/config<\/code> y a\u00f1ade el siguiente 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 tambi\u00e9n define nombres para la cola y el tipo de trabajo que pueden utilizarse en otras partes de la aplicaci\u00f3n para evitar usar cadenas incrustadas en el c\u00f3digo (hard-coded).<\/p>\n\n\n\n
Por \u00faltimo, crea un nuevo archivo en src\/services\/notifications.service.ts<\/code> y a\u00f1ade el siguiente 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