import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { MapPin, Bed, Bath, Square, Phone, Mail, ArrowRight } from "lucide-react";
import { useState } from "react";
import { useToast } from "@/hooks/use-toast";
// trackingPayload.formData/formLabels are only for standard CRM field keys.
// Non-standard/custom fields must go through customFields/fileFields/imageDataFields
// using the id returned by register_custom_field. Labels stay human-readable.
type StandardTrackingFieldKey = string;
type RegisteredCustomFieldId = string;
type TrackingCustomField = { value?: unknown; label: string };
type TrackingFileField = { file?: File; label: string };
type TrackingImageDataField = { dataUrl?: string; label: string };
const postTrackingEvent = (
trackingPayload: Record & {
formData: Record;
formLabels: Record;
},
options: {
customFields?: Record;
fileFields?: Record;
imageDataFields?: Record;
} = {},
) => {
const { customFields = {}, fileFields = {}, imageDataFields = {} } = options;
const eventPayload = {
...trackingPayload,
formData: { ...trackingPayload.formData },
formLabels: { ...trackingPayload.formLabels },
};
const body = new FormData();
for (const [key, field] of Object.entries(customFields)) {
if (field.value === undefined) continue;
eventPayload.formData[key] = field.value;
eventPayload.formLabels[key] = field.label;
}
for (const [key, field] of Object.entries(imageDataFields)) {
const dataUrl = field.dataUrl;
if (!dataUrl) continue;
if (!dataUrl.startsWith("data:image/")) {
throw new Error("Image data field must be a data:image/* base64 string");
}
eventPayload.formData[key] = dataUrl;
eventPayload.formLabels[key] = field.label;
}
for (const [key, field] of Object.entries(fileFields)) {
const file = field.file;
if (!file) continue;
if (file.size > 50 * 1024 * 1024) {
throw new Error("File must be 50 MB or smaller");
}
eventPayload.formData[key] = {
filename: file.name,
size: file.size,
type: file.type || "application/octet-stream",
};
eventPayload.formLabels[key] = field.label;
body.append(key, file, file.name);
}
for (const key of Object.keys(eventPayload.formData)) {
eventPayload.formLabels[key] ||= key;
}
body.append("event", JSON.stringify(eventPayload));
fetch("https://backend.leadconnectorhq.com/external-tracking/events", {
method: "POST",
headers: {
version: "2021-07-28",
},
body,
}).catch(() => {}); // Fire-and-forget — don't block form UX
};
const Index = () => {
const { toast } = useToast();
const [isSubmitting, setIsSubmitting] = useState(false);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
const form = e.currentTarget;
const firstName = (form.elements.namedItem("firstName") as HTMLInputElement)?.value;
const lastName = (form.elements.namedItem("lastName") as HTMLInputElement)?.value;
const email = (form.elements.namedItem("email") as HTMLInputElement)?.value;
const phone = (form.elements.namedItem("phone") as HTMLInputElement)?.value;
const unitTypeNode = form.elements.namedItem("unitType") as HTMLSelectElement;
const unitType = unitTypeNode?.options[unitTypeNode.selectedIndex]?.text;
const message = (form.elements.namedItem("message") as HTMLTextAreaElement)?.value;
const trackingPayload = {
type: "external_form_submission",
timestamp: Date.now(),
formId: "Rental Application Form",
formData: {
first_name: firstName,
last_name: lastName,
email: email,
phone: phone,
},
formLabels: {
first_name: "First Name",
last_name: "Last Name",
email: "Email Address",
phone: "Phone Number",
},
url: window.location.href,
title: document.title,
path: window.location.pathname,
userAgent: navigator.userAgent,
trackingId: "tk_2d86fdf304d04847bdbb6185b89e862c",
locationId: "m6rWF4ENeLdHd9Bt0p5o",
sessionId: crypto.randomUUID(),
properties: {
deviceType: /Mobile|Android|iPhone/i.test(navigator.userAgent)
? "mobile"
: "desktop",
},
};
postTrackingEvent(trackingPayload, {
customFields: {
"Zn4IUGsjY64DEbAIOZ77": { value: unitType, label: "Unit Preference" },
"E9tfqDJF6LIu3I9qmVo6": { value: message, label: "Additional Comments or Questions" }
}
});
// Simulate form submission
setTimeout(() => {
setIsSubmitting(false);
toast({
title: "Application Submitted",
description: "We have received your application and will be in touch soon.",
});
form.reset();
}, 1500);
};
return (
{/* Navigation */}
{/* Hero Section */}
Modern Living in
{/* Properties Section */}
{/* Location Section */}
{/* Apply Now Section */}
{/* Footer */}
);
};
export default Index;
Units Available Now
Modern Living in
Strathroy
Premium 2 and 3 bedroom residential rental properties located on Ewart St. Experience comfort, convenience, and contemporary design.
Available Units
Choose from our thoughtfully designed 2 and 3 bedroom floor plans.
{/* 2 Bedroom Unit */}
The Strathroy Suite
Bright and modern open-concept living.
{/* 3 Bedroom Unit */}
The Ewart Townhome
Spacious multi-level living for families.
2 Bedroom
In-suite laundry Stainless steel appliances Private balcony
3 Bedroom
Attached garage Finished basement Fenced backyard
Prime Location
Located on the corner of Ewart St and Albert St in Strathroy, our properties offer the perfect balance of a quiet residential neighborhood with easy access to local amenities.
Address
Corner of Ewart St & Albert St
Strathroy, ON N7G
Contact
(555) 123-4567
[email protected]
Apply Now
Interested in one of our units? Fill out the form below and our leasing team will get back to you within 24 hours.