diff --git a/website-next/app/(content)/pricing/page.tsx b/website-next/app/(content)/pricing/page.tsx index 9e98f867b04..ae7781320f1 100644 --- a/website-next/app/(content)/pricing/page.tsx +++ b/website-next/app/(content)/pricing/page.tsx @@ -59,7 +59,7 @@ function Hero() { Start for Free - + Talk to Sales diff --git a/website-next/app/(content)/resources/page.tsx b/website-next/app/(content)/resources/page.tsx index e8ba4c3d736..57c4743521b 100644 --- a/website-next/app/(content)/resources/page.tsx +++ b/website-next/app/(content)/resources/page.tsx @@ -10,7 +10,7 @@ export const metadata = { const COMPANY_LINKS = [ { - href: "mailto:contact@chillicream.com", + href: "/services/support/contact", title: "Contact", description: "Get in touch with the team.", }, diff --git a/website-next/app/(content)/services/advisory/page.tsx b/website-next/app/(content)/services/advisory/page.tsx index bc55812c989..a4bf6b50889 100644 --- a/website-next/app/(content)/services/advisory/page.tsx +++ b/website-next/app/(content)/services/advisory/page.tsx @@ -31,7 +31,7 @@ const PLANS: InquiryPlan[] = [ "Best practices education", ], ctaText: "Talk to an Expert", - ctaLink: "mailto:contact@chillicream.com?subject=Consulting", + ctaLink: "/services/support/contact?subject=Technical+Support", }, { title: "Contracting", @@ -39,7 +39,7 @@ const PLANS: InquiryPlan[] = [ "Options for teams who don't have the time, bandwidth, and/or expertise to implement their own GraphQL solutions.", features: ["Proof of concept", "Implementation"], ctaText: "Talk to an Expert", - ctaLink: "mailto:contact@chillicream.com?subject=Contracting", + ctaLink: "/services/support/contact?subject=Technical+Support", }, ]; diff --git a/website-next/app/(content)/services/support/contact/ContactForm.tsx b/website-next/app/(content)/services/support/contact/ContactForm.tsx index 07a695d78be..4faa6d659e0 100644 --- a/website-next/app/(content)/services/support/contact/ContactForm.tsx +++ b/website-next/app/(content)/services/support/contact/ContactForm.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState, type FormEvent } from "react"; +import { useState, useSyncExternalStore, type FormEvent } from "react"; import { SolidButton } from "@/src/design-system/Button"; import { Dropdown, DropdownItem } from "@/src/design-system/Dropdown"; import { Input } from "@/src/design-system/Input"; @@ -23,7 +23,6 @@ interface FormData { name: string; email: string; company: string; - subject: string; message: string; } @@ -33,15 +32,37 @@ const INITIAL: FormData = { name: "", email: "", company: "", - subject: SUBJECTS[0], message: "", }; +function resolveSubject(subject: string | null): string { + if (!subject) { + return SUBJECTS[0]; + } + + const match = SUBJECTS.find((s) => s.toLowerCase() === subject.toLowerCase()); + + return match ?? SUBJECTS[0]; +} + +const subscribe = () => () => {}; +const getSubjectFromUrl = () => + resolveSubject(new URLSearchParams(window.location.search).get("subject")); +const getServerSubject = () => ""; + export function ContactForm() { const [data, setData] = useState(INITIAL); const [errors, setErrors] = useState({}); const [isSubmitting, setIsSubmitting] = useState(false); + const urlSubject = useSyncExternalStore( + subscribe, + getSubjectFromUrl, + getServerSubject, + ); + const [selectedSubject, setSelectedSubject] = useState(null); + const subject = selectedSubject ?? urlSubject; + function update(field: K, value: FormData[K]) { setData((prev) => ({ ...prev, [field]: value })); if (field in errors) { @@ -85,7 +106,7 @@ export function ContactForm() { Name: data.name, Email: data.email, Company: data.company, - SupportPlan: data.subject, + SupportPlan: subject, Message: data.message, }), }); @@ -95,7 +116,7 @@ export function ContactForm() { } window.gtag?.("event", "contact_form_submit", { - event_label: data.subject, + event_label: subject, page_path: window.location.pathname, }); @@ -147,14 +168,16 @@ export function ContactForm() { label="Subject" className={isSubmitting ? "pointer-events-none opacity-60" : undefined} panelClassName="p-1" - trigger={{data.subject}} + trigger={ + {subject || "\u00A0"} + } >
    {SUBJECTS.map((s) => ( update("subject", s)} + active={s === subject} + onClick={() => setSelectedSubject(s)} > {s} diff --git a/website-next/app/(content)/services/support/page.tsx b/website-next/app/(content)/services/support/page.tsx index c98634a3a89..284266fbfd9 100644 --- a/website-next/app/(content)/services/support/page.tsx +++ b/website-next/app/(content)/services/support/page.tsx @@ -40,7 +40,7 @@ const SUPPORT_PLANS = [ perks: ["Private Slack Channel", "2 critical incidents"], callToAction: { title: "Contact Us", - link: "/services/support/contact?plan=Startup", + link: "/services/support/contact?subject=Pricing+%26+Plans", }, }, { @@ -56,7 +56,7 @@ const SUPPORT_PLANS = [ ], callToAction: { title: "Contact Us", - link: "/services/support/contact?plan=Business", + link: "/services/support/contact?subject=Pricing+%26+Plans", }, }, { @@ -74,7 +74,7 @@ const SUPPORT_PLANS = [ ], callToAction: { title: "Contact Us", - link: "/services/support/contact?plan=Enterprise", + link: "/services/support/contact?subject=Pricing+%26+Plans", }, }, ]; diff --git a/website-next/app/(content)/services/training/page.tsx b/website-next/app/(content)/services/training/page.tsx index 31488060623..338a20325c0 100644 --- a/website-next/app/(content)/services/training/page.tsx +++ b/website-next/app/(content)/services/training/page.tsx @@ -61,7 +61,7 @@ export default function TrainingPage() { perks={service.perks} callToAction={{ title: "Talk to us", - link: `mailto:contact@chillicream.com?subject=${service.kind}`, + link: "/services/support/contact?subject=Sales", }} /> ))} diff --git a/website-next/src/components/Footer.tsx b/website-next/src/components/Footer.tsx index 328b677c769..de7d7b82a82 100644 --- a/website-next/src/components/Footer.tsx +++ b/website-next/src/components/Footer.tsx @@ -74,7 +74,7 @@ export default function Footer() { ))} - Contact + Contact Shop {basicPages.map((page) => ( diff --git a/website-next/src/components/header/navData.tsx b/website-next/src/components/header/navData.tsx index edf98f1283d..5d02fe7b3b5 100644 --- a/website-next/src/components/header/navData.tsx +++ b/website-next/src/components/header/navData.tsx @@ -176,7 +176,7 @@ export const NAV_ITEMS: NavItem[] = [ title: "Company", links: [ { - href: "mailto:contact@chillicream.com", + href: "/services/support/contact", label: "Contact", icon: NewspaperIcon, }, diff --git a/website-next/src/components/pricing/RegulatedBand.tsx b/website-next/src/components/pricing/RegulatedBand.tsx index 2f73df68a11..b42acd09eb6 100644 --- a/website-next/src/components/pricing/RegulatedBand.tsx +++ b/website-next/src/components/pricing/RegulatedBand.tsx @@ -34,7 +34,7 @@ export function RegulatedBand() { come back with an architecture.

    - + Talk to Sales See the platform diff --git a/website-next/src/components/pricing/pricingData.ts b/website-next/src/components/pricing/pricingData.ts index 4d44f76f331..1fb7a231549 100644 --- a/website-next/src/components/pricing/pricingData.ts +++ b/website-next/src/components/pricing/pricingData.ts @@ -74,7 +74,7 @@ export const TIERS: readonly Tier[] = [ "SSO, audit log, role-based access", ], cta: "Talk to Us", - ctaHref: "/services/support/contact", + ctaHref: "/services/support/contact?subject=Sales", popular: true, }, { @@ -91,7 +91,7 @@ export const TIERS: readonly Tier[] = [ "Long-term release channel", ], cta: "Talk to Us", - ctaHref: "/services/support/contact", + ctaHref: "/services/support/contact?subject=Sales", }, ];