diff --git a/publisher/src/components/AgencySettings/AgencySettings.styles.tsx b/publisher/src/components/AgencySettings/AgencySettings.styles.tsx index 53c19ec66..a1734b5a3 100644 --- a/publisher/src/components/AgencySettings/AgencySettings.styles.tsx +++ b/publisher/src/components/AgencySettings/AgencySettings.styles.tsx @@ -444,6 +444,13 @@ export const SupervisionSystemRow = styled(AgencySettingsInfoRow)<{ border: none; `; +// Agency Defifnition +export const DefinitionDescriptionInputWrapper = styled.div` + :not(:last-child) { + padding-bottom: 24px; + } +`; + // Data Source export const DataSourceContainer = styled.div` border-top: 1px solid ${palette.highlight.grey5}; diff --git a/publisher/src/components/AgencySettings/AgencySettingsDefinition.tsx b/publisher/src/components/AgencySettings/AgencySettingsDefinition.tsx index 2043c2489..8cf8f6e39 100644 --- a/publisher/src/components/AgencySettings/AgencySettingsDefinition.tsx +++ b/publisher/src/components/AgencySettings/AgencySettingsDefinition.tsx @@ -38,6 +38,7 @@ import { DataSourceContainer, DataSourceQuestionWrapper, DataSourceTitle, + DefinitionDescriptionInputWrapper, EditButtonContainer, } from "./AgencySettings.styles"; import { AgencySettingsEditModeModal } from "./AgencySettingsEditModeModal"; @@ -56,14 +57,14 @@ type AgencyDefinitionSetting = { sector: AgencySystemKeys; settings: { key: string; - included: IncludedValue; + included?: IncludedValue; value?: string; }[]; }; const getDefaultSetting = ( systems: AgencySystemKeys[], - defaultIncluded?: IncludedValue + unconfiguredDefault?: IncludedValue ): AgencyDefinitionSetting[] => { if (!systems.length) return []; @@ -74,7 +75,7 @@ const getDefaultSetting = ( ([key, obj]) => { return { key, - included: defaultIncluded ?? obj.default, + included: unconfiguredDefault ?? obj.default, }; } ), @@ -115,7 +116,6 @@ const AgencySettingsDefinition: React.FC<{ const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false); const [currentSystems, setCurrentSystems] = useState([]); - const [descriptionValue, setDescriptionValue] = useState(""); const agencyDefinitionSetting = useMemo(() => { return ( @@ -125,8 +125,6 @@ const AgencySettingsDefinition: React.FC<{ ); }, [currentAgencySettings]); - const isSettingConfigured = agencyDefinitionSetting.length > 0; - useEffect(() => { setCurrentSystems([]); @@ -152,15 +150,22 @@ const AgencySettingsDefinition: React.FC<{ isCombinedAgency, ]); - const initialSetting = isSettingConfigured - ? agencyDefinitionSetting - : getDefaultSetting(currentSystems, IncludesExcludesEnum.NO); + const configuredSystems = agencyDefinitionSetting.map( + (setting) => setting.sector + ); + const unconfiguredSystems = currentSystems.filter( + (sector) => !configuredSystems.includes(sector) + ); + + const initialSetting = [ + ...agencyDefinitionSetting, + ...getDefaultSetting(unconfiguredSystems, IncludesExcludesEnum.NO), + ]; const [updatedSetting, setUpdatedSetting] = useState(initialSetting); useEffect(() => { setUpdatedSetting(initialSetting); - setDescriptionValue(""); // eslint-disable-next-line react-hooks/exhaustive-deps }, [agencyDefinitionSetting, currentSystems]); @@ -215,6 +220,28 @@ const AgencySettingsDefinition: React.FC<{ }); }; + const handleDescriptionChange = (system: AgencySystemKeys, value: string) => { + setUpdatedSetting((prevSettings) => { + return prevSettings.map((sector) => { + if (sector.sector === system) { + return { + ...sector, + settings: [ + ...sector.settings.filter( + (setting) => setting.key !== "ADDITIONAL_CONTEXT" + ), // Ensure no duplicate keys + { + key: "ADDITIONAL_CONTEXT", + value, + }, + ], + }; + } + return sector; + }); + }); + }; + if (!currentSystems.length) return null; return ( @@ -243,6 +270,12 @@ const AgencySettingsDefinition: React.FC<{ {currentSystems?.map((system) => { + const defaultDescription = initialSetting + .find((setting) => setting.sector === system) + ?.settings.find( + (setting) => setting.key === "ADDITIONAL_CONTEXT" + )?.value; + return ( {isSupervisionAgencyWithEnabledSubpopulations && ( @@ -272,21 +305,23 @@ const AgencySettingsDefinition: React.FC<{ handleCheckboxChange(key, checked, system) } /> + + + handleDescriptionChange(system, e.target.value) + } + fullWidth + /> + ); })} - { - setDescriptionValue(e.target.value); - }} - fullWidth - /> } buttons={[ @@ -309,7 +344,7 @@ const AgencySettingsDefinition: React.FC<{ )} - + {agencyTitle} Agency Definition {allowEdit && (