From beab384c85aa57a5c110b395a3a569de700e08a9 Mon Sep 17 00:00:00 2001 From: Maks Turtiainen Date: Fri, 10 Nov 2023 10:49:10 +0200 Subject: [PATCH] feat: new archived view (HL-908) (#2427) * refactor: status label component (HL-908) * feat: new archive view (HL-908) --- .../handler/public/locales/en/common.json | 21 +++ .../handler/public/locales/fi/common.json | 21 +++ .../handler/public/locales/sv/common.json | 21 +++ .../applicationHeader/ApplicationHeader.sc.ts | 27 --- .../applicationHeader/ApplicationHeader.tsx | 6 +- .../applicationReview/ApplicationReview.tsx | 2 + .../handledView/HandledView.sc.ts | 5 + .../handledView/HandledView.tsx | 27 +-- .../handledView/archivedView/ArchivedView.tsx | 167 ++++++++++++++++++ .../components/statusLabel/StatusLabel.sc.ts | 14 ++ .../components/statusLabel/StatusLabel.tsx | 16 ++ .../src/components/statusLabel/utils.ts | 24 +++ .../benefit/shared/src/types/application.d.ts | 5 + 13 files changed, 314 insertions(+), 42 deletions(-) create mode 100644 frontend/benefit/handler/src/components/applicationReview/handledView/archivedView/ArchivedView.tsx create mode 100644 frontend/benefit/handler/src/components/statusLabel/StatusLabel.sc.ts create mode 100644 frontend/benefit/handler/src/components/statusLabel/StatusLabel.tsx create mode 100644 frontend/benefit/handler/src/components/statusLabel/utils.ts diff --git a/frontend/benefit/handler/public/locales/en/common.json b/frontend/benefit/handler/public/locales/en/common.json index 045a359e85..1c7f4d99eb 100644 --- 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 index 045a359e85..1c7f4d99eb 100644 --- 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 index 045a359e85..1c7f4d99eb 100644 --- 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 index a620a96731..3a590cbd7e 100644 --- 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)` - 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 index cbbed8609a..9ef799d40f 100644 --- 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 = ({ data }) => { <$Col> - <$StatusLabel status={data.status}> - {t(`common:status.${data.status}`)} - + diff --git a/frontend/benefit/handler/src/components/applicationReview/ApplicationReview.tsx b/frontend/benefit/handler/src/components/applicationReview/ApplicationReview.tsx index 30fa80356b..d6aa778545 100644 --- 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) && ( )} + {application.archived && } {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 index 3d7fe46961..50aaacb841 100644 --- 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)` 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 index c367d196c9..339899f2de 100644 --- 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 = ({ data }) => { const translationsBase = 'common:review.summary'; @@ -24,18 +30,17 @@ const HandledView: React.FC = ({ data }) => { extractCalculatorRows(data.calculation?.rows); return ( - + <$HandledSection> - <$GridCell $colSpan={8}> + <$HandledHeader> <$ViewFieldBold style={{ color: theme.colors.coatOfArms }}> {t(`${translationsBase}.common.ready`)} - - <$GridCell $colSpan={8}> - <$ViewFieldBold large> - {t(`${translationsBase}.${data.status || ''}.message`)} - - + + <$HandledHr dashed /> {data.status === APPLICATION_STATUSES.ACCEPTED && ( <$GridCell $colSpan={8}> @@ -52,7 +57,7 @@ const HandledView: React.FC = ({ 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 = ({ data }) => { <$HandledRow> <$GridCell style={{ backgroundColor: theme.colors.white }} - $colSpan={8} + $colSpan={9} $colStart={1} > <$ViewField large> diff --git a/frontend/benefit/handler/src/components/applicationReview/handledView/archivedView/ArchivedView.tsx b/frontend/benefit/handler/src/components/applicationReview/handledView/archivedView/ArchivedView.tsx new file mode 100644 index 0000000000..4556273aac --- /dev/null +++ b/frontend/benefit/handler/src/components/applicationReview/handledView/archivedView/ArchivedView.tsx @@ -0,0 +1,167 @@ +import { + $ViewField, + $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 { useTranslation } from 'next-i18next'; +import * as React from 'react'; +import { $GridCell } from 'shared/components/forms/section/FormSection.sc'; +import { getFullName } from 'shared/utils/application.utils'; +import { convertToUIDateFormat } from 'shared/utils/date.utils'; +import { useTheme } from 'styled-components'; + +import { + $HandledHeader, + $HandledHr, + $HandledRow, + $HandledSection, +} from '../HandledView.sc'; + +const ArchivedView: React.FC = ({ data }) => { + const translationsBase = 'common:review.summary.archived'; + const { t } = useTranslation(); + const theme = useTheme(); + + return ( + + <$HandledSection> + <$HandledHeader> + <$ViewFieldBold style={{ color: theme.colors.coatOfArms }}> + {t(`${translationsBase}.ready`)} + + + + <$ViewFieldBold large> + {t(`${translationsBase}.${data.status || ''}`)} + + <$HandledHr dashed /> + <$HandledRow largeMargin> + <$GridCell $colSpan={3} $colStart={1}> + <$ViewFieldBold> + {t(`${translationsBase}.decisionMakerName`)} + <$ViewField topMargin>{data.batch?.decisionMakerName} + + + <$GridCell $colSpan={3}> + <$ViewFieldBold> + {t(`${translationsBase}.decisionMakerTitle`)} + <$ViewField topMargin> + {data.batch?.decisionMakerTitle} + + + + <$GridCell $colSpan={3}> + <$ViewFieldBold> + {t(`${translationsBase}.decisionDate`)} + <$ViewField topMargin> + {convertToUIDateFormat(data.batch?.decisionDate)} + + + + <$GridCell $colSpan={3}> + <$ViewFieldBold> + {t(`${translationsBase}.sectionOfTheLaw`)} + <$ViewField topMargin>{data.batch?.sectionOfTheLaw} + + + + <$HandledHr /> + + {data.batch?.p2PInspectorName && ( + <> + <$HandledRow largeMargin> + <$GridCell $colSpan={12} $colStart={1}> + <$ViewFieldBold large style={{ marginBottom: theme.spacing.m }}> + {t(`${translationsBase}.p2pTitle`)} + + + <$GridCell $colSpan={3} $colStart={1}> + <$ViewFieldBold> + {t(`${translationsBase}.p2pInspector`)} + <$ViewField topMargin> + {data.batch?.p2PInspectorName} + + + + <$GridCell $colSpan={3}> + <$ViewFieldBold> + {t(`${translationsBase}.p2pInspectorEmail`)} + <$ViewField topMargin> + {data.batch?.p2PInspectorEmail} + + + + <$GridCell $colSpan={3}> + <$ViewFieldBold> + {t(`${translationsBase}.p2pDecisionMaker`)} + <$ViewField topMargin> + {data.batch?.p2PCheckerName} + + + + + <$HandledHr /> + + )} + {data.batch?.expertInspectorName && ( + <> + <$HandledRow largeMargin> + <$GridCell $colSpan={12} $colStart={1}> + <$ViewFieldBold large style={{ marginBottom: theme.spacing.m }}> + {t(`${translationsBase}.ahjoTitle`)} + + + <$GridCell $colSpan={3} $colStart={1}> + <$ViewFieldBold> + {t(`${translationsBase}.ahjoInspector`)} + <$ViewField topMargin> + {data.batch?.expertInspectorName} + + + + <$GridCell $colSpan={3}> + <$ViewFieldBold> + {t(`${translationsBase}.ahjoInspectorTitle`)} + <$ViewField topMargin> + {data.batch?.expertInspectorTitle} + + + + <$GridCell $colSpan={3}> + <$ViewFieldBold> + {t(`${translationsBase}.p2pDecisionMaker`)} + <$ViewField topMargin> + {data.batch?.p2PCheckerName} + + + + + <$HandledHr /> + + )} + <$HandledRow largeMargin> + <$GridCell $colSpan={12} $colStart={1}> + <$ViewFieldBold large style={{ marginBottom: theme.spacing.m }}> + {t(`${translationsBase}.archivedTitle`)} + + + <$GridCell $colSpan={3} $colStart={1}> + <$ViewFieldBold> + {t(`${translationsBase}.handler`)} + <$ViewField topMargin> + {getFullName( + data.batch?.handler?.firstName, + data.batch?.handler?.lastName + )} + + + + + + + ); +}; + +export default ArchivedView; diff --git a/frontend/benefit/handler/src/components/statusLabel/StatusLabel.sc.ts b/frontend/benefit/handler/src/components/statusLabel/StatusLabel.sc.ts new file mode 100644 index 0000000000..1e805f819d --- /dev/null +++ b/frontend/benefit/handler/src/components/statusLabel/StatusLabel.sc.ts @@ -0,0 +1,14 @@ +import { APPLICATION_STATUSES } from 'benefit-shared/constants'; +import { Tag } from 'hds-react'; +import styled from 'styled-components'; + +import { statusColorMap } from './utils'; + +type StatusLabelProps = { + status?: APPLICATION_STATUSES; +}; + +export const $StatusLabel = styled(Tag)` + background-color: ${(props) => + props.theme.colors[statusColorMap(props.status)]}; +`; diff --git a/frontend/benefit/handler/src/components/statusLabel/StatusLabel.tsx b/frontend/benefit/handler/src/components/statusLabel/StatusLabel.tsx new file mode 100644 index 0000000000..8147f6c1a8 --- /dev/null +++ b/frontend/benefit/handler/src/components/statusLabel/StatusLabel.tsx @@ -0,0 +1,16 @@ +import { APPLICATION_STATUSES } from 'benefit-shared/constants'; +import { useTranslation } from 'next-i18next'; +import React from 'react'; + +import { $StatusLabel } from './StatusLabel.sc'; + +const StatusLabel: React.FC<{ status: APPLICATION_STATUSES }> = ({ + status, +}) => { + const { t } = useTranslation(); + return ( + <$StatusLabel status={status}>{t(`common:status.${status}`)} + ); +}; + +export default StatusLabel; diff --git a/frontend/benefit/handler/src/components/statusLabel/utils.ts b/frontend/benefit/handler/src/components/statusLabel/utils.ts new file mode 100644 index 0000000000..00ac71d7f7 --- /dev/null +++ b/frontend/benefit/handler/src/components/statusLabel/utils.ts @@ -0,0 +1,24 @@ +import { APPLICATION_STATUSES } from 'benefit-shared/constants'; +import { DefaultTheme } from 'styled-components'; + +export const statusColorMap = ( + status: APPLICATION_STATUSES +): keyof DefaultTheme['colors'] => { + const variant = 'MediumLight'; + switch (status) { + case APPLICATION_STATUSES.HANDLING: + return `coatOfArms${variant}`; + + case APPLICATION_STATUSES.INFO_REQUIRED: + return `summer${variant}`; + + case APPLICATION_STATUSES.ACCEPTED: + return `tram${variant}`; + + case APPLICATION_STATUSES.REJECTED: + return `brick${variant}`; + + default: + return `coatOfArms${variant}`; + } +}; diff --git a/frontend/benefit/shared/src/types/application.d.ts b/frontend/benefit/shared/src/types/application.d.ts index 2585637006..61911966ed 100644 --- a/frontend/benefit/shared/src/types/application.d.ts +++ b/frontend/benefit/shared/src/types/application.d.ts @@ -159,7 +159,12 @@ export type Batch = { decisionDate?: string; expertInspectorName?: string; expertInspectorEmail?: string; + expertInspectorTitle?: string; + p2PCheckerName?: string; + p2PInspectorName?: string; + p2PInspectorEmail?: string; createdAt: string; + handler?: HandlerDetails; }; export type HandlerDetails = {