Show an on-screen success message instead of emailing visitors
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Veras
@@ -1,20 +1,15 @@
|
||||
"use server";
|
||||
|
||||
import { headers } from "next/headers";
|
||||
import { after } from "next/server";
|
||||
|
||||
export type ContactState = { status: "idle" | "sent" | "error"; message?: string; copySent?: boolean };
|
||||
export type ContactState = { status: "idle" | "sent" | "error"; message?: string };
|
||||
|
||||
// Where enquiries land. Override with CONTACT_TO in the environment if it ever changes.
|
||||
const TO = process.env.CONTACT_TO || "rey@aigrowth360.io";
|
||||
// Resend's shared sender works without a verified domain, but only delivers to the address that
|
||||
// owns the Resend account. Set CONTACT_FROM to an address on a domain verified in Resend
|
||||
// (e.g. "AI Growth Technologies <hello@aigrowth360.io>") to also send visitors a confirmation.
|
||||
// Resend's shared sender only delivers to the address that owns the Resend account. To send to TO
|
||||
// from any other account, set CONTACT_FROM to an address on a domain verified in Resend
|
||||
// (e.g. "AI Growth Website <hello@aigrowthtechnologies.com>").
|
||||
const FROM = process.env.CONTACT_FROM || "AI Growth Website <onboarding@resend.dev>";
|
||||
const CAN_EMAIL_VISITORS = Boolean(process.env.CONTACT_FROM);
|
||||
const SITE = process.env.VERCEL_PROJECT_PRODUCTION_URL
|
||||
? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
|
||||
: "https://www.aigrowthtechnologies.com";
|
||||
|
||||
const MIN_FILL_MS = 3000;
|
||||
const MAX_LINKS = 3;
|
||||
@@ -55,56 +50,6 @@ async function sendEmail(apiKey: string, payload: Record<string, unknown>) {
|
||||
if (!res.ok) throw new Error(`Resend ${res.status}: ${await res.text()}`);
|
||||
}
|
||||
|
||||
function confirmationEmail(name: string, rows: [string, string][], message: string) {
|
||||
const first = name.split(/\s+/)[0];
|
||||
const text = [
|
||||
`Hi ${first},`,
|
||||
"",
|
||||
"Thanks for reaching out to AI Growth Technologies. Your message is with our team, and a strategist will review what you shared and get back to you shortly.",
|
||||
"",
|
||||
"Here's a copy of what you sent:",
|
||||
"",
|
||||
...rows.map(([k, v]) => `${k}: ${v}`),
|
||||
"",
|
||||
message,
|
||||
"",
|
||||
"— The AI Growth Technologies team",
|
||||
SITE,
|
||||
].join("\n");
|
||||
|
||||
const html = `
|
||||
<div style="background:#000;padding:32px 16px;font-family:Arial,Helvetica,sans-serif">
|
||||
<div style="max-width:560px;margin:0 auto;background:#111;border:1px solid #303030;color:#fff">
|
||||
<div style="padding:28px 32px;border-bottom:1px solid #303030">
|
||||
<img src="${SITE}/logo-mark.png" width="44" alt="AI Growth Technologies" style="display:block">
|
||||
</div>
|
||||
<div style="padding:32px">
|
||||
<p style="margin:0 0 6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#da291c">Message received</p>
|
||||
<h1 style="margin:0 0 20px;font-size:24px;font-weight:400;line-height:1.25">Thanks, ${escape(first)}. We’ve got it.</h1>
|
||||
<p style="margin:0 0 24px;font-size:15px;line-height:1.7;color:#cfcfcf">
|
||||
Your message is with our team. A strategist will review what you shared and get back to you shortly.
|
||||
</p>
|
||||
<p style="margin:0 0 10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8f8f8f">What you sent</p>
|
||||
<table cellpadding="0" cellspacing="0" style="width:100%;font-size:14px;border-top:1px solid #303030">
|
||||
${rows
|
||||
.map(
|
||||
([k, v]) =>
|
||||
`<tr><td style="padding:10px 0;border-bottom:1px solid #303030;color:#8f8f8f;width:130px">${k}</td><td style="padding:10px 0;border-bottom:1px solid #303030;color:#fff">${escape(v)}</td></tr>`,
|
||||
)
|
||||
.join("")}
|
||||
</table>
|
||||
<p style="margin:20px 0 0;font-size:14px;line-height:1.7;color:#cfcfcf;white-space:pre-wrap">${escape(message)}</p>
|
||||
</div>
|
||||
<div style="padding:20px 32px;border-top:1px solid #303030;font-size:12px;color:#8f8f8f">
|
||||
AI Growth Technologies · Dubai · Houston · Miami · New York<br>
|
||||
<a href="${SITE}" style="color:#fff">${SITE.replace(/^https?:\/\//, "")}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
return { subject: "We received your message — AI Growth Technologies", text, html };
|
||||
}
|
||||
|
||||
export async function sendContact(_prev: ContactState, formData: FormData): Promise<ContactState> {
|
||||
// 1. Honeypot: real visitors never see or fill this field.
|
||||
if (clean(formData.get("company_url"), 200)) return silentlyDrop("honeypot");
|
||||
@@ -165,16 +110,5 @@ export async function sendContact(_prev: ContactState, formData: FormData): Prom
|
||||
return { status: "error", message: "We couldn’t send your message." };
|
||||
}
|
||||
|
||||
// The visitor's copy goes out after the response, and never fails the submission.
|
||||
if (CAN_EMAIL_VISITORS) {
|
||||
after(async () => {
|
||||
try {
|
||||
await sendEmail(apiKey, { to: [email], reply_to: TO, ...confirmationEmail(name, rows, message) });
|
||||
} catch (err) {
|
||||
console.error("Contact form: could not send the visitor confirmation", err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return { status: "sent", copySent: CAN_EMAIL_VISITORS };
|
||||
return { status: "sent" };
|
||||
}
|
||||
|
||||
@@ -2598,3 +2598,28 @@ a {
|
||||
font-size: clamp(22px, 2.2vw, 30px);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.sent-mark {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 8px;
|
||||
fill: none;
|
||||
stroke-width: 1.2;
|
||||
}
|
||||
|
||||
.sent-mark circle {
|
||||
stroke: var(--grafite);
|
||||
}
|
||||
|
||||
.sent-mark path {
|
||||
stroke: var(--rosso);
|
||||
stroke-dasharray: 32;
|
||||
stroke-dashoffset: 32;
|
||||
animation: draw-check 0.7s var(--ease) 0.15s forwards;
|
||||
}
|
||||
|
||||
@keyframes draw-check {
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,12 +33,12 @@ export default function ContactForm() {
|
||||
if (state.status === "sent") {
|
||||
return (
|
||||
<div className="contact-form form-sent" role="status">
|
||||
<span className="card-num">Received</span>
|
||||
<h3 className="card-title">Thanks — your message is with the team.</h3>
|
||||
<p className="copy">
|
||||
We’ll review what you shared and get back to you shortly.
|
||||
{state.copySent && " A confirmation with a copy of your message is on its way to your inbox."}
|
||||
</p>
|
||||
<svg className="sent-mark" viewBox="0 0 48 48" aria-hidden="true">
|
||||
<circle cx="24" cy="24" r="23" />
|
||||
<path d="M14 24.5l7 7 13-14" />
|
||||
</svg>
|
||||
<h3 className="card-title">Your message was sent successfully.</h3>
|
||||
<p className="copy">Thank you for reaching out. Our team will review what you shared and get back to you shortly.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user