feat: restyle "application sent" notification (HL-948, HL-947) (#2350)

* fix: get rid of isReadOnly flag

the data already exists in prop so no need to make router checks

* chore: add more form filling tests

* feat: use env to skip console.log on tests

* docs: add missing env for running tests

* refactor: rename types

* feat: restyle "application sent" notification

frontend/benefit/applicant/public/locales/en/common.json

@@ -65,7 +65,8 @@
       "close": "Close",
       "openTermsAsPDF": "Open the terms as a PDF file",
       "continueToService": "Continue to the service",
-      "pauseAndExit": "Cancel and exit"
+      "pauseAndExit": "Cancel and exit",
+      "viewSavedApplication": "Review your submitted application"
     },
     "sections": {
       "company": {
@@ -430,8 +431,8 @@
   },
   "notifications": {
     "applicationSubmitted": {
-      "label": "Application submitted successfully",
-      "message": "Helsinki benefit application {{applicationNumber}} ({{applicantName}}) has been submitted. You will be notified once the application has been processed."
+      "label": "The Helsinki benefit application has been submitted",
+      "message": "We have received your Helsinki benefit application with application number {{applicationNumber}}.\n\nNext, the application will be sent for processing. The designated contact person for the application will receive an email notification when it has been processed. You can follow the progress of your application in the Helsinki benefit service.\n\nIf you have questions about your application, you can use the Helsinki benefit e-service to send messages or send an email to [email protected]."
     },
     "applicationSaved": {
       "label": "Application saved",

frontend/benefit/applicant/public/locales/fi/common.json

@@ -65,7 +65,8 @@
       "close": "Sulje",
       "openTermsAsPDF": "Avaa ehdot PDF-tiedostona",
       "continueToService": "Jatka palveluun",
-      "pauseAndExit": "Keskeytä ja poistu"
+      "pauseAndExit": "Keskeytä ja poistu",
+      "viewSavedApplication": "Tarkastele lähettämääsi hakemusta"
     },
     "sections": {
       "company": {
@@ -430,8 +431,8 @@
   },
   "notifications": {
     "applicationSubmitted": {
-      "label": "Hakemus lähetty onnistuneesti",
-      "message": "Helsinki-lisä-hakemus {{applicationNumber}} ({{applicantName}}) on lähetetty. Saat ilmoituksen, kun hakemus on käsitelty."
+      "label": "Helsinki-lisä -hakemus on lähetetty",
+      "message": "Olemme vastaanottaneet Helsinki-lisä -hakemuksesi, jonka hakemusnumero on  {{applicationNumber}}.\n\nSeuraavaksi hakemus sirtyy käsiteltäväksi. Saat ilmoituksen sähköpostiisi, kun hakemus on käsitelty. Voit seurata käsittelyn etenemistä Helsinki-lisän asiointipalvelussa.\n\nHakemukseen liittyvissä kysymyksissä voit lähettää viestejä Helsinki-lisän asiointipalvelussa tai lähettää sähköpostia osoitteeseen [email protected]."
     },
     "applicationSaved": {
       "label": "Hakemus tallennettu",

frontend/benefit/applicant/public/locales/sv/common.json

@@ -65,7 +65,8 @@
       "close": "Stäng",
       "openTermsAsPDF": "Öppna villkoren som PDF-fil",
       "continueToService": "Fortsätt till tjänsten",
-      "pauseAndExit": "Avbryt och lämna sidan"
+      "pauseAndExit": "Avbryt och lämna sidan",
+      "viewSavedApplication": "Se ansökan du skickade"
     },
     "sections": {
       "company": {
@@ -430,8 +431,8 @@
   },
   "notifications": {
     "applicationSubmitted": {
-      "label": "Ansökan har skickats in",
-      "message": "Ansökan om Helsingforstillägg {{applicationNumber}} ({{applicantName}}) har skickats. Du får ett meddelande när ansökan har behandlats."
+      "label": "Ansökan om Helsingforstillägget har skickats",
+      "message": "Vi har mottagit din ansökan om Helsingforstillägg med ansökningsnummer {{applicationNumber}}\n\nAnsökningen överförs till handläggning. Den kontaktperson som utsetts för ansökningen får ett meddelande per e-post när ansökningen har behandlats. Du kan följa upp med hur handläggningen framskrider i e-tjänsten för sysselsättning Helsingforstillägg.\n\nOm du har frågor om ansökningen, kan du skicka meddelanden i e-tjänsten för sysselsättning Helsingforstillägg eller skicka e-post till adressen [email protected]."
     },
     "applicationSaved": {
       "label": "Applikationen sparas",

frontend/benefit/applicant/src/components/notificationView/NotificatinsView.sc.ts

@@ -1,33 +1,63 @@
-import { IconAlertCircle, IconCheck } from 'hds-react';
+import { IconAlertCircle, IconCheckCircle } from 'hds-react';
+import { respondAbove } from 'shared/styles/mediaQueries';
 import styled from 'styled-components';
 
 export const $Notification = styled.div`
   display: flex;
   flex-direction: column;
+  margin: ${(props) => props.theme.spacing.xl} 0
+    ${(props) => props.theme.spacing.xl} 0;
+  padding: ${(props) => props.theme.spacing.l};
+  background: ${(props) => props.theme.colors.fogLight};
+
+  ${respondAbove('sm')`
+    flex-direction: row;
+  
+  `}
 `;
 
-export const $IconCheck = styled(IconCheck)`
-  margin-top: ${(props) => props.theme.spacing.l};
+export const $NotificationRow = styled.div`
+  display: flex;
+  flex-flow: column;
+  ${respondAbove('sm')`
+    min-width: 13%;
+  `}
+`;
+
+export const $IconCheck = styled(IconCheckCircle)`
+  margin-right: ${(props) => props.theme.spacing.l};
 `;
 
 export const $IconAlertCircle = styled(IconAlertCircle)`
   margin-top: ${(props) => props.theme.spacing.l};
 `;
 
 export const $NotificationMessage = styled.p`
-  font-size: ${(props) => props.theme.fontSize.body.l};
+  font-size: ${(props) => props.theme.fontSize.body.m};
   margin: 0;
+  white-space: pre-line;
+  max-width: 670px;
+  line-height: 1.6;
 `;
 
 export const $ActionsContainer = styled.div`
   margin: ${(props) => props.theme.spacing.xl} 0;
-  display: flex;
+  ${respondAbove('sm')`
+    display: flex;
+  `}
   button {
+    width: 100%;
+    ${respondAbove('sm')`
+    width: auto;
+  `}
     margin-right: ${(props) => props.theme.spacing.m};
-    width: 200px;
+    margin-bottom: ${(props) => props.theme.spacing.m};
   }
 `;
 
 export const $NotificationTitle = styled.h1`
-  font-size: ${(props) => props.theme.fontSize.heading.m};
+  font-weight: 400;
+  font-size: ${(props) => props.theme.fontSize.heading.l};
+  margin: ${(props) => props.theme.spacing.xs} 0
+    ${(props) => props.theme.spacing.xl} 0;
 `;

frontend/benefit/applicant/src/components/notificationView/NotificationView.tsx

@@ -10,6 +10,7 @@ import {
   $IconCheck,
   $Notification,
   $NotificationMessage,
+  $NotificationRow,
   $NotificationTitle,
 } from './NotificatinsView.sc';
 
@@ -26,17 +27,28 @@ const NotificationView: React.FC<Props> = ({ title, message }) => {
     void router.push(ROUTES.HOME);
   };
 
+  const handleReload = (): void => {
+    void router.reload();
+  };
+
   return (
     <Container>
       <$Notification>
-        <$IconCheck size="xl" />
-        <$NotificationTitle>{title}</$NotificationTitle>
-        <$NotificationMessage>{message}</$NotificationMessage>
-        <$ActionsContainer>
-          <Button theme="coat" onClick={handleGoHome}>
-            {t('common:utility.home')}
-          </Button>
-        </$ActionsContainer>
+        <$NotificationRow>
+          <$IconCheck size="xl" />
+        </$NotificationRow>
+        <$NotificationRow>
+          <$NotificationTitle>{title}</$NotificationTitle>
+          <$NotificationMessage>{message}</$NotificationMessage>
+          <$ActionsContainer>
+            <Button theme="coat" onClick={handleGoHome}>
+              {t('common:utility.home')}
+            </Button>
+            <Button theme="coat" variant="secondary" onClick={handleReload}>
+              {t('common:applications.actions.viewSavedApplication')}
+            </Button>
+          </$ActionsContainer>
+        </$NotificationRow>
       </$Notification>
     </Container>
   );