diff --git a/lib/PortingEmbed/Options.tsx b/lib/PortingEmbed/Options.tsx index b558647..02acf8b 100644 --- a/lib/PortingEmbed/Options.tsx +++ b/lib/PortingEmbed/Options.tsx @@ -8,6 +8,8 @@ type FieldState = { valid: boolean } +export const defaultFormId = 'gigsPortingEmbedForm' + export type EmbedOptions = { formId?: string className?: { diff --git a/lib/PortingEmbed/StepAddressForm.tsx b/lib/PortingEmbed/StepAddressForm.tsx index d83c368..435f0ff 100644 --- a/lib/PortingEmbed/StepAddressForm.tsx +++ b/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({ initialValues: { line1: porting.address?.line1 ?? '', @@ -52,7 +54,7 @@ export function StepAddressForm({ return (
{ // The address form is always submitted as a whole, never partially. diff --git a/lib/PortingEmbed/StepCarrierDetailsForm.tsx b/lib/PortingEmbed/StepCarrierDetailsForm.tsx index 37841b4..34239a7 100644 --- a/lib/PortingEmbed/StepCarrierDetailsForm.tsx +++ b/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({ initialValues: { accountNumber: porting.accountNumber ?? '', @@ -38,7 +40,7 @@ export function StepCarrierDetailsForm({ return ( { diff --git a/lib/PortingEmbed/StepDonorProviderApprovalForm.tsx b/lib/PortingEmbed/StepDonorProviderApprovalForm.tsx index 8d08aae..363edc2 100644 --- a/lib/PortingEmbed/StepDonorProviderApprovalForm.tsx +++ b/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({ initialValues: { @@ -38,7 +40,7 @@ export function StepDonorProviderApprovalForm({ return ( { diff --git a/lib/PortingEmbed/StepHolderDetailsForm.tsx b/lib/PortingEmbed/StepHolderDetailsForm.tsx index 7c4f04a..421404f 100644 --- a/lib/PortingEmbed/StepHolderDetailsForm.tsx +++ b/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({ initialValues: { firstName: porting.firstName ?? '', @@ -41,7 +43,7 @@ export function StepHolderDetailsForm({ return ( { diff --git a/lib/PortingEmbed/__tests__/StepAddressForm.test.tsx b/lib/PortingEmbed/__tests__/StepAddressForm.test.tsx index d5a34b8..a84cbf5 100644 --- a/lib/PortingEmbed/__tests__/StepAddressForm.test.tsx +++ b/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(, { + wrapper, + }) + expect(screen.getByRole('form')).toHaveAttribute( + 'id', + 'gigsPortingEmbedForm', + ) + }) + + it('uses a custom form id', () => { + const porting = portingFactory.build({ required: ['address'] }) + render( + + + , + { + wrapper, + }, + ) + expect(screen.getByRole('form')).toHaveAttribute('id', 'customFormId') + }) +}) + describe('line1', () => { it('exists', async () => { const porting = portingFactory.build({ required: ['address'] }) diff --git a/lib/PortingEmbed/__tests__/StepCarrierDetailsForm.test.tsx b/lib/PortingEmbed/__tests__/StepCarrierDetailsForm.test.tsx index 0d86f85..4b4a4bd 100644 --- a/lib/PortingEmbed/__tests__/StepCarrierDetailsForm.test.tsx +++ b/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(, { + wrapper, + }) + expect(screen.getByRole('form')).toHaveAttribute( + 'id', + 'gigsPortingEmbedForm', + ) + }) + + it('uses a custom form id', () => { + const porting = portingFactory.build({ required: ['accountNumber'] }) + render( + + + , + { + wrapper, + }, + ) + expect(screen.getByRole('form')).toHaveAttribute('id', 'customFormId') + }) +}) + describe('account number', () => { it('is shown when required', () => { const porting = portingFactory.build({ required: ['accountNumber'] }) diff --git a/lib/PortingEmbed/__tests__/StepDonorProviderApprovalForm.test.tsx b/lib/PortingEmbed/__tests__/StepDonorProviderApprovalForm.test.tsx index b35bf8a..18f948f 100644 --- a/lib/PortingEmbed/__tests__/StepDonorProviderApprovalForm.test.tsx +++ b/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( + , + { + wrapper, + }, + ) + expect(screen.getByRole('form')).toHaveAttribute( + 'id', + 'gigsPortingEmbedForm', + ) + }) + + it('uses a custom form id', () => { + const porting = portingFactory.build({ + required: ['donorProviderApproval'], + }) + render( + + + , + { + wrapper, + }, + ) + expect(screen.getByRole('form')).toHaveAttribute('id', 'customFormId') + }) +}) + it('shows a checkbox', () => { const porting = portingFactory.build({ required: ['donorProviderApproval'] }) render( diff --git a/lib/PortingEmbed/__tests__/StepHolderDetailsForm.test.tsx b/lib/PortingEmbed/__tests__/StepHolderDetailsForm.test.tsx index e8f8001..4cda81c 100644 --- a/lib/PortingEmbed/__tests__/StepHolderDetailsForm.test.tsx +++ b/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(, { + wrapper, + }) + expect(screen.getByRole('form')).toHaveAttribute( + 'id', + 'gigsPortingEmbedForm', + ) + }) + + it('uses a custom form id', () => { + const porting = portingFactory.build({ required: ['firstName'] }) + render( + + + , + { + wrapper, + }, + ) + expect(screen.getByRole('form')).toHaveAttribute('id', 'customFormId') + }) +}) + describe('first name', () => { it('is shown when required', () => { const porting = portingFactory.build({ required: ['firstName'] })