Use ContactButton and ContactTextLink

packages/web/docs/package.json

@@ -13,7 +13,7 @@
     "@radix-ui/react-tabs": "1.1.2",
     "@radix-ui/react-tooltip": "1.1.6",
     "@tailwindcss/typography": "0.5.16",
-    "@theguild/components": "7.5.0",
+    "@theguild/components": "7.6.2",
     "clsx": "2.1.1",
     "date-fns": "4.1.0",
     "next": "14.2.23",

packages/web/docs/src/components/federation-page.tsx

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import Image from 'next/image';
-import { Anchor, CallToAction, Heading } from '@theguild/components';
+import { Anchor, CallToAction, ContactButton, Heading } from '@theguild/components';
 import { cn } from '../lib';
 import { ArrowIcon } from './arrow-icon';
 import { FrequentlyAskedFederationQuestions } from './frequently-asked-questions';
@@ -38,15 +38,12 @@ export function FederationPage(): ReactElement {
           >
             Try Hive for Federation
           </CallToAction>
-          <CallToAction
+          <ContactButton
             variant="secondary"
             title="Contact our experts to learn more about GraphQL Federation"
-            onClick={() => {
-              (window as any).$crisp?.push(['do', 'chat:open']);
-            }}
           >
             Contact an Expert
-          </CallToAction>
+          </ContactButton>
         </HeroLinks>
       </Hero>
       <Intro />

packages/web/docs/src/components/got-an-idea-section.tsx

@@ -1,4 +1,4 @@
-import { CallToAction, DecorationIsolation, Heading } from '@theguild/components';
+import { ContactButton, DecorationIsolation, Heading } from '@theguild/components';
 import { cn } from '../lib';
 
 export function GotAnIdeaSection({ className }: { className?: string }) {
@@ -116,19 +116,9 @@ export function GotAnIdeaSection({ className }: { className?: string }) {
       <p className="mt-4 text-white/80">
         Join our community to chat with us and let's build something together!
       </p>
-      <CallToAction
-        href="https://the-guild.dev/contact"
-        variant="primary-inverted"
-        className="mt-8"
-        onClick={event => {
-          if (window.$crisp) {
-            event.preventDefault();
-            window.$crisp?.push(['do', 'chat:open']);
-          }
-        }}
-      >
+      <ContactButton variant="primary-inverted" className="mt-8">
         Get in touch
-      </CallToAction>
+      </ContactButton>
     </div>
   );
 }

packages/web/docs/src/components/partners-page.tsx

@@ -2,8 +2,8 @@ import Link from 'next/link';
 import { CodeIcon, LockOpen2Icon, RocketIcon } from '@radix-ui/react-icons';
 import {
   Anchor,
-  CallToAction,
   cn,
+  ContactButton,
   GetYourAPIGameRightSection,
   Heading,
   InfoCard,
@@ -140,22 +140,8 @@ export function PartnersPage() {
           realization.
         </p>
         <HeroLinks>
-          <CallToAction
-            variant="primary-inverted"
-            onClick={() => {
-              (window as any).$crisp?.push(['do', 'chat:open']);
-            }}
-          >
-            Talk to an expert
-          </CallToAction>
-          <CallToAction
-            variant="secondary"
-            onClick={() => {
-              (window as any).$crisp?.push(['do', 'chat:open']);
-            }}
-          >
-            Become a partner
-          </CallToAction>
+          <ContactButton variant="primary-inverted">Talk to an expert</ContactButton>
+          <ContactButton variant="secondary">Become a partner</ContactButton>
         </HeroLinks>
       </Hero>
       <WhyUs />

packages/web/docs/src/components/pricing.tsx

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactElement, ReactNode, useState } from 'react';
 import { Arrow, Content, Root, Trigger } from '@radix-ui/react-tooltip';
-import { CallToAction, cn } from '@theguild/components';
+import { CallToAction, cn, ContactTextLink } from '@theguild/components';
 import { Slider } from './slider';
 
 function Tooltip({ content, children }: { content: string; children: ReactNode }) {
@@ -233,12 +233,7 @@ function PricingSlider({ className, ...rest }: { className?: string }) {
       >
         <span className="font-medium">Running {max}M+ operations?</span>
         <br />
-        <button
-          className="underline hover:text-blue-700"
-          onClick={() => (window as any).$crisp?.push(['do', 'chat:open'])}
-        >
-          Talk to us
-        </button>
+        <ContactTextLink>Talk to us</ContactTextLink>
       </p>
     </label>
   );

packages/web/docs/src/pages/docs/management/organizations.mdx

@@ -1,5 +1,5 @@
 import NextImage from 'next/image'
-import { Callout, Tabs } from '@theguild/components'
+import { Callout, ContactTextLink, Tabs } from '@theguild/components'
 import orgImage from '../../../../public/docs/pages/first-steps/org.png'
 import newOrgImage from '../../../../public/docs/pages/management/create-an-organization-button.png'
 import orgCustomRoleImage from '../../../../public/docs/pages/management/org-custom-role.png'
@@ -171,13 +171,10 @@ If you wish to upgrade your plan, you can choose between the **Pro** and **Enter
 For the **Pro** plan, you can use a credit-card and pay monthly for the resevered quota that works
 for your needs. You can modify your plan and resevered quota any time during the month.
 
-<a
-  className="text-primary-500 mt-6 block cursor-pointer"
-  onClick={() => window.$crisp?.push(['do', 'chat:open'])}
->
+<ContactTextLink>
   For the **Enterprise** plan, please reach our to us, and we'll be happy to help you with your
   custom needs.
-</a>
+</ContactTextLink>
 
 #### How do I update my billing information?
 

packages/web/docs/src/pages/docs/schema-registry/app-deployments.mdx

@@ -3,22 +3,14 @@ title: 'App Deployment (Persisted Operations)'
 ---
 
 import NextImage from 'next/image'
-import { Callout, Tabs } from '@theguild/components'
+import { Callout, ContactTextLink, Tabs } from '@theguild/components'
 
 # App Deployments
 
 <Callout>
   <div>
     App deployments are currently in preview. If you would like to try them out, please{' '}
-    <a
-      href="#"
-      className="inline-block underline"
-      onClick={() => {
-        window?.$crisp?.push(['do', 'chat:open'])
-      }}
-    >
-      reach out to us
-    </a>
+    <ContactTextLink>reach out to us</ContactTextLink>
     {/* If we move the dot out of the quotations/brackets, it will be a new paragraph... */}
     {'.'}
   </div>