diff --git a/frontend/benefit/handler/src/components/applicationList/ApplicationList.tsx b/frontend/benefit/handler/src/components/applicationList/ApplicationList.tsx index 725f161305..98b9ac6ce4 100644 --- a/frontend/benefit/handler/src/components/applicationList/ApplicationList.tsx +++ b/frontend/benefit/handler/src/components/applicationList/ApplicationList.tsx @@ -3,8 +3,11 @@ import { ApplicationListTableColumns, ApplicationListTableTransforms, } from 'benefit/handler/types/applicationList'; -import { getTagStyleForStatus } from 'benefit/handler/utils/applications'; -import { APPLICATION_STATUSES } from 'benefit-shared/constants'; +import { + getTagStyleForStatus, + getTalpaTagStyleForStatus, +} from 'benefit/handler/utils/applications'; +import { APPLICATION_STATUSES, TALPA_STATUSES } from 'benefit-shared/constants'; import { AhjoError, ApplicationAlteration, @@ -12,6 +15,7 @@ import { Instalment, } from 'benefit-shared/types/application'; import { IconSpeechbubbleText, Table, Tag, Tooltip } from 'hds-react'; +import { TFunction } from 'next-i18next'; import * as React from 'react'; import LoadingSkeleton from 'react-loading-skeleton'; import { $Link } from 'shared/components/table/Table.sc'; @@ -94,6 +98,17 @@ const dateForAdditionalInformationNeededBy = ( dateString: string | Date ): string => ` ${String(dateString).replace(/\d{4}$/, '')}`; +export const renderPaymentTagPerStatus = ( + t: TFunction, + talpaStatus?: TALPA_STATUSES +): JSX.Element => ( + <$TagWrapper $colors={getTalpaTagStyleForStatus(talpaStatus)}> + + {t(`applications.list.columns.talpaStatuses.${String(talpaStatus)}`)} + + +); + const ApplicationList: React.FC = ({ heading, status, @@ -197,6 +212,10 @@ const ApplicationList: React.FC = ({ [t] ); + const renderPaymentTagWrapper = React.useCallback(renderPaymentTagPerStatus, [ + t, + ]); + const columns = React.useMemo(() => { const cols: ApplicationListTableColumns[] = [ { @@ -353,8 +372,8 @@ const ApplicationList: React.FC = ({ headerName: getHeader('paymentStatus'), key: 'paymentStatus', isSortable: true, - transform: ({ talpaStatus }) => - t(`applications.list.columns.talpaStatuses.${String(talpaStatus)}`), + transform: ({ talpaStatus }: ApplicationListTableTransforms) => + renderPaymentTagWrapper(t, talpaStatus as TALPA_STATUSES), }, { headerName: getHeader('calculatedBenefitAmount'), @@ -386,6 +405,7 @@ const ApplicationList: React.FC = ({ renderTagWrapper, renderTableActions, t, + renderPaymentTagWrapper, ]); if (isLoading) { diff --git a/frontend/benefit/handler/src/components/applicationList/ApplicationListForInstalments.tsx b/frontend/benefit/handler/src/components/applicationList/ApplicationListForInstalments.tsx index d4a611a597..f33f1bca2b 100644 --- a/frontend/benefit/handler/src/components/applicationList/ApplicationListForInstalments.tsx +++ b/frontend/benefit/handler/src/components/applicationList/ApplicationListForInstalments.tsx @@ -10,10 +10,7 @@ import { APPLICATION_STATUSES, INSTALMENT_STATUSES, } from 'benefit-shared/constants'; -import { - ApplicationListItemData, - Instalment, -} from 'benefit-shared/types/application'; +import { ApplicationListItemData } from 'benefit-shared/types/application'; import { Button, IconArrowUndo, @@ -75,22 +72,15 @@ const buildApplicationUrl = ( export const renderInstalmentTagPerStatus = ( t: TFunction, - pendingInstalment: Instalment -): JSX.Element => ( - <$TagWrapper - $colors={getInstalmentTagStyleForStatus( - pendingInstalment?.status as INSTALMENT_STATUSES - )} - > - - {t( - `common:applications.list.columns.instalmentStatuses.${ - pendingInstalment?.status as INSTALMENT_STATUSES - }` - )} - - -); + status?: INSTALMENT_STATUSES +): JSX.Element => + status ? ( + <$TagWrapper $colors={getInstalmentTagStyleForStatus(status)}> + + {t(`common:applications.list.columns.instalmentStatuses.${status}`)} + + + ) : null; const ApplicationListForInstalments: React.FC = ({ heading, @@ -149,7 +139,10 @@ const ApplicationListForInstalments: React.FC = ({ { transform: ({ pendingInstalment }: ApplicationListTableTransforms) => - renderInstalmentTagPerStatus(t, pendingInstalment), + renderInstalmentTagPerStatus( + t, + pendingInstalment?.status as INSTALMENT_STATUSES + ), headerName: getHeader('paymentStatus'), key: 'status', isSortable: true, diff --git a/frontend/benefit/handler/src/components/applicationReview/handlingView/InstalmentAccordionSections.tsx b/frontend/benefit/handler/src/components/applicationReview/handlingView/InstalmentAccordionSections.tsx index 8d285b8fd9..9465a608ef 100644 --- a/frontend/benefit/handler/src/components/applicationReview/handlingView/InstalmentAccordionSections.tsx +++ b/frontend/benefit/handler/src/components/applicationReview/handlingView/InstalmentAccordionSections.tsx @@ -12,6 +12,7 @@ import { $ViewField } from 'shared/components/benefit/summaryView/SummaryView.sc import { convertToUIDateFormat } from 'shared/utils/date.utils'; import { formatFloatToEvenEuros } from 'shared/utils/string.utils'; +import { renderPaymentTagPerStatus } from '../../applicationList/ApplicationList'; import { renderInstalmentTagPerStatus } from '../../applicationList/ApplicationListForInstalments'; import { $Column, @@ -40,13 +41,14 @@ const InstalmentAccordionSections: React.FC = ({ data }) => { return ( <> - <$Section className=""> + <$Section> <$CalculatorTableRow> <$ViewField>{t(`${translationsBase}.firstInstalment`)} - {data.pendingInstalment && - formatFloatToEvenEuros(amounts.firstInstalment)} - {!data.pendingInstalment && - formatFloatToEvenEuros(data.calculatedBenefitAmount)} + + <$RowWrap> + {renderPaymentTagPerStatus(t, data.talpaStatus)} +
{formatFloatToEvenEuros(amounts.firstInstalment)}
+ @@ -68,22 +70,23 @@ const InstalmentAccordionSections: React.FC = ({ data }) => { )} <$RowWrap> - {renderInstalmentTagPerStatus(t, data.pendingInstalment)} + {renderInstalmentTagPerStatus( + t, + data.pendingInstalment?.status as INSTALMENT_STATUSES + )} - {(isSecondInstalmentReduced || !areInstalmentsPaid) && ( + {isSecondInstalmentReduced && ( <>
- {isSecondInstalmentReduced && - formatFloatToEvenEuros(data.pendingInstalment?.amount)} + {formatFloatToEvenEuros(amounts.secondInstalmentMax)}
- {isSecondInstalmentReduced && } + )} @@ -136,7 +139,7 @@ const InstalmentAccordionSections: React.FC = ({ data }) => { {amounts.secondInstalment - amounts.alterations < 0 && areInstalmentsPaid && ( <> - <$Section className=""> + <$Section> <$CalculatorTableRow> <$ViewField isBold> {data.pendingInstalment?.status === @@ -147,7 +150,7 @@ const InstalmentAccordionSections: React.FC = ({ data }) => { {formatFloatToEvenEuros(amounts.total)} - <$Section className=""> + <$Section> <$CalculatorTableRow> <$ViewField isBold> <$Wrapper> @@ -168,7 +171,7 @@ const InstalmentAccordionSections: React.FC = ({ data }) => { )} - <$Section className=""> + <$Section> <$CalculatorTableRow> <$ViewField isBold> {t(`${translationsBase}.totalAfterRecoveries`)} diff --git a/frontend/benefit/handler/src/components/applicationReview/handlingView/useInstalmentAccordionSections.ts b/frontend/benefit/handler/src/components/applicationReview/handlingView/useInstalmentAccordionSections.ts index e4688ecb17..78647ab50e 100644 --- a/frontend/benefit/handler/src/components/applicationReview/handlingView/useInstalmentAccordionSections.ts +++ b/frontend/benefit/handler/src/components/applicationReview/handlingView/useInstalmentAccordionSections.ts @@ -21,8 +21,12 @@ type Props = { const useInstalmentAccordionSections = (data: Application): Props => { const amounts = { firstInstalment: data.pendingInstalment - ? data.calculatedBenefitAmount - data.pendingInstalment.amount - : data.calculatedBenefitAmount, + ? Math.max( + 0, + parseInt(data.calculation.calculatedBenefitAmount, 10) - + data.pendingInstalment.amount + ) + : parseInt(data.calculation.calculatedBenefitAmount, 10), secondInstalment: data.pendingInstalment?.amountAfterRecoveries || 0, secondInstalmentMax: data.pendingInstalment?.amount || 0, total: 0, @@ -32,9 +36,11 @@ const useInstalmentAccordionSections = (data: Application): Props => { ?.filter((obj) => obj.state === ALTERATION_STATE.HANDLED) .reduce((prev, cur) => prev + parseInt(cur.recoveryAmount, 10), 0) || 0, }; + amounts.total = amounts.firstInstalment + amounts.secondInstalment; amounts.totalAfterRecoveries = - data.calculatedBenefitAmount - amounts.alterations; + parseInt(data.calculation?.calculatedBenefitAmount, 10) - + amounts.alterations; const isSecondInstalmentReduced = formatFloatToEvenEuros(amounts.secondInstalment) !== diff --git a/frontend/benefit/handler/src/types/applicationList.d.ts b/frontend/benefit/handler/src/types/applicationList.d.ts index 2d845d7748..4d0f75bd36 100644 --- a/frontend/benefit/handler/src/types/applicationList.d.ts +++ b/frontend/benefit/handler/src/types/applicationList.d.ts @@ -12,6 +12,7 @@ export interface ApplicationListTableTransforms { calculatedBenefitAmount?: string; pendingInstalment?: Instalment; alterations: ApplicationAlterationData[]; + talpaStatus?: TALPA_STATUSES; } export interface ApplicationListTableColumns { diff --git a/frontend/benefit/handler/src/utils/applications.ts b/frontend/benefit/handler/src/utils/applications.ts index 661fc5a375..fa500b260c 100644 --- a/frontend/benefit/handler/src/utils/applications.ts +++ b/frontend/benefit/handler/src/utils/applications.ts @@ -1,6 +1,7 @@ import { APPLICATION_STATUSES, INSTALMENT_STATUSES, + TALPA_STATUSES, } from 'benefit-shared/constants'; import theme from 'shared/styles/theme'; @@ -93,3 +94,31 @@ export const getInstalmentTagStyleForStatus = ( } return { background, text }; }; + +export const getTalpaTagStyleForStatus = ( + status?: TALPA_STATUSES +): { background: string; text: string } => { + let background: string; + let text: string = theme.colors.black; + switch (status) { + case TALPA_STATUSES.NOT_SENT_TO_TALPA: + background = theme.colors.black30; + text = theme.colors.white; + break; + + case TALPA_STATUSES.REJECTED_BY_TALPA: + background = theme.colors.error; + text = theme.colors.white; + break; + + case TALPA_STATUSES.SUCCESFULLY_SENT_TO_TALPA: + background = theme.colors.success; + text = theme.colors.white; + break; + + default: + background = theme.colors.black40; + break; + } + return { background, text }; +}; diff --git a/frontend/benefit/shared/src/types/application.d.ts b/frontend/benefit/shared/src/types/application.d.ts index 3af487fc80..a0e36d73b3 100644 --- a/frontend/benefit/shared/src/types/application.d.ts +++ b/frontend/benefit/shared/src/types/application.d.ts @@ -325,6 +325,7 @@ export type Application = { handledByAhjoAutomation?: boolean; batchStatus?: BATCH_STATUSES; pendingInstalment?: Instalment; + talpaStatus?: TALPA_STATUSES; } & Step1 & Step2;