[feat-6155]: Change reaction asked notification

src/signals/incident/components/ReplyForm/Notice/Notice.tsx

@@ -1,12 +1,7 @@
 // SPDX-License-Identifier: MPL-2.0
 // Copyright (C) 2021 - 2022 Gemeente Amsterdam, Vereniging van Nederlandse Gemeenten
-import {
-  Column,
-  Heading,
-  Paragraph,
-  Row,
-  themeSpacing,
-} from '@amsterdam/asc-ui'
+import { Column, Heading, Row, themeSpacing } from '@amsterdam/asc-ui'
+import ReactMarkdown from 'react-markdown'
 import styled from 'styled-components'
 
 const StyledHeading = styled(Heading)`
@@ -16,18 +11,28 @@ const StyledHeading = styled(Heading)`
 
 interface NoticeProps {
   title: string
-  content: string
+  content: string | string[]
 }
 
-const Notice = ({ content, title }: NoticeProps) => (
-  <Row>
-    <Column span={12}>
-      <div>
-        <StyledHeading>{title}</StyledHeading>
-        <Paragraph>{content}</Paragraph>
-      </div>
-    </Column>
-  </Row>
-)
+const Notice = ({ content, title }: NoticeProps) => {
+  const contentArray = Array.isArray(content) ? content : [content]
+
+  return (
+    <Row>
+      <Column span={12}>
+        <div>
+          <StyledHeading>{title}</StyledHeading>
+          {contentArray.map((item) => {
+            return (
+              <ReactMarkdown key={item} skipHtml allowedElements={['a', 'p']}>
+                {item}
+              </ReactMarkdown>
+            )
+          })}
+        </div>
+      </Column>
+    </Row>
+  )
+}
 
 export default Notice

src/signals/incident/components/ReplyForm/Notice/__tests__/Notice.test.tsx

@@ -13,4 +13,10 @@ describe('Notice', () => {
     expect(screen.getByText('Foo')).toBeInTheDocument()
     expect(screen.getByText('Bar')).toBeInTheDocument()
   })
+  it('renders multiple paragraphs', () => {
+    render(withAppContext(<Notice title="Foo" content={['Bar', 'foobar']} />))
+
+    expect(screen.getByText('Bar')).toBeInTheDocument()
+    expect(screen.getByText('foobar')).toBeInTheDocument()
+  })
 })

src/signals/incident/containers/IncidentReplyContainer/__tests__/IncidentReplyContainer.test.tsx

@@ -181,7 +181,7 @@ describe('IncidentReplyContainer', () => {
 
       await waitFor(() => {
         screen.getByRole('heading', { name: constants.INACCESSIBLE_TITLE })
-        screen.getByText(constants.INACCESSIBLE_CONTENT)
+        screen.getByText(constants.INACCESSIBLE_CONTENT[0])
       })
     })
   })
@@ -219,7 +219,7 @@ describe('IncidentReplyContainer', () => {
         screen.getByRole('heading', {
           name: constants.INACCESSIBLE_TITLE,
         })
-        screen.getByText(constants.INACCESSIBLE_CONTENT)
+        screen.getByText(constants.INACCESSIBLE_CONTENT[0])
       })
     })
   })

src/signals/incident/containers/IncidentReplyContainer/constants.ts

@@ -1,5 +1,6 @@
 // SPDX-License-Identifier: MPL-2.0
 // Copyright (C) 2021 Gemeente Amsterdam
+
 /**
  * Possible responses
  */
@@ -16,8 +17,10 @@ export const SUBMITTED_PREVIOUSLY_DETAIL = 'Already used!'
  * Notices
  */
 export const INACCESSIBLE_TITLE = 'U kunt niet meer reageren op onze vragen'
-export const INACCESSIBLE_CONTENT =
-  'U hebt hierover een email ontvangen of u krijgt deze binnenkort nog.'
+export const INACCESSIBLE_CONTENT = [
+  'U hebt hierover een e-mail ontvangen of u krijgt deze binnenkort nog.',
+  `Wilt u dat wij toch nog iets doen? Dan kunt u [een nieuwe melding maken](https:meldingen.amsterdam.nl/incident/beschrijf). Geef alstublieft zoveel mogelijk details van de situatie. En stuur als dat kan een foto mee.`,
+]
 
 export const SUBMITTED_PREVIOUSLY_TITLE =
   'U hebt onze vragen al eerder beantwoord'