From 4a9948c6e0bd55a114ec9845c105cce14f514ae4 Mon Sep 17 00:00:00 2001 From: selvi Date: Thu, 23 Apr 2026 14:28:41 +0530 Subject: [PATCH] contact integration updated --- app/contact/ContactClient.tsx | 63 ++++-- app/services/services.css | 8 +- components/ChainLinkFence/ChainLinkQuote.tsx | 164 ++++++++++---- components/Newsletter.tsx | 69 +++++- components/Staining/StainingQuote.tsx | 216 ++++++++++++------- 5 files changed, 376 insertions(+), 144 deletions(-) diff --git a/app/contact/ContactClient.tsx b/app/contact/ContactClient.tsx index 583152c..da7d94f 100644 --- a/app/contact/ContactClient.tsx +++ b/app/contact/ContactClient.tsx @@ -19,6 +19,8 @@ const ContactClient = () => { const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success" | "error">("idle"); const [tcError, setTcError] = useState(false); + const [nlEmail, setNlEmail] = useState(""); + const [nlStatus, setNlStatus] = useState<"idle" | "submitting" | "success" | "error">("idle"); const [openFaq, setOpenFaq] = useState(null); useEffect(() => { @@ -104,6 +106,34 @@ const ContactClient = () => { } }; + const submitNewsletterForm = async (e: React.FormEvent) => { + e.preventDefault(); + if (!nlEmail || !nlEmail.includes("@")) return; + + setNlStatus("submitting"); + + const emailData = { + name: "Newsletter Subscriber", + email: nlEmail, + phone: "N/A", + service: "Newsletter Subscription", + message: `A new user has subscribed to the newsletter: ${nlEmail}`, + to: "info@vgfenceproducts.com", + senderName: "VG Fence Contact Page Newsletter", + }; + + try { + await axios.post("https://mailserver.metatronnest.com/send", emailData, { + headers: { "Content-Type": "application/json" }, + }); + setNlStatus("success"); + setNlEmail(""); + } catch (error) { + console.error("❌ Error subscribing to newsletter:", error); + setNlStatus("error"); + } + }; + return (
@@ -658,18 +688,27 @@ const ContactClient = () => {
Stay in the loop

Product updates &
contractor deals.

New products, seasonal promotions, and industry tips — delivered to your inbox. No spam, unsubscribe anytime.

-
- - +
+ {nlStatus === "success" ? ( +
+ Thank you! You've been subscribed successfully. ✓ +
+ ) : ( +
+ setNlEmail(e.target.value)} + required + disabled={nlStatus === "submitting"} + /> + +
+ )}

Join contractors and builders across Ontario · 1–6 emails per month

diff --git a/app/services/services.css b/app/services/services.css index dea525d..c86f4f4 100644 --- a/app/services/services.css +++ b/app/services/services.css @@ -378,6 +378,7 @@ .model-image-col { display: flex; flex-direction: column; + height: 100%; } .photo-area { @@ -428,17 +429,16 @@ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; - align-items: stretch; /* Key for matching height */ + align-items: start; margin-top: 40px; } .photo-area-large { - flex: 1; - min-height: 300px; + height: 500px; } .photo-area-small { - min-height: 180px; + height: 340px; } .photo-area img { diff --git a/components/ChainLinkFence/ChainLinkQuote.tsx b/components/ChainLinkFence/ChainLinkQuote.tsx index dcf70ee..1091528 100644 --- a/components/ChainLinkFence/ChainLinkQuote.tsx +++ b/components/ChainLinkFence/ChainLinkQuote.tsx @@ -1,8 +1,65 @@ "use client"; -import React from 'react'; +import React, { useState } from 'react'; +import axios from 'axios'; const ChainLinkQuote = () => { + const [formData, setFormData] = useState({ + company: '', + name: '', + phone: '', + email: '', + material: '', + city: '', + footage: '' + }); + + const [status, setStatus] = useState<"idle" | "submitting" | "success" | "error">("idle"); + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData(prev => ({ ...prev, [name]: value })); + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setStatus("submitting"); + + const emailData = { + name: formData.name, + email: formData.email, + phone: formData.phone, + service: formData.material || "Chain Link Quote", + message: ` + Company: ${formData.company}
+ Material Needed: ${formData.material}
+ Job Site City: ${formData.city}
+ Linear Footage: ${formData.footage} + `, + to: "info@vgfenceproducts.com", + senderName: "VG Fence Chain Link Page", + }; + + try { + await axios.post("https://mailserver.metatronnest.com/send", emailData, { + headers: { "Content-Type": "application/json" }, + }); + setStatus("success"); + setFormData({ + company: '', + name: '', + phone: '', + email: '', + material: '', + city: '', + footage: '' + }); + } catch (error) { + console.error("❌ Error sending chain link quote request:", error); + setStatus("error"); + } + }; + return (
@@ -11,56 +68,71 @@ const ChainLinkQuote = () => {

Fill in the quick form and we'll come back to you with contractor pricing within 2 business hours. Bulk orders welcome — we supply fence contractors, builders, and property managers across Ontario.

-
Request a quote
-
Response within 2 business hours
-
-
- - + {status === "success" ? ( +
+
✅
+

Quote Request Sent!

+

Thank you. We'll respond within 2 business hours.

+
-
- - -
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- + ) : ( +
+
Request a quote
+
Response within 2 business hours
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ {status === "error" &&

⚠️ Error sending request. Please try again.

} + +
+ )}
); }; + export default ChainLinkQuote; diff --git a/components/Newsletter.tsx b/components/Newsletter.tsx index a137ca1..fb9ff8e 100644 --- a/components/Newsletter.tsx +++ b/components/Newsletter.tsx @@ -1,4 +1,40 @@ +"use client"; + +import React, { useState } from "react"; +import axios from "axios"; + export default function Newsletter() { + const [email, setEmail] = useState(""); + const [status, setStatus] = useState<"idle" | "submitting" | "success" | "error">("idle"); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + if (!email || !email.includes("@")) return; + + setStatus("submitting"); + + const emailData = { + name: "Newsletter Subscriber", + email: email, + phone: "N/A", + service: "Newsletter Subscription", + message: `A new user has subscribed to the newsletter: ${email}`, + to: "info@vgfenceproducts.com", + senderName: "VG Fence Newsletter", + }; + + try { + await axios.post("https://mailserver.metatronnest.com/send", emailData, { + headers: { "Content-Type": "application/json" }, + }); + setStatus("success"); + setEmail(""); + } catch (error) { + console.error("❌ Error subscribing to newsletter:", error); + setStatus("error"); + } + }; + return (
@@ -8,12 +44,37 @@ export default function Newsletter() { New product arrivals, seasonal promotions, and industry tips — delivered to your inbox.
No spam, unsubscribe anytime.

-
- - -
+ + {status === "success" ? ( +
+ Thank you! You've been subscribed successfully. ✓ +
+ ) : ( +
+ setEmail(e.target.value)} + required + disabled={status === "submitting"} + /> + +
+ )} + + {status === "error" && ( +

+ Failed to subscribe. Please try again later. +

+ )} +
Join contractors and builders across Ontario · 1–6 emails per month
); } + diff --git a/components/Staining/StainingQuote.tsx b/components/Staining/StainingQuote.tsx index 9bd28bb..e9dba21 100644 --- a/components/Staining/StainingQuote.tsx +++ b/components/Staining/StainingQuote.tsx @@ -1,6 +1,7 @@ "use client"; import { useState } from 'react'; +import axios from 'axios'; export default function StainingQuote() { const [formData, setFormData] = useState({ @@ -8,19 +9,58 @@ export default function StainingQuote() { email: '', phone: '', projectType: 'fence', + location: '', + size: '', message: '' }); + const [status, setStatus] = useState<"idle" | "submitting" | "success" | "error">("idle"); + const handleChange = (e: React.ChangeEvent) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; - const handleSubmit = (e: React.FormEvent) => { + const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); - console.log('Form submitted:', formData); - alert('Thank you for your request! We will contact you shortly.'); + + setStatus("submitting"); + + const emailData = { + name: formData.name, + email: formData.email, + phone: formData.phone, + service: formData.projectType || "Wood Staining", + message: ` + Service: ${formData.projectType}
+ Location: ${formData.location}
+ Approx Size: ${formData.size}

+ Additional Notes: ${formData.message || "N/A"} + `, + to: "info@vgfenceproducts.com", + senderName: "VG Fence Staining Page", + }; + + try { + await axios.post("https://mailserver.metatronnest.com/send", emailData, { + headers: { "Content-Type": "application/json" }, + }); + setStatus("success"); + setFormData({ + name: '', + email: '', + phone: '', + projectType: 'fence', + location: '', + size: '', + message: '' + }); + } catch (error) { + console.error("❌ Error sending staining quote request:", error); + setStatus("error"); + } }; + return (
@@ -31,92 +71,112 @@ export default function StainingQuote() {

-
-
REQUEST A STAINING QUOTE
-
Response within 2 business hours
- -
-
- + {status === "success" ? ( +
+
✅
+

Request Sent!

+

Thank you. We'll be in touch within 2 business hours.

+ +
+ ) : ( + +
REQUEST A STAINING QUOTE
+
Response within 2 business hours
+ +
+
+ + +
+
+ + +
+
+ + -
-
- - SERVICE NEEDED + - - +
+
+ + +
+
+ + +
+
- - + {status === "error" && ( +

+ ⚠️ Failed to send request. Please try again or email us directly. +

+ )} -
-
- - -
-
- - -
-
+ + + )} - -