feat: add decision details information box to application page

City-of-Helsinki · Mar 21, 2024 · aaf7794 · aaf7794
1 parent f6c786c
commit aaf7794
Show file tree

Hide file tree

Showing 15 changed files with 436 additions and 70 deletions.
diff --git a/backend/benefit/applications/api/v1/serializers/application.py b/backend/benefit/applications/api/v1/serializers/application.py
@@ -197,9 +197,12 @@ class Meta:
             "duration_in_months_rounded",
             "total_deminimis_amount",
             "ahjo_status",
+            "ahjo_case_id",
             "changes",
             "archived_for_applicant",
             "alterations",
+            "calculated_benefit_amount",
+            "ahjo_decision_date",
         ]
         read_only_fields = [
             "submitted_at",
@@ -225,6 +228,9 @@ class Meta:
             "total_deminimis_amount",
             "changes",
             "archived_for_applicant",
+            "alterations",
+            "calculated_benefit_amount",
+            "ahjo_decision_date",
         ]
         extra_kwargs = {
             "company_name": {
@@ -375,6 +381,8 @@ class Meta:
 
     ahjo_status = serializers.SerializerMethodField("get_latest_ahjo_status")
 
+    ahjo_decision_date = serializers.SerializerMethodField("get_ahjo_decision_date")
+
     submitted_at = serializers.SerializerMethodField("get_submitted_at")
 
     modified_at = serializers.SerializerMethodField(
@@ -567,6 +575,12 @@ def get_former_benefit_info(self, obj):
             "last_possible_end_date": last_possible_end_date,
         }
 
+    def get_ahjo_decision_date(self, obj):
+        if obj.batch is None:
+            return None
+
+        return obj.batch.decision_date
+
     def get_submitted_at(self, obj):
         return getattr(obj, "submitted_at", None)
 

diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -3,3 +3,5 @@ node_modules
 screenshots
 report
 coverage
+
+certificates
diff --git a/frontend/benefit/applicant/public/locales/en/common.json b/frontend/benefit/applicant/public/locales/en/common.json
@@ -414,6 +414,30 @@
     },
     "errors": {
       "dirtyOrInvalidForm": "Please fill any missing or invalid form fields"
+    },
+    "decision": {
+      "description": {
+        "accepted": "Helsinki benefit has been granted from {{dateRangeStart}} to {{dateRangeEnd}}",
+        "rejected": "No Helsinki benefit was granted"
+      },
+      "headings": {
+        "mainHeading": "Decision details",
+        "caseId": "Case identifier",
+        "status": "Decision",
+        "decisionDate": "Date of decision",
+        "benefitPeriod": "Benefit period",
+        "benefitAmount": "Total amount of benefit",
+        "existingAlterations": "Alterations in employment"
+      },
+      "alterationList": {
+        "count_one": "{{count}} alteration in employment reported",
+        "count_other": "{{count}} alterations in employment reported",
+        "empty": "No reported alterations in employment. The employment has proceeded as expected."
+      },
+      "actions": {
+        "showDecision": "View the decision",
+        "reportAlteration": "Report an alteration"
+      }
     }
   },
   "serviceName": "Helsinki benefit service",

diff --git a/frontend/benefit/applicant/public/locales/fi/common.json b/frontend/benefit/applicant/public/locales/fi/common.json
@@ -414,6 +414,30 @@
     },
     "errors": {
       "dirtyOrInvalidForm": "Täytä lomakkeen puuttuvat tai virheelliset kentät"
+    },
+    "decision": {
+      "description": {
+        "accepted": "Helsinki-lisää on myönnetty aikavälille {{dateRangeStart}} – {{dateRangeEnd}}",
+        "rejected": "Helsinki-lisää ei myönnetty"
+      },
+      "headings": {
+        "mainHeading": "Päätöksen tiedot",
+        "caseId": "Diaarinumero",
+        "status": "Päätös",
+        "decisionDate": "Päätös tehty",
+        "benefitPeriod": "Tukiaika",
+        "benefitAmount": "Myönnetty tuki yhteensä",
+        "existingAlterations": "Muutokset työsuhteessa"
+      },
+      "alterationList": {
+        "count_one": "{{count}} ilmoitettu muutos työsuhteessa",
+        "count_other": "{{count}} ilmoitettua muutosta työsuhteessa",
+        "empty": "Ei ilmoitettuja keskeytyksiä työsuhteessa. Työsuhde on toteutunut suunnitellusti."
+      },
+      "actions": {
+        "showDecision": "Tarkastele päätöstä",
+        "reportAlteration": "Ilmoita työsuhteen muutoksesta"
+      }
     }
   },
   "serviceName": "Helsinki-lisän asiointipalvelu",

diff --git a/frontend/benefit/applicant/public/locales/sv/common.json b/frontend/benefit/applicant/public/locales/sv/common.json
@@ -414,6 +414,30 @@
     },
     "errors": {
       "dirtyOrInvalidForm": "Fyll i eventuella saknade eller ogiltiga formulärfält"
+    },
+    "decision": {
+      "description": {
+        "accepted": "",
+        "rejected": ""
+      },
+      "headings": {
+        "mainHeading": "",
+        "caseId": "",
+        "status": "",
+        "decisionDate": "",
+        "benefitPeriod": "",
+        "benefitAmount": "",
+        "existingAlterations": ""
+      },
+      "alterationList": {
+        "count_one": "",
+        "count_other": "",
+        "empty": ""
+      },
+      "actions": {
+        "showDecision": "",
+        "reportAlteration": ""
+      }
     }
   },
   "serviceName": "E-tjänsten för Helsingforstillägg",

diff --git a/frontend/benefit/applicant/src/components/applications/Applications.sc.ts b/frontend/benefit/applicant/src/components/applications/Applications.sc.ts
@@ -1,3 +1,4 @@
+import { APPLICATION_STATUSES } from 'benefit-shared/constants';
 import { respondAbove } from 'shared/styles/mediaQueries';
 import styled from 'styled-components';
 
@@ -20,12 +21,25 @@ export const $PageHeader = styled.div`
 
 export const $HeaderItem = styled.div``;
 
+export const $HeaderRightColumnItem = styled.div`
+  margin-top: ${(props) => props.theme.spacing.m};
+
+  ${respondAbove('md')`
+    text-align: right;
+  `};
+`;
+
 export const $PageHeading = styled.h1`
   font-size: ${(props) => props.theme.fontSize.heading.xl};
   font-weight: normal;
   margin: 0;
 `;
 
+export const $PageHeadingApplicant = styled.div`
+  margin-top: var(--spacing-m);
+  margin-bottom: var(--spacing-m);
+`;
+
 export const $PageSubHeading = styled.p`
   color: ${(props) => props.theme.colors.coatOfArms};
   font-size: ${(props) => props.theme.fontSize.heading.s};
@@ -89,3 +103,34 @@ export const $NoApplicationsContainer = styled.div`
   gap: ${(props) => props.theme.spacing.xs};
   margin: ${(props) => props.theme.spacingLayout.xl} 0;
 `;
+
+export const $StatusIcon = styled.span`
+  display: inline-block;
+
+  svg {
+    vertical-align: middle;
+  }
+
+  &.status-icon--${APPLICATION_STATUSES.HANDLING} {
+    svg {
+      color: ${(props) => props.theme.colors.info};
+    }
+  }
+
+  &.status-icon--${APPLICATION_STATUSES.ACCEPTED} {
+    svg {
+      color: ${(props) => props.theme.colors.success};
+    }
+  }
+
+  &.status-icon--${APPLICATION_STATUSES.REJECTED},
+  &.status-icon--${APPLICATION_STATUSES.CANCELLED} {
+    svg {
+      color: ${(props) => props.theme.colors.error};
+    }
+  }
+
+  &.status-icon--${APPLICATION_STATUSES.INFO_REQUIRED} {
+    color: ${(props) => props.theme.colors.alertDark};
+  }
+`;
diff --git a/frontend/benefit/applicant/src/components/applications/StatusIcon.tsx b/frontend/benefit/applicant/src/components/applications/StatusIcon.tsx
@@ -0,0 +1,52 @@
+import { $StatusIcon } from 'benefit/applicant/components/applications/Applications.sc';
+import { APPLICATION_STATUSES } from 'benefit-shared/constants';
+import { IconAlertCircleFill, IconCheckCircle, IconCheckCircleFill, IconCrossCircleFill } from 'hds-react';
+import React from 'react';
+
+type Props = {
+  status: APPLICATION_STATUSES
+}
+
+const StatusIcon = ({ status }: Props): JSX.Element => {
+  let Component;
+  switch (status) {
+    case APPLICATION_STATUSES.DRAFT:
+      Component = <span />;
+      break;
+
+    case APPLICATION_STATUSES.INFO_REQUIRED:
+      Component = IconAlertCircleFill;
+      break;
+
+    case APPLICATION_STATUSES.RECEIVED:
+      Component = IconCheckCircle;
+      break;
+
+    case APPLICATION_STATUSES.ACCEPTED:
+      Component = IconCheckCircleFill;
+      break;
+
+    case APPLICATION_STATUSES.REJECTED:
+      Component = IconCrossCircleFill;
+      break;
+
+    case APPLICATION_STATUSES.CANCELLED:
+      Component = IconCrossCircleFill;
+      break;
+
+    case APPLICATION_STATUSES.HANDLING:
+      Component = IconCheckCircle;
+      break;
+
+    default:
+      return <span />;
+  }
+
+  return (
+    <$StatusIcon className={`status-icon status-icon--${status}`}>
+      <Component />
+    </$StatusIcon>
+  );
+};
+
+export default StatusIcon;
diff --git a/...end/benefit/applicant/src/components/applications/applicationList/listItem/ListItem.sc.ts b/...end/benefit/applicant/src/components/applications/applicationList/listItem/ListItem.sc.ts
@@ -87,25 +87,6 @@ export const $StatusDataValue = styled($DataValue)`
   align-items: center;
   gap: ${(props) => props.theme.spacing.xs3};
 
-  .list-item-status--${APPLICATION_STATUSES.HANDLING} & {
-    svg {
-      color: ${(props) => props.theme.colors.info};
-    }
-  }
-
-  .list-item-status--${APPLICATION_STATUSES.ACCEPTED} & {
-    svg {
-      color: ${(props) => props.theme.colors.success};
-    }
-  }
-
-  .list-item-status--${APPLICATION_STATUSES.REJECTED} &,
-  .list-item-status--${APPLICATION_STATUSES.CANCELLED} & {
-    svg {
-      color: ${(props) => props.theme.colors.error};
-    }
-  }
-
   .list-item-status--${APPLICATION_STATUSES.INFO_REQUIRED} & {
     color: ${(props) => props.theme.colors.alertDark};
   }

diff --git a/frontend/benefit/applicant/src/components/applications/applicationList/listItem/ListItem.tsx b/frontend/benefit/applicant/src/components/applications/applicationList/listItem/ListItem.tsx
@@ -1,3 +1,4 @@
+import StatusIcon from 'benefit/applicant/components/applications/StatusIcon';
 import { useTranslation } from 'benefit/applicant/i18n';
 import { Loading } from 'benefit/applicant/types/common';
 import { APPLICATION_STATUSES } from 'benefit-shared/constants';
@@ -55,7 +56,6 @@ const ListItem: React.FC<ListItemProps> = (props) => {
     submittedAt,
     applicationNum,
     allowedAction,
-    statusIcon: StatusIcon,
     status,
     unreadMessagesCount,
     validUntil,
@@ -98,7 +98,7 @@ const ListItem: React.FC<ListItemProps> = (props) => {
             <$StatusDataColumn className={`list-item-status--${status}`}>
               <$DataHeader>{t(`${translationBase}.common.status`)}</$DataHeader>
               <$StatusDataValue>
-                <StatusIcon />
+                <StatusIcon status={status}/>
                 <span>{statusText}</span>
               </$StatusDataValue>
             </$StatusDataColumn>

diff --git a/frontend/benefit/applicant/src/components/applications/applicationList/useApplicationList.ts b/frontend/benefit/applicant/src/components/applications/applicationList/useApplicationList.ts
@@ -8,10 +8,6 @@ import {
   ApplicationListItemData,
 } from 'benefit-shared/types/application';
 import {
-  IconAlertCircleFill,
-  IconCheckCircle,
-  IconCheckCircleFill,
-  IconCrossCircleFill,
   IconPen,
 } from 'hds-react';
 import camelCase from 'lodash/camelCase';
@@ -113,33 +109,6 @@ const useApplicationList = ({
   ): string =>
     t(`${translationStatusBase}.${camelCase(applicationStatus)}`, values);
 
-  const getStatusIcon = (applicationStatus: APPLICATION_STATUSES): React.FC => {
-    switch (applicationStatus) {
-      case APPLICATION_STATUSES.DRAFT:
-        return () => React.createElement('span');
-
-      case APPLICATION_STATUSES.INFO_REQUIRED:
-        return IconAlertCircleFill;
-
-      case APPLICATION_STATUSES.RECEIVED:
-        return IconCheckCircle;
-
-      case APPLICATION_STATUSES.ACCEPTED:
-        return IconCheckCircleFill;
-
-      case APPLICATION_STATUSES.REJECTED:
-        return IconCrossCircleFill;
-
-      case APPLICATION_STATUSES.CANCELLED:
-        return IconCrossCircleFill;
-
-      case APPLICATION_STATUSES.HANDLING:
-        return IconCheckCircle;
-
-      default:
-        return () => React.createElement('span');
-    }
-  };
   const getAllowedActions = (
     id: string,
     applicationStatus: APPLICATION_STATUSES
@@ -225,7 +194,6 @@ const useApplicationList = ({
       status: appStatus,
       unreadMessagesCount: unread_messages_count ?? 0,
       batch,
-      statusIcon: getStatusIcon(appStatus),
       contactPersonName,
     };
     const draftProps = { modifiedAt: modifiedAtWithTime };