Fix jobTitle and companyName required mismatch with action on Contact form

Author: webstackdev

src/actions/downloads/__tests__/action.spec.ts

@@ -0,0 +1,115 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+type ActionConfig<Input, Output> = {
+  handler: (_input: Input, _context: unknown) => Promise<Output>
+}
+
+const getMockedHandler = <Input, Output>(action: unknown): ActionConfig<Input, Output>['handler'] => {
+  return (action as ActionConfig<Input, Output>).handler
+}
+
+vi.mock('astro:actions', () => {
+  return {
+    defineAction: (config: unknown) => config,
+  }
+})
+
+vi.mock('@actions/gdpr/entities/consent', () => {
+  return {
+    createConsentRecord: vi.fn(async () => ({ id: 'consent-1' })),
+  }
+})
+
+vi.mock('@actions/utils/environment/environmentActions', () => {
+  return {
+    getPrivacyPolicyVersion: vi.fn(() => 'privacy-version-1'),
+  }
+})
+
+vi.mock('@actions/utils/errors', () => {
+  return {
+    handleActionsFunctionError: vi.fn(() => undefined),
+  }
+})
+
+vi.mock('@actions/utils/hubspot', () => {
+  return {
+    createOrUpdateContact: vi.fn(async () => ({ id: 'hubspot-1' })),
+    setMarketingOptIn: vi.fn(async () => undefined),
+  }
+})
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('downloads inputSchema', () => {
+  it('accepts omitted optional job fields', async () => {
+    const { inputSchema } = await import('../action')
+
+    const result = inputSchema.parse({
+      firstName: 'Jane',
+      lastName: 'Doe',
+      workEmail: 'jane@example.com',
+    })
+
+    expect(result).toEqual({
+      firstName: 'Jane',
+      lastName: 'Doe',
+      workEmail: 'jane@example.com',
+    })
+  })
+
+  it('normalizes blank optional job fields to undefined', async () => {
+    const { inputSchema } = await import('../action')
+
+    const result = inputSchema.parse({
+      firstName: 'Jane',
+      lastName: 'Doe',
+      workEmail: 'jane@example.com',
+      jobTitle: '   ',
+      companyName: '',
+    })
+
+    expect(result).toEqual({
+      firstName: 'Jane',
+      lastName: 'Doe',
+      workEmail: 'jane@example.com',
+      jobTitle: undefined,
+      companyName: undefined,
+    })
+  })
+})
+
+describe('downloads.submit.handler', () => {
+  it('submits successfully without optional job fields', async () => {
+    const { downloads } = await import('../action')
+    const { createOrUpdateContact } = await import('@actions/utils/hubspot')
+    const { createConsentRecord } = await import('@actions/gdpr/entities/consent')
+
+    const context = {
+      request: new Request('https://example.com/_actions/downloads/submit', {
+        method: 'POST',
+        headers: { 'user-agent': 'ua-1' },
+      }),
+      clientAddress: '203.0.113.10',
+    }
+
+    const response = await getMockedHandler(downloads.submit)({
+      firstName: 'Jane',
+      lastName: 'Doe',
+      workEmail: 'jane@example.com',
+    }, context)
+
+    expect(response).toEqual({
+      success: true,
+      message: 'Form submitted successfully',
+    })
+    expect(createOrUpdateContact).toHaveBeenCalledWith({
+      email: 'jane@example.com',
+      firstname: 'Jane',
+      lastname: 'Doe',
+    })
+    expect(createConsentRecord).not.toHaveBeenCalled()
+  })
+})

src/actions/downloads/action.ts

@@ -7,6 +7,15 @@ import { getPrivacyPolicyVersion } from '@actions/utils/environment/environmentA
 import { handleActionsFunctionError } from '@actions/utils/errors'
 import { createOrUpdateContact, setMarketingOptIn } from '@actions/utils/hubspot'
 
+const optionalTrimmedString = z.preprocess(value => {
+  if (typeof value !== 'string') {
+    return value
+  }
+
+  const trimmedValue = value.trim()
+  return trimmedValue.length > 0 ? trimmedValue : undefined
+}, z.string().optional())
+
 export const inputSchema = z.object({
   firstName: z.string().trim().min(1),
   lastName: z.string().trim().min(1),
@@ -15,8 +24,8 @@ export const inputSchema = z.object({
     .trim()
     .min(1)
     .refine(value => emailValidator.validate(value), 'Invalid email address'),
-  jobTitle: z.string().trim().min(1),
-  companyName: z.string().trim().min(1),
+  jobTitle: optionalTrimmedString,
+  companyName: optionalTrimmedString,
   consent: z.boolean().optional(),
   DataSubjectId: z.uuid().optional(),
 })
@@ -59,8 +68,8 @@ export const downloads = {
       console.log('Download form submission:', {
         name: `${input.firstName} ${input.lastName}`,
         email: input.workEmail,
-        jobTitle: input.jobTitle,
-        company: input.companyName,
+        jobTitle: input.jobTitle ?? null,
+        company: input.companyName ?? null,
         timestamp: new Date().toISOString(),
       })
 

src/components/Pages/Downloads/client/__tests__/__fixtures__/downloadForm.fixture.astro

@@ -19,16 +19,6 @@ import Button from '@components/Button/index.astro'
       <input id="workEmail" name="workEmail" type="email" required />
     </div>
 
-    <div>
-      <label for="jobTitle">Job Title</label>
-      <input id="jobTitle" name="jobTitle" type="text" />
-    </div>
-
-    <div>
-      <label for="companyName">Company Name</label>
-      <input id="companyName" name="companyName" type="text" />
-    </div>
-
     <Button id="downloadSubmitBtn" type="submit" text="Download Now" />
 
     <div id="downloadButtonWrapper" class="hidden">

src/components/Pages/Downloads/client/__tests__/index.spec.ts

@@ -37,8 +37,6 @@ const defaultFormValues = {
   firstName: 'Jane',
   lastName: 'Doe',
   workEmail: 'jane@example.com',
-  jobTitle: 'Engineer',
-  companyName: 'Acme Corp',
 }
 
 const fillDownloadForm = (
@@ -49,8 +47,6 @@ const fillDownloadForm = (
   elements.firstName.value = values.firstName
   elements.lastName.value = values.lastName
   elements.workEmail.value = values.workEmail
-  elements.jobTitle.value = values.jobTitle
-  elements.companyName.value = values.companyName
   return values
 }
 
@@ -93,7 +89,11 @@ describe('download-form web component', () => {
       submitForm(window, elements.form)
       await flushPromises()
 
-      expect(downloadsSubmitMock).toHaveBeenCalledWith(payload)
+      expect(downloadsSubmitMock).toHaveBeenCalledWith({
+        firstName: payload.firstName,
+        lastName: payload.lastName,
+        workEmail: payload.workEmail,
+      })
       expect(markEmailCollectedMock).toHaveBeenCalledWith('jane@example.com', 'download_form')
     })
   })

src/components/Pages/Downloads/client/__tests__/testUtils.ts

@@ -5,10 +5,8 @@ import DownloadFormFixture from '@components/Pages/Downloads/client/__tests__/__
 import type { DownloadFormElement } from '@components/Pages/Downloads/client'
 import {
   getDownloadButtonWrapper,
-  getDownloadCompanyNameInput,
   getDownloadFirstNameInput,
   getDownloadFormElement,
-  getDownloadJobTitleInput,
   getDownloadLastNameInput,
   getDownloadStatusDiv,
   getDownloadSubmitButton,
@@ -27,8 +25,6 @@ export interface DownloadFormElements {
   firstName: HTMLInputElement
   lastName: HTMLInputElement
   workEmail: HTMLInputElement
-  jobTitle: HTMLInputElement
-  companyName: HTMLInputElement
 }
 
 export interface RenderDownloadFormContext {
@@ -67,8 +63,6 @@ export const renderDownloadForm = async (assertion: RenderDownloadFormAssertion)
           firstName: getDownloadFirstNameInput(window.document),
           lastName: getDownloadLastNameInput(window.document),
           workEmail: getDownloadWorkEmailInput(window.document),
-          jobTitle: getDownloadJobTitleInput(window.document),
-          companyName: getDownloadCompanyNameInput(window.document),
         },
       }
 

src/components/Pages/Downloads/client/index.ts

@@ -114,13 +114,15 @@ export class DownloadFormElement extends LitElement {
       const dataSubjectId =
         typeof dataSubjectIdRaw === 'string' ? dataSubjectIdRaw.trim() : ''
       const DataSubjectId = dataSubjectId.length > 0 ? dataSubjectId : undefined
+      const jobTitle = String(formData.get('jobTitle') ?? '').trim()
+      const companyName = String(formData.get('companyName') ?? '').trim()
 
       const payload = {
         firstName: String(formData.get('firstName') ?? ''),
         lastName: String(formData.get('lastName') ?? ''),
         workEmail: String(formData.get('workEmail') ?? ''),
-        jobTitle: String(formData.get('jobTitle') ?? ''),
-        companyName: String(formData.get('companyName') ?? ''),
+        ...(jobTitle && { jobTitle }),
+        ...(companyName && { companyName }),
         consent,
         DataSubjectId,
       } satisfies DownloadsSubmitInput

src/components/Pages/Downloads/client/selectors.ts

@@ -92,14 +92,6 @@ export function getDownloadWorkEmailInput(root?: SelectorRoot): HTMLInputElement
   return queryInputElement('#workEmail', 'Work email input not found', root)
 }
 
-export function getDownloadJobTitleInput(root?: SelectorRoot): HTMLInputElement {
-  return queryInputElement('#jobTitle', 'Job title input not found', root)
-}
-
-export function getDownloadCompanyNameInput(root?: SelectorRoot): HTMLInputElement {
-  return queryInputElement('#companyName', 'Company name input not found', root)
-}
-
 export type DownloadFormInvalidatableControl =
   | HTMLInputElement
   | HTMLSelectElement