fix: instalment issues (hl-1496 cont.)

frontend/benefit/handler/src/components/applicationList/ApplicationList.tsx

@@ -3,15 +3,19 @@ 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,
   ApplicationListItemData,
   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)}>
+    <Tag>
+      {t(`applications.list.columns.talpaStatuses.${String(talpaStatus)}`)}
+    </Tag>
+  </$TagWrapper>
+);
+
 const ApplicationList: React.FC<ApplicationListProps> = ({
   heading,
   status,
@@ -197,6 +212,10 @@ const ApplicationList: React.FC<ApplicationListProps> = ({
     [t]
   );
 
+  const renderPaymentTagWrapper = React.useCallback(renderPaymentTagPerStatus, [
+    t,
+  ]);
+
   const columns = React.useMemo(() => {
     const cols: ApplicationListTableColumns[] = [
       {
@@ -353,8 +372,8 @@ const ApplicationList: React.FC<ApplicationListProps> = ({
           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<ApplicationListProps> = ({
     renderTagWrapper,
     renderTableActions,
     t,
+    renderPaymentTagWrapper,
   ]);
 
   if (isLoading) {

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
-    )}
-  >
-    <Tag>
-      {t(
-        `common:applications.list.columns.instalmentStatuses.${
-          pendingInstalment?.status as INSTALMENT_STATUSES
-        }`
-      )}
-    </Tag>
-  </$TagWrapper>
-);
+  status?: INSTALMENT_STATUSES
+): JSX.Element =>
+  status ? (
+    <$TagWrapper $colors={getInstalmentTagStyleForStatus(status)}>
+      <Tag>
+        {t(`common:applications.list.columns.instalmentStatuses.${status}`)}
+      </Tag>
+    </$TagWrapper>
+  ) : null;
 
 const ApplicationListForInstalments: React.FC<ApplicationListProps> = ({
   heading,
@@ -149,7 +139,10 @@ const ApplicationListForInstalments: React.FC<ApplicationListProps> = ({
 
       {
         transform: ({ pendingInstalment }: ApplicationListTableTransforms) =>
-          renderInstalmentTagPerStatus(t, pendingInstalment),
+          renderInstalmentTagPerStatus(
+            t,
+            pendingInstalment?.status as INSTALMENT_STATUSES
+          ),
         headerName: getHeader('paymentStatus'),
         key: 'status',
         isSortable: true,

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<Props> = ({ data }) => {
 
   return (
     <>
-      <$Section className="">
+      <$Section>
         <$CalculatorTableRow>
           <$ViewField>{t(`${translationsBase}.firstInstalment`)}</$ViewField>
-          {data.pendingInstalment &&
-            formatFloatToEvenEuros(amounts.firstInstalment)}
-          {!data.pendingInstalment &&
-            formatFloatToEvenEuros(data.calculatedBenefitAmount)}
+
+          <$RowWrap>
+            {renderPaymentTagPerStatus(t, data.talpaStatus)}
+            <div>{formatFloatToEvenEuros(amounts.firstInstalment)}</div>
+          </$RowWrap>
         </$CalculatorTableRow>
       </$Section>
 
@@ -68,22 +70,23 @@ const InstalmentAccordionSections: React.FC<Props> = ({ data }) => {
               )}
             </$ViewField>
             <$RowWrap>
-              {renderInstalmentTagPerStatus(t, data.pendingInstalment)}
+              {renderInstalmentTagPerStatus(
+                t,
+                data.pendingInstalment?.status as INSTALMENT_STATUSES
+              )}
 
-              {(isSecondInstalmentReduced || !areInstalmentsPaid) && (
+              {isSecondInstalmentReduced && (
                 <>
                   <div
                     style={{
-                      textDecoration:
-                        areInstalmentsPaid && isSecondInstalmentReduced
-                          ? 'line-through'
-                          : 'none',
+                      textDecoration: areInstalmentsPaid
+                        ? 'line-through'
+                        : 'none',
                     }}
                   >
-                    {isSecondInstalmentReduced &&
-                      formatFloatToEvenEuros(data.pendingInstalment?.amount)}
+                    {formatFloatToEvenEuros(amounts.secondInstalmentMax)}
                   </div>
-                  {isSecondInstalmentReduced && <IconArrowRight />}
+                  <IconArrowRight />
                 </>
               )}
 
@@ -136,7 +139,7 @@ const InstalmentAccordionSections: React.FC<Props> = ({ data }) => {
       {amounts.secondInstalment - amounts.alterations < 0 &&
         areInstalmentsPaid && (
           <>
-            <$Section className="">
+            <$Section>
               <$CalculatorTableRow>
                 <$ViewField isBold>
                   {data.pendingInstalment?.status ===
@@ -147,7 +150,7 @@ const InstalmentAccordionSections: React.FC<Props> = ({ data }) => {
                 {formatFloatToEvenEuros(amounts.total)}
               </$CalculatorTableRow>
             </$Section>
-            <$Section className="">
+            <$Section>
               <$CalculatorTableRow>
                 <$ViewField isBold>
                   <$Wrapper>
@@ -168,7 +171,7 @@ const InstalmentAccordionSections: React.FC<Props> = ({ data }) => {
           </>
         )}
 
-      <$Section className="">
+      <$Section>
         <$CalculatorTableRow>
           <$ViewField isBold>
             {t(`${translationsBase}.totalAfterRecoveries`)}

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) !==

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 {

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 };
+};

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;