fix(PN-10282): update copy for error, fix change handler and wip on test

pagopa · Mar 29, 2024 · a386aa6 · a386aa6
1 parent 449c78e
commit a386aa6
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 35 deletions.
diff --git a/packages/pn-commons/src/components/CodeModal/CodeInput.tsx b/packages/pn-commons/src/components/CodeModal/CodeInput.tsx
@@ -15,7 +15,6 @@ import { TextField } from '@mui/material';
 type Props = {
   initialValues: Array<string>;
   onChange: (values: Array<string>) => void;
-  onInputError: () => void;
   isReadOnly?: boolean;
   hasError?: boolean;
 };
@@ -26,9 +25,8 @@ type Props = {
  * @param isReadOnly set if code is in readonly mode
  * @param hasError set if there is an error
  * @param onChange function to listen on inputs changes
- * @param onInputError function to listen on inputs type errors
  */
-const CodeInput = ({ initialValues, isReadOnly, hasError, onChange, onInputError }: Props) => {
+const CodeInput = ({ initialValues, isReadOnly, hasError, onChange }: Props) => {
   const [currentValues, setCurrentValues] = useState(initialValues);
   const inputsRef = useRef(new Array(initialValues.length).fill(undefined));
 
@@ -49,11 +47,14 @@ const CodeInput = ({ initialValues, isReadOnly, hasError, onChange, onInputError
       return;
     }
     if (index > initialValues.length - 1) {
-      // the variable is to prevent test fail
-      const input = inputsRef.current[index - 1];
-      setTimeout(() => {
-        input.blur();
-      }, 25);
+      for (const input of inputsRef.current) {
+        if (input === document.activeElement) {
+          setTimeout(() => {
+            input.blur();
+          }, 25);
+          break;
+        }
+      }
       return;
     }
     // the variable is to prevent test fail
@@ -93,9 +94,6 @@ const CodeInput = ({ initialValues, isReadOnly, hasError, onChange, onInputError
       const inputsValues = [...previousValues];
       // eslint-disable-next-line functional/immutable-data
       inputsValues[index] = value;
-      if (!Number(inputsValues[index]) && value !== '' && value !== '0') {
-        onInputError();
-      }
       return inputsValues;
     });
   };
@@ -134,10 +132,6 @@ const CodeInput = ({ initialValues, isReadOnly, hasError, onChange, onInputError
     const emptyValues = new Array(initialValues.length - values.length).fill('');
     setCurrentValues(values.concat(emptyValues));
     focusInput(values.length);
-
-    if (!Number(maxLengthRequiredCode)) {
-      onInputError();
-    }
   };
 
   useEffect(() => {

diff --git a/packages/pn-commons/src/components/CodeModal/CodeModal.tsx b/packages/pn-commons/src/components/CodeModal/CodeModal.tsx
@@ -76,29 +76,38 @@ const CodeModal = memo(
 
     const { internalHasError, internalErrorTitle, internalErrorMessage } = internalError;
 
-    const codeIsValid = code.every((v) => (Number(v) || v === '0' ? v : false));
+    const codeIsValid = code.every((v) => (!isNaN(Number(v)) ? v : false));
 
     const changeHandler = useCallback((inputsValues: Array<string>) => {
       setCode(inputsValues);
+      if (isNaN(Number(inputsValues.join('')))) {
+        setInternalError({
+          internalHasError: true,
+          internalErrorTitle: getLocalizedOrDefaultLabel(
+            'recapiti',
+            `errors.invalid_type_code.title`
+          ),
+          internalErrorMessage: getLocalizedOrDefaultLabel(
+            'recapiti',
+            `errors.invalid_type_code.message`
+          ),
+        });
+      } else {
+        setInternalError({
+          internalHasError: false,
+          internalErrorTitle: '',
+          internalErrorMessage: '',
+        });
+      }
     }, []);
 
-    const inputErrorHandler = () => {
-      setInternalError({
-        internalHasError: true,
-        internalErrorTitle: errorTitle,
-        internalErrorMessage: getLocalizedOrDefaultLabel(
-          'recapiti',
-          `errors.invalid_type_code.message`
-        ),
-      });
-    };
-
     const confirmHandler = () => {
       if (!confirmCallback) {
         return;
       }
       confirmCallback(code);
     };
+
     useEffect(() => {
       setInternalError({
         internalHasError: hasError,
@@ -127,9 +136,8 @@ const CodeModal = memo(
             <CodeInput
               initialValues={initialValues}
               isReadOnly={isReadOnly}
-              hasError={hasError}
+              hasError={internalHasError}
               onChange={changeHandler}
-              onInputError={inputErrorHandler}
             />
             {isReadOnly && (
               <CopyToClipboardButton

diff --git a/packages/pn-personafisica-webapp/public/locales/it/recapiti.json b/packages/pn-personafisica-webapp/public/locales/it/recapiti.json
@@ -134,7 +134,8 @@
       "message": "Generane uno nuovo e inseriscilo."
     },
     "invalid_type_code": {
-      "message": "Questo campo accetta solo valori numerici"
+      "title": "Questo campo accetta solo valori numerici",
+      "message": "Controlla il codice di verifica e inseriscilo di nuovo"
     }
   }
 }
diff --git a/packages/pn-personafisica-webapp/src/pages/__test__/Deleghe.page.test.tsx b/packages/pn-personafisica-webapp/src/pages/__test__/Deleghe.page.test.tsx
@@ -243,7 +243,7 @@ describe('Deleghe page', async () => {
       fireEvent.change(codeInput, { target: { value: codes[index] } });
     });
     const dialogButtons = within(dialog).getByRole('button', { name: 'deleghe.accept' });
-    // confirm rejection
+    // confirm accept
     fireEvent.click(dialogButtons);
     await waitFor(() => {
       expect(mock.history.patch).toHaveLength(1);
@@ -252,15 +252,16 @@ describe('Deleghe page', async () => {
         verificationCode: arrayOfDelegators[0].verificationCode,
       });
     });
-    // check that nothing is changed
+    const error = await waitFor(() => within(dialog).queryByTestId('errorAlert'));
+    expect(error).toBeInTheDocument();
+
+    // check that accept button is still active in deleghe page
     delegatorsRows = result.getAllByTestId('delegatorsTable.body.row');
     expect(delegatorsRows).toHaveLength(arrayOfDelegators.length);
     delegatorsRows.forEach((row, index) => {
       expect(row).toHaveTextContent(arrayOfDelegators[index].delegator?.displayName!);
     });
     acceptButton = within(delegatorsRows[0]).getByTestId('acceptButton');
     expect(acceptButton).toBeInTheDocument();
-    const error = await waitFor(() => within(dialog).queryByTestId('errorAlert'));
-    expect(error).toBeInTheDocument();
   });
 });
diff --git a/packages/pn-personagiuridica-webapp/public/locales/it/recapiti.json b/packages/pn-personagiuridica-webapp/public/locales/it/recapiti.json
@@ -119,7 +119,8 @@
       "message": "Generane uno nuovo e inseriscilo."
     },
     "invalid_type_code": {
-      "message": "Questo campo accetta solo valori numerici"
+      "title": "Questo campo accetta solo valori numerici",
+      "message": "Controlla il codice di verifica e inseriscilo di nuovo"
     }
   }
 }