fix(ui): Change modal field to be company size (#3801)

* Change modal field to be company size

* Adjust dropdown options

* Fix lint

---------

Co-authored-by: Theodore Li <theo@sim.ai>

apps/sim/app/(home)/components/demo-request/consts.ts

@@ -14,13 +14,14 @@ export const DEMO_REQUEST_REGION_VALUES = [
   'other',
 ] as const
 
-export const DEMO_REQUEST_USER_COUNT_VALUES = [
+export const DEMO_REQUEST_COMPANY_SIZE_VALUES = [
   '1_10',
   '11_50',
   '51_200',
   '201_500',
   '501_1000',
-  '1000_plus',
+  '1001_10000',
+  '10000_plus',
 ] as const
 
 export const DEMO_REQUEST_REGION_OPTIONS = [
@@ -32,13 +33,14 @@ export const DEMO_REQUEST_REGION_OPTIONS = [
   { value: 'other', label: 'Other' },
 ] as const
 
-export const DEMO_REQUEST_USER_COUNT_OPTIONS = [
-  { value: '1_10', label: '1-10' },
-  { value: '11_50', label: '11-50' },
-  { value: '51_200', label: '51-200' },
-  { value: '201_500', label: '201-500' },
-  { value: '501_1000', label: '501-1,000' },
-  { value: '1000_plus', label: '1,000+' },
+export const DEMO_REQUEST_COMPANY_SIZE_OPTIONS = [
+  { value: '1_10', label: '1–10' },
+  { value: '11_50', label: '11–50' },
+  { value: '51_200', label: '51–200' },
+  { value: '201_500', label: '201–500' },
+  { value: '501_1000', label: '501–1,000' },
+  { value: '1001_10000', label: '1,001–10,000' },
+  { value: '10000_plus', label: '10,000+' },
 ] as const
 
 export const demoRequestSchema = z.object({
@@ -74,8 +76,8 @@ export const demoRequestSchema = z.object({
   region: z.enum(DEMO_REQUEST_REGION_VALUES, {
     errorMap: () => ({ message: 'Please select a region' }),
   }),
-  userCount: z.enum(DEMO_REQUEST_USER_COUNT_VALUES, {
-    errorMap: () => ({ message: 'Please select the number of users' }),
+  companySize: z.enum(DEMO_REQUEST_COMPANY_SIZE_VALUES, {
+    errorMap: () => ({ message: 'Please select company size' }),
   }),
   details: z.string().trim().min(1, 'Details are required').max(2000),
 })
@@ -86,6 +88,6 @@ export function getDemoRequestRegionLabel(value: DemoRequestPayload['region']):
   return DEMO_REQUEST_REGION_OPTIONS.find((option) => option.value === value)?.label ?? value
 }
 
-export function getDemoRequestUserCountLabel(value: DemoRequestPayload['userCount']): string {
-  return DEMO_REQUEST_USER_COUNT_OPTIONS.find((option) => option.value === value)?.label ?? value
+export function getDemoRequestCompanySizeLabel(value: DemoRequestPayload['companySize']): string {
+  return DEMO_REQUEST_COMPANY_SIZE_OPTIONS.find((option) => option.value === value)?.label ?? value
 }

apps/sim/app/(home)/components/demo-request/demo-request-modal.tsx

@@ -16,8 +16,8 @@ import {
 } from '@/components/emcn'
 import { Check } from '@/components/emcn/icons'
 import {
+  DEMO_REQUEST_COMPANY_SIZE_OPTIONS,
   DEMO_REQUEST_REGION_OPTIONS,
-  DEMO_REQUEST_USER_COUNT_OPTIONS,
   type DemoRequestPayload,
   demoRequestSchema,
 } from '@/app/(home)/components/demo-request/consts'
@@ -36,13 +36,13 @@ interface DemoRequestFormState {
   companyEmail: string
   phoneNumber: string
   region: DemoRequestPayload['region'] | ''
-  userCount: DemoRequestPayload['userCount'] | ''
+  companySize: DemoRequestPayload['companySize'] | ''
   details: string
 }
 
 const SUBMIT_SUCCESS_MESSAGE = "We'll be in touch soon!"
 const COMBOBOX_REGIONS = [...DEMO_REQUEST_REGION_OPTIONS]
-const COMBOBOX_USER_COUNTS = [...DEMO_REQUEST_USER_COUNT_OPTIONS]
+const COMBOBOX_COMPANY_SIZES = [...DEMO_REQUEST_COMPANY_SIZE_OPTIONS]
 
 const INITIAL_FORM_STATE: DemoRequestFormState = {
   firstName: '',
@@ -50,7 +50,7 @@ const INITIAL_FORM_STATE: DemoRequestFormState = {
   companyEmail: '',
   phoneNumber: '',
   region: '',
-  userCount: '',
+  companySize: '',
   details: '',
 }
 
@@ -118,7 +118,7 @@ export function DemoRequestModal({ children, theme = 'dark' }: DemoRequestModalP
           companyEmail: fieldErrors.companyEmail?.[0],
           phoneNumber: fieldErrors.phoneNumber?.[0],
           region: fieldErrors.region?.[0],
-          userCount: fieldErrors.userCount?.[0],
+          companySize: fieldErrors.companySize?.[0],
           details: fieldErrors.details?.[0],
         })
         return
@@ -235,13 +235,13 @@ export function DemoRequestModal({ children, theme = 'dark' }: DemoRequestModalP
                       filterOptions={false}
                     />
                   </FormField>
-                  <FormField htmlFor='userCount' label='Number of users' error={errors.userCount}>
+                  <FormField htmlFor='companySize' label='Company size' error={errors.companySize}>
                     <Combobox
-                      options={COMBOBOX_USER_COUNTS}
-                      value={form.userCount}
-                      selectedValue={form.userCount}
+                      options={COMBOBOX_COMPANY_SIZES}
+                      value={form.companySize}
+                      selectedValue={form.companySize}
                       onChange={(value) =>
-                        updateField('userCount', value as DemoRequestPayload['userCount'])
+                        updateField('companySize', value as DemoRequestPayload['companySize'])
                       }
                       placeholder='Select'
                       editable={false}

apps/sim/app/api/demo-requests/route.ts

@@ -9,8 +9,8 @@ import { sendEmail } from '@/lib/messaging/email/mailer'
 import { getFromEmailAddress } from '@/lib/messaging/email/utils'
 import {
   demoRequestSchema,
+  getDemoRequestCompanySizeLabel,
   getDemoRequestRegionLabel,
-  getDemoRequestUserCountLabel,
 } from '@/app/(home)/components/demo-request/consts'
 
 const logger = createLogger('DemoRequestAPI')
@@ -58,13 +58,13 @@ export async function POST(req: NextRequest) {
       )
     }
 
-    const { firstName, lastName, companyEmail, phoneNumber, region, userCount, details } =
+    const { firstName, lastName, companyEmail, phoneNumber, region, companySize, details } =
       validationResult.data
 
     logger.info(`[${requestId}] Processing demo request`, {
       email: `${companyEmail.substring(0, 3)}***`,
       region,
-      userCount,
+      companySize,
     })
 
     const emailText = `Demo request submitted
@@ -73,7 +73,7 @@ Name: ${firstName} ${lastName}
 Email: ${companyEmail}
 Phone: ${phoneNumber ?? 'Not provided'}
 Region: ${getDemoRequestRegionLabel(region)}
-Users: ${getDemoRequestUserCountLabel(userCount)}
+Company size: ${getDemoRequestCompanySizeLabel(companySize)}
 
 Details:
 ${details}