fix(SDK-1143): render account_number metadata.prefix as input adornment

src/components/Common/TaxInputs/TaxInputs.stories.tsx

@@ -0,0 +1,45 @@
+import type { TaxRequirement } from '@gusto/embedded-api/models/components/taxrequirement'
+import { FormWrapper } from '../../../../.storybook/helpers/FormWrapper'
+import { QuestionInput } from './TaxInputs'
+
+export default {
+  title: 'UI/Form/Fields/TaxInputs',
+}
+
+const einSuffixRequirement: TaxRequirement = {
+  key: 'einSuffix',
+  label: 'EIN suffix',
+  description: 'Some tax agencies use an account number that is your federal EIN plus two digits.',
+  value: null,
+  metadata: {
+    type: 'account_number',
+    mask: '##',
+    prefix: 'XXXXX1234',
+  },
+}
+
+const uiaAccountNumberRequirement: TaxRequirement = {
+  key: 'uiaAccountNumber',
+  label: 'UIA Account Number',
+  description: 'No prefix on this requirement -- matches most account_number requirements today.',
+  value: null,
+  metadata: {
+    type: 'account_number',
+    mask: '###-####-#',
+    prefix: null,
+  },
+}
+
+// SDK-1143: account_number requirements with metadata.prefix should render it as a
+// fixed prefix ahead of the masked value, matching Rails' TaxRequirements::InputBuilder.
+export const AccountNumberWithPrefix = () => (
+  <FormWrapper>
+    <QuestionInput requirement={einSuffixRequirement} questionType="account_number" />
+  </FormWrapper>
+)
+
+export const AccountNumberWithoutPrefix = () => (
+  <FormWrapper>
+    <QuestionInput requirement={uiaAccountNumberRequirement} questionType="account_number" />
+  </FormWrapper>
+)

src/components/Common/TaxInputs/TaxInputs.test.tsx

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { FormProvider, useForm } from 'react-hook-form'
+import type { TaxRequirement } from '@gusto/embedded-api/models/components/taxrequirement'
+import { QuestionInput } from './TaxInputs'
+import { GustoTestProvider } from '@/test/GustoTestApiProvider'
+
+function TestForm({ requirement }: { requirement: TaxRequirement }) {
+  const methods = useForm({ defaultValues: { [requirement.key as string]: requirement.value } })
+  return (
+    <GustoTestProvider>
+      <FormProvider {...methods}>
+        <QuestionInput
+          requirement={requirement}
+          questionType={requirement.metadata?.type ?? 'text'}
+        />
+      </FormProvider>
+    </GustoTestProvider>
+  )
+}
+
+describe('TaxInputs', () => {
+  describe('account_number question type', () => {
+    it('renders metadata.prefix as a start adornment ahead of the masked value', () => {
+      render(
+        <TestForm
+          requirement={{
+            key: 'ein',
+            label: 'EIN suffix',
+            value: null,
+            metadata: { type: 'account_number', mask: '##', prefix: 'XXXXX1234' },
+          }}
+        />,
+      )
+
+      expect(screen.getByText('XXXXX1234')).toBeInTheDocument()
+      expect(screen.getByLabelText('EIN suffix')).toHaveAttribute('placeholder', '##')
+    })
+
+    it('renders normally, without a start adornment, when metadata.prefix is null', () => {
+      render(
+        <TestForm
+          requirement={{
+            key: 'ubi',
+            label: 'UBI number',
+            value: null,
+            metadata: { type: 'account_number', mask: '### ### ###', prefix: null },
+          }}
+        />,
+      )
+
+      expect(screen.getByLabelText('UBI number')).toHaveAttribute('placeholder', '### ### ###')
+    })
+  })
+})

src/components/Common/TaxInputs/TaxInputs.tsx

@@ -43,7 +43,7 @@ export function QuestionInput({
     case 'radio':
       return <RadioInput {...props} />
     case 'text':
-    case 'account_number': //TODO: temporary - need special handling for account numbers
+    case 'account_number':
       return <TextInput {...props} />
     case 'select':
       return <SelectInput {...props} />
@@ -105,6 +105,7 @@ export function TextInput({
   const { key, label, description } = question ? question : requirement
   const value = question ? question.answers[0]?.value : requirement.value
   const mask = requirement?.metadata?.mask ?? null
+  const prefix = requirement?.metadata?.prefix ?? undefined
   const transform = useMaskedTransform(mask)
 
   if (!key) return null
@@ -120,6 +121,7 @@ export function TextInput({
       transform={mask ? transform : undefined}
       placeholder={mask ? mask : undefined}
       type={type}
+      adornmentStart={prefix}
       adornmentEnd={isPercent ? '%' : undefined}
     />
   )