From 027721f01340d30c44a8a870ab794a26e98cf56b Mon Sep 17 00:00:00 2001 From: Joosa Kurvinen Date: Mon, 20 Jan 2025 09:41:36 +0200 Subject: [PATCH 1/3] Move validation logic to a place where it's run even if the collapsible section is closed. Display a warning if some of the preferred units were removed. --- .../unit-preference/UnitPreferenceSection.tsx | 68 ++++++++++++++++++- .../unit-preference/UnitsSubSection.tsx | 40 +++-------- .../defaults/citizen/i18n/en.tsx | 5 ++ .../defaults/citizen/i18n/fi.tsx | 5 ++ .../defaults/citizen/i18n/sv.tsx | 5 ++ 5 files changed, 89 insertions(+), 34 deletions(-) diff --git a/frontend/src/citizen-frontend/applications/editor/unit-preference/UnitPreferenceSection.tsx b/frontend/src/citizen-frontend/applications/editor/unit-preference/UnitPreferenceSection.tsx index df348e32a58..20ee7f40b77 100644 --- a/frontend/src/citizen-frontend/applications/editor/unit-preference/UnitPreferenceSection.tsx +++ b/frontend/src/citizen-frontend/applications/editor/unit-preference/UnitPreferenceSection.tsx @@ -2,18 +2,22 @@ // // SPDX-License-Identifier: LGPL-2.1-or-later -import React from 'react' +import React, { useContext, useEffect } from 'react' import { UnitPreferenceFormData } from 'lib-common/api-types/application/ApplicationFormData' import { getErrorCount } from 'lib-common/form-validation' import { ApplicationType } from 'lib-common/generated/api-types/application' import LocalDate from 'lib-common/local-date' +import { constantQuery, useQuery } from 'lib-common/query' import HorizontalLine from 'lib-components/atoms/HorizontalLine' +import { faExclamation } from 'lib-icons' import EditorSection from '../../../applications/editor/EditorSection' import SiblingBasisSubSection from '../../../applications/editor/unit-preference/SiblingBasisSubSection' import UnitsSubSection from '../../../applications/editor/unit-preference/UnitsSubSection' import { useTranslation } from '../../../localization' +import { OverlayContext } from '../../../overlay/state' +import { applicationUnitsQuery } from '../../queries' import { ApplicationFormDataErrors } from '../validations' export type UnitPreferenceSectionCommonProps = { @@ -41,6 +45,66 @@ export default React.memo(function UnitPreferenceSection( ) { const t = useTranslation() + const { + updateFormData, + applicationType, + preparatory, + preferredStartDate, + shiftCare + } = props + + const { setInfoMessage, clearInfoMessage } = useContext(OverlayContext) + + const { data: units = null } = useQuery( + preferredStartDate + ? applicationUnitsQuery({ + type: + applicationType === 'CLUB' + ? 'CLUB' + : applicationType === 'DAYCARE' + ? 'DAYCARE' + : preparatory + ? 'PREPARATORY' + : 'PRESCHOOL', + date: preferredStartDate, + shiftCare + }) + : constantQuery([]) + ) + + useEffect(() => { + updateFormData((prev) => { + if ( + units && + prev.preferredUnits.some((u1) => !units.some((u2) => u1.id === u2.id)) + ) { + setInfoMessage({ + title: t.applications.editor.unitChangeWarning.title, + text: t.applications.editor.unitChangeWarning.text, + type: 'warning', + icon: faExclamation, + resolve: { + action: clearInfoMessage, + label: t.applications.editor.unitChangeWarning.ok + } + }) + } + return { + preferredUnits: units + ? prev.preferredUnits.filter(({ id }) => + units.some((unit) => unit.id === id) + ) + : prev.preferredUnits + } + }) + }, [ + units, + updateFormData, + setInfoMessage, + clearInfoMessage, + t.applications.editor.unitChangeWarning + ]) + return ( - + ) }) diff --git a/frontend/src/citizen-frontend/applications/editor/unit-preference/UnitsSubSection.tsx b/frontend/src/citizen-frontend/applications/editor/unit-preference/UnitsSubSection.tsx index 015566501c5..8c426cae562 100644 --- a/frontend/src/citizen-frontend/applications/editor/unit-preference/UnitsSubSection.tsx +++ b/frontend/src/citizen-frontend/applications/editor/unit-preference/UnitsSubSection.tsx @@ -2,10 +2,10 @@ // // SPDX-License-Identifier: LGPL-2.1-or-later -import React, { useEffect, useState } from 'react' +import React, { useState } from 'react' import styled from 'styled-components' -import { constantQuery, useQuery } from 'lib-common/query' +import { PublicUnit } from 'lib-common/generated/api-types/daycare' import { SelectionChip } from 'lib-components/atoms/Chip' import ExternalLink from 'lib-components/atoms/ExternalLink' import MultiSelect from 'lib-components/atoms/form/MultiSelect' @@ -22,51 +22,27 @@ import colors from 'lib-customizations/common' import PreferredUnitBox from '../../../applications/editor/unit-preference/PreferredUnitBox' import { useTranslation } from '../../../localization' -import { applicationUnitsQuery } from '../../queries' import { UnitPreferenceSectionProps } from './UnitPreferenceSection' +interface Props extends UnitPreferenceSectionProps { + units: PublicUnit[] | null +} + export default React.memo(function UnitsSubSection({ formData, updateFormData, errors, verificationRequested, applicationType, - preparatory, preferredStartDate, - shiftCare -}: UnitPreferenceSectionProps) { + units +}: Props) { const t = useTranslation() const [displayFinnish, setDisplayFinnish] = useState(true) const [displaySwedish, setDisplaySwedish] = useState(false) const [isUnitSelectionInvalid, setIsUnitSelectionInvalid] = useState(false) - const { data: units = null } = useQuery( - preferredStartDate - ? applicationUnitsQuery({ - type: - applicationType === 'CLUB' - ? 'CLUB' - : applicationType === 'DAYCARE' - ? 'DAYCARE' - : preparatory - ? 'PREPARATORY' - : 'PRESCHOOL', - date: preferredStartDate, - shiftCare - }) - : constantQuery([]) - ) - useEffect(() => { - updateFormData((prev) => ({ - preferredUnits: units - ? prev.preferredUnits.filter(({ id }) => - units.some((unit) => unit.id === id) - ) - : prev.preferredUnits - })) - }, [units, updateFormData]) - const maxUnits = getMaxPreferredUnits(applicationType) return ( diff --git a/frontend/src/lib-customizations/defaults/citizen/i18n/en.tsx b/frontend/src/lib-customizations/defaults/citizen/i18n/en.tsx index de73eadc0b5..2d01a774cc4 100644 --- a/frontend/src/lib-customizations/defaults/citizen/i18n/en.tsx +++ b/frontend/src/lib-customizations/defaults/citizen/i18n/en.tsx @@ -1569,6 +1569,11 @@ const en: Translations = { title: 'Modifications saved', text: 'If you wish, you can make further changes as long as the application has not been processed.', ok: 'Ok!' + }, + unitChangeWarning: { + title: 'Check the unit preferences', + text: 'Some of the preferred units you selected were removed, because they do not offer the selected service.', + ok: 'Ok!' } } }, diff --git a/frontend/src/lib-customizations/defaults/citizen/i18n/fi.tsx b/frontend/src/lib-customizations/defaults/citizen/i18n/fi.tsx index 204219fd3a6..3e1714e9ee4 100644 --- a/frontend/src/lib-customizations/defaults/citizen/i18n/fi.tsx +++ b/frontend/src/lib-customizations/defaults/citizen/i18n/fi.tsx @@ -1513,6 +1513,11 @@ export default { title: 'Muutokset hakemukseen on tallennettu', text: 'Halutessasi voit tehdä lisää muutoksia niin kauan kuin hakemusta ei olla otettu käsittelyyn.', ok: 'Selvä!' + }, + unitChangeWarning: { + title: 'Tarkista hakutoiveet', + text: 'Osa merkitsemistäsi hakutoiveista poistettiin, koska ne eivät tarjoa valittua palvelua.', + ok: 'Selvä!' } } }, diff --git a/frontend/src/lib-customizations/defaults/citizen/i18n/sv.tsx b/frontend/src/lib-customizations/defaults/citizen/i18n/sv.tsx index 081f92f05c8..b37ba78ad53 100644 --- a/frontend/src/lib-customizations/defaults/citizen/i18n/sv.tsx +++ b/frontend/src/lib-customizations/defaults/citizen/i18n/sv.tsx @@ -1517,6 +1517,11 @@ const sv: Translations = { title: 'Ändringar i ansökan har sparats.', text: 'Om du vill kan du göra ändringar i ansökan så länge ansökan inte har behandlats.', ok: 'Klart!' + }, + unitChangeWarning: { + title: 'Vänligen kontrollera dina sökningar', + text: 'Vissa av de sökningar du angav har tagits bort eftersom de inte erbjuder den valda tjänsten.', + ok: 'Klart!' } } }, From 0c620c12ad7cc76a701a3690f83be0eb16f671ab Mon Sep 17 00:00:00 2001 From: Joosa Kurvinen Date: Mon, 20 Jan 2025 11:18:41 +0200 Subject: [PATCH 2/3] fix preferences disappearing immediately when clearing preferred start date (should happen after selecting new date in case some units are no longer valid) --- .../editor/unit-preference/UnitPreferenceSection.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/citizen-frontend/applications/editor/unit-preference/UnitPreferenceSection.tsx b/frontend/src/citizen-frontend/applications/editor/unit-preference/UnitPreferenceSection.tsx index 20ee7f40b77..3d39e613bed 100644 --- a/frontend/src/citizen-frontend/applications/editor/unit-preference/UnitPreferenceSection.tsx +++ b/frontend/src/citizen-frontend/applications/editor/unit-preference/UnitPreferenceSection.tsx @@ -69,7 +69,7 @@ export default React.memo(function UnitPreferenceSection( date: preferredStartDate, shiftCare }) - : constantQuery([]) + : constantQuery(null) ) useEffect(() => { From ae54f1728016d84b94249bac3409b0192e155ca0 Mon Sep 17 00:00:00 2001 From: Joosa Kurvinen Date: Tue, 21 Jan 2025 15:15:46 +0200 Subject: [PATCH 3/3] simplify --- .../unit-preference/UnitPreferenceSection.tsx | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/frontend/src/citizen-frontend/applications/editor/unit-preference/UnitPreferenceSection.tsx b/frontend/src/citizen-frontend/applications/editor/unit-preference/UnitPreferenceSection.tsx index 3d39e613bed..7588f36b697 100644 --- a/frontend/src/citizen-frontend/applications/editor/unit-preference/UnitPreferenceSection.tsx +++ b/frontend/src/citizen-frontend/applications/editor/unit-preference/UnitPreferenceSection.tsx @@ -74,10 +74,13 @@ export default React.memo(function UnitPreferenceSection( useEffect(() => { updateFormData((prev) => { - if ( - units && - prev.preferredUnits.some((u1) => !units.some((u2) => u1.id === u2.id)) - ) { + const preferredUnits = units + ? prev.preferredUnits.filter(({ id }) => + units.some((unit) => unit.id === id) + ) + : prev.preferredUnits + + if (preferredUnits.length < prev.preferredUnits.length) { setInfoMessage({ title: t.applications.editor.unitChangeWarning.title, text: t.applications.editor.unitChangeWarning.text, @@ -89,13 +92,8 @@ export default React.memo(function UnitPreferenceSection( } }) } - return { - preferredUnits: units - ? prev.preferredUnits.filter(({ id }) => - units.some((unit) => unit.id === id) - ) - : prev.preferredUnits - } + + return { preferredUnits } }) }, [ units,