diff --git a/packages/v2/gui/src/sak/meldinger/FritekstInput.stories.tsx b/packages/v2/gui/src/sak/meldinger/FritekstInput.stories.tsx index 96cf902142..989924a0a9 100644 --- a/packages/v2/gui/src/sak/meldinger/FritekstInput.stories.tsx +++ b/packages/v2/gui/src/sak/meldinger/FritekstInput.stories.tsx @@ -19,7 +19,7 @@ export const Default: StoryObj = { args: { språk: { kode: 'NB', kodeverk: 'SPRAAK_KODE' }, show: true, - showTitle: true, + fritekstModus: 'EnkelFritekst', showValidation: true, }, }; diff --git a/packages/v2/gui/src/sak/meldinger/FritekstInput.tsx b/packages/v2/gui/src/sak/meldinger/FritekstInput.tsx index 7e964a8425..bc88cf9d89 100644 --- a/packages/v2/gui/src/sak/meldinger/FritekstInput.tsx +++ b/packages/v2/gui/src/sak/meldinger/FritekstInput.tsx @@ -1,6 +1,6 @@ import React, { type ForwardedRef, forwardRef, useEffect, useImperativeHandle, useReducer } from 'react'; import { Tag, type TagProps, Textarea, TextField } from '@navikt/ds-react'; -import { $FritekstbrevinnholdDto } from '@k9-sak-web/backend/k9sak/generated'; +import { $BestillBrevDto, $FritekstbrevinnholdDto } from '@k9-sak-web/backend/k9sak/generated'; import type { Språkkode } from '@k9-sak-web/backend/k9sak/kodeverk/Språkkode.js'; import { validateTextCharacters } from '../../utils/validation/validateTextCharacters.js'; @@ -26,10 +26,13 @@ export interface FritekstInputInvalid { readonly tekst?: never; } +// Sending av brev med fritekst har to ulike varianter. Ein kort enkel fritekst eller lengre tekst med tittel. +export type FritekstModus = 'EnkelFritekst' | 'StørreFritekstOgTittel'; + type FritekstInputProps = { readonly språk: Språkkode; readonly show: boolean; - readonly showTitle: boolean; + readonly fritekstModus: FritekstModus; readonly showValidation: boolean; readonly defaultValue?: FritekstInputValue; readonly onChange?: (value: FritekstInputValue | FritekstInputInvalid) => void; @@ -41,8 +44,9 @@ export interface FritekstInputMethods { setValue(value: FritekstInputValue): void; } -const fritekstMaxLength = $FritekstbrevinnholdDto.properties.brødtekst.maxLength; const tittelMaxLength = $FritekstbrevinnholdDto.properties.overskrift.maxLength; +const storFritekstMaxLength = $FritekstbrevinnholdDto.properties.brødtekst.maxLength; +const litenFritekstMaxLength = $BestillBrevDto.properties.fritekst.maxLength const validateTittel = (newValue: string | undefined): Valid | Error => { const input = newValue || ''; @@ -58,11 +62,12 @@ const validateTittel = (newValue: string | undefined): Valid | Error => { const tittelReducer = (_: Valid | Error, newValue: string | undefined): Valid | Error => validateTittel(newValue); -const validateTekst = (newValue: string | undefined): Valid | Error => { - const input = newValue || ''; - const len = newValue?.trim().length || 0; - if (newValue !== undefined && len > 0 && len <= fritekstMaxLength) { - const charValidationResult = validateTextCharacters(newValue); +const validateTekst = (tekst: string | undefined, fritekstModus: FritekstModus): Valid | Error => { + const input = tekst || ''; + const fritekstMaxLength = fritekstModus === "StørreFritekstOgTittel" ? storFritekstMaxLength : litenFritekstMaxLength + const len = tekst?.trim().length || 0; + if (tekst !== undefined && len > 0 && len <= fritekstMaxLength) { + const charValidationResult = validateTextCharacters(tekst); if (charValidationResult.ok) { // validation ok return { valid: true, input }; @@ -77,7 +82,8 @@ const validateTekst = (newValue: string | undefined): Valid | Error => { return { valid: false, input, error: `Fritekst kan være maks ${fritekstMaxLength} tegn` }; }; -const tekstReducer = (_: Valid | Error, newValue: string | undefined): Valid | Error => validateTekst(newValue); +const tekstReducer = (_: Valid | Error, newValue: {tekst: string | undefined, modus: FritekstModus}): Valid | Error => + validateTekst(newValue.tekst, newValue.modus); const resolveLanguageName = (språk: Språkkode): string => { switch (språk.kode.toUpperCase()) { @@ -107,15 +113,15 @@ const resolveLanguageTagVariant = (språk: Språkkode): TagProps['variant'] => */ const FritekstInput = forwardRef( ( - { språk, show, showTitle, showValidation = false, defaultValue, onChange }: FritekstInputProps, + { språk, show, fritekstModus, showValidation = false, defaultValue, onChange }: FritekstInputProps, ref: ForwardedRef, ) => { const [tittel, setTittel] = useReducer(tittelReducer, validateTittel(defaultValue?.tittel)); - const [tekst, setTekst] = useReducer(tekstReducer, validateTekst(defaultValue?.tekst)); + const [tekst, setTekst] = useReducer(tekstReducer, validateTekst(defaultValue?.tekst, fritekstModus)); const getValue = (): FritekstInputValue | FritekstInputInvalid => { if (tekst.valid) { - if (!showTitle) { + if (fritekstModus === 'EnkelFritekst') { return { tittel: undefined, tekst: tekst.input }; } if (tittel.valid) { @@ -126,24 +132,25 @@ const FritekstInput = forwardRef( }; const setValue = (value: FritekstInputValue | undefined) => { setTittel(value?.tekst); - setTekst(value?.tekst); + setTekst({tekst: value?.tekst, modus: fritekstModus}); }; useEffect(() => { if (onChange !== undefined) { onChange(getValue()); } - }, [tittel, tekst, showTitle, onChange]); + }, [tittel, tekst, fritekstModus, onChange]); useImperativeHandle(ref, () => { const reset = () => setValue(defaultValue); return { reset, getValue, setValue }; }); if (show) { + const fritekstMaxLength = fritekstModus === 'StørreFritekstOgTittel' ? storFritekstMaxLength : litenFritekstMaxLength return ( <> { - showTitle ? ( + fritekstModus === 'StørreFritekstOgTittel' ? ( setTekst(ev.target.value)} + onChange={ev => setTekst({tekst: ev.target.value, modus: fritekstModus})} /> ); } return null; // Not displaying fritekst input - }, + } ); export default FritekstInput; diff --git a/packages/v2/gui/src/sak/meldinger/Messages.tsx b/packages/v2/gui/src/sak/meldinger/Messages.tsx index d63b5bd6c1..e90fc92235 100644 --- a/packages/v2/gui/src/sak/meldinger/Messages.tsx +++ b/packages/v2/gui/src/sak/meldinger/Messages.tsx @@ -22,7 +22,7 @@ import FritekstForslagSelect from './FritekstForslagSelect.js'; import FritekstInput, { type FritekstInputInvalid, type FritekstInputMethods, - type FritekstInputValue, + type FritekstInputValue, type FritekstModus, } from './FritekstInput.js'; import MalSelect from './MalSelect.jsx'; import type { BehandlingInfo } from '../BehandlingInfo.js'; @@ -238,13 +238,15 @@ const Messages = ({ onValgtMalChanged(valgtMal); }, [valgtMal]); + const fritekstModus: FritekstModus = valgtMal?.støtterTittelOgFritekst ? 'StørreFritekstOgTittel' : 'EnkelFritekst' + const showFritekstInput = (valgtMal?.støtterFritekst || valgtMal?.støtterTittelOgFritekst) ?? false; // FritekstbrevinnholdDto must be undefined or have props set with string value const resolveFritekstbrevinnholdDto = ( fritekstInputValue: FritekstInputValue | FritekstInputInvalid | undefined, ): FritekstbrevinnholdDto | undefined => { - if (fritekstInputValue?.tittel !== undefined && fritekstInputValue?.tekst !== undefined) { + if (fritekstModus === 'StørreFritekstOgTittel' && fritekstInputValue?.tittel !== undefined && fritekstInputValue?.tekst !== undefined) { return { overskrift: fritekstInputValue.tittel, brødtekst: fritekstInputValue.tekst, @@ -280,7 +282,7 @@ const Messages = ({ const fritekstbrev = resolveFritekstbrevinnholdDto(fritekstInputValue); // Ut frå oppførsel til gammal kode ser det ut til at fritekst skal settast når valgt mal ikkje støtter tittel. // Ellers skal fritekstbrev prop settast. - const fritekst = fritekstInputValue?.tekst; + const fritekst = fritekstModus === 'EnkelFritekst' ? fritekstInputValue?.tekst : undefined; const overstyrtMottaker = resolveOvertyrtMottaker(); // Viss valg for sending til tredjepartsmottaker er aktivt må overstyrtMottaker vere definert if (tredjepartsmottakerAktivert && overstyrtMottaker === undefined) { @@ -386,7 +388,7 @@ const Messages = ({ defaultValue={valgtFritekstInputValue} ref={fritekstInputRef} show={showFritekstInput} - showTitle={valgtMal?.støtterTittelOgFritekst === true} + fritekstModus={fritekstModus} showValidation={showValidation} />