mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 06:39:09 +03:00
Redirect to new enterprise form
This commit is contained in:
Long Hoang committed
1 parent
84119b0429
commit
059d0ec66f
3 files changed
+18
-210
No files matched your search
@@ -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
|
||||
@@ -1877,4 +1877,9 @@ module.exports = [
|
||||
source: '/docs/handbook/supasquad',
|
||||
destination: '/supasquad',
|
||||
},
|
||||
{
|
||||
permanent: true,
|
||||
source: '/contact/enterprise',
|
||||
destination: 'https://forms.supabase.com/enterprise',
|
||||
},
|
||||
]
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
Reference in new issue
Block a user