Add ability to use custom formId

lib/PortingEmbed/Options.tsx

@@ -8,6 +8,8 @@ type FieldState = {
   valid: boolean
 }
 
+export const defaultFormId = 'gigsPortingEmbedForm'
+
 export type EmbedOptions = {
   formId?: string
   className?: {

lib/PortingEmbed/StepAddressForm.tsx

@@ -12,6 +12,7 @@ import { EmbedField } from './EmbedField'
 import { EmbedFieldError } from './EmbedFieldError'
 import { EmbedFieldInput } from './EmbedFieldInput'
 import { EmbedFieldLabel } from './EmbedFieldLabel'
+import { defaultFormId, useEmbedOptions } from './Options'
 
 export type StepAddressFormData = {
   line1: string
@@ -33,6 +34,7 @@ export function StepAddressForm({
   onValidationChange,
   onSubmit,
 }: Props) {
+  const options = useEmbedOptions()
   const [portingForm, { Form, Field }] = useForm<StepAddressFormData>({
     initialValues: {
       line1: porting.address?.line1 ?? '',
@@ -52,7 +54,7 @@ export function StepAddressForm({
 
   return (
     <Form
-      id="gigsPortingEmbedForm" // TODO: make customizable
+      id={options.formId || defaultFormId}
       role="form"
       onSubmit={(data) => {
         // The address form is always submitted as a whole, never partially.

lib/PortingEmbed/StepCarrierDetailsForm.tsx

@@ -6,6 +6,7 @@ import { EmbedField } from './EmbedField'
 import { EmbedFieldError } from './EmbedFieldError'
 import { EmbedFieldInput } from './EmbedFieldInput'
 import { EmbedFieldLabel } from './EmbedFieldLabel'
+import { defaultFormId, useEmbedOptions } from './Options'
 import { sanitizeSubmitData } from './sanitizeSubmitData'
 
 export type StepCarrierDetailsFormData = {
@@ -24,6 +25,7 @@ export function StepCarrierDetailsForm({
   onValidationChange,
   onSubmit,
 }: Props) {
+  const options = useEmbedOptions()
   const [form, { Form, Field }] = useForm<StepCarrierDetailsFormData>({
     initialValues: {
       accountNumber: porting.accountNumber ?? '',
@@ -38,7 +40,7 @@ export function StepCarrierDetailsForm({
 
   return (
     <Form
-      id="gigsPortingEmbedForm" // TODO: make customizable
+      id={options.formId || defaultFormId}
       role="form"
       shouldDirty // only include changed fields in the onSubmit handler
       onSubmit={(data) => {

lib/PortingEmbed/StepDonorProviderApprovalForm.tsx

@@ -6,6 +6,7 @@ import { EmbedField } from './EmbedField'
 import { EmbedFieldError } from './EmbedFieldError'
 import { EmbedFieldInput } from './EmbedFieldInput'
 import { EmbedFieldLabel } from './EmbedFieldLabel'
+import { defaultFormId, useEmbedOptions } from './Options'
 import { sanitizeSubmitData } from './sanitizeSubmitData'
 
 export type StepDonorProviderApprovalFormData = {
@@ -23,6 +24,7 @@ export function StepDonorProviderApprovalForm({
   onValidationChange,
   onSubmit,
 }: Props) {
+  const options = useEmbedOptions()
   const [portingForm, { Form, Field }] =
     useForm<StepDonorProviderApprovalFormData>({
       initialValues: {
@@ -38,7 +40,7 @@ export function StepDonorProviderApprovalForm({
 
   return (
     <Form
-      id="gigsPortingEmbedForm" // TODO: make customizable
+      id={options.formId || defaultFormId}
       role="form"
       shouldActive={false}
       onSubmit={async (data) => {

lib/PortingEmbed/StepHolderDetailsForm.tsx

@@ -6,6 +6,7 @@ import { EmbedField } from './EmbedField'
 import { EmbedFieldError } from './EmbedFieldError'
 import { EmbedFieldInput } from './EmbedFieldInput'
 import { EmbedFieldLabel } from './EmbedFieldLabel'
+import { defaultFormId, useEmbedOptions } from './Options'
 import { sanitizeSubmitData } from './sanitizeSubmitData'
 
 export type StepHolderDetailsFormData = {
@@ -25,6 +26,7 @@ export function StepHolderDetailsForm({
   onValidationChange,
   onSubmit,
 }: Props) {
+  const options = useEmbedOptions()
   const [portingForm, { Form, Field }] = useForm<StepHolderDetailsFormData>({
     initialValues: {
       firstName: porting.firstName ?? '',
@@ -41,7 +43,7 @@ export function StepHolderDetailsForm({
 
   return (
     <Form
-      id="gigsPortingEmbedForm" // TODO: make customizable
+      id={options.formId || defaultFormId}
       role="form"
       shouldDirty // only include changed fields in the onSubmit handler
       onSubmit={(data) => {

lib/PortingEmbed/__tests__/StepAddressForm.test.tsx

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event'
 
 import { portingFactory } from '@/testing/factories/porting'
 
+import { OptionsContext } from '../Options'
 import { StepAddressForm } from '../StepAddressForm'
 
 const wrapper = ({ children }: { children: React.ReactNode }) => {
@@ -23,6 +24,32 @@ const address = {
   country: 'CO',
 }
 
+describe('form id', () => {
+  it('has the default form id', () => {
+    const porting = portingFactory.build({ required: ['address'] })
+    render(<StepAddressForm porting={porting} onSubmit={vi.fn()} />, {
+      wrapper,
+    })
+    expect(screen.getByRole('form')).toHaveAttribute(
+      'id',
+      'gigsPortingEmbedForm',
+    )
+  })
+
+  it('uses a custom form id', () => {
+    const porting = portingFactory.build({ required: ['address'] })
+    render(
+      <OptionsContext.Provider value={{ formId: 'customFormId' }}>
+        <StepAddressForm porting={porting} onSubmit={vi.fn()} />
+      </OptionsContext.Provider>,
+      {
+        wrapper,
+      },
+    )
+    expect(screen.getByRole('form')).toHaveAttribute('id', 'customFormId')
+  })
+})
+
 describe('line1', () => {
   it('exists', async () => {
     const porting = portingFactory.build({ required: ['address'] })

lib/PortingEmbed/__tests__/StepCarrierDetailsForm.test.tsx

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event'
 
 import { portingFactory } from '@/testing/factories/porting'
 
+import { OptionsContext } from '../Options'
 import { StepCarrierDetailsForm } from '../StepCarrierDetailsForm'
 
 const wrapper = ({ children }: { children: React.ReactNode }) => {
@@ -14,6 +15,32 @@ const wrapper = ({ children }: { children: React.ReactNode }) => {
   )
 }
 
+describe('form id', () => {
+  it('has the default form id', () => {
+    const porting = portingFactory.build({ required: ['accountNumber'] })
+    render(<StepCarrierDetailsForm porting={porting} onSubmit={vi.fn()} />, {
+      wrapper,
+    })
+    expect(screen.getByRole('form')).toHaveAttribute(
+      'id',
+      'gigsPortingEmbedForm',
+    )
+  })
+
+  it('uses a custom form id', () => {
+    const porting = portingFactory.build({ required: ['accountNumber'] })
+    render(
+      <OptionsContext.Provider value={{ formId: 'customFormId' }}>
+        <StepCarrierDetailsForm porting={porting} onSubmit={vi.fn()} />
+      </OptionsContext.Provider>,
+      {
+        wrapper,
+      },
+    )
+    expect(screen.getByRole('form')).toHaveAttribute('id', 'customFormId')
+  })
+})
+
 describe('account number', () => {
   it('is shown when required', () => {
     const porting = portingFactory.build({ required: ['accountNumber'] })

lib/PortingEmbed/__tests__/StepDonorProviderApprovalForm.test.tsx

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event'
 
 import { portingFactory } from '@/testing/factories/porting'
 
+import { OptionsContext } from '../Options'
 import { StepDonorProviderApprovalForm } from '../StepDonorProviderApprovalForm'
 
 const wrapper = ({ children }: { children: React.ReactNode }) => {
@@ -14,6 +15,39 @@ const wrapper = ({ children }: { children: React.ReactNode }) => {
   )
 }
 
+describe('form id', () => {
+  it('has the default form id', () => {
+    const porting = portingFactory.build({
+      required: ['donorProviderApproval'],
+    })
+    render(
+      <StepDonorProviderApprovalForm porting={porting} onSubmit={vi.fn()} />,
+      {
+        wrapper,
+      },
+    )
+    expect(screen.getByRole('form')).toHaveAttribute(
+      'id',
+      'gigsPortingEmbedForm',
+    )
+  })
+
+  it('uses a custom form id', () => {
+    const porting = portingFactory.build({
+      required: ['donorProviderApproval'],
+    })
+    render(
+      <OptionsContext.Provider value={{ formId: 'customFormId' }}>
+        <StepDonorProviderApprovalForm porting={porting} onSubmit={vi.fn()} />
+      </OptionsContext.Provider>,
+      {
+        wrapper,
+      },
+    )
+    expect(screen.getByRole('form')).toHaveAttribute('id', 'customFormId')
+  })
+})
+
 it('shows a checkbox', () => {
   const porting = portingFactory.build({ required: ['donorProviderApproval'] })
   render(

lib/PortingEmbed/__tests__/StepHolderDetailsForm.test.tsx

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event'
 
 import { portingFactory } from '@/testing/factories/porting'
 
+import { OptionsContext } from '../Options'
 import { StepHolderDetailsForm } from '../StepHolderDetailsForm'
 
 const wrapper = ({ children }: { children: React.ReactNode }) => {
@@ -14,6 +15,32 @@ const wrapper = ({ children }: { children: React.ReactNode }) => {
   )
 }
 
+describe('form id', () => {
+  it('has the default form id', () => {
+    const porting = portingFactory.build({ required: ['firstName'] })
+    render(<StepHolderDetailsForm porting={porting} onSubmit={vi.fn()} />, {
+      wrapper,
+    })
+    expect(screen.getByRole('form')).toHaveAttribute(
+      'id',
+      'gigsPortingEmbedForm',
+    )
+  })
+
+  it('uses a custom form id', () => {
+    const porting = portingFactory.build({ required: ['firstName'] })
+    render(
+      <OptionsContext.Provider value={{ formId: 'customFormId' }}>
+        <StepHolderDetailsForm porting={porting} onSubmit={vi.fn()} />
+      </OptionsContext.Provider>,
+      {
+        wrapper,
+      },
+    )
+    expect(screen.getByRole('form')).toHaveAttribute('id', 'customFormId')
+  })
+})
+
 describe('first name', () => {
   it('is shown when required', () => {
     const porting = portingFactory.build({ required: ['firstName'] })