feat: new archived view (HL-908) (#2427)

* refactor: status label component (HL-908) * feat: new archive view (HL-908)
City-of-Helsinki · Nov 10, 2023 · beab384 · beab384
1 parent af71c3f
commit beab384
Show file tree

Hide file tree

Showing 13 changed files with 314 additions and 42 deletions.
diff --git a/frontend/benefit/handler/public/locales/en/common.json b/frontend/benefit/handler/public/locales/en/common.json
@@ -765,9 +765,30 @@
         "description": "",
         "commentsTitle": "Syy peruutukseen"
       },
+      "archived": {
+        "ready": "Päätös tehty",
+        "accepted": "Hakemus hyväksyttiin",
+        "rejected": "Hakemusta ei hyväksytty ",
+        "cancelled": "Hakemus peruttiin",
+        "decisionMakerName": "Päättäjä",
+        "decisionMakerTitle": "Päättäjän titteli",
+        "decisionDate": "Päätöspäivämäärä",
+        "sectionOfTheLaw": "Pykälä",
+        "p2pTitle": "P2P-tarkastuksen tiedot",
+        "p2pInspector": "Tarkastaja, P2P",
+        "p2pInspectorEmail": "Tarkastajan sähköposti",
+        "ahjoTitle": "Ahjo-tarkastuksen tiedot",
+        "ahjoInspector": "Tarkastaja, Ahjo",
+        "ahjoInspectorTitle": "Tarkastajan titteli",
+        "p2pDecisionMaker": "Hyväksyjän nimi, P2P",
+        "archivedTitle": "Arkistointi",
+        "archivedDate": "Arkistointipäivä",
+        "handler": "Käsittelijä"
+      },
       "common": {
         "handler": "Käsittelijä",
         "handledAt": "Käsittelypäivämäärä",
+        "inAhjo": "Viety Ahjoon",
         "ready": "Käsittely valmis",
         "dateRange": "Helsinki-lisä kuukaudessa {{dateRange}}",
         "total": "Helsinki-lisä yhteensä koko ajalta ({{months}} kk)"

diff --git a/frontend/benefit/handler/public/locales/fi/common.json b/frontend/benefit/handler/public/locales/fi/common.json
@@ -765,9 +765,30 @@
         "description": "",
         "commentsTitle": "Syy peruutukseen"
       },
+      "archived": {
+        "ready": "Päätös tehty",
+        "accepted": "Hakemus hyväksyttiin",
+        "rejected": "Hakemusta ei hyväksytty ",
+        "cancelled": "Hakemus peruttiin",
+        "decisionMakerName": "Päättäjä",
+        "decisionMakerTitle": "Päättäjän titteli",
+        "decisionDate": "Päätöspäivämäärä",
+        "sectionOfTheLaw": "Pykälä",
+        "p2pTitle": "P2P-tarkastuksen tiedot",
+        "p2pInspector": "Tarkastaja, P2P",
+        "p2pInspectorEmail": "Tarkastajan sähköposti",
+        "ahjoTitle": "Ahjo-tarkastuksen tiedot",
+        "ahjoInspector": "Tarkastaja, Ahjo",
+        "ahjoInspectorTitle": "Tarkastajan titteli",
+        "p2pDecisionMaker": "Hyväksyjän nimi, P2P",
+        "archivedTitle": "Arkistointi",
+        "archivedDate": "Arkistointipäivä",
+        "handler": "Käsittelijä"
+      },
       "common": {
         "handler": "Käsittelijä",
         "handledAt": "Käsittelypäivämäärä",
+        "inAhjo": "Viety Ahjoon",
         "ready": "Käsittely valmis",
         "dateRange": "Helsinki-lisä kuukaudessa {{dateRange}}",
         "total": "Helsinki-lisä yhteensä koko ajalta ({{months}} kk)"

diff --git a/frontend/benefit/handler/public/locales/sv/common.json b/frontend/benefit/handler/public/locales/sv/common.json
@@ -765,9 +765,30 @@
         "description": "",
         "commentsTitle": "Syy peruutukseen"
       },
+      "archived": {
+        "ready": "Päätös tehty",
+        "accepted": "Hakemus hyväksyttiin",
+        "rejected": "Hakemusta ei hyväksytty ",
+        "cancelled": "Hakemus peruttiin",
+        "decisionMakerName": "Päättäjä",
+        "decisionMakerTitle": "Päättäjän titteli",
+        "decisionDate": "Päätöspäivämäärä",
+        "sectionOfTheLaw": "Pykälä",
+        "p2pTitle": "P2P-tarkastuksen tiedot",
+        "p2pInspector": "Tarkastaja, P2P",
+        "p2pInspectorEmail": "Tarkastajan sähköposti",
+        "ahjoTitle": "Ahjo-tarkastuksen tiedot",
+        "ahjoInspector": "Tarkastaja, Ahjo",
+        "ahjoInspectorTitle": "Tarkastajan titteli",
+        "p2pDecisionMaker": "Hyväksyjän nimi, P2P",
+        "archivedTitle": "Arkistointi",
+        "archivedDate": "Arkistointipäivä",
+        "handler": "Käsittelijä"
+      },
       "common": {
         "handler": "Käsittelijä",
         "handledAt": "Käsittelypäivämäärä",
+        "inAhjo": "Viety Ahjoon",
         "ready": "Käsittely valmis",
         "dateRange": "Helsinki-lisä kuukaudessa {{dateRange}}",
         "total": "Helsinki-lisä yhteensä koko ajalta ({{months}} kk)"

diff --git a/frontend/benefit/handler/src/components/applicationHeader/ApplicationHeader.sc.ts b/frontend/benefit/handler/src/components/applicationHeader/ApplicationHeader.sc.ts
@@ -1,5 +1,3 @@
-import { APPLICATION_STATUSES } from 'benefit-shared/constants';
-import { Tag } from 'hds-react';
 import styled from 'styled-components';
 
 export const $Wrapper = styled.div`
@@ -44,28 +42,3 @@ export const $HandlerWrapper = styled.div`
   letter-spacing: 2px;
   line-height: ${(props) => props.theme.lineHeight.l};
 `;
-
-type StatusLabelProps = {
-  status?: APPLICATION_STATUSES;
-};
-
-export const $StatusLabel = styled(Tag)<StatusLabelProps>`
-  background-color: ${(props) => {
-    switch (props.status) {
-      case APPLICATION_STATUSES.HANDLING:
-        return props.theme.colors.coatOfArmsMediumLight;
-
-      case APPLICATION_STATUSES.INFO_REQUIRED:
-        return props.theme.colors.summerMediumLight;
-
-      case APPLICATION_STATUSES.ACCEPTED:
-        return props.theme.colors.tramMediumLight;
-
-      case APPLICATION_STATUSES.REJECTED:
-        return props.theme.colors.brickMediumLight;
-
-      default:
-        return props.theme.colors.coatOfArmsMediumLight;
-    }
-  }};
-`;
diff --git a/frontend/benefit/handler/src/components/applicationHeader/ApplicationHeader.tsx b/frontend/benefit/handler/src/components/applicationHeader/ApplicationHeader.tsx
@@ -1,3 +1,4 @@
+import StatusLabel from 'benefit/handler/components/statusLabel/StatusLabel';
 import { APPLICATION_STATUSES } from 'benefit-shared/constants';
 import { Application } from 'benefit-shared/types/application';
 import { useTranslation } from 'next-i18next';
@@ -12,7 +13,6 @@ import {
   $ItemHeader,
   $ItemValue,
   $ItemWrapper,
-  $StatusLabel,
   $Wrapper,
 } from './ApplicationHeader.sc';
 
@@ -72,9 +72,7 @@ const ApplicationHeader: React.FC<ApplicationReviewProps> = ({ data }) => {
             </$ItemWrapper>
           </$Col>
           <$Col>
-            <$StatusLabel status={data.status}>
-              {t(`common:status.${data.status}`)}
-            </$StatusLabel>
+            <StatusLabel status={data.status} />
           </$Col>
         </$InnerWrapper>
       </Container>

diff --git a/frontend/benefit/handler/src/components/applicationReview/ApplicationReview.tsx b/frontend/benefit/handler/src/components/applicationReview/ApplicationReview.tsx
@@ -24,6 +24,7 @@ import CoOperationNegotiationsView from './coOperationNegotiationsView/CoOperati
 import DeminimisView from './deminimisView/DeminimisView';
 import EmployeeView from './employeeView/EmployeeView';
 import EmploymentView from './employmentView/EmpoymentView';
+import ArchivedView from './handledView/archivedView/ArchivedView';
 import HandledView from './handledView/HandledView';
 import NotificationView from './notificationView/NotificationView';
 import PaperView from './paperView/PaperView';
@@ -107,6 +108,7 @@ const ApplicationReview: React.FC = () => {
             HANDLED_STATUSES.includes(application.status) && (
               <HandledView data={application} />
             )}
+          {application.archived && <ArchivedView data={application} />}
         </Container>
         <StickyActionBar>
           {application.status === APPLICATION_STATUSES.RECEIVED && (

diff --git a/frontend/benefit/handler/src/components/applicationReview/handledView/HandledView.sc.ts b/frontend/benefit/handler/src/components/applicationReview/handledView/HandledView.sc.ts
@@ -30,3 +30,8 @@ export const $HandledRow = styled($Grid)<HandledRowProps>`
       props.largeMargin ? props.theme.spacing.l : props.theme.spacing.s}
     0;
 `;
+
+export const $HandledHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
diff --git a/frontend/benefit/handler/src/components/applicationReview/handledView/HandledView.tsx b/frontend/benefit/handler/src/components/applicationReview/handledView/HandledView.tsx
@@ -3,6 +3,7 @@ import {
   $ViewFieldBold,
 } from 'benefit/handler/components/newApplication/ApplicationForm.sc';
 import ReviewSection from 'benefit/handler/components/reviewSection/ReviewSection';
+import StatusLabel from 'benefit/handler/components/statusLabel/StatusLabel';
 import { ApplicationReviewViewProps } from 'benefit/handler/types/application';
 import { extractCalculatorRows } from 'benefit/handler/utils/calculator';
 import { APPLICATION_STATUSES } from 'benefit-shared/constants';
@@ -14,7 +15,12 @@ import { convertToUIDateFormat } from 'shared/utils/date.utils';
 import { formatFloatToCurrency } from 'shared/utils/string.utils';
 import { useTheme } from 'styled-components';
 
-import { $HandledHr, $HandledRow, $HandledSection } from './HandledView.sc';
+import {
+  $HandledHeader,
+  $HandledHr,
+  $HandledRow,
+  $HandledSection,
+} from './HandledView.sc';
 
 const HandledView: React.FC<ApplicationReviewViewProps> = ({ data }) => {
   const translationsBase = 'common:review.summary';
@@ -24,18 +30,17 @@ const HandledView: React.FC<ApplicationReviewViewProps> = ({ data }) => {
     extractCalculatorRows(data.calculation?.rows);
 
   return (
-    <ReviewSection header={t(`${translationsBase}.${data.status || ''}.title`)}>
+    <ReviewSection
+      withoutDivider
+      header={t(`${translationsBase}.${data.status || ''}.title`)}
+    >
       <$HandledSection>
-        <$GridCell $colSpan={8}>
+        <$HandledHeader>
           <$ViewFieldBold style={{ color: theme.colors.coatOfArms }}>
             {t(`${translationsBase}.common.ready`)}
           </$ViewFieldBold>
-        </$GridCell>
-        <$GridCell $colSpan={8}>
-          <$ViewFieldBold large>
-            {t(`${translationsBase}.${data.status || ''}.message`)}
-          </$ViewFieldBold>
-        </$GridCell>
+          <StatusLabel status={data.status} />
+        </$HandledHeader>
         <$HandledHr dashed />
         {data.status === APPLICATION_STATUSES.ACCEPTED && (
           <$GridCell $colSpan={8}>
@@ -52,7 +57,7 @@ const HandledView: React.FC<ApplicationReviewViewProps> = ({ data }) => {
           dateRangeRows.length === helsinkiBenefitMonthlyRows.length &&
           dateRangeRows.map((row, index) => (
             <$HandledRow key={row.id}>
-              <$GridCell $colSpan={8} $colStart={1}>
+              <$GridCell $colSpan={9} $colStart={1}>
                 <$ViewField large>
                   {t(`${translationsBase}.common.dateRange`, {
                     dateRange: row.descriptionFi.toLocaleLowerCase(),
@@ -76,7 +81,7 @@ const HandledView: React.FC<ApplicationReviewViewProps> = ({ data }) => {
           <$HandledRow>
             <$GridCell
               style={{ backgroundColor: theme.colors.white }}
-              $colSpan={8}
+              $colSpan={9}
               $colStart={1}
             >
               <$ViewField large>