[Website] Point contact CTAs to contact page with subject pre-select (#10005)

Author: tobias-tengler

website-next/app/(content)/pricing/page.tsx

@@ -59,7 +59,7 @@ function Hero() {
         <SolidButton href="https://nitro.chillicream.com">
           Start for Free
         </SolidButton>
-        <OutlineButton href="/services/support/contact">
+        <OutlineButton href="/services/support/contact?subject=Sales">
           Talk to Sales
         </OutlineButton>
       </div>

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.",
   },

website-next/app/(content)/services/advisory/page.tsx

@@ -31,15 +31,15 @@ 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",
     description:
       "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",
   },
 ];
 

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<FormData>(INITIAL);
   const [errors, setErrors] = useState<FormErrors>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  const urlSubject = useSyncExternalStore(
+    subscribe,
+    getSubjectFromUrl,
+    getServerSubject,
+  );
+  const [selectedSubject, setSelectedSubject] = useState<string | null>(null);
+  const subject = selectedSubject ?? urlSubject;
+
   function update<K extends keyof FormData>(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={<span className="text-cc-ink text-sm">{data.subject}</span>}
+        trigger={
+          <span className="text-cc-ink text-sm">{subject || "\u00A0"}</span>
+        }
       >
         <ul className="m-0 flex list-none flex-col p-0">
           {SUBJECTS.map((s) => (
             <DropdownItem
               key={s}
-              active={s === data.subject}
-              onClick={() => update("subject", s)}
+              active={s === subject}
+              onClick={() => setSelectedSubject(s)}
             >
               {s}
             </DropdownItem>

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

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",
               }}
             />
           ))}

website-next/src/components/Footer.tsx

@@ -74,7 +74,7 @@ export default function Footer() {
               ))}
             </LinkColumn>
             <LinkColumn title="Company">
-              <NavLink href="mailto:contact@chillicream.com">Contact</NavLink>
+              <NavLink href="/services/support/contact">Contact</NavLink>
               <NavLink href={tools.shop}>Shop</NavLink>
               {basicPages.map((page) => (
                 <NavLink key={page.path} href={`/${page.path}`}>

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,
           },

website-next/src/components/pricing/RegulatedBand.tsx

@@ -34,7 +34,7 @@ export function RegulatedBand() {
             come back with an architecture.
           </p>
           <div className="mt-6 flex flex-wrap gap-3">
-            <SolidButton href="/services/support/contact">
+            <SolidButton href="/services/support/contact?subject=Sales">
               Talk to Sales
             </SolidButton>
             <OutlineButton href="/platform">See the platform</OutlineButton>

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