diff --git a/frontend/benefit/handler/public/locales/en/common.json b/frontend/benefit/handler/public/locales/en/common.json index 34114e7f07..d3e09972c5 100644 --- a/frontend/benefit/handler/public/locales/en/common.json +++ b/frontend/benefit/handler/public/locales/en/common.json @@ -753,6 +753,10 @@ "noChanges": "Ei muutoksia lomaketietoihin. Mikäli poistit tai lisäsit liitetiedostoja, voit kirjata niiden syyn." }, "helperText": "Kirjaa milloin ja mitä kautta hakija on ollut yhteydessä. Tiedot tulevat näkyviin hakemuksen muutoshistoriassa." + }, + "talpaStatusChange": { + "heading": "Maksun tilan muutos", + "text": "Tuen automaattinen maksu on epäonnistunut. Palauta hakemus odottamaan automaattista Talpa-käsittelyä tai merkitse maksu suoritetuksi jolloin maksutapahtuma on vahvistettava manuaalisesti Talpalta." } }, "decision": { diff --git a/frontend/benefit/handler/public/locales/fi/common.json b/frontend/benefit/handler/public/locales/fi/common.json index 1693c71da7..fb72597620 100644 --- a/frontend/benefit/handler/public/locales/fi/common.json +++ b/frontend/benefit/handler/public/locales/fi/common.json @@ -753,6 +753,10 @@ "noChanges": "Ei muutoksia lomaketietoihin. Mikäli poistit tai lisäsit liitetiedostoja, voit kirjata niiden syyn." }, "helperText": "Kirjaa milloin ja mitä kautta hakija on ollut yhteydessä. Tiedot tulevat näkyviin hakemuksen muutoshistoriassa." + }, + "talpaStatusChange": { + "heading": "Maksun tilan muutos", + "text": "Tuen automaattinen maksu on epäonnistunut. Palauta hakemus odottamaan automaattista Talpa-käsittelyä tai merkitse maksu suoritetuksi jolloin maksutapahtuma on vahvistettava manuaalisesti Talpalta." } }, "decision": { diff --git a/frontend/benefit/handler/public/locales/sv/common.json b/frontend/benefit/handler/public/locales/sv/common.json index 2749cf153e..ffc8a41cc4 100644 --- a/frontend/benefit/handler/public/locales/sv/common.json +++ b/frontend/benefit/handler/public/locales/sv/common.json @@ -753,6 +753,10 @@ "noChanges": "Ei muutoksia lomaketietoihin. Mikäli poistit tai lisäsit liitetiedostoja, voit kirjata niiden syyn." }, "helperText": "Kirjaa milloin ja mitä kautta hakija on ollut yhteydessä. Tiedot tulevat näkyviin hakemuksen muutoshistoriassa." + }, + "talpaStatusChange": { + "heading": "Maksun tilan muutos", + "text": "Tuen automaattinen maksu on epäonnistunut. Palauta hakemus odottamaan automaattista Talpa-käsittelyä tai merkitse maksu suoritetuksi jolloin maksutapahtuma on vahvistettava manuaalisesti Talpalta." } }, "decision": { diff --git a/frontend/benefit/handler/src/components/applicationList/ApplicationList.tsx b/frontend/benefit/handler/src/components/applicationList/ApplicationList.tsx index f78c60a717..9f44d5d00b 100644 --- a/frontend/benefit/handler/src/components/applicationList/ApplicationList.tsx +++ b/frontend/benefit/handler/src/components/applicationList/ApplicationList.tsx @@ -1,5 +1,5 @@ import { ALL_APPLICATION_STATUSES, ROUTES } from 'benefit/handler/constants'; -import useTalpaStatusTransition from 'benefit/handler/hooks/useTalpaStatusTransition'; +import useInstalmentStatusTransition from 'benefit/handler/hooks/useInstalmentStatusTransition'; import { ApplicationListTableColumns, ApplicationListTableTransforms, @@ -8,31 +8,21 @@ import { getTagStyleForStatus, getTalpaTagStyleForStatus, } from 'benefit/handler/utils/applications'; -import { APPLICATION_STATUSES, TALPA_STATUSES } from 'benefit-shared/constants'; +import { + APPLICATION_STATUSES, + INSTALMENT_STATUSES, + TALPA_STATUSES, +} from 'benefit-shared/constants'; import { AhjoError, ApplicationAlteration, ApplicationListItemData, Instalment, } from 'benefit-shared/types/application'; -import { - Button, - IconArrowRedo, - IconArrowUndo, - IconSpeechbubbleText, - Table, - Tag, - Tooltip, -} from 'hds-react'; +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 Container from 'shared/components/container/Container'; -import { - $Grid, - $GridCell, -} from 'shared/components/forms/section/FormSection.sc'; -import Modal from 'shared/components/modal/Modal'; import { $Link } from 'shared/components/table/Table.sc'; import { convertToUIDateAndTimeFormat, @@ -52,6 +42,7 @@ import { $TagWrapper, $UnreadMessagesCount, } from './ApplicationList.sc'; +import TalpaStatusChangeModal from './TalpaStatusChangeDialog'; import { useApplicationList } from './useApplicationList'; export interface ApplicationListProps { @@ -120,7 +111,13 @@ export const renderPaymentTagPerStatus = ( clickTalpaTag?: (id: string, talpaStatus: TALPA_STATUSES) => void ): JSX.Element => ( <$TagWrapper $colors={getTalpaTagStyleForStatus(talpaStatus)}> - clickTalpaTag(id, talpaStatus)}> + clickTalpaTag(id, talpaStatus) + : null + } + > {t(`applications.list.columns.talpaStatuses.${String(talpaStatus)}`)} @@ -170,7 +167,16 @@ const ApplicationList: React.FC = ({ const [showTalpaModal, setShowTaplaModal] = React.useState(false); const [selectedApplication, setSelectedApplication] = React.useState(''); - const { mutate: changeTalpaStatus } = useTalpaStatusTransition(); + const { + mutate: changeInstalmentStatus, + isSuccess: isInstalmentStatusChanged, + } = useInstalmentStatusTransition(); + + React.useEffect(() => { + if (isInstalmentStatusChanged) { + setShowTaplaModal(false); + } + }, [isInstalmentStatusChanged]); const renderTableActions = React.useCallback( ( @@ -401,11 +407,14 @@ const ApplicationList: React.FC = ({ headerName: getHeader('paymentStatus'), key: 'paymentStatus', isSortable: true, - transform: ({ talpaStatus, id }: ApplicationListTableTransforms) => + transform: ({ + talpaStatus, + firstInstalment, + }: ApplicationListTableTransforms) => renderPaymentTagPerStatus( t, talpaStatus as TALPA_STATUSES, - id, + firstInstalment?.id, onTalpaTagClick ), }, @@ -460,9 +469,8 @@ const ApplicationList: React.FC = ({ } const statusAsString = isAllStatuses ? 'all' : status.join(','); - const handleTalpaStatusChange = (talpaStatus: TALPA_STATUSES): void => { - changeTalpaStatus({ id: selectedApplication, status: talpaStatus }); - console.log('status:', talpaStatus, selectedApplication); + const handleTalpaStatusChange = (talpaStatus: INSTALMENT_STATUSES): void => { + changeInstalmentStatus({ id: selectedApplication, status: talpaStatus }); }; return ( @@ -482,44 +490,10 @@ const ApplicationList: React.FC = ({ )} - false} - handleSubmit={() => false} - customContent={ - - <$Grid columns={2}> - <$GridCell> - - - <$GridCell> - - - - - } + onClose={() => setShowTaplaModal(false)} + onStatusChange={handleTalpaStatusChange} /> ); diff --git a/frontend/benefit/handler/src/components/applicationList/TalpaStatusChangeDialog.tsx b/frontend/benefit/handler/src/components/applicationList/TalpaStatusChangeDialog.tsx new file mode 100644 index 0000000000..84187938f7 --- /dev/null +++ b/frontend/benefit/handler/src/components/applicationList/TalpaStatusChangeDialog.tsx @@ -0,0 +1,67 @@ +import { INSTALMENT_STATUSES } from 'benefit-shared/constants'; +import { Button, Dialog, IconArrowRedo, IconArrowUndo } from 'hds-react'; +import React from 'react'; +import { + $Grid, + $GridCell, +} from 'shared/components/forms/section/FormSection.sc'; +import Modal from 'shared/components/modal/Modal'; +import { useTheme } from 'styled-components'; + +import { useApplicationList } from './useApplicationList'; + +const TalpaStatusChangeModal: React.FC<{ + isOpen: boolean; + onClose: () => void; + onStatusChange: (status: INSTALMENT_STATUSES) => void; +}> = ({ isOpen, onClose, onStatusChange }) => { + const { t } = useApplicationList(); + const theme = useTheme(); + + return ( + false} + handleSubmit={() => false} + customContent={ + <> + + <$Grid columns={1} alignItems="center"> + <$GridCell> +

{t('applications.dialog.talpaStatusChange.heading')}

+

{t('applications.dialog.talpaStatusChange.text')}

+ + +
+ + + + + + + + } + /> + ); +}; + +export default TalpaStatusChangeModal; diff --git a/frontend/benefit/handler/src/components/applicationList/useApplicationListData.ts b/frontend/benefit/handler/src/components/applicationList/useApplicationListData.ts index 60bca058b5..bd7152eefa 100644 --- a/frontend/benefit/handler/src/components/applicationList/useApplicationListData.ts +++ b/frontend/benefit/handler/src/components/applicationList/useApplicationListData.ts @@ -45,6 +45,7 @@ const useApplicationListData = ( handled_by_ahjo_automation, handled_at: handledAt, ahjo_error, + first_instalment, second_instalment, alterations, } = application; @@ -77,6 +78,7 @@ const useApplicationListData = ( ahjoError: camelcaseKeys(ahjo_error, { deep: true }) || null, decisionDate: convertToUIDateFormat(batch?.decision_date) || '-', calculatedBenefitAmount: calculation?.calculated_benefit_amount || '0', + firstInstalment: camelcaseKeys(first_instalment), secondInstalment: camelcaseKeys(second_instalment), alterations: alterations || [], }; diff --git a/frontend/benefit/handler/src/components/applicationReview/handlingView/InstalmentAccordionSections.tsx b/frontend/benefit/handler/src/components/applicationReview/handlingView/InstalmentAccordionSections.tsx index 8d36e828d2..002e1bb188 100644 --- a/frontend/benefit/handler/src/components/applicationReview/handlingView/InstalmentAccordionSections.tsx +++ b/frontend/benefit/handler/src/components/applicationReview/handlingView/InstalmentAccordionSections.tsx @@ -1,4 +1,5 @@ import { $Section } from 'benefit/handler/components/applicationReview/handlingView/DecisionCalculationAccordion.sc'; +import useInstalmentStatusTransition from 'benefit/handler/hooks/useInstalmentStatusTransition'; import { ALTERATION_STATE, INSTALMENT_STATUSES, @@ -14,6 +15,7 @@ import { formatFloatToEvenEuros } from 'shared/utils/string.utils'; import { renderPaymentTagPerStatus } from '../../applicationList/ApplicationList'; import { renderInstalmentTagPerStatus } from '../../applicationList/ApplicationListForInstalments'; +import TalpaStatusChangeModal from '../../applicationList/TalpaStatusChangeDialog'; import { $Column, $Wrapper, @@ -28,7 +30,24 @@ type Props = { const InstalmentAccordionSections: React.FC = ({ data }) => { const translationsBase = 'common:calculators.result'; const { t } = useTranslation(); - + const [showTalpaModal, setShowTaplaModal] = React.useState(false); + const { + mutate: changeInstalmentStatus, + isSuccess: isInstalmentStatusChanged, + } = useInstalmentStatusTransition(); + + React.useEffect(() => { + if (isInstalmentStatusChanged) { + setShowTaplaModal(false); + } + }, [isInstalmentStatusChanged]); + + const handleTalpaStatusChange = (talpaStatus: INSTALMENT_STATUSES): void => { + changeInstalmentStatus({ + id: data?.firstInstalment?.id, + status: talpaStatus, + }); + }; const secondInstalmentText = data.secondInstalment ? ( <> {t(`${translationsBase}.secondInstalment`)}{' '} @@ -39,6 +58,10 @@ const InstalmentAccordionSections: React.FC = ({ data }) => { const { amounts, areInstalmentsPaid, isSecondInstalmentReduced } = useInstalmentAccordionSections(data); + const onTalpaTagClick = (): void => { + setShowTaplaModal(true); + }; + return ( <> <$Section> @@ -46,7 +69,12 @@ const InstalmentAccordionSections: React.FC = ({ data }) => { <$ViewField>{t(`${translationsBase}.firstInstalment`)} <$RowWrap> - {renderPaymentTagPerStatus(t, data.talpaStatus)} + {renderPaymentTagPerStatus( + t, + data.talpaStatus, + data?.firstInstalment?.id, + onTalpaTagClick + )}
{formatFloatToEvenEuros(amounts.firstInstalment)}
@@ -179,6 +207,12 @@ const InstalmentAccordionSections: React.FC = ({ data }) => { {formatFloatToEvenEuros(amounts.totalAfterRecoveries)} + + setShowTaplaModal(false)} + onStatusChange={handleTalpaStatusChange} + /> ); }; diff --git a/frontend/benefit/handler/src/hooks/useInstalmentStatusTransition.ts b/frontend/benefit/handler/src/hooks/useInstalmentStatusTransition.ts index e2d0ca58d8..5d37f9ea0c 100644 --- a/frontend/benefit/handler/src/hooks/useInstalmentStatusTransition.ts +++ b/frontend/benefit/handler/src/hooks/useInstalmentStatusTransition.ts @@ -32,6 +32,8 @@ const useInstalmentStatusTransition = (): UseMutationResult< { onSuccess: () => { void queryClient.invalidateQueries('applicationsList'); + void queryClient.invalidateQueries('application'); + void queryClient.invalidateQueries('applications'); }, onError: (error: AxiosError>) => { showErrorToast( diff --git a/frontend/benefit/handler/src/types/applicationList.d.ts b/frontend/benefit/handler/src/types/applicationList.d.ts index d63de82332..7bbb3a5458 100644 --- a/frontend/benefit/handler/src/types/applicationList.d.ts +++ b/frontend/benefit/handler/src/types/applicationList.d.ts @@ -10,6 +10,7 @@ export interface ApplicationListTableTransforms { applicationOrigin?: APPLICATION_ORIGINS; ahjoError: AhjoError; calculatedBenefitAmount?: string; + firstInstalment?: Instalment; secondInstalment?: Instalment; alterations: ApplicationAlterationData[]; talpaStatus?: TALPA_STATUSES; diff --git a/frontend/benefit/handler/src/utils/applications.ts b/frontend/benefit/handler/src/utils/applications.ts index fa500b260c..fcd4429bce 100644 --- a/frontend/benefit/handler/src/utils/applications.ts +++ b/frontend/benefit/handler/src/utils/applications.ts @@ -111,7 +111,8 @@ export const getTalpaTagStyleForStatus = ( text = theme.colors.white; break; - case TALPA_STATUSES.SUCCESFULLY_SENT_TO_TALPA: + case TALPA_STATUSES.SUCCESFULLY_SENT_TO_TALPA || + TALPA_STATUSES.PARTIALLY_SENT_TO_TALPA: background = theme.colors.success; text = theme.colors.white; break; diff --git a/frontend/benefit/shared/src/constants.ts b/frontend/benefit/shared/src/constants.ts index 4326fb6061..a0e4d88d0b 100644 --- a/frontend/benefit/shared/src/constants.ts +++ b/frontend/benefit/shared/src/constants.ts @@ -156,6 +156,7 @@ export enum TALPA_STATUSES { NOT_SENT_TO_TALPA = 'not_sent_to_talpa', REJECTED_BY_TALPA = 'rejected_by_talpa', SUCCESFULLY_SENT_TO_TALPA = 'succesfully_sent_to_talpa', + PARTIALLY_SENT_TO_TALPA = 'partially_sent_to_talpa', } export enum APPLICATION_ORIGINS { diff --git a/frontend/benefit/shared/src/types/application.d.ts b/frontend/benefit/shared/src/types/application.d.ts index bf36dcf4c9..d7f03f76fa 100644 --- a/frontend/benefit/shared/src/types/application.d.ts +++ b/frontend/benefit/shared/src/types/application.d.ts @@ -324,6 +324,7 @@ export type Application = { ahjoStatus?: string; handledByAhjoAutomation?: boolean; batchStatus?: BATCH_STATUSES; + firstInstalment?: Instalment; secondInstalment?: Instalment; talpaStatus?: TALPA_STATUSES; } & Step1 & @@ -518,6 +519,7 @@ export type ApplicationData = { handled_by_ahjo_automation?: boolean; alterations: ApplicationAlterationData[]; ahjo_error?: AhjoErrorData; + first_instalment?: InstalmentData; second_instalment?: InstalmentData; }; @@ -619,6 +621,7 @@ export type ApplicationListItemData = { ahjoError?: AhjoError; decisionDate?: string; calculatedBenefitAmount?: string; + firstInstalment?: Instalment; secondInstalment?: Instalment; };