feat: replace hubspot with studio contacts (#5345)

Author: yathomasi

src/@dvcorg/gatsby-theme-iterative/components/HamburgerMenu/index.tsx

@@ -15,7 +15,7 @@ import { ReactComponent as GithubIcon } from '@dvcorg/gatsby-theme-iterative/src
 
 import * as styles from '@dvcorg/gatsby-theme-iterative/src/components/HamburgerMenu/styles.module.css'
 import menuData from '../../data/menu'
-import { cloudUrl } from '../../../../utils/externalUrls'
+import { studioUrl } from '../../../../utils/externalUrls'
 import LogoGradient from '@dvcorg/gatsby-theme-iterative/src/components/LogoGradient'
 
 const docsPage = getFirstPage()
@@ -236,7 +236,7 @@ export const HamburgerMenu: React.FC<
         Get started
       </Link>
       <Link
-        href={cloudUrl}
+        href={studioUrl}
         className={cn(styles.linkButton)}
         onClick={() => handleItemClick('get-enterprise')}
       >

src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/Nav/index.tsx

@@ -7,7 +7,7 @@ import { ReactComponent as ExternalLinkIcon } from '../../../../../../static/img
 import * as styles from './styles.module.css'
 import PseudoButton from '@dvcorg/gatsby-theme-iterative/src/components/PseudoButton'
 import Link from '@dvcorg/gatsby-theme-iterative/src/components/Link'
-import { cloudUrl } from '../../../../../utils/externalUrls'
+import { studioUrl } from '../../../../../utils/externalUrls'
 
 const Nav: React.FC = () => (
   <div className={styles.wrapper}>
@@ -23,7 +23,7 @@ const Nav: React.FC = () => (
     </PseudoButton>
     <div className="text-dark hidden md:flex items-center">
       <div className="mx-3 select-none">|</div>
-      <Link className="no-underline hover" href={cloudUrl}>
+      <Link className="no-underline hover" href={studioUrl}>
         Get Enterprise{` `}
         <ExternalLinkIcon className="ml-0.5 inline-block w-4 h-4" />
       </Link>

src/components/Support/RequestAQuoteForm.tsx

@@ -6,15 +6,17 @@ import { Textarea } from '../base/textarea'
 import Button from '../base/button'
 import { cn } from '../../utils'
 import { Loader2Icon } from 'lucide-react'
-import { getHubSpotFormUrl } from '../../utils/externalUrls'
+
 import {
   FormField,
   FromErrors,
   checkErrors,
   defaultValues,
   emptyValues,
+  refreshStudioCSRFToken,
   teamSize
 } from './utils'
+import { studioContactUsApi } from '../../utils/externalUrls'
 
 const ErrorMessage = ({
   name,
@@ -114,68 +116,31 @@ const RequestAQuoteForm = ({
     }
 
     try {
-      const formId = `50ebdb54-825e-436f-9afc-6c6fa4b2d865`
-      /**
-       * NOTE: For Testing, simply call getHubSpotFormUrl() i.e without parameters
-       * it defaults to test form id
-       */
-      const response = await fetch(getHubSpotFormUrl({ formId }), {
+      const csrfToken = await refreshStudioCSRFToken()
+      const response = await fetch(studioContactUsApi, {
         method: `POST`,
         headers: {
-          'Content-Type': `application/json`
+          'Content-Type': `application/json`,
+          'X-CsrfToken': csrfToken
         },
+        credentials: `include`,
+        mode: `cors`,
         body: JSON.stringify({
-          fields: [
-            {
-              objectTypeId: `0-1`,
-              name: `full_name`,
-              value: values.name
-            },
-            {
-              objectTypeId: `0-1`,
-              name: `company`,
-              value: values.company
-            },
-            {
-              objectTypeId: `0-1`,
-              name: `email`,
-              value: values.email
-            },
-            {
-              objectTypeId: `0-1`,
-              name: `team_size`,
-              value: values.teamSize
-            },
-            {
-              objectTypeId: `0-1`,
-              name: `area_of_interest`,
-              value: values.areaOfInterest
-            },
-            {
-              objectTypeId: `0-1`,
-              name: `phone`,
-              value: values.phone
-            },
-            {
-              objectTypeId: `0-1`,
-              name: `message`,
-              value: values.message
-            },
-            {
-              objectTypeId: `0-1`,
-              name: `purpose`,
-              value: values.purpose
-            }
-          ],
-          context: {
-            pageName: `Platinum Services (Request a Quote)`,
-            pageUri: `https://dvc.org/support`
-          }
+          area_of_interest: values.areaOfInterest,
+          company: values.company,
+          email: values.email,
+          info: values.message,
+          name: values.name,
+          phone: values.phone,
+          purpose: values.purpose,
+          site: window.location.href,
+          team_size: values.teamSize
         }),
         signal: newAbortController.signal
       })
+      if (!response.ok) throw new Error(response.statusText)
       const data = await response.json()
-      if (data.status === `error`) throw new Error(data)
+      if (data.error) throw new Error(data.error)
 
       setSubmitting(false)
       setValues(defaultValues)

src/components/Support/utils.tsx

@@ -1,3 +1,5 @@
+import { studioRefreshCsfrApi } from '../../utils/externalUrls'
+
 export type FormField =
   | 'name'
   | 'company'
@@ -80,3 +82,24 @@ export const checkErrors = (
 
   return { hasError, newErrors }
 }
+
+function getCookie(name: string) {
+  let cookieValue = null
+  if (document.cookie && document.cookie !== ``) {
+    const cookies = document.cookie.split(`;`)
+    for (let i = 0; i < cookies.length; i++) {
+      const cookie = cookies[i].trim()
+      // Does this cookie string begin with the name we want?
+      if (cookie.substring(0, name.length + 1) === name + `=`) {
+        cookieValue = decodeURIComponent(cookie.substring(name.length + 1))
+        break
+      }
+    }
+  }
+  return cookieValue
+}
+
+export const refreshStudioCSRFToken = async () => {
+  await fetch(studioRefreshCsfrApi)
+  return getCookie(`csrftoken`) || ``
+}

src/utils/externalUrls.ts

@@ -2,26 +2,11 @@
 
 export const studioUrl = 'https://studio.datachain.ai'
 
-// cloud.dvc.ai
-
-// Temporarily it's the same as studio
-// TODO: change to cloud.dvc.ai
-
-// export const cloudUrl = 'https://cloud.dvc.ai'
-export const cloudUrl = studioUrl
+// Studio API Urls
+const studioApi = `${studioUrl}/api`
+export const studioRefreshCsfrApi = `${studioApi}/refresh-csrf`
+export const studioContactUsApi = `${studioApi}/contacts`
 
 // Github Urls
 export const githubDatachainUrl = `https://github.com/iterative/datachain`
 export const githubDvcUrl = `https://github.com/iterative/dvc`
-
-// HubSpot Forms
-interface IHubSpotFormUrlOptions {
-  portalId?: string
-  formId?: string
-}
-
-export const getHubSpotFormUrl = ({
-  portalId = `21087317`,
-  formId = `e43684c2-476c-4838-adf2-d489da58ad89`
-}: IHubSpotFormUrlOptions = {}) =>
-  `https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formId}`