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",
},
];