[feat-6155]: Change reaction asked notification

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

@@ -3,29 +3,49 @@
 import {
   Column,
   Heading,
+  Link,
   Paragraph,
   Row,
   themeSpacing,
 } from '@amsterdam/asc-ui'
+import ReactMarkdown from 'react-markdown'
 import styled from 'styled-components'
 
 const StyledHeading = styled(Heading)`
   margin-top: ${themeSpacing(10)};
   margin-bottom: ${themeSpacing(5)};
 `
 
+const Wrapper = styled.div`
+  a,
+  p {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+`
+
 interface NoticeProps {
   title: string
   content: string
 }
 
 const Notice = ({ content, title }: NoticeProps) => (
   <Row>
-    <Column span={12}>
-      <div>
+    <Column span={8}>
+      <Wrapper>
         <StyledHeading>{title}</StyledHeading>
-        <Paragraph>{content}</Paragraph>
-      </div>
+        <ReactMarkdown
+          skipHtml
+          allowedElements={['a', 'p']}
+          components={{
+            a: ({ node, ...props }) => <Link variant="inline" {...props} />,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            p: ({ node, color, ...props }) => <Paragraph {...props} />,
+          }}
+        >
+          {content}
+        </ReactMarkdown>
+      </Wrapper>
     </Column>
   </Row>
 )

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

@@ -181,7 +181,13 @@ describe('IncidentReplyContainer', () => {
 
       await waitFor(() => {
         screen.getByRole('heading', { name: constants.INACCESSIBLE_TITLE })
-        screen.getByText(constants.INACCESSIBLE_CONTENT)
+        screen.getByText(
+          'U hebt hierover een e-mail ontvangen of u krijgt deze binnenkort nog.'
+        )
+        screen.getByRole('link', { name: 'een nieuwe melding maken' })
+        screen.getByText(
+          /. Geef alstublieft zoveel mogelijk details van de situatie. En stuur als dat kan een foto mee./
+        )
       })
     })
   })
@@ -219,7 +225,13 @@ describe('IncidentReplyContainer', () => {
         screen.getByRole('heading', {
           name: constants.INACCESSIBLE_TITLE,
         })
-        screen.getByText(constants.INACCESSIBLE_CONTENT)
+        screen.getByText(
+          'U hebt hierover een e-mail ontvangen of u krijgt deze binnenkort nog.'
+        )
+        screen.getByRole('link', { name: 'een nieuwe melding maken' })
+        screen.getByText(
+          /. Geef alstublieft zoveel mogelijk details van de situatie. En stuur als dat kan een foto mee./
+        )
       })
     })
   })

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,11 @@ 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'