Brev tredjepart forbedra orgnr validering (#5466)

* brev til tredjepart: Fiks validering orgnr input.

Uventa oppførsel av InputField gjorde at validering av orgnr lengde ikkje fungerte.

* brev til tredjepart: Forbetra kontroll av mottaker før forhåndsvisning/sending.

Blokkerer forhåndsvisning/sending av brev når "sending til tredjepart" er aktivert, men det ikkje er tasta inn gyldig organisasjonsnr endå.

Uten denne endring kunne det skje at bruker kryssa av for sending av brev til tredjepart, fyllte inn eit ikkje-eksisterande orgnr og så trykte send. Sjølv om det viste valideringsfeil i skjemaet ville då brev kunne bli sendt, men til den øverste mottaker i nedtrekkslista, altså ikkje til ein tredjepart som var intensjonen.

---------

Co-authored-by: Hallvard Andreas Stark <57254397+hallvardastark@users.noreply.github.com>

packages/sak-meldinger/src/components/Messages.tsx

@@ -97,20 +97,29 @@ const createValidateRecipient = recipients => value =>
     ? undefined
     : [{ id: 'ValidationMessage.InvalidRecipient' }];
 
-const createTredjepartsmottaker = (orgnr: string): Mottaker => ({
-  id: orgnr,
-  type: "ORGNR",
-})
+const createTredjepartsmottaker = (orgnr: string): Mottaker => {
+  if (orgnr.length < 9) {
+    throw new Error(`Invalid orgnr: ${orgnr}`)
+  }
+  return {
+    id: orgnr,
+      type: "ORGNR",
+  }
+}
 
 const resolveOverstyrtMottaker = (
   overstyrtMottaker: string,
   recipients: Mottaker[],
   visTredjepartsmottaker: boolean,
-  tredjepartsmottakerOrgnr: string | undefined
+  tredjepartsmottakerOrgnr: string | undefined,
+  eregLookupResponse: EregOrganizationLookupResponse,
 ): Mottaker | undefined => {
   // Viss sending til tredjepartsmottaker er valgt skal tredjepartsmottakerOrgnr brukast (viss gyldig)
-  if (visTredjepartsmottaker && typeof tredjepartsmottakerOrgnr === "string" && tredjepartsmottakerOrgnr.length === 9) {
-    return createTredjepartsmottaker(tredjepartsmottakerOrgnr);
+  if (visTredjepartsmottaker) {
+    if(typeof tredjepartsmottakerOrgnr === "string" && tredjepartsmottakerOrgnr.length >= 9 && eregLookupResponse.name !== undefined) {
+      return createTredjepartsmottaker(tredjepartsmottakerOrgnr);
+    }
+    return undefined; // Tredjepartsmottaker aktivert, men ikkje funne gyldig
   }
   if (recipients.some(recipient => JSON.stringify(recipient) === overstyrtMottaker)) {
       return JSON.parse(overstyrtMottaker)
@@ -161,15 +170,19 @@ export const MessagesImpl = ({
 
   const tmpls: Brevmal[] = Object.keys(templates).map(key => ({ ...templates[key], kode: key }));
 
+  const resolvedOverstyrtMottaker: Mottaker | undefined =
+    resolveOverstyrtMottaker(overstyrtMottaker, recipients, visTredjepartsmottakerInput, tredjepartsmottakerOrgnr, tredjepartsmottakerInfo)
+
   const previewMessage = e => {
     e?.preventDefault();
-
-    previewCallback(
-      resolveOverstyrtMottaker(overstyrtMottaker, recipients, visTredjepartsmottakerInput, tredjepartsmottakerOrgnr),
-      brevmalkode,
-      fritekst,
-      fritekstbrev,
-    );
+    if (resolvedOverstyrtMottaker !== undefined) { // Don't want to start preview before valid receiver is resolved.
+      previewCallback(
+        resolvedOverstyrtMottaker,
+        brevmalkode,
+        fritekst,
+        fritekstbrev,
+      );
+    }
   };
 
 
@@ -184,9 +197,9 @@ export const MessagesImpl = ({
   useEffect(() => {
     formProps.change(
       'overstyrtMottaker',
-      JSON.stringify(resolveOverstyrtMottaker(overstyrtMottaker, recipients, visTredjepartsmottakerInput, tredjepartsmottakerOrgnr))
+      resolvedOverstyrtMottaker ? JSON.stringify(resolvedOverstyrtMottaker) : undefined
     );
-  }, [overstyrtMottaker, recipients, visTredjepartsmottakerInput, tredjepartsmottakerOrgnr])
+  }, [resolvedOverstyrtMottaker])
 
   useEffect(() => {
     if (tredjepartsmottakerOrgnr?.length >= 9) {
@@ -360,7 +373,7 @@ export const MessagesImpl = ({
           )}
           <VerticalSpacer eightPx />
           <div className={styles.buttonRow}>
-            <Hovedknapp mini spinner={formProps.submitting} disabled={formProps.submitting} onClick={ariaCheck}>
+            <Hovedknapp mini spinner={formProps.submitting} disabled={resolvedOverstyrtMottaker === undefined || formProps.submitting} onClick={ariaCheck}>
               {intl.formatMessage({ id: 'Messages.Submit' })}
             </Hovedknapp>
             {brevmalkode && (

packages/sak-meldinger/src/components/OrgnrInputField.tsx

@@ -13,7 +13,11 @@ const OrgnrInputField = ({name, label, error}: OrgnrInputProps) => {
   const validator = (value?: string) => value?.length !== 9 ? [{id: 'ValidationMessage.InvalidOrganisasjonsnummer'}]: undefined;
   // maxLength is more than 9 to allow users to paste in numbers containing some characters/spaces, and let the parser
   // strip those out, e.g. If a user pastes MVA 123 456 789, the component should accept it and convert it to 123456789.
-  return <InputField name={name} label={label} parse={parser} maxLength={19} validate={[validator]} feil={error}/>
+
+  // This conditionalErrorProp thing is a workaround since apparently passing feil={error} directly causes the InputField
+  // to not use the validator even when error is undefined.
+  const conditionalErrorProp = error ? {feil: error} : {}
+  return <InputField name={name} label={label} parse={parser} maxLength={19} validate={[validator]} {...conditionalErrorProp} />
 }
 
 export default OrgnrInputField;