-
Notifications
You must be signed in to change notification settings - Fork 3.5k
feat(ui): add request a demo modal #3766
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
aefdc21
fix(ui): add request a demo modal
b59dbd4
Remove dead code
c24c6d6
Remove footer modal
4cf445f
Address greptile comments
730097d
Sanatize CRLF characters from emails
b4c864d
extract shared email header safety regex
cursoragent 0991419
Use pricing CTA action for demo modal
cursoragent e1a1618
fix demo request import ordering
cursoragent 6eff46a
Merge branch 'staging' into feat/demo-modal
cursoragent 6225f21
merge staging and fix hubspot list formatting
cursoragent 72e17bd
fix(generate-docs): fix tool description extraction and simplify script
waleedlatif1 02bd69d
fix(generate-docs): restore extractIconName by aliasing to extractIco…
waleedlatif1 c5a8b37
restore
waleedlatif1 79268a7
fix(demo-modal): reset form on open to prevent stale success state on…
waleedlatif1 769a804
undo hardcoded ff
waleedlatif1 eb3453a
fix(upstash): throw on unknown operation instead of silently falling …
waleedlatif1 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next
Next commit
fix(ui): add request a demo modal
- Loading branch information
There are no files selected for viewing
303 changes: 303 additions & 0 deletions
303
apps/sim/app/(home)/components/demo-request/demo-request-modal.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,303 @@ | ||
| 'use client' | ||
|
|
||
| import { useCallback, useMemo, useState } from 'react' | ||
| import { | ||
| Button, | ||
| Combobox, | ||
| FormField, | ||
| Input, | ||
| Modal, | ||
| ModalBody, | ||
| ModalContent, | ||
| ModalFooter, | ||
| ModalHeader, | ||
| ModalTitle, | ||
| ModalTrigger, | ||
| Textarea, | ||
| } from '@/components/emcn' | ||
| import { Check } from '@/components/emcn/icons' | ||
| import { | ||
| DEMO_REQUEST_REGION_OPTIONS, | ||
| DEMO_REQUEST_USER_COUNT_OPTIONS, | ||
| type DemoRequestPayload, | ||
| demoRequestSchema, | ||
| } from '@/lib/marketing/demo-request' | ||
|
|
||
| interface DemoRequestModalProps { | ||
| children: React.ReactNode | ||
| theme?: 'dark' | 'light' | ||
| } | ||
|
|
||
| type DemoRequestField = keyof DemoRequestPayload | ||
| type DemoRequestErrors = Partial<Record<DemoRequestField, string>> | ||
|
|
||
| interface DemoRequestFormState { | ||
| firstName: string | ||
| lastName: string | ||
| companyEmail: string | ||
| phoneNumber: string | ||
| region: DemoRequestPayload['region'] | '' | ||
| userCount: DemoRequestPayload['userCount'] | '' | ||
| details: string | ||
| } | ||
|
|
||
| const SUBMIT_SUCCESS_MESSAGE = "We'll be in touch soon!" | ||
|
|
||
| const INITIAL_FORM_STATE: DemoRequestFormState = { | ||
| firstName: '', | ||
| lastName: '', | ||
| companyEmail: '', | ||
| phoneNumber: '', | ||
| region: '', | ||
| userCount: '', | ||
| details: '', | ||
| } | ||
|
|
||
| export function DemoRequestModal({ children, theme = 'dark' }: DemoRequestModalProps) { | ||
| const [open, setOpen] = useState(false) | ||
| const [form, setForm] = useState<DemoRequestFormState>(INITIAL_FORM_STATE) | ||
| const [errors, setErrors] = useState<DemoRequestErrors>({}) | ||
| const [isSubmitting, setIsSubmitting] = useState(false) | ||
| const [submitError, setSubmitError] = useState<string | null>(null) | ||
| const [submitSuccess, setSubmitSuccess] = useState(false) | ||
|
|
||
| const comboboxRegions = useMemo(() => [...DEMO_REQUEST_REGION_OPTIONS], []) | ||
| const comboboxUserCounts = useMemo(() => [...DEMO_REQUEST_USER_COUNT_OPTIONS], []) | ||
|
|
||
| const resetForm = useCallback(() => { | ||
| setForm(INITIAL_FORM_STATE) | ||
| setErrors({}) | ||
| setIsSubmitting(false) | ||
| setSubmitError(null) | ||
| setSubmitSuccess(false) | ||
| }, []) | ||
|
|
||
| const handleOpenChange = useCallback( | ||
| (nextOpen: boolean) => { | ||
| setOpen(nextOpen) | ||
| if (!nextOpen) { | ||
| resetForm() | ||
| } | ||
| }, | ||
| [resetForm] | ||
| ) | ||
|
waleedlatif1 marked this conversation as resolved.
|
||
|
|
||
| const updateField = useCallback( | ||
| <TField extends keyof DemoRequestFormState>( | ||
| field: TField, | ||
| value: DemoRequestFormState[TField] | ||
| ) => { | ||
| setForm((prev) => ({ ...prev, [field]: value })) | ||
| setErrors((prev) => { | ||
| if (!prev[field]) { | ||
| return prev | ||
| } | ||
|
|
||
| const nextErrors = { ...prev } | ||
| delete nextErrors[field] | ||
| return nextErrors | ||
| }) | ||
| setSubmitError(null) | ||
| setSubmitSuccess(false) | ||
| }, | ||
| [] | ||
| ) | ||
|
|
||
| const handleSubmit = useCallback( | ||
| async (event: React.FormEvent<HTMLFormElement>) => { | ||
| event.preventDefault() | ||
| setSubmitError(null) | ||
| setSubmitSuccess(false) | ||
|
|
||
| const parsed = demoRequestSchema.safeParse({ | ||
| ...form, | ||
| phoneNumber: form.phoneNumber || undefined, | ||
| }) | ||
|
|
||
| if (!parsed.success) { | ||
| const fieldErrors = parsed.error.flatten().fieldErrors | ||
| setErrors({ | ||
| firstName: fieldErrors.firstName?.[0], | ||
| lastName: fieldErrors.lastName?.[0], | ||
| companyEmail: fieldErrors.companyEmail?.[0], | ||
| phoneNumber: fieldErrors.phoneNumber?.[0], | ||
| region: fieldErrors.region?.[0], | ||
| userCount: fieldErrors.userCount?.[0], | ||
| details: fieldErrors.details?.[0], | ||
| }) | ||
| return | ||
| } | ||
|
|
||
| setIsSubmitting(true) | ||
|
|
||
| try { | ||
| const response = await fetch('/api/demo-request', { | ||
| method: 'POST', | ||
| headers: { 'Content-Type': 'application/json' }, | ||
| body: JSON.stringify(parsed.data), | ||
| }) | ||
|
|
||
| const result = (await response.json().catch(() => null)) as { | ||
| error?: string | ||
| message?: string | ||
| } | null | ||
|
|
||
| if (!response.ok) { | ||
| throw new Error(result?.error || 'Failed to submit demo request') | ||
| } | ||
|
|
||
| resetForm() | ||
| setSubmitSuccess(true) | ||
|
TheodoreSpeaks marked this conversation as resolved.
Outdated
|
||
| } catch (error) { | ||
| setSubmitError( | ||
| error instanceof Error | ||
| ? error.message | ||
| : 'Failed to submit demo request. Please try again.' | ||
| ) | ||
| } finally { | ||
| setIsSubmitting(false) | ||
| } | ||
| }, | ||
| [form, resetForm] | ||
| ) | ||
|
|
||
| return ( | ||
| <Modal open={open} onOpenChange={handleOpenChange}> | ||
| <ModalTrigger asChild>{children}</ModalTrigger> | ||
| <ModalContent size='lg' className={theme === 'dark' ? 'dark' : undefined}> | ||
| <ModalHeader> | ||
| <ModalTitle className={submitSuccess ? 'sr-only' : undefined}> | ||
| {submitSuccess ? 'Demo request submitted' : 'Nearly there!'} | ||
| </ModalTitle> | ||
| </ModalHeader> | ||
|
waleedlatif1 marked this conversation as resolved.
|
||
| <div className='relative flex-1'> | ||
| <form | ||
| onSubmit={handleSubmit} | ||
| aria-hidden={submitSuccess} | ||
| className={ | ||
| submitSuccess | ||
| ? 'pointer-events-none invisible flex h-full flex-col' | ||
| : 'flex h-full flex-col' | ||
| } | ||
| > | ||
| <ModalBody> | ||
| <div className='space-y-4'> | ||
| <div className='grid gap-4 sm:grid-cols-2'> | ||
| <FormField htmlFor='firstName' label='First name' error={errors.firstName}> | ||
| <Input | ||
| id='firstName' | ||
| value={form.firstName} | ||
| onChange={(event) => updateField('firstName', event.target.value)} | ||
| placeholder='First' | ||
| /> | ||
| </FormField> | ||
| <FormField htmlFor='lastName' label='Last name' error={errors.lastName}> | ||
| <Input | ||
| id='lastName' | ||
| value={form.lastName} | ||
| onChange={(event) => updateField('lastName', event.target.value)} | ||
| placeholder='Last' | ||
| /> | ||
| </FormField> | ||
| </div> | ||
|
|
||
| <FormField htmlFor='companyEmail' label='Company email' error={errors.companyEmail}> | ||
| <Input | ||
| id='companyEmail' | ||
| type='email' | ||
| value={form.companyEmail} | ||
| onChange={(event) => updateField('companyEmail', event.target.value)} | ||
| placeholder='Your work email' | ||
| /> | ||
| </FormField> | ||
|
|
||
| <FormField | ||
| htmlFor='phoneNumber' | ||
| label='Phone number' | ||
| optional | ||
| error={errors.phoneNumber} | ||
| > | ||
| <Input | ||
| id='phoneNumber' | ||
| type='tel' | ||
| value={form.phoneNumber} | ||
| onChange={(event) => updateField('phoneNumber', event.target.value)} | ||
| placeholder='Your phone number' | ||
| /> | ||
| </FormField> | ||
|
|
||
| <div className='grid gap-4 sm:grid-cols-2'> | ||
| <FormField htmlFor='region' label='Region' error={errors.region}> | ||
| <Combobox | ||
| options={comboboxRegions} | ||
| value={form.region} | ||
| selectedValue={form.region} | ||
| onChange={(value) => | ||
| updateField('region', value as DemoRequestPayload['region']) | ||
| } | ||
| placeholder='Select' | ||
| editable={false} | ||
| filterOptions={false} | ||
| /> | ||
| </FormField> | ||
| <FormField htmlFor='userCount' label='Number of users' error={errors.userCount}> | ||
| <Combobox | ||
| options={comboboxUserCounts} | ||
| value={form.userCount} | ||
| selectedValue={form.userCount} | ||
| onChange={(value) => | ||
| updateField('userCount', value as DemoRequestPayload['userCount']) | ||
| } | ||
| placeholder='Select' | ||
| editable={false} | ||
| filterOptions={false} | ||
| /> | ||
| </FormField> | ||
| </div> | ||
|
|
||
| <FormField htmlFor='details' label='Details' error={errors.details}> | ||
| <Textarea | ||
| id='details' | ||
| value={form.details} | ||
| onChange={(event) => updateField('details', event.target.value)} | ||
| placeholder='Tell us about your needs and questions' | ||
| /> | ||
| </FormField> | ||
| </div> | ||
| </ModalBody> | ||
|
|
||
| <ModalFooter className='flex-col items-stretch gap-3'> | ||
| {submitError && <p className='text-[13px] text-[var(--text-error)]'>{submitError}</p>} | ||
| <Button type='submit' variant='primary' disabled={isSubmitting}> | ||
| {isSubmitting ? 'Submitting...' : 'Submit'} | ||
| </Button> | ||
| </ModalFooter> | ||
| </form> | ||
|
|
||
| {submitSuccess ? ( | ||
| <div className='absolute inset-0 flex items-center justify-center px-8 pb-10 sm:px-12 sm:pb-14'> | ||
| <div className='flex max-w-md flex-col items-center justify-center text-center'> | ||
| <div className='flex h-20 w-20 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--bg-subtle)] text-[var(--text-primary)]'> | ||
| <Check className='h-10 w-10' /> | ||
| </div> | ||
| <h2 className='mt-8 font-medium text-[34px] text-[var(--text-primary)] leading-[1.1] tracking-[-0.03em]'> | ||
| {SUBMIT_SUCCESS_MESSAGE} | ||
| </h2> | ||
| <p className='mt-4 text-[17px] text-[var(--text-secondary)] leading-7'> | ||
| Our team will be in touch soon. If you have any questions, please email us at{' '} | ||
| <a | ||
| href='mailto:enterprise@sim.ai' | ||
| className='text-[var(--text-primary)] underline underline-offset-2' | ||
| > | ||
| enterprise@sim.ai | ||
| </a> | ||
| . | ||
| </p> | ||
| </div> | ||
| </div> | ||
| ) : null} | ||
| </div> | ||
| </ModalContent> | ||
| </Modal> | ||
| ) | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.