Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Summary page #727

Merged
merged 23 commits into from
Feb 20, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions apps/public/src/app/(general)/contact/actions.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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' }
Expand All @@ -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 () => {
Expand All @@ -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 () => {
Expand Down
11 changes: 6 additions & 5 deletions apps/public/src/app/(general)/contact/actions.ts
Original file line number Diff line number Diff line change
@@ -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()

Expand All @@ -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,
})
Expand All @@ -30,5 +31,5 @@ export const postContactForm = async (_: unknown, formData: FormData) => {
}
}

return redirect('/bedankt')
return redirect('/samenvatting')
}
2 changes: 1 addition & 1 deletion apps/public/src/app/(general)/page.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
49 changes: 49 additions & 0 deletions apps/public/src/app/(general)/samenvatting/Summary.test.tsx
Original file line number Diff line number Diff line change
@@ -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()
})
})
55 changes: 55 additions & 0 deletions apps/public/src/app/(general)/samenvatting/Summary.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
Original file line number Diff line number Diff line change
@@ -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
}
53 changes: 53 additions & 0 deletions apps/public/src/app/(general)/samenvatting/actions.test.tsx
Original file line number Diff line number Diff line change
@@ -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')
})
})
29 changes: 29 additions & 0 deletions apps/public/src/app/(general)/samenvatting/actions.ts
Original file line number Diff line number Diff line change
@@ -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')
}
Loading