Feat: CTA action to request demo (#153)

* Feat: CTA action to request demo

* Fix formatting

* Fix playwright

Author: dennypradipta

app/[lang]/(hyperjump)/services/[slug]/components/request-demo-button.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import type { SupportedLanguage } from "@/locales/.generated/types";
+import { servicesRequestDemo } from "@/locales/.generated/server";
+
+export default function RequestDemoButton({
+  lang,
+  service
+}: {
+  lang: SupportedLanguage;
+  service: string;
+}) {
+  const handleChatbot = () => {
+    window.dispatchEvent(
+      new CustomEvent("prefillAIAgent", {
+        detail: { message: `I want to request a demo for ${service}` }
+      })
+    );
+  };
+  return (
+    <>
+      <Button
+        variant="default"
+        size="lg"
+        className="bg-hyperjump-blue hover:bg-hyperjump-blue/90 text-md w-full max-w-sm"
+        data-testid="request-demo-button"
+        onClick={handleChatbot}>
+        {servicesRequestDemo(lang)}
+      </Button>
+    </>
+  );
+}

app/[lang]/(hyperjump)/services/[slug]/page.tsx

@@ -26,6 +26,7 @@ import {
 import type { CaseStudy, Service } from "../../data";
 import { serviceBySlug, ServiceSlug } from "../../data";
 import { dynamicOpengraph } from "@/lib/default-metadata";
+import RequestDemoButton from "./components/request-demo-button";
 
 type LangProps = {
   lang: SupportedLanguage;
@@ -84,14 +85,15 @@ export default async function ServiceDetail({ params }: ServiceDetailProps) {
       <Hero
         hero={{ heading: service.title, subheading: service.shortDescription }}
       />
-      <About service={service} />
+      <About lang={lang} service={service} />
       <WhoIsIt lang={lang} service={service} />
       <WhatWeDeliver lang={lang} service={service} />
       <Product lang={lang} service={service} />
       <HowItWorks lang={lang} service={service} />
       <WhatYouGet lang={lang} service={service} />
       <WhyUs lang={lang} service={service} />
       <Recommendation caseStudies={service.caseStudies} lang={lang} />
+      <CallToAction lang={lang} service={service} />
     </>
   );
 }
@@ -134,24 +136,28 @@ function Hero({ hero: { heading, subheading } }: HeroProps) {
 
 type ServiceProps = {
   service: Service;
+  lang: SupportedLanguage;
 };
 
-function About({ service }: ServiceProps) {
+function About({ lang, service }: LangProps & ServiceProps) {
   const {
     content: { what },
     title
   } = service;
 
   return (
     <section className="bg-[#F6F8F9] py-8 md:py-16">
-      <div className="text-hyperjump-black mx-auto flex w-full max-w-4xl flex-wrap items-center px-4 py-10 md:px-20 md:py-20 xl:px-0">
-        <h2 className="mb-5 text-[34px] font-medium md:text-4xl">{title}</h2>
+      <div className="text-hyperjump-black mx-auto flex w-full max-w-4xl flex-col flex-wrap items-center gap-5 px-4 py-10 md:px-20 md:py-20 xl:px-0">
+        <h2 className="self-start text-[34px] font-medium md:text-4xl">
+          {title}
+        </h2>
         <p
           className="text-xl leading-relaxed"
           dangerouslySetInnerHTML={{
             __html: `${what}`
           }}
         />
+        <RequestDemoButton lang={lang} service={title} />
       </div>
     </section>
   );
@@ -496,3 +502,11 @@ function Product({ lang, service }: LangProps & ServiceProps) {
     </section>
   );
 }
+
+function CallToAction({ lang, service }: LangProps & ServiceProps) {
+  return (
+    <section className="flex items-center justify-center bg-white px-4 pb-8 md:px-20 md:pb-16">
+      <RequestDemoButton lang={lang} service={service.title} />
+    </section>
+  );
+}

e2e/services-detail.spec.ts

@@ -166,6 +166,13 @@ for (const { code: locale, path, title, slug } of locales) {
           const n = await cardLinks.count();
           for (let i = 0; i < n; i++) {
             const link = cardLinks.nth(i);
+
+            if (
+              (await link.getAttribute("data-testid")) === "request-demo-button"
+            ) {
+              continue;
+            }
+
             await expect(link).toBeVisible();
             const href = await link.getAttribute("href");
             expect(href).toBeTruthy();

locales/en/services.json

@@ -15,5 +15,6 @@
   "partners": {
     "Heading": "Trusted by industry leaders",
     "desc": "We're proud to be trusted by companies across industries. These are just a few of them, many more continue to grow with us behind the scenes."
-  }
+  },
+  "request_demo": "Request demo"
 }

locales/id/services.json

@@ -15,5 +15,6 @@
   "partners": {
     "Heading": "Dipercaya oleh pemimpin industri",
     "desc": "Kami dipercaya oleh berbagai perusahaan lintas industri. Ini hanya sebagian, masih banyak lagi yang berkembang bersama kami di balik layar."
-  }
+  },
+  "request_demo": "Ajukan demo"
 }