From 059d0ec66f83b58257dce2d28d4d6925da720d4d Mon Sep 17 00:00:00 2001
From: Long Hoang <long@mindworker.de>
Date: Fri, 16 Dec 2022 14:34:56 +0700
Subject: [PATCH] Redirect to new enterprise form

---
 apps/www/components/EnterpriseContactForm.tsx | 206 ------------------
 apps/www/lib/redirects.js                     |   5 +
 apps/www/pages/contact/enterprise.tsx         |  17 +-
 3 files changed, 18 insertions(+), 210 deletions(-)
 delete mode 100644 apps/www/components/EnterpriseContactForm.tsx

diff --git a/apps/www/components/EnterpriseContactForm.tsx b/apps/www/components/EnterpriseContactForm.tsx
deleted file mode 100644
index f0eda1f785d..00000000000
--- a/apps/www/components/EnterpriseContactForm.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import { Button, Form, Input, Listbox } from 'ui'
-import { useState } from 'react'
-import countries from '~/data/Countries.json'
-import supabase from '~/lib/supabase'
-
-const INITIAL_VALUES = {
-  companyName: '',
-  contactFirstName: '',
-  contactLastName: '',
-  contactEmail: '',
-  contactPhone: '',
-  companySize: '',
-  details: '',
-  country: 'US',
-}
-
-const validate = (values: any) => {
-  const errors: any = {}
-
-  if (!values.companyName) {
-    errors.companyName = 'Required'
-  }
-
-  if (!values.contactFirstName) {
-    errors.contactFirstName = 'Required'
-  }
-
-  if (!values.contactLastName) {
-    errors.contactLastName = 'Required'
-  }
-
-  if (!values.contactEmail) {
-    errors.contactEmail = 'Required'
-  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.contactEmail)) {
-    errors.contactEmail = 'Invalid email address'
-  }
-
-  return errors
-}
-
-const EnterpriseContactForm = () => {
-  const [formSubmitted, setFormSubmitted] = useState<boolean>(false)
-
-  const handleFormSubmit = async (values: typeof INITIAL_VALUES, { resetForm }: any) => {
-    const { error } = await supabase.from('enterprise_contacts').insert([
-      {
-        company_name: values.companyName,
-        contact_name: `${values.contactFirstName} ${values.contactLastName}`,
-        contact_first_name: values.contactFirstName,
-        contact_last_name: values.contactLastName,
-        contact_email: values.contactEmail,
-        contact_phone: values.contactPhone,
-        company_size: values.companySize,
-        details: values.details,
-        country: values.country,
-      },
-    ])
-
-    // TODO: handle error
-    console.log('error:', error)
-    if (!error) {
-      resetForm()
-
-      setFormSubmitted(true)
-    }
-  }
-
-  return (
-    <div>
-      <Form initialValues={INITIAL_VALUES} validate={validate} onSubmit={handleFormSubmit}>
-        {({ values, isSubmitting }: any) => {
-          const selectedCountry = countries.find((country) => country.code === values['country'])
-          const phonePlaceholder =
-            selectedCountry !== undefined ? `+${selectedCountry.phone_code}` : ''
-
-          return (
-            <div className="flex flex-col space-y-4">
-              <div>
-                <Input
-                  label="Company Name *"
-                  id="companyName"
-                  name="companyName"
-                  layout="vertical"
-                  placeholder="Supa Inc."
-                />
-              </div>
-
-              <div className="flex space-x-4">
-                <div className="flex-1">
-                  <Input
-                    label="Your First Name *"
-                    id="contactFirstName"
-                    name="contactFirstName"
-                    layout="vertical"
-                    placeholder="Jane"
-                  />
-                </div>
-
-                <div className="flex-1">
-                  <Input
-                    label="Your Last Name *"
-                    id="contactLastName"
-                    name="contactLastName"
-                    layout="vertical"
-                    placeholder="Doe"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <Input
-                  label="Your Business Email *"
-                  id="contactEmail"
-                  name="contactEmail"
-                  layout="vertical"
-                  placeholder="janedoe@example.com"
-                />
-              </div>
-
-              <div>
-                <Listbox label="Company Size" id="companySize" name="companySize" layout="vertical">
-                  <Listbox.Option label="---" value="">
-                    {'---'}
-                  </Listbox.Option>
-                  <Listbox.Option label="1-10" value="1-10">
-                    1-10 Employees
-                  </Listbox.Option>
-                  <Listbox.Option label="11-50" value="11-50">
-                    11-50 Employees
-                  </Listbox.Option>
-                  <Listbox.Option label="51-200" value="51-200">
-                    51-200 Employees
-                  </Listbox.Option>
-                  <Listbox.Option label="201-500" value="201-500">
-                    201-500 Employees
-                  </Listbox.Option>
-                  <Listbox.Option label="501-1000" value="501-1000">
-                    501-1000 Employees
-                  </Listbox.Option>
-                  <Listbox.Option label="1001-5000" value="1001-5000">
-                    1001-5000 Employees
-                  </Listbox.Option>
-                  <Listbox.Option label="5001+" value="5001+">
-                    5001+ Employees
-                  </Listbox.Option>
-                </Listbox>
-              </div>
-
-              <div>
-                <Input
-                  label="Your Phone Number"
-                  id="contactPhone"
-                  name="contactPhone"
-                  layout="vertical"
-                  placeholder={phonePlaceholder}
-                />
-              </div>
-
-              <div>
-                <Listbox
-                  label="Country / Main Timezone"
-                  id="country"
-                  name="country"
-                  layout="vertical"
-                >
-                  {countries.map(({ code, name }) => (
-                    <Listbox.Option label={name} key={code} value={code}>
-                      {name}
-                    </Listbox.Option>
-                  ))}
-                </Listbox>
-              </div>
-
-              <div className="">
-                <Input.TextArea
-                  id="details"
-                  name="details"
-                  label="Additional Details"
-                  placeholder="Tell us about your projects, clients, and technology..."
-                  rows={10}
-                />
-              </div>
-
-              <div className="col-span-2 flex w-full flex-row-reverse pt-4">
-                <Button
-                  size="xlarge"
-                  disabled={isSubmitting}
-                  loading={isSubmitting}
-                  htmlType="submit"
-                >
-                  Send
-                </Button>
-              </div>
-            </div>
-          )
-        }}
-      </Form>
-
-      {formSubmitted && (
-        <h3 className="h3 mt-12 text-center">Thanks, we'll reach out to you shortly.</h3>
-      )}
-    </div>
-  )
-}
-
-export default EnterpriseContactForm
diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js
index d6993424732..e94dbf1ce9f 100644
--- a/apps/www/lib/redirects.js
+++ b/apps/www/lib/redirects.js
@@ -1877,4 +1877,9 @@ module.exports = [
     source: '/docs/handbook/supasquad',
     destination: '/supasquad',
   },
+  {
+    permanent: true,
+    source: '/contact/enterprise',
+    destination: 'https://forms.supabase.com/enterprise',
+  },
 ]
diff --git a/apps/www/pages/contact/enterprise.tsx b/apps/www/pages/contact/enterprise.tsx
index 6e58c4e80f5..bb62ead0624 100644
--- a/apps/www/pages/contact/enterprise.tsx
+++ b/apps/www/pages/contact/enterprise.tsx
@@ -1,14 +1,23 @@
 import { NextSeo } from 'next-seo'
+import { useEffect } from 'react'
 import { useRouter } from 'next/router'
-import EnterpriseContactForm from '~/components/EnterpriseContactForm'
 import DefaultLayout from '~/components/Layouts/Default'
 
 const meta_title = 'Enterprise Contact | Supabase'
 const meta_description = 'Contact Supabase for enterprise sales and pricing.'
+const enterprise_form_url = 'https://forms.supabase.com/enterprise'
 
 const EnterpriseContactPage = () => {
   const router = useRouter()
 
+  useEffect(() => {
+    if (!router.isReady) {
+      return
+    }
+
+    router.push(enterprise_form_url)
+  })
+
   return (
     <DefaultLayout>
       <NextSeo
@@ -27,9 +36,9 @@ const EnterpriseContactPage = () => {
       />
 
       <div className="mx-auto my-16 max-w-xl px-4 md:my-20 lg:my-24 xl:my-32">
-        <h2 className="h2 block pb-16 text-center">Contact Enterprise Sales</h2>
-
-        <EnterpriseContactForm />
+        <p className="p mt-1.5 text-sm text-center sm:mt-5 sm:text-base lg:text-lg ">
+          <a href={enterprise_form_url}>Redirecting... Click here to get redirected immediately</a>
+        </p>
       </div>
     </DefaultLayout>
   )