@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/app/api/contact/route.ts

@@ -1,410 +1,410 @@
-import { NextRequest, NextResponse } from "next/server";
-import nodemailer from "nodemailer";
-
-export const dynamic = 'force-dynamic';
-
-interface ContactFormData {
-    name: string;
-    lastName: string;
-    email: string;
-    phone: string;
-    subject: string;
-    message?: string;
-}
-
-const STRAPI_CONTACTS_API_URL = process.env.STRAPI_CONTACTS_API_URL || "";
-const STRAPI_API_TOKEN = process.env.STRAPI_API_TOKEN || "";
-const RECEIVER_EMAIL = process.env.RECEIVER_EMAIL || "";
-const FROM_EMAIL = process.env.FROM_EMAIL || "";
-const SMTP_HOST = process.env.SMTP_HOST || "";
-const SMTP_PORT = process.env.SMTP_PORT || "";
-const SMTP_USERNAME = process.env.SMTP_USERNAME || "";
-const SMTP_PASSWORD = process.env.SMTP_PASSWORD || "";
-const BUSINESS_NAME = process.env.BUSINESS_NAME || "";
-const THEME_COLOR = process.env.THEME_COLOR || "#2563eb";
-
-export async function POST(request: NextRequest) {
-    try {
-        if (!FROM_EMAIL || !SMTP_HOST || !SMTP_PORT || !SMTP_USERNAME || !SMTP_PASSWORD || !RECEIVER_EMAIL) {
-            return NextResponse.json(
-                { error: "Server configuration error: SMTP configuration or receiver email is incomplete" },
-                { status: 500 }
-            );
-        }
-
-        if (!STRAPI_CONTACTS_API_URL) {
-            return NextResponse.json(
-                { error: "Server configuration error: STRAPI_CONTACTS_API_URL is not defined" },
-                { status: 500 }
-            );
-        }
-
-        if (!STRAPI_API_TOKEN) {
-            return NextResponse.json(
-                { error: "Server configuration error: STRAPI_API_TOKEN is not defined" },
-                { status: 500 }
-            );
-        }
-
-        let data: ContactFormData;
-        try {
-            data = await request.json();
-        } catch (error) {
-            return NextResponse.json({ error: "Invalid request body" }, { status: 400 });
-        }
-
-        const { name, lastName, email, phone, subject, message } = data;
-
-        if (!name || !lastName || !email || !phone || !subject) {
-            return NextResponse.json({ error: "Missing required fields" }, { status: 400 });
-        }
-
-        const strapiResponse = await fetch(STRAPI_CONTACTS_API_URL, {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                "Authorization": `Bearer ${STRAPI_API_TOKEN}`,
-            },
-            body: JSON.stringify({
-                data: {
-                    name,
-                    lastName,
-                    email,
-                    phone,
-                    subject,
-                    message,
-                    submissionDate: new Date().toISOString(),
-                    publishedAt: new Date().toISOString(),
-                },
-            }),
-        });
-
-        const responseText = await strapiResponse.text();
-        let errorData = {};
-        try {
-            errorData = JSON.parse(responseText);
-        } catch (parseError) { }
-
-        if (!strapiResponse.ok) {
-            return NextResponse.json(
-                { error: `Failed to submit contact form to Strapi: ${strapiResponse.status} - ${JSON.stringify(errorData)}` },
-                { status: strapiResponse.status }
-            );
-        }
-
-        let transporter;
-        try {
-            transporter = nodemailer.createTransport({
-                host: SMTP_HOST,
-                port: Number(SMTP_PORT),
-                auth: {
-                    user: SMTP_USERNAME,
-                    pass: SMTP_PASSWORD,
-                },
-            });
-        } catch (error) {
-            return NextResponse.json({ error: "Failed to configure email transport" }, { status: 500 });
-        }
-
-        try {
-            await transporter.sendMail({
-                from: `"${name} ${lastName}" <${FROM_EMAIL}>`,
-                to: RECEIVER_EMAIL,
-                subject: `New Contact Form Submission: ${subject}`,
-                text: `
-          Name: ${name} ${lastName}
-          Email: ${email}
-          Phone: ${phone}
-          Subject: ${subject}
-          Message: ${message || "No message provided"}
-          Submission Date: ${new Date().toLocaleString()}
-        `,
-                html: `
-         <!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>New Contact Form Submission</title>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    body {
-      font-family: 'Helvetica Neue', Arial, sans-serif;
-      background-color: #f4f4f9;
-      color: #333333;
-      line-height: 1.5;
-      padding: 24px;
-    }
-    .email-container {
-      max-width: 680px;
-      margin: 0 auto;
-      background-color: #ffffff;
-      border-radius: 8px;
-      overflow: hidden;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    }
-    .header {
-      background-color: #ffffff;
-      border-bottom: 1px solid #e8e8e8;
-      padding: 32px;
-      text-align: center;
-    }
-    .business-name {
-      color: #1a1a1a;
-      font-size: 28px;
-      font-weight: 600;
-      letter-spacing: -0.02em;
-    }
-    .header-subtitle {
-      color: #666666;
-      font-size: 14px;
-      margin-top: 8px;
-    }
-    .content {
-      padding: 40px;
-    }
-    .content-header {
-      text-align: center;
-      margin-bottom: 32px;
-    }
-    .content-title {
-      font-size: 22px;
-      font-weight: 600;
-      color: #1a1a1a;
-      margin-bottom: 8px;
-    }
-    .content-subtitle {
-      font-size: 15px;
-      color: #6b7280;
-    }
-    .details-section {
-      background-color: #fafafa;
-      border-radius: 6px;
-      padding: 24px;
-      border-left: 3px solid ${THEME_COLOR || '#2563eb'};
-      margin-bottom: 32px;
-    }
-    .detail-row {
-      display: flex;
-      margin-bottom: 20px;
-      align-items: flex-start;
-      gap: 20px;
-    }
-    .detail-row:last-child {
-      margin-bottom: 0;
-    }
-    .detail-label {
-      font-weight: 500;
-      color: #4b5563;
-      min-width: 130px;
-      font-size: 14px;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-    .detail-value {
-      color: #333333;
-      font-size: 15px;
-      flex: 1;
-      word-break: break-word;
-    }
-    .detail-value a {
-      color: ${THEME_COLOR || '#2563eb'};
-      text-decoration: none;
-    }
-    .detail-value a:hover {
-      text-decoration: underline;
-    }
-    .message-content {
-      background-color: #ffffff;
-      border: 1px solid #e8e8e8;
-      border-radius: 4px;
-      padding: 16px;
-      color: #4b5563;
-      line-height: 1.6;
-      margin-top: 8px;
-      font-size: 14px;
-    }
-    .action-section {
-      text-align: center;
-      padding: 24px 0;
-      border-top: 1px solid #e8e8e8;
-    }
-.reply-button {
-  display: inline-block;
-  background-color: ${THEME_COLOR || '#2563eb'};
-  color: #fff;
-  text-decoration: none;
-  padding: 12px 24px;
-  border-radius: 6px;
-  font-weight: 600;
-  font-size: 15px;
-  transition: background-color 0.2s ease;
-}
-
-    .reply-button:hover {
-      background-color: #1d4ed8;
-    }
-    .footer {
-      background-color: #f4f4f9;
-      padding: 24px;
-      text-align: center;
-      border-top: 1px solid #e8e8e8;
-    }
-    .footer-content {
-      color: #6b7280;
-      font-size: 13px;
-      line-height: 1.5;
-    }
-    .footer-links {
-      margin-top: 12px;
-    }
-    .footer-links a {
-      color: ${THEME_COLOR || '#2563eb'};
-      text-decoration: none;
-      margin: 0 12px;
-      font-size: 13px;
-      font-weight: 500;
-    }
-    .footer-links a:hover {
-      text-decoration: underline;
-    }
-    .timestamp {
-      font-size: 13px;
-      color: #9ca3af;
-      margin-top: 20px;
-      padding-top: 20px;
-      border-top: 1px solid #e8e8e8;
-    }
-    
-    /* Mobile Responsive */
-    @media only screen and (max-width: 600px) {
-      body {
-        padding: 16px;
-      }
-      .email-container {
-        margin: 0 8px;
-        border-radius: 6px;
-      }
-      .header {
-        padding: 24px;
-      }
-      .business-name {
-        font-size: 24px;
-      }
-      .content {
-        padding: 24px;
-      }
-      .content-title {
-        font-size: 20px;
-      }
-      .details-section {
-        padding: 20px;
-      }
-      .detail-row {
-        flex-direction: column;
-        margin-bottom: 16px;
-        gap: 8px;
-      }
-      .detail-label {
-        min-width: auto;
-        font-size: 13px;
-      }
-      .footer {
-        padding: 20px;
-      }
-      .footer-links a {
-        display: block;
-        margin: 8px 0;
-      }
-    }
-  </style>
-</head>
-<body>
-  <div class="email-container">
-    <div class="header">
-      <div class="business-name">${BUSINESS_NAME}</div>
-      <div class="header-subtitle">A new message has been received from your website</div>
-    </div>
-      
-      <div class="details-section">
-        <div class="detail-row">
-          <div class="detail-label">Full Name</div>
-          <div class="detail-value">${name} ${lastName}</div>
-        </div>
-        <div class="detail-row">
-          <div class="detail-label">Email Address</div>
-          <div class="detail-value"><a href="mailto:${email}">${email}</a></div>
-        </div>
-        <div class="detail-row">
-          <div class="detail-label">Phone Number</div>
-          <div class="detail-value">${phone}</div>
-        </div>
-        <div class="detail-row">
-          <div class="detail-label">Subject</div>
-          <div class="detail-value">${subject}</div>
-        </div>
-        <div class="detail-row">
-          <div class="detail-label">Message</div>
-          <div class="detail-value">
-            ${message ? `<div class="message-content">${message}</div>` : '<em>No message provided</em>'}
-          </div>
-        </div>
-      </div>
-      
-      <div class="action-section">
-<a 
-  href="mailto:${email}?subject=Re: ${encodeURIComponent(subject)}" 
-  class="reply-button" 
-  style="background-color: ${THEME_COLOR || '#2563eb'}; color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 6px; font-weight: 600; font-size: 15px; display: inline-block;"
->
-  Reply to Customer
-</a>
-
-      </div>
-      
-      <div class="timestamp">
-        <strong>Received:</strong> ${new Date().toLocaleString('en-US', {
-                    weekday: 'long',
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
-                    hour: '2-digit',
-                    minute: '2-digit',
-                    timeZoneName: 'short'
-                })}
-      </div>
-    </div>
-    
-    <div class="footer">
-      <div class="footer-content">
-        <p>&copy; ${new Date().getFullYear()} ${BUSINESS_NAME}. All rights reserved.</p>
-        <div class="footer-links">
-          <a href="https://devvistatech.com/">Visit Website</a>
-          <a href="mailto:devvistainfo@gmail.com">Contact Support</a>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-</html>
-        `,
-                replyTo: email,
-            });
-        } catch (error) {
-            return NextResponse.json({ error: "Failed to send email notification" }, { status: 500 });
-        }
-
-        return NextResponse.json({
-            data: { contactRequest: { name, lastName, email, phone, subject, message } },
-        });
-    } catch (error) {
-        return NextResponse.json(
-            { error: error instanceof Error ? error.message : "An error occurred while processing contact form" },
-            { status: 500 }
-        );
-    }
+import { NextRequest, NextResponse } from "next/server";
+import nodemailer from "nodemailer";
+
+export const dynamic = 'force-dynamic';
+
+interface ContactFormData {
+    name: string;
+    lastName: string;
+    email: string;
+    phone: string;
+    subject: string;
+    message?: string;
+}
+
+const STRAPI_CONTACTS_API_URL = process.env.STRAPI_CONTACTS_API_URL || "";
+const STRAPI_API_TOKEN = process.env.STRAPI_API_TOKEN || "";
+const RECEIVER_EMAIL = process.env.RECEIVER_EMAIL || "";
+const FROM_EMAIL = process.env.FROM_EMAIL || "";
+const SMTP_HOST = process.env.SMTP_HOST || "";
+const SMTP_PORT = process.env.SMTP_PORT || "";
+const SMTP_USERNAME = process.env.SMTP_USERNAME || "";
+const SMTP_PASSWORD = process.env.SMTP_PASSWORD || "";
+const BUSINESS_NAME = process.env.BUSINESS_NAME || "";
+const THEME_COLOR = process.env.THEME_COLOR || "#2563eb";
+
+export async function POST(request: NextRequest) {
+    try {
+        if (!FROM_EMAIL || !SMTP_HOST || !SMTP_PORT || !SMTP_USERNAME || !SMTP_PASSWORD || !RECEIVER_EMAIL) {
+            return NextResponse.json(
+                { error: "Server configuration error: SMTP configuration or receiver email is incomplete" },
+                { status: 500 }
+            );
+        }
+
+        if (!STRAPI_CONTACTS_API_URL) {
+            return NextResponse.json(
+                { error: "Server configuration error: STRAPI_CONTACTS_API_URL is not defined" },
+                { status: 500 }
+            );
+        }
+
+        if (!STRAPI_API_TOKEN) {
+            return NextResponse.json(
+                { error: "Server configuration error: STRAPI_API_TOKEN is not defined" },
+                { status: 500 }
+            );
+        }
+
+        let data: ContactFormData;
+        try {
+            data = await request.json();
+        } catch (error) {
+            return NextResponse.json({ error: "Invalid request body" }, { status: 400 });
+        }
+
+        const { name, lastName, email, phone, subject, message } = data;
+
+        if (!name || !lastName || !email || !phone || !subject) {
+            return NextResponse.json({ error: "Missing required fields" }, { status: 400 });
+        }
+
+        const strapiResponse = await fetch(STRAPI_CONTACTS_API_URL, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${STRAPI_API_TOKEN}`,
+            },
+            body: JSON.stringify({
+                data: {
+                    name,
+                    lastName,
+                    email,
+                    phone,
+                    subject,
+                    message,
+                    submissionDate: new Date().toISOString(),
+                    publishedAt: new Date().toISOString(),
+                },
+            }),
+        });
+
+        const responseText = await strapiResponse.text();
+        let errorData = {};
+        try {
+            errorData = JSON.parse(responseText);
+        } catch (parseError) { }
+
+        if (!strapiResponse.ok) {
+            return NextResponse.json(
+                { error: `Failed to submit contact form to Strapi: ${strapiResponse.status} - ${JSON.stringify(errorData)}` },
+                { status: strapiResponse.status }
+            );
+        }
+
+        let transporter;
+        try {
+            transporter = nodemailer.createTransport({
+                host: SMTP_HOST,
+                port: Number(SMTP_PORT),
+                auth: {
+                    user: SMTP_USERNAME,
+                    pass: SMTP_PASSWORD,
+                },
+            });
+        } catch (error) {
+            return NextResponse.json({ error: "Failed to configure email transport" }, { status: 500 });
+        }
+
+        try {
+            await transporter.sendMail({
+                from: `"${name} ${lastName}" <${FROM_EMAIL}>`,
+                to: RECEIVER_EMAIL,
+                subject: `New Contact Form Submission: ${subject}`,
+                text: `
+          Name: ${name} ${lastName}
+          Email: ${email}
+          Phone: ${phone}
+          Subject: ${subject}
+          Message: ${message || "No message provided"}
+          Submission Date: ${new Date().toLocaleString()}
+        `,
+                html: `
+         <!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>New Contact Form Submission</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: 'Helvetica Neue', Arial, sans-serif;
+      background-color: #f4f4f9;
+      color: #333333;
+      line-height: 1.5;
+      padding: 24px;
+    }
+    .email-container {
+      max-width: 680px;
+      margin: 0 auto;
+      background-color: #ffffff;
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    }
+    .header {
+      background-color: #ffffff;
+      border-bottom: 1px solid #e8e8e8;
+      padding: 32px;
+      text-align: center;
+    }
+    .business-name {
+      color: #1a1a1a;
+      font-size: 28px;
+      font-weight: 600;
+      letter-spacing: -0.02em;
+    }
+    .header-subtitle {
+      color: #666666;
+      font-size: 14px;
+      margin-top: 8px;
+    }
+    .content {
+      padding: 40px;
+    }
+    .content-header {
+      text-align: center;
+      margin-bottom: 32px;
+    }
+    .content-title {
+      font-size: 22px;
+      font-weight: 600;
+      color: #1a1a1a;
+      margin-bottom: 8px;
+    }
+    .content-subtitle {
+      font-size: 15px;
+      color: #6b7280;
+    }
+    .details-section {
+      background-color: #fafafa;
+      border-radius: 6px;
+      padding: 24px;
+      border-left: 3px solid ${THEME_COLOR || '#2563eb'};
+      margin-bottom: 32px;
+    }
+    .detail-row {
+      display: flex;
+      margin-bottom: 20px;
+      align-items: flex-start;
+      gap: 20px;
+    }
+    .detail-row:last-child {
+      margin-bottom: 0;
+    }
+    .detail-label {
+      font-weight: 500;
+      color: #4b5563;
+      min-width: 130px;
+      font-size: 14px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .detail-value {
+      color: #333333;
+      font-size: 15px;
+      flex: 1;
+      word-break: break-word;
+    }
+    .detail-value a {
+      color: ${THEME_COLOR || '#2563eb'};
+      text-decoration: none;
+    }
+    .detail-value a:hover {
+      text-decoration: underline;
+    }
+    .message-content {
+      background-color: #ffffff;
+      border: 1px solid #e8e8e8;
+      border-radius: 4px;
+      padding: 16px;
+      color: #4b5563;
+      line-height: 1.6;
+      margin-top: 8px;
+      font-size: 14px;
+    }
+    .action-section {
+      text-align: center;
+      padding: 24px 0;
+      border-top: 1px solid #e8e8e8;
+    }
+.reply-button {
+  display: inline-block;
+  background-color: ${THEME_COLOR || '#2563eb'};
+  color: #fff;
+  text-decoration: none;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 15px;
+  transition: background-color 0.2s ease;
+}
+
+    .reply-button:hover {
+      background-color: #1d4ed8;
+    }
+    .footer {
+      background-color: #f4f4f9;
+      padding: 24px;
+      text-align: center;
+      border-top: 1px solid #e8e8e8;
+    }
+    .footer-content {
+      color: #6b7280;
+      font-size: 13px;
+      line-height: 1.5;
+    }
+    .footer-links {
+      margin-top: 12px;
+    }
+    .footer-links a {
+      color: ${THEME_COLOR || '#2563eb'};
+      text-decoration: none;
+      margin: 0 12px;
+      font-size: 13px;
+      font-weight: 500;
+    }
+    .footer-links a:hover {
+      text-decoration: underline;
+    }
+    .timestamp {
+      font-size: 13px;
+      color: #9ca3af;
+      margin-top: 20px;
+      padding-top: 20px;
+      border-top: 1px solid #e8e8e8;
+    }
+    
+    /* Mobile Responsive */
+    @media only screen and (max-width: 600px) {
+      body {
+        padding: 16px;
+      }
+      .email-container {
+        margin: 0 8px;
+        border-radius: 6px;
+      }
+      .header {
+        padding: 24px;
+      }
+      .business-name {
+        font-size: 24px;
+      }
+      .content {
+        padding: 24px;
+      }
+      .content-title {
+        font-size: 20px;
+      }
+      .details-section {
+        padding: 20px;
+      }
+      .detail-row {
+        flex-direction: column;
+        margin-bottom: 16px;
+        gap: 8px;
+      }
+      .detail-label {
+        min-width: auto;
+        font-size: 13px;
+      }
+      .footer {
+        padding: 20px;
+      }
+      .footer-links a {
+        display: block;
+        margin: 8px 0;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="email-container">
+    <div class="header">
+      <div class="business-name">${BUSINESS_NAME}</div>
+      <div class="header-subtitle">A new message has been received from your website</div>
+    </div>
+      
+      <div class="details-section">
+        <div class="detail-row">
+          <div class="detail-label">Full Name</div>
+          <div class="detail-value">${name} ${lastName}</div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-label">Email Address</div>
+          <div class="detail-value"><a href="mailto:${email}">${email}</a></div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-label">Phone Number</div>
+          <div class="detail-value">${phone}</div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-label">Subject</div>
+          <div class="detail-value">${subject}</div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-label">Message</div>
+          <div class="detail-value">
+            ${message ? `<div class="message-content">${message}</div>` : '<em>No message provided</em>'}
+          </div>
+        </div>
+      </div>
+      
+      <div class="action-section">
+<a 
+  href="mailto:${email}?subject=Re: ${encodeURIComponent(subject)}" 
+  class="reply-button" 
+  style="background-color: ${THEME_COLOR || '#2563eb'}; color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 6px; font-weight: 600; font-size: 15px; display: inline-block;"
+>
+  Reply to Customer
+</a>
+
+      </div>
+      
+      <div class="timestamp">
+        <strong>Received:</strong> ${new Date().toLocaleString('en-US', {
+                    weekday: 'long',
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    timeZoneName: 'short'
+                })}
+      </div>
+    </div>
+    
+    <div class="footer">
+      <div class="footer-content">
+        <p>&copy; ${new Date().getFullYear()} ${BUSINESS_NAME}. All rights reserved.</p>
+        <div class="footer-links">
+          <a href="https://devvistatech.com/">Visit Website</a>
+          <a href="mailto:devvistainfo@gmail.com">Contact Support</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
+        `,
+                replyTo: email,
+            });
+        } catch (error) {
+            return NextResponse.json({ error: "Failed to send email notification" }, { status: 500 });
+        }
+
+        return NextResponse.json({
+            data: { contactRequest: { name, lastName, email, phone, subject, message } },
+        });
+    } catch (error) {
+        return NextResponse.json(
+            { error: error instanceof Error ? error.message : "An error occurred while processing contact form" },
+            { status: 500 }
+        );
+    }
 }