Translate page components to English

apps/public/src/app/(general)/aanvullende-vragen/[classification]/[panelId]/AanvullendeVragen.test.tsx → apps/public/src/app/(general)/aanvullende-vragen/[classification]/[panelId]/AdditionalQuestions.test.tsx

@@ -4,7 +4,7 @@ import type { Mock } from 'vitest'
 
 import mockFormData from 'apps/public/src/mocks/mockFormData.json'
 
-import { AanvullendeVragen } from './AanvullendeVragen'
+import { AdditionalQuestions } from './AdditionalQuestions'
 
 vi.mock('react', async (importOriginal) => {
   const actual = await importOriginal()
@@ -14,25 +14,23 @@ vi.mock('react', async (importOriginal) => {
   }
 })
 
-describe('AanvullendeVragen', () => {
-  it('renders a heading', () => {
-    const action = vi.fn()
+const defaultProps = {
+  action: vi.fn(),
+  formData: mockFormData.components[0].components,
+  previousPanelPath: '/prev',
+}
 
-    render(
-      <AanvullendeVragen action={action} formData={mockFormData.components[0].components} previousPanelPath="/prev" />,
-    )
+describe('AdditionalQuestions', () => {
+  it('renders a heading', () => {
+    render(<AdditionalQuestions {...defaultProps} />)
 
     const heading = screen.getByRole('heading', { name: 'Beschrijf uw melding' })
 
     expect(heading).toBeInTheDocument()
   })
 
   it('renders form data', () => {
-    const action = vi.fn()
-
-    render(
-      <AanvullendeVragen action={action} formData={mockFormData.components[0].components} previousPanelPath="/prev" />,
-    )
+    render(<AdditionalQuestions {...defaultProps} />)
 
     const question = screen.getByRole('textbox', { name: /First question/ })
 
@@ -42,11 +40,7 @@ describe('AanvullendeVragen', () => {
   it('should render an error message', () => {
     ;(useActionState as Mock).mockReturnValue([{ message: 'Test error message' }, vi.fn()])
 
-    const action = vi.fn()
-
-    render(
-      <AanvullendeVragen action={action} formData={mockFormData.components[0].components} previousPanelPath="/prev" />,
-    )
+    render(<AdditionalQuestions {...defaultProps} />)
 
     expect(screen.queryByText('Test error message')).toBeInTheDocument()
   })

apps/public/src/app/(general)/aanvullende-vragen/[classification]/[panelId]/AanvullendeVragen.tsx → apps/public/src/app/(general)/aanvullende-vragen/[classification]/[panelId]/AdditionalQuestions.tsx

@@ -15,7 +15,7 @@ type Props = {
 
 const initialState: { message?: string } = {}
 
-export const AanvullendeVragen = ({ action, formData, previousPanelPath }: Props) => {
+export const AdditionalQuestions = ({ action, formData, previousPanelPath }: Props) => {
   const [formState, formAction] = useActionState(action, initialState)
 
   return (

apps/public/src/app/(general)/aanvullende-vragen/[classification]/[panelId]/page.tsx

@@ -3,8 +3,8 @@ import type { Metadata } from 'next'
 
 import { getFormClassificationByClassificationId } from 'apps/public/src/apiClientProxy'
 
-import { AanvullendeVragen } from './AanvullendeVragen'
 import { postForm } from './actions'
+import { AdditionalQuestions } from './AdditionalQuestions'
 
 // TODO: pagina's die niet bestaan moeten redirect krijgen
 // TODO: pagina's die wel bestaan maar geen token in url param moeten redirect krijgen
@@ -99,6 +99,10 @@ export default async ({ params }: { params: Params }) => {
   const previousPanelPath = getPreviousPanelPath(classification, currentPanelIndex, formData)
 
   return (
-    <AanvullendeVragen action={postFormWithExtraArgs} formData={panelQuestions} previousPanelPath={previousPanelPath} />
+    <AdditionalQuestions
+      action={postFormWithExtraArgs}
+      formData={panelQuestions}
+      previousPanelPath={previousPanelPath}
+    />
   )
 }

apps/public/src/app/(general)/bedankt/Bedankt.test.tsx → apps/public/src/app/(general)/bedankt/Thanks.test.tsx

@@ -1,10 +1,10 @@
 import { render, screen } from '@testing-library/react'
 
-import { Bedankt } from './Bedankt'
+import { Thanks } from './Thanks'
 
-describe('Bedankt', () => {
+describe('Thanks', () => {
   it('should render meldingId and Doe een melding-link', () => {
-    render(<Bedankt meldingId="1" />)
+    render(<Thanks meldingId="1" />)
 
     const paragraph = screen.getByText('Wij hebben uw melding ontvangen op 21-11-2023 om 17:11. Uw meldnummer is 1.')
     const link = screen.getByRole('link', { name: 'Doe een melding' })

apps/public/src/app/(general)/bedankt/Bedankt.tsx → apps/public/src/app/(general)/bedankt/Thanks.tsx

@@ -8,7 +8,7 @@ type Props = {
   meldingId: string
 }
 
-export const Bedankt = ({ meldingId }: Props) => (
+export const Thanks = ({ meldingId }: Props) => (
   <Grid paddingBottom="large" paddingTop="medium">
     <Grid.Cell span={{ narrow: 4, medium: 6, wide: 6 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
       <Heading className="ams-mb--xs">Bedankt</Heading>

apps/public/src/app/(general)/bedankt/page.test.tsx

@@ -13,8 +13,8 @@ vi.mock('next/navigation', () => ({
   redirect: vi.fn(),
 }))
 
-vi.mock('./Bedankt', () => ({
-  Bedankt: vi.fn(() => <div>Bedankt Component</div>),
+vi.mock('./Thanks', () => ({
+  Thanks: vi.fn(() => <div>Thanks Component</div>),
 }))
 
 describe('Page', () => {
@@ -37,14 +37,14 @@ describe('Page', () => {
     expect(PageComponent).toBeUndefined()
   })
 
-  it('renders bedankt page', async () => {
+  it('renders Thanks page', async () => {
     mockCookies.get.mockReturnValue({ value: '1234' })
 
     const PageComponent = await Page()
 
     render(PageComponent)
 
     expect(redirect).not.toHaveBeenCalledWith('/')
-    expect(screen.getByText('Bedankt Component')).toBeInTheDocument()
+    expect(screen.getByText('Thanks Component')).toBeInTheDocument()
   })
 })

apps/public/src/app/(general)/bedankt/page.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next'
 import { cookies } from 'next/headers'
 
-import { Bedankt } from './Bedankt'
+import { Thanks } from './Thanks'
 
 export const metadata: Metadata = {
   title: 'Bedankt - Gemeente Amsterdam',
@@ -14,5 +14,5 @@ export default async () => {
 
   if (!meldingId) return undefined
 
-  return <Bedankt meldingId={meldingId} />
+  return <Thanks meldingId={meldingId} />
 }

apps/public/src/app/(general)/locatie/Locatie.test.tsx → apps/public/src/app/(general)/locatie/Location.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 import { useActionState } from 'react'
 import type { Mock } from 'vitest'
 
-import { Locatie } from './Locatie'
+import { Location } from './Location'
 
 vi.mock('react', async (importOriginal) => {
   const actual = await importOriginal()
@@ -12,22 +12,26 @@ vi.mock('react', async (importOriginal) => {
   }
 })
 
+const defaultProps = {
+  prevPage: '/previous',
+}
+
 describe('Locatie', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     ;(useActionState as Mock).mockReturnValue([{}, vi.fn()])
   })
 
   it('renders', () => {
-    render(<Locatie prevPage="/previous" />)
+    render(<Location {...defaultProps} />)
 
     const heading = screen.getByRole('heading', { name: 'Locatie' })
 
     expect(heading).toBeInTheDocument()
   })
 
   it('renders the correct backlink', () => {
-    render(<Locatie prevPage="/previous" />)
+    render(<Location {...defaultProps} />)
 
     const backLink = screen.getByRole('link', { name: 'Vorige vraag' })
 
@@ -36,7 +40,7 @@ describe('Locatie', () => {
   })
 
   it('does not render an error message when there is none', () => {
-    render(<Locatie prevPage="/previous" />)
+    render(<Location {...defaultProps} />)
 
     const errorMessage = screen.queryByText('Test error message')
 
@@ -46,38 +50,38 @@ describe('Locatie', () => {
   it('renders an error message when there is one', () => {
     ;(useActionState as Mock).mockReturnValue([{ message: 'Test error message' }, vi.fn()])
 
-    render(<Locatie prevPage="/previous" />)
+    render(<Location {...defaultProps} />)
     const errorMessage = screen.getByText('Test error message')
 
     expect(errorMessage).toBeInTheDocument()
   })
 
   it('renders the default text when there is no location data', () => {
-    render(<Locatie prevPage="/previous" />)
+    render(<Location {...defaultProps} />)
 
     const paragraph = screen.getByText('In het volgende scherm kunt u op de kaart een adres of container opzoeken.')
 
     expect(paragraph).toBeInTheDocument()
   })
 
   it('renders the location data name when it is provided', () => {
-    render(<Locatie prevPage="/previous" locationData={{ name: 'Test location' }} />)
+    render(<Location {...defaultProps} locationData={{ name: 'Test location' }} />)
 
     const paragraph = screen.getByText('Test location')
 
     expect(paragraph).toBeInTheDocument()
   })
 
   it('renders a link with the default text when there is no location data', () => {
-    render(<Locatie prevPage="/previous" />)
+    render(<Location {...defaultProps} />)
 
     const link = screen.getByRole('link', { name: 'Selecteer de locatie' })
 
     expect(link).toBeInTheDocument()
   })
 
   it('renders a link with updated text when there is location data', () => {
-    render(<Locatie prevPage="/previous" locationData={{ name: 'Test location' }} />)
+    render(<Location {...defaultProps} locationData={{ name: 'Test location' }} />)
 
     const link = screen.getByRole('link', { name: 'Wijzig locatie' })
 

apps/public/src/app/(general)/locatie/Locatie.tsx → apps/public/src/app/(general)/locatie/Location.tsx

@@ -21,7 +21,7 @@ type Props = {
   }
 }
 
-export const Locatie = ({ prevPage, locationData }: Props) => {
+export const Location = ({ prevPage, locationData }: Props) => {
   const [formState, formAction] = useActionState(postLocationForm, initialState)
 
   return (

apps/public/src/app/(general)/locatie/page.test.tsx

@@ -2,15 +2,15 @@ import { render, screen } from '@testing-library/react'
 import { cookies } from 'next/headers'
 import type { Mock } from 'vitest'
 
-import { Locatie } from './Locatie'
+import { Location } from './Location'
 import Page from './page'
 
 vi.mock('next/headers', () => ({
   cookies: vi.fn(),
 }))
 
-vi.mock('./Locatie', () => ({
-  Locatie: vi.fn(() => <div>Locatie Component</div>),
+vi.mock('./Location', () => ({
+  Location: vi.fn(() => <div>Location Component</div>),
 }))
 
 describe('Page', () => {
@@ -23,18 +23,18 @@ describe('Page', () => {
     ;(cookies as Mock).mockReturnValue(mockCookies)
   })
 
-  it('renders Locatie component with default props when cookies are not set', async () => {
+  it('renders Location component with default props when cookies are not set', async () => {
     mockCookies.get.mockReturnValue(undefined)
 
     const PageComponent = await Page()
 
     render(PageComponent)
 
-    expect(screen.getByText('Locatie Component')).toBeInTheDocument()
-    expect(Locatie).toHaveBeenCalledWith({ prevPage: '/', locationData: undefined }, {})
+    expect(screen.getByText('Location Component')).toBeInTheDocument()
+    expect(Location).toHaveBeenCalledWith({ prevPage: '/', locationData: undefined }, {})
   })
 
-  it('renders Locatie component with props from cookies', async () => {
+  it('renders Location component with props from cookies', async () => {
     mockCookies.get.mockImplementation((name) => {
       if (name === 'lastPanelPath') {
         return { value: '/previous' }
@@ -49,7 +49,10 @@ describe('Page', () => {
 
     render(PageComponent)
 
-    expect(screen.getByText('Locatie Component')).toBeInTheDocument()
-    expect(Locatie).toHaveBeenCalledWith({ prevPage: '/previous', locationData: { lat: 52.370216, lng: 4.895168 } }, {})
+    expect(screen.getByText('Location Component')).toBeInTheDocument()
+    expect(Location).toHaveBeenCalledWith(
+      { prevPage: '/previous', locationData: { lat: 52.370216, lng: 4.895168 } },
+      {},
+    )
   })
 })

apps/public/src/app/(general)/locatie/page.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next'
 import { cookies } from 'next/headers'
 
-import { Locatie } from './Locatie'
+import { Location } from './Location'
 
 export const metadata: Metadata = {
   title: 'Stap 1 van 4 - Beschrijf uw melding - Gemeente Amsterdam',
@@ -13,6 +13,9 @@ export default async () => {
   const locationData = cookieStore.get('location')
 
   return (
-    <Locatie prevPage={prevPage ? prevPage.value : '/'} locationData={locationData && JSON.parse(locationData.value)} />
+    <Location
+      prevPage={prevPage ? prevPage.value : '/'}
+      locationData={locationData && JSON.parse(locationData.value)}
+    />
   )
 }

apps/public/src/app/(map)/locatie/kies/KiesLocatie.test.tsx → apps/public/src/app/(map)/locatie/kies/SelectLocation.test.tsx

@@ -1,6 +1,6 @@
 import { screen, render, waitFor } from '@testing-library/react'
 
-import { KiesLocatie } from './KiesLocatie'
+import { SelectLocation } from './SelectLocation'
 
 vi.mock('react', async (importOriginal) => {
   const actual = await importOriginal()
@@ -10,9 +10,9 @@ vi.mock('react', async (importOriginal) => {
   }
 })
 
-describe('KiesLocatie', () => {
+describe('SelectLocation', () => {
   it('should render', () => {
-    const { container } = render(<KiesLocatie />)
+    const { container } = render(<SelectLocation />)
 
     const outerWrapper = container.querySelector('div')
 

apps/public/src/app/(map)/locatie/kies/KiesLocatie.tsx → apps/public/src/app/(map)/locatie/kies/SelectLocation.tsx

@@ -15,7 +15,7 @@ const Map = dynamic(() => import('./_components/Map').then((module) => module.Ma
   ssr: false,
 })
 
-export const KiesLocatie = () => {
+export const SelectLocation = () => {
   const [coordinates, setCoordinates] = useState<Coordinates>()
   const [showAssetList, setShowAssetList] = useState(false)
 

apps/public/src/app/(map)/locatie/kies/page.test.tsx

@@ -2,16 +2,16 @@ import { render, screen } from '@testing-library/react'
 
 import Page from './page'
 
-vi.mock('./KiesLocatie', () => ({
-  KiesLocatie: vi.fn(() => <div>KiesLocatie Component</div>),
+vi.mock('./SelectLocation', () => ({
+  SelectLocation: vi.fn(() => <div>SelectLocation Component</div>),
 }))
 
 describe('Page', () => {
-  it('renders the KiesLocatie component', async () => {
+  it('renders the SelectLocation component', async () => {
     const PageComponent = await Page()
 
     render(PageComponent)
 
-    expect(screen.getByText('KiesLocatie Component')).toBeInTheDocument()
+    expect(screen.getByText('SelectLocation Component')).toBeInTheDocument()
   })
 })

apps/public/src/app/(map)/locatie/kies/page.tsx

@@ -1,9 +1,9 @@
 import type { Metadata } from 'next'
 
-import { KiesLocatie } from './KiesLocatie'
+import { SelectLocation } from './SelectLocation'
 
 export const metadata: Metadata = {
   title: 'Stap 1 van 4 - Beschrijf uw melding - Gemeente Amsterdam',
 }
 
-export default async () => <KiesLocatie />
+export default async () => <SelectLocation />