Add Summary page

apps/public/src/app/(general)/contact/actions.test.ts

@@ -27,7 +27,7 @@ describe('postContactForm', () => {
     ;(cookies as Mock).mockReturnValue(mockCookies)
   })
 
-  it('should post contact details to backend and redirect to /bedankt page', async () => {
+  it('should post contact details to backend and redirect to /samenvatting page', async () => {
     mockCookies.get.mockImplementation((name) => {
       if (name === 'id') {
         return { value: '21' }
@@ -53,7 +53,7 @@ describe('postContactForm', () => {
       token: 'z123890',
     })
 
-    expect(redirect).toHaveBeenCalledWith('/bedankt')
+    expect(redirect).toHaveBeenCalledWith('/samenvatting')
   })
 
   it('should not do a query when email and phone are left empty', async () => {
@@ -73,7 +73,7 @@ describe('postContactForm', () => {
 
     expect(postMeldingByMeldingIdContact).not.toHaveBeenCalled()
 
-    expect(redirect).toHaveBeenCalledWith('/bedankt')
+    expect(redirect).toHaveBeenCalledWith('/samenvatting')
   })
 
   it('should return undefined when there is no meldingId or token', async () => {

apps/public/src/app/(general)/contact/actions.ts

@@ -1,9 +1,10 @@
 'use server'
 
-import { postMeldingByMeldingIdContact } from '@meldingen/api-client'
 import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
 
+import { postMeldingByMeldingIdContact } from 'apps/public/src/apiClientProxy'
+
 export const postContactForm = async (_: unknown, formData: FormData) => {
   const cookieStore = await cookies()
 
@@ -17,11 +18,11 @@ export const postContactForm = async (_: unknown, formData: FormData) => {
 
   if (email || phone) {
     try {
-      postMeldingByMeldingIdContact({
+      await postMeldingByMeldingIdContact({
         meldingId: parseInt(meldingId, 10),
         requestBody: {
-          email: email as string,
-          phone: phone as string,
+          ...(email && { email: email as string }),
+          ...(phone && { phone: phone as string }),
         },
         token,
       })
@@ -30,5 +31,5 @@ export const postContactForm = async (_: unknown, formData: FormData) => {
     }
   }
 
-  return redirect('/bedankt')
+  return redirect('/samenvatting')
 }

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

@@ -19,7 +19,7 @@ describe('Page', () => {
     render(PageComponent)
 
     expect(screen.getByText('Home Component')).toBeInTheDocument()
-    expect(Home).toHaveBeenCalledWith({ formData: mockFormData.components }, {})
+    expect(Home).toHaveBeenCalledWith({ formData: mockFormData.components[0].components }, {})
   })
 
   it('returns undefined if no primary form is found', async () => {

apps/public/src/app/(general)/samenvatting/Summary.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react'
+import { useActionState } from 'react'
+import type { Mock } from 'vitest'
+import { vi } from 'vitest'
+
+import { Summary } from './Summary'
+
+vi.mock('react', async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...(typeof actual === 'object' ? actual : {}),
+    useActionState: vi.fn().mockReturnValue([{}, vi.fn()]),
+  }
+})
+
+const mockData = [
+  {
+    key: '1',
+    term: 'Term 1',
+    description: ['Description 1'],
+  },
+  {
+    key: '2',
+    term: 'Term 2',
+    description: ['Description 2'],
+  },
+]
+
+describe('Summary', () => {
+  it('renders the Summary component with data', () => {
+    render(<Summary data={mockData} />)
+
+    const terms = screen.getAllByRole('term')
+    const definitions = screen.getAllByRole('definition')
+
+    expect(terms[0]).toHaveTextContent('Term 1')
+    expect(terms[1]).toHaveTextContent('Term 2')
+    expect(definitions[0]).toHaveTextContent('Description 1')
+    expect(definitions[1]).toHaveTextContent('Description 2')
+  })
+
+  it('renders the Summary component with an error message', () => {
+    ;(useActionState as Mock).mockReturnValue([{ message: 'Test error message' }, vi.fn()])
+
+    render(<Summary data={mockData} />)
+
+    expect(screen.queryByText('Test error message')).toBeInTheDocument()
+  })
+})

apps/public/src/app/(general)/samenvatting/Summary.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { Grid, Heading, Paragraph } from '@amsterdam/design-system-react'
+import { SubmitButton, SummaryList } from '@meldingen/ui'
+import { useActionState } from 'react'
+
+import { BackLink } from '../_components/BackLink'
+
+import { postSummaryForm } from './actions'
+
+type Props = {
+  data: {
+    key: string
+    term: string
+    description: string[]
+  }[]
+}
+
+const initialState: { message?: string } = {}
+
+export const Summary = ({ data }: Props) => {
+  const [formState, formAction] = useActionState(postSummaryForm, initialState)
+
+  return (
+    <Grid paddingBottom="large" paddingTop="medium">
+      <Grid.Cell span={{ narrow: 4, medium: 6, wide: 6 }} start={{ narrow: 1, medium: 2, wide: 3 }}>
+        <BackLink href="/contact" className="ams-mb--xs">
+          Vorige vraag
+        </BackLink>
+        <Heading className="ams-mb--sm">Samenvatting</Heading>
+
+        <Heading level={2} size="level-4" className="ams-mb--xs">
+          Versturen
+        </Heading>
+        <Paragraph className="ams-mb--sm">Controleer uw gegevens en verstuur uw melding.</Paragraph>
+
+        {formState?.message && <Paragraph>{formState.message}</Paragraph>}
+
+        <SummaryList className="ams-mb--sm">
+          {data.map(({ key, term, description }) => (
+            <SummaryList.Item key={key}>
+              <SummaryList.Term>{term}</SummaryList.Term>
+              {description.map((item) => (
+                <SummaryList.Description key={item}>{item}</SummaryList.Description>
+              ))}
+            </SummaryList.Item>
+          ))}
+        </SummaryList>
+        <form action={formAction}>
+          <SubmitButton>Verstuur melding</SubmitButton>
+        </form>
+      </Grid.Cell>
+    </Grid>
+  )
+}

apps/public/src/app/(general)/samenvatting/_utils/getSummaryData.ts

@@ -0,0 +1,46 @@
+import type { GetMeldingByMeldingIdAnswersResponse, MeldingOutput } from '@meldingen/api-client'
+
+import type { Coordinates } from 'apps/public/src/types'
+
+type Props = {
+  melding: MeldingOutput
+  primaryFormLabel: string
+  additionalQuestionsAnswers: GetMeldingByMeldingIdAnswersResponse
+  location?: {
+    name: string
+    coordinates: Coordinates
+  }
+}
+
+export const getSummaryData = ({ melding, primaryFormLabel, additionalQuestionsAnswers, location }: Props) => {
+  const primaryFormSummary = {
+    key: 'primary',
+    term: primaryFormLabel,
+    description: [melding.text],
+  }
+
+  const additionalQuestionsSummary = additionalQuestionsAnswers.map((answer) => ({
+    key: `${answer.question.id}`,
+    term: answer.question.text,
+    description: [answer.text],
+  }))
+
+  const locationSummary = {
+    key: 'location',
+    term: 'Waar is het?',
+    description: [location?.name].filter((item) => item !== undefined), // Filter out undefined items,
+  }
+
+  const contactSummary = {
+    key: 'contact',
+    term: 'Wat zijn uw contactgegevens?',
+    description: [melding.email, melding.phone].filter((item) => item !== undefined && item !== null), // Filter out undefined or null items
+  }
+
+  return [
+    melding.text ? primaryFormSummary : undefined,
+    ...additionalQuestionsSummary,
+    location?.name ? locationSummary : undefined,
+    melding.email || melding.phone ? contactSummary : undefined,
+  ].filter((item) => item !== undefined) // Filter out undefined items
+}

apps/public/src/app/(general)/samenvatting/actions.test.tsx

@@ -0,0 +1,53 @@
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+import type { Mock } from 'vitest'
+import { vi } from 'vitest'
+
+import { postSummaryForm } from './actions'
+
+vi.mock('next/headers', () => ({
+  cookies: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  redirect: vi.fn(),
+}))
+
+describe('postSummaryForm', () => {
+  const mockCookies = {
+    get: vi.fn(),
+    delete: vi.fn(),
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    ;(cookies as Mock).mockReturnValue(mockCookies)
+  })
+
+  it('returns undefined if meldingId or token is missing', async () => {
+    mockCookies.get.mockReturnValue(undefined)
+
+    const result = await postSummaryForm()
+
+    expect(result).toBeUndefined()
+  })
+
+  it('deletes location, token, and lastPanelPath cookies and redirects to /bedankt', async () => {
+    mockCookies.get.mockImplementation((name) => {
+      if (name === 'id') {
+        return { value: '123' }
+      }
+      if (name === 'token') {
+        return { value: 'test-token' }
+      }
+      return undefined
+    })
+
+    await postSummaryForm()
+
+    expect(mockCookies.delete).toHaveBeenCalledWith('location')
+    expect(mockCookies.delete).toHaveBeenCalledWith('token')
+    expect(mockCookies.delete).toHaveBeenCalledWith('lastPanelPath')
+    expect(redirect).toHaveBeenCalledWith('/bedankt')
+  })
+})

apps/public/src/app/(general)/samenvatting/actions.ts

@@ -0,0 +1,29 @@
+'use server'
+
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+// import { putMeldingByMeldingIdSubmit } from 'apps/public/src/apiClientProxy'
+
+export const postSummaryForm = async () => {
+  const cookieStore = await cookies()
+
+  const meldingId = cookieStore.get('id')?.value
+  const token = cookieStore.get('token')?.value
+
+  if (!meldingId || !token) return undefined
+
+  try {
+    // TODO: currently doesn't work because we haven't handled the previous state transitions yet. See SIG-6402
+    // await putMeldingByMeldingIdSubmit({ meldingId: parseInt(meldingId, 10), token })
+  } catch (error) {
+    return { message: (error as Error).message }
+  }
+
+  // Delete location, token and lastPanelpath cookies
+  ;['location', 'token', 'lastPanelPath'].forEach((cookie) => {
+    cookieStore.delete(cookie)
+  })
+
+  return redirect('/bedankt')
+}