Merge pull request #643 from webstackdev/feature/style-fixes-contact-form-and-behavior

Feature/style fixes contact form and behavior

Author: webstackdev

_TODO.md

@@ -27,10 +27,6 @@ https://aws.plainenglish.io/how-to-build-a-chatbot-using-aws-lex-and-lambda-in-2
 
 - Finish styling
 
-## Env Vars
+## Contact Form
 
-- Add HubSpot env vars to Vercel
-
-## Content Issues
-
-- Need an article on OpenStack
+- `0/2000` characters should show number of characters left instead

src/actions/contact/@types/index.d.ts

@@ -1,6 +1,7 @@
 export type ContactFormData = {
   name: string
   email: string
+  company?: string
   phone?: string
   message: string
   consent?: boolean

src/actions/contact/__tests__/responder.spec.ts

@@ -14,6 +14,7 @@ describe('contact responder', () => {
         {
           name: 'Jane Doe',
           email: 'jane@example.com',
+          company: 'Acme Co',
           service: 'Website redesign',
           timeline: '2-3-months',
           budget: '$5k-$10k',
@@ -42,6 +43,7 @@ describe('contact responder', () => {
 
       // Key fields should appear somewhere in the rendered content.
       expect(document.body.textContent ?? '').toContain('jane@example.com')
+      expect(document.body.textContent ?? '').toContain('Acme Co')
       expect(document.body.textContent ?? '').toContain('Website redesign')
       expect(document.body.textContent ?? '').toContain('$5k-$10k')
     })
@@ -77,6 +79,7 @@ describe('contact responder', () => {
         name: ' Jane ',
         email: 'jane@example.com',
         message: ' Hello ',
+        company: 'Acme Co',
         service: 'Web development',
         timeline: '2-3-months',
         budget: '$5k-$10k',
@@ -90,6 +93,7 @@ describe('contact responder', () => {
       expect(formData.name).toBe(' Jane ')
       expect(formData.email).toBe('jane@example.com')
       expect(formData.message).toBe(' Hello ')
+      expect(formData.company).toBe('Acme Co')
       expect(formData.service).toBe('Web development')
       expect(formData.timeline).toBe('2-3-months')
       expect(formData.budget).toBe('$5k-$10k')
@@ -124,6 +128,18 @@ describe('contact responder', () => {
       expect(firstAttachment.content).toBeInstanceOf(Buffer)
     })
 
+    it('accepts browser-recorded audio with codec parameters', async () => {
+      const file = new File(['audio'], 'recording.webm', { type: 'audio/webm;codecs=opus' })
+
+      const attachments = await parseAttachmentsFromInput({
+        file1: file,
+      })
+
+      expect(attachments).toHaveLength(1)
+      expect(attachments[0]?.contentType).toBe('audio/webm')
+      expect(attachments[0]?.filename).toBe('recording.webm')
+    })
+
     it('rejects disallowed mime types', async () => {
       const file = new File(['x'], 'x.exe', { type: 'application/x-msdownload' })
 

src/actions/contact/action.ts

@@ -26,7 +26,11 @@ async function sendEmail(emailData: EmailData, files: FileAttachment[]): Promise
   }
 
   const resend = new Resend(getResendApiKey())
-  const attachments = files.map(file => ({ filename: file.filename, content: file.content }))
+  const attachments = files.map(file => ({
+    filename: file.filename,
+    content: file.content,
+    contentType: file.contentType,
+  }))
 
   try {
     const result = await resend.emails.send({

src/actions/contact/responder.ts

@@ -16,6 +16,36 @@ export const isAllowedTimeline = (timeline: string): timeline is ContactTimeline
   return (contactTimelineValues as readonly string[]).includes(timeline)
 }
 
+const allowedAttachmentTypes = [
+  'image/jpeg',
+  'image/png',
+  'image/gif',
+  'image/webp',
+  'application/pdf',
+  'application/msword',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'audio/mpeg',
+  'audio/mp4',
+  'audio/ogg',
+  'audio/wav',
+  'audio/webm',
+  'video/mp4',
+  'video/quicktime',
+  'video/webm',
+  'application/zip',
+  'text/plain',
+] as const
+
+type AllowedAttachmentType = (typeof allowedAttachmentTypes)[number]
+
+const isAllowedAttachmentType = (mimeType: string): mimeType is AllowedAttachmentType => {
+  return allowedAttachmentTypes.some(allowedAttachmentType => allowedAttachmentType === mimeType)
+}
+
+const normalizeMimeType = (mimeType: string): string => {
+  return mimeType.split(';')[0]?.trim().toLowerCase() || ''
+}
+
 const readInputString = (input: Record<string, unknown>, key: string): string => {
   const value = input[key]
   return typeof value === 'string' ? value : ''
@@ -34,6 +64,7 @@ export function generateEmailContent(data: ContactFormData, files: FileAttachmen
     `<p><strong>Email:</strong> ${escapeHtml(data.email)}</p>`,
   ]
 
+  if (data.company) fields.push(`<p><strong>Company:</strong> ${escapeHtml(data.company)}</p>`)
   if (data.phone) fields.push(`<p><strong>Phone:</strong> ${escapeHtml(data.phone)}</p>`)
   if (data.service) fields.push(`<p><strong>Service:</strong> ${escapeHtml(data.service)}</p>`)
   if (data.budget) fields.push(`<p><strong>Budget:</strong> ${escapeHtml(data.budget)}</p>`)
@@ -81,6 +112,7 @@ export function getFormDataFromInput(input: Record<string, unknown>): ContactFor
     consent: readInputBoolean(input, 'consent'),
   }
 
+  const company = readInputString(input, 'company')
   const phone = readInputString(input, 'phone')
   const budget = readInputString(input, 'budget')
   const timeline = readInputString(input, 'timeline')
@@ -93,6 +125,7 @@ export function getFormDataFromInput(input: Record<string, unknown>): ContactFor
 
   const dataSubjectId = readInputString(input, 'DataSubjectId')
 
+  if (company) formData.company = company
   if (phone) formData.phone = phone
   if (budget) formData.budget = budget
   // Assertion OK because it is validated by Zod
@@ -106,21 +139,6 @@ export function getFormDataFromInput(input: Record<string, unknown>): ContactFor
 
 export async function parseAttachments(form: FormData): Promise<FileAttachment[]> {
   const files: FileAttachment[] = []
-  const allowedTypes = [
-    'image/jpeg',
-    'image/png',
-    'image/gif',
-    'image/webp',
-    'application/pdf',
-    'application/msword',
-    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-    'audio/mpeg',
-    'audio/wav',
-    'video/mp4',
-    'video/quicktime',
-    'application/zip',
-    'text/plain',
-  ]
   const maxFileSize = 10 * 1024 * 1024
   const maxFiles = 5
 
@@ -137,15 +155,17 @@ export async function parseAttachments(form: FormData): Promise<FileAttachment[]
         throw new ActionsFunctionError(`File ${value.name} exceeds 10MB limit`, { status: 400 })
       }
 
-      if (!allowedTypes.includes(value.type)) {
+      const normalizedType = normalizeMimeType(value.type)
+
+      if (!isAllowedAttachmentType(normalizedType)) {
         throw new ActionsFunctionError(`File type ${value.type} not allowed`, { status: 400 })
       }
 
       const buffer = Buffer.from(await value.arrayBuffer())
       files.push({
         filename: value.name,
         content: buffer,
-        contentType: value.type,
+        contentType: normalizedType,
         size: value.size,
       })
     }
@@ -158,21 +178,6 @@ export async function parseAttachmentsFromInput(
   input: Record<string, unknown>
 ): Promise<FileAttachment[]> {
   const files: FileAttachment[] = []
-  const allowedTypes = [
-    'image/jpeg',
-    'image/png',
-    'image/gif',
-    'image/webp',
-    'application/pdf',
-    'application/msword',
-    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-    'audio/mpeg',
-    'audio/wav',
-    'video/mp4',
-    'video/quicktime',
-    'application/zip',
-    'text/plain',
-  ]
   const maxFileSize = 10 * 1024 * 1024
   const maxFiles = 5
 
@@ -190,15 +195,17 @@ export async function parseAttachmentsFromInput(
       throw new ActionsFunctionError(`File ${value.name} exceeds 10MB limit`, { status: 400 })
     }
 
-    if (!allowedTypes.includes(value.type)) {
+    const normalizedType = normalizeMimeType(value.type)
+
+    if (!isAllowedAttachmentType(normalizedType)) {
       throw new ActionsFunctionError(`File type ${value.type} not allowed`, { status: 400 })
     }
 
     const buffer = Buffer.from(await value.arrayBuffer())
     files.push({
       filename: value.name,
       content: buffer,
-      contentType: value.type,
+      contentType: normalizedType,
       size: value.size,
     })
   }

src/components/Animations/Confetti/client/__tests__/index.spec.ts

@@ -165,14 +165,22 @@ describe('ConfettiAnimationElement', () => {
       element.fire()
 
       expect(confettiCreateMock).toHaveBeenCalledTimes(1)
-      expect(confettiInstanceMock).toHaveBeenCalledTimes(1)
+      expect(confettiInstanceMock).toHaveBeenCalledTimes(2)
 
       const args = confettiInstanceMock.mock.calls[0]?.[0]
       expect(args).toEqual(
         expect.objectContaining({
           particleCount: expect.any(Number),
           spread: expect.any(Number),
           startVelocity: expect.any(Number),
+          shapes: ['star'],
+        })
+      )
+
+      const accentArgs = confettiInstanceMock.mock.calls[1]?.[0]
+      expect(accentArgs).toEqual(
+        expect.objectContaining({
+          shapes: ['circle'],
         })
       )
     })
@@ -220,7 +228,7 @@ describe('ConfettiAnimationElement', () => {
       controllerArgs?.onPlay()
 
       element.fire()
-      expect(confettiInstanceMock).toHaveBeenCalledTimes(1)
+      expect(confettiInstanceMock).toHaveBeenCalledTimes(2)
     })
   })
 
@@ -234,8 +242,9 @@ describe('ConfettiAnimationElement', () => {
         })
       )
 
-      expect(confettiInstanceMock).toHaveBeenCalledTimes(1)
-      expect(confettiInstanceMock).toHaveBeenCalledWith(
+      expect(confettiInstanceMock).toHaveBeenCalledTimes(2)
+      expect(confettiInstanceMock).toHaveBeenNthCalledWith(
+        1,
         expect.objectContaining({ particleCount: 12 })
       )
     })
@@ -272,7 +281,7 @@ describe('ConfettiAnimationElement', () => {
         })
       )
 
-      expect(confettiInstanceMock).toHaveBeenCalledTimes(1)
+      expect(confettiInstanceMock).toHaveBeenCalledTimes(2)
 
       const callArgs = confettiInstanceMock.mock.calls[0]?.[0]
       expect(callArgs).toEqual(expect.objectContaining({ particleCount: 12 }))
@@ -290,13 +299,22 @@ describe('ConfettiAnimationElement', () => {
         shapes: ['star'],
       })
 
-      expect(confettiInstanceMock).toHaveBeenCalledTimes(1)
-      expect(confettiInstanceMock).toHaveBeenCalledWith(
+      expect(confettiInstanceMock).toHaveBeenCalledTimes(2)
+      expect(confettiInstanceMock).toHaveBeenNthCalledWith(
+        1,
         expect.objectContaining({
           colors: ['#bada55', '#ff0000'],
           shapes: ['star'],
         })
       )
+
+      expect(confettiInstanceMock).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({
+          colors: ['#bada55', '#ff0000'],
+          shapes: ['circle'],
+        })
+      )
     })
   })
 })

src/components/Animations/Confetti/client/index.ts

@@ -47,6 +47,21 @@ export type ConfettiFireOptions = {
    */
   startVelocity?: number
 
+  /**
+   * How long each particle should animate for, in frames.
+   */
+  ticks?: number
+
+  /**
+   * Downward acceleration to apply to particles.
+   */
+  gravity?: number
+
+  /**
+   * How quickly particle velocity decays over time.
+   */
+  decay?: number
+
   /**
    * Scale factor for each confetti particle. Use decimals to make the confetti
    * smaller. (default: 1)
@@ -72,6 +87,12 @@ export type ConfettiFireOptions = {
 
 type ConfettiInstance = ReturnType<typeof createConfetti>
 
+const defaultConfettiColors = ['#003d86', '#dc2626', '#facc15']
+
+const toAccentShapes = (shapes: ConfettiShape[]): ConfettiShape[] => {
+  return shapes.includes('star') ? ['circle'] : shapes
+}
+
 export class ConfettiAnimationElement extends LitElement {
   private initialized = false
   private animationController: AnimationControllerHandle | undefined
@@ -175,23 +196,40 @@ export class ConfettiAnimationElement extends LitElement {
 
       const {
         origin,
-        particleCount = 50,
-        spread = 70,
-        startVelocity = 45,
-        scalar = 1,
-        colors,
-        shapes = ['square', 'circle'],
+        particleCount = 40,
+        spread = 360,
+        startVelocity = 30,
+        ticks = 50,
+        gravity = 0,
+        decay = 0.94,
+        scalar = 1.2,
+        colors = defaultConfettiColors,
+        shapes = ['star'],
       } = options
 
-      void this.confettiInstance({
-        particleCount,
+      const baseBurstOptions = {
         spread,
         startVelocity,
-        scalar,
+        ticks,
+        gravity,
+        decay,
         origin,
         colors,
+      }
+
+      void this.confettiInstance({
+        ...baseBurstOptions,
+        particleCount,
+        scalar,
         shapes,
       })
+
+      void this.confettiInstance({
+        ...baseBurstOptions,
+        particleCount: Math.max(10, Math.round(particleCount / 4)),
+        scalar: Math.max(0.75, scalar * 0.625),
+        shapes: toAccentShapes(shapes),
+      })
     } catch (error) {
       handleScriptError(error, context)
     }