calimania · dvidsilva · Jan 23, 2025 · Jan 23, 2025
diff --git a/src/api/markket/services/notification.ts b/src/api/markket/services/notification.ts
diff --git a/src/api/markket/services/notification/index.ts b/src/api/markket/services/notification/index.ts
@@ -0,0 +1,65 @@
+const SENDGRID_FROM_EMAIL = process.env.SENDGRID_FROM_EMAIL || '';
+const SENDGRID_REPLY_TO_EMAIL = process.env.SENDGRID_REPLY_TO_EMAIL || '';
+import { OrderNotificationHTml, RSVPNotificationHTml } from './template';
+
+
+export const sendRSVPNotification = async ({ strapi, rsvp, event }) => {
+  console.info('notification::rsvp:created', {
+    rsvp: !!rsvp,
+    event: !!event,
+    strapi: !!strapi,
+    from: !!SENDGRID_FROM_EMAIL,
+    reply_to: !!SENDGRID_REPLY_TO_EMAIL,
+  });
+
+  if (!SENDGRID_FROM_EMAIL || !SENDGRID_REPLY_TO_EMAIL) {
+    return;
+  }
+
+  // if (!order?.data?.object?.customer_details?.email) {
+  //   return;
+  // }
+
+  // const customer = event?.data?.object?.customer_details;
+  const customer = { email: rsvp.email };
+
+  return await strapi.plugins['email'].services.email.send({
+    to: customer.email,
+    from: SENDGRID_FROM_EMAIL, //e.g. single sender verification in SendGrid
+    cc: SENDGRID_REPLY_TO_EMAIL,
+    replyTo: SENDGRID_REPLY_TO_EMAIL,
+    subject: 'Markkët: RSVP Confirmation',
+    text: 'RSVP confirmation!',
+    html: RSVPNotificationHTml(event),
+  });
+};
+
+
+export const sendOrderNotification = async ({ strapi, order }) => {
+  console.info('notification::stripe:checkout.session.completed', {
+    order,
+    strapi: !!strapi,
+    from: !!SENDGRID_FROM_EMAIL,
+    reply_to: !!SENDGRID_REPLY_TO_EMAIL,
+  });
+
+  if (!SENDGRID_FROM_EMAIL || !SENDGRID_REPLY_TO_EMAIL) {
+    return;
+  }
+
+  if (!order?.data?.object?.customer_details?.email) {
+    return;
+  }
+
+  const customer = order?.data?.object?.customer_details;
+
+  return await strapi.plugins['email'].services.email.send({
+    to: customer.email,
+    from: SENDGRID_FROM_EMAIL, //e.g. single sender verification in SendGrid
+    cc: SENDGRID_REPLY_TO_EMAIL,
+    replyTo: SENDGRID_REPLY_TO_EMAIL,
+    subject: 'Markkët: Order Confirmation',
+    text: 'Thank you for your order!',
+    html: OrderNotificationHTml(order),
+  });
+};
diff --git a/src/api/markket/services/notification/template.ts b/src/api/markket/services/notification/template.ts
@@ -0,0 +1,231 @@
+
+type EmailLayout = {
+  content: string;
+  title: string;
+};
+
+export const emailLayout = ({ content, title }: EmailLayout) => {
+  return `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>RSVP Confirmation - Markkët</title>
+      <style>
+        /* Reset and base styles */
+        * {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+        }
+
+        body {
+          font-family: Arial, sans-serif;
+          line-height: 1.6;
+          background-color: #f5f5f5;
+          color: #333333;
+        }
+
+        /* Container */
+        .email-container {
+
+          margin: 0 auto;
+          background-color: #ffffff;
+        }
+
+        /* Header */
+        .header {
+          background-color: #0057ad;
+          padding: 24px;
+          text-align: center;
+        }
+
+        .logo {
+          color: #fbda0d;
+          font-size: 32px;
+          font-weight: bold;
+          letter-spacing: 1px;
+          margin: 0;
+        }
+
+        /* Divider */
+        .divider {
+          height: 4px;
+          background-color: #fbda0d;
+          margin-bottom: 16px;
+        }
+
+        /* Content */
+        .content {
+          padding: 32px;
+          max-width: 600px;
+        }
+
+        .title {
+          font-size: 24px;
+          font-weight: bold;
+          margin-bottom: 16px;
+        }
+
+        .greeting {
+          margin-bottom: 8px;
+        }
+
+        .name {
+          color: #ff00cf;
+          font-weight: 600;
+        }
+
+        .message {
+          margin-bottom: 16px;
+        }
+
+        /* Event Details */
+        .event-details {
+          background-color: #f9f9f9;
+          padding: 24px;
+          border-radius: 8px;
+          margin-bottom: 32px;
+        }
+
+        .event-details h3 {
+          font-size: 18px;
+          font-weight: 600;
+          margin-bottom: 16px;
+        }
+
+        .event-details p {
+          margin-bottom: 12px;
+        }
+
+        .event-details strong {
+          font-weight: 600;
+        }
+
+        /* Footer */
+        .footer {
+          padding: 24px;
+          text-align: center;
+          border-top: 1px solid #fbda0d;
+        }
+
+        .footer p {
+          color: #666666;
+          font-size: 14px;
+        }
+
+        .footer a {
+          color: #0057ad;
+          text-decoration: none;
+        }
+
+        .footer a:hover {
+          text-decoration: underline;
+        }
+
+        /* Responsive */
+        @media (max-width: 600px) {
+          .content {
+            padding: 24px 16px;
+          }
+
+          .event-details {
+            padding: 16px;
+          }
+        }
+      </style>
+    </head>
+    <body>
+      <div class="email-container">
+        <!-- Header -->
+        <header class="header">
+          <h1 class="logo">Markkët</h1>
+        </header>
+
+        <!-- Yellow Divider -->
+        <div class="divider"></div>
+
+        <!-- Content -->
+        <main class="content">
+          <h2 class="title">${title} 🎉</h2>
+
+          ${content}
+
+          <div class="message">
+            <p>If you need to make any changes, please don't hesitate to contact us.</p>
+            <p style="margin-top: 16px;">
+              Best regards,<br>
+              The Markkët Team
+            </p>
+          </div>
+        </main>
+
+        <!-- Footer -->
+        <footer class="footer">
+          <p>
+            Powered by
+            <a href="https://markket.place/about">Markkët</a>
+            & SendGrid
+          </p>
+        </footer>
+      </div>
+    </body>
+    </html>
+  `;
+};
+
+/**
+ * Order Notification Email Template
+ *
+ * @param order
+ * @returns
+ */
+export const OrderNotificationHTml = (order: any) => {
+  // <p>Order Amount: ${((order?.data?.object?.total_amount || 0) / 100)}</p>
+  const content = `
+    <p>Thank you for your order!</p>
+    <div class="event-details">
+      <h3>Order</h3>
+      <p>Order ID: ${order?.data?.object?.id}</p>
+      <p class="greeting">Dear <span class="name">buyer</span>,</p>
+      <p class="message">Thank you for your order!</p>
+      <a href="https://markket.place/receipt?session_id=${order?.data?.object?.id}">
+        View Receipt
+      </a>
+      <p>The seller has been notified and will reach out if more information is needed.</p>
+    </div>
+  `;
+
+  const title = 'Markkët: Order Confirmation';
+
+  return emailLayout({ content, title });
+};
+
+/**
+ * RSVP Notification Email Template
+ *
+ * @param event
+ * @returns
+ */
+export const RSVPNotificationHTml = (event: any) => {
+  // <p>Order Amount: ${((order?.data?.object?.total_amount || 0) / 100)}</p>
+  const content = `
+    <!--<h1>Order Confirmation</h1>
+    <p>Thank you for your order!</p>
+    <p>Order ID: ${event?.data?.object?.id}</p>-->
+    <p class="greeting">Dear <span class="name">{{name}}</span>,</p>
+    <p class="message">Thank you for confirming your attendance to our upcoming event. We're excited to have you join us!</p>
+    <div class="event-details">
+      <h3>Event Details</h3>
+      <p><strong>Event:</strong> {{eventName}}</p>
+      <p><strong>Date:</strong> {{eventDate}}</p>
+      <p><strong>Time:</strong> {{startTime}} - {{endTime}}</p>
+      <p><strong>Your Email:</strong> {{email}}</p>
+    </div>
+  `;
+
+  const title = 'Markkët: RSVP Confirmation';
+
+  return emailLayout({ content, title });
+};
diff --git a/src/api/rsvp/middlewares/notification.ts b/src/api/rsvp/middlewares/notification.ts
@@ -0,0 +1,8 @@
+import { sendRSVPNotification } from "../../markket/services/notification";
+
+export default (config, { strapi }) => {
+  return async (context, next) => {
+    await next();
+    await sendRSVPNotification({ strapi, rsvp: context.body?.data, event: {} });
+  };
+};
diff --git a/src/api/rsvp/routes/rsvp.ts b/src/api/rsvp/routes/rsvp.ts
@@ -4,4 +4,15 @@
 
 import { factories } from '@strapi/strapi';
 
-export default factories.createCoreRouter('api::rsvp.rsvp');
+export default factories.createCoreRouter('api::rsvp.rsvp', {
+  config: {
+    create: {
+      middlewares: [
+        {
+          name: 'api::rsvp.notification',
+          config: {}
+        }
+      ]
+    }
+  }
+});