Merge remote-tracking branch 'origin/develop' into fix/pn-9848

CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0](https://github.com/pagopa/pn-frontend/compare/v2.4.0-RC.0...v2.4.0) (2024-03-07)
+
+**Note:** Version bump only for package send-monorepo
+
+
+
+
+
+# [2.4.0-RC.0](https://github.com/pagopa/pn-frontend/compare/v2.3.2...v2.4.0-RC.0) (2024-02-27)
+
+
+### Bug Fixes
+
+* **PN-10025:** added aria-label to button with IDP name ([#1138](https://github.com/pagopa/pn-frontend/issues/1138)) ([c24c02b](https://github.com/pagopa/pn-frontend/commit/c24c02be95d92e1e44e5128070d98f0a3c5f3061))
+* **pn-9145:** added test case for duplicated protocol error ([#1120](https://github.com/pagopa/pn-frontend/issues/1120)) ([d2ca754](https://github.com/pagopa/pn-frontend/commit/d2ca754e07ed665211dab7a6d9e92d35b89ddee6))
+
+
+### Features
+
+* **PN-9684:** implemented alert in notificationDetail for alternative-RADD ([#1134](https://github.com/pagopa/pn-frontend/issues/1134)) ([bfc1d4a](https://github.com/pagopa/pn-frontend/commit/bfc1d4ad8d085d5691853fb54d1dad6049ca5f92))
+
+
+### Reverts
+
+* Revert "Release/v2.3.2" (#1143) ([7cfe17e](https://github.com/pagopa/pn-frontend/commit/7cfe17e1dffd43d0ffc7c0081dbdd538e0691fb6)), closes [#1143](https://github.com/pagopa/pn-frontend/issues/1143)
+* Revert "fix(PN-10025): added aria-label to button with IDP name (#1138)" (#1140) ([2559495](https://github.com/pagopa/pn-frontend/commit/25594959e7184c0ae7dc59839845eda7cbd900d5)), closes [#1138](https://github.com/pagopa/pn-frontend/issues/1138) [#1140](https://github.com/pagopa/pn-frontend/issues/1140)
+
+
+
+
+
 ## [2.3.2](https://github.com/pagopa/pn-frontend/compare/v2.3.1...v2.3.2) (2024-02-20)
 
 

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "2.3.2",
+  "version": "2.4.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {

packages/pn-commons/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.4.0](https://github.com/pagopa/pn-frontend/compare/v2.4.0-RC.0...v2.4.0) (2024-03-07)
+
+**Note:** Version bump only for package @pagopa-pn/pn-commons
+
+
+
+
+
+# [2.4.0-RC.0](https://github.com/pagopa/pn-frontend/compare/v2.3.2...v2.4.0-RC.0) (2024-02-27)
+
+
+### Features
+
+* **PN-9684:** implemented alert in notificationDetail for alternative-RADD ([#1134](https://github.com/pagopa/pn-frontend/issues/1134)) ([bfc1d4a](https://github.com/pagopa/pn-frontend/commit/bfc1d4ad8d085d5691853fb54d1dad6049ca5f92))
+
+
+### Reverts
+
+* Revert "Release/v2.3.2" (#1143) ([7cfe17e](https://github.com/pagopa/pn-frontend/commit/7cfe17e1dffd43d0ffc7c0081dbdd538e0691fb6)), closes [#1143](https://github.com/pagopa/pn-frontend/issues/1143)
+
+
+
+
+
 ## [2.3.2](https://github.com/pagopa/pn-frontend/compare/v2.3.1...v2.3.2) (2024-02-20)
 
 **Note:** Version bump only for package @pagopa-pn/pn-commons

packages/pn-commons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa-pn/pn-commons",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "private": true,
   "main": "./src/index.ts",
   "dependencies": {

packages/pn-commons/src/components/ApiError/__test__/ApiErrorWrapper.test.tsx

@@ -16,6 +16,7 @@ vi.mock('../../../hooks', () => ({
 describe('ApiErrorWrapper', () => {
   const original = window.location;
   const reloadText = 'Ricarica';
+  const user = userEvent.setup();
 
   beforeAll(() => {
     Object.defineProperty(window, 'location', {
@@ -67,7 +68,7 @@ describe('ApiErrorWrapper', () => {
 
     const reloadItemComponent = screen.getByText(reloadText);
     expect(reloadItemComponent).toBeInTheDocument();
-    await userEvent.click(reloadItemComponent);
+    await user.click(reloadItemComponent);
 
     await waitFor(() => {
       expect(reloadActionMock).toHaveBeenCalled();
@@ -83,7 +84,7 @@ describe('ApiErrorWrapper', () => {
 
     const reloadItemComponent = screen.getByText(reloadText);
     expect(reloadItemComponent).toBeInTheDocument();
-    await userEvent.click(reloadItemComponent);
+    await user.click(reloadItemComponent);
 
     await waitFor(() => {
       expect(window.location.reload).toHaveBeenCalled();

packages/pn-commons/src/components/CodeModal/CodeInput.tsx

@@ -1,5 +1,6 @@
 import {
   ChangeEvent,
+  ClipboardEvent,
   Fragment,
   KeyboardEvent,
   memo,
@@ -46,11 +47,14 @@ const CodeInput = ({ initialValues, isReadOnly, hasError, onChange }: Props) =>
       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
@@ -102,8 +106,8 @@ const CodeInput = ({ initialValues, isReadOnly, hasError, onChange }: Props) =>
       changeInputValue(value, index);
       return;
     }
-    // remove non numeric char from value
-    value = value.replace(/[^\d]/g, '');
+    // remove from value those characters that aren't letters neither numbers
+    value = value.replace(/[^a-z\d]/gi, '');
     if (value !== '') {
       // case maxLength 2
       if (value.length > 1) {
@@ -116,6 +120,20 @@ const CodeInput = ({ initialValues, isReadOnly, hasError, onChange }: Props) =>
     }
   };
 
+  const pasteHandler = (event: ClipboardEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    // eslint-disable-next-line functional/no-let
+    let pastedCode = event.clipboardData.getData('text');
+    pastedCode = pastedCode.replace(/[^a-z\d]/gi, '');
+    const maxLengthRequiredCode = pastedCode.slice(0, initialValues.length);
+    const values = maxLengthRequiredCode.split('');
+    // we create an array with empty values for those cases in which the copied values are less than required ones
+    // initialValues.length - values.length can be only >= 0 because of the slice of pastedCode
+    const emptyValues = new Array(initialValues.length - values.length).fill('');
+    setCurrentValues(values.concat(emptyValues));
+    focusInput(values.length);
+  };
+
   useEffect(() => {
     onChange(currentValues);
   }, [currentValues]);
@@ -136,13 +154,13 @@ const CodeInput = ({ initialValues, isReadOnly, hasError, onChange }: Props) =>
             maxLength: 2,
             sx: { padding: '16.5px 10px', textAlign: 'center' },
             readOnly: isReadOnly,
-            pattern: '^[0-9]{1}$',
-            inputMode: 'numeric',
+            pattern: '^[0-9a-zA-Z]{1}$',
             'data-testid': `code-input-${index}`,
           }}
           onKeyDown={(event) => keyDownHandler(event, index)}
           onChange={(event) => changeHandler(event, index)}
           onFocus={(event) => event.target.select()}
+          onPaste={(event) => pasteHandler(event)}
           value={currentValues[index]}
           // eslint-disable-next-line functional/immutable-data
           inputRef={(node) => (inputsRef.current[index] = node)}

packages/pn-commons/src/components/CodeModal/CodeModal.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, memo, useCallback, useState } from 'react';
+import { ReactNode, memo, useCallback, useEffect, useState } from 'react';
 
 import {
   Alert,
@@ -68,10 +68,37 @@ const CodeModal = memo(
     errorMessage,
   }: Props) => {
     const [code, setCode] = useState(initialValues);
-    const codeIsValid = code.every((v) => v);
+    const [internalError, setInternalError] = useState({
+      internalHasError: hasError,
+      internalErrorTitle: errorTitle,
+      internalErrorMessage: errorMessage,
+    });
+
+    const { internalHasError, internalErrorTitle, internalErrorMessage } = internalError;
+
+    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 confirmHandler = () => {
@@ -81,10 +108,17 @@ const CodeModal = memo(
       confirmCallback(code);
     };
 
+    useEffect(() => {
+      setInternalError({
+        internalHasError: hasError,
+        internalErrorTitle: errorTitle,
+        internalErrorMessage: errorMessage,
+      });
+    }, [hasError, errorTitle, errorMessage]);
+
     return (
       <PnDialog
         open={open}
-        // onClose={handleClose}
         aria-labelledby="dialog-title"
         aria-describedby="dialog-description"
         data-testid="codeDialog"
@@ -101,7 +135,7 @@ const CodeModal = memo(
             <CodeInput
               initialValues={initialValues}
               isReadOnly={isReadOnly}
-              hasError={hasError}
+              hasError={internalHasError}
               onChange={changeHandler}
             />
             {isReadOnly && (
@@ -119,12 +153,12 @@ const CodeModal = memo(
             )}
           </Box>
           {codeSectionAdditional && <Box sx={{ mt: 2 }}>{codeSectionAdditional}</Box>}
-          {hasError && (
+          {internalHasError && (
             <Alert id="error-alert" data-testid="errorAlert" severity="error" sx={{ mt: 2 }}>
               <AlertTitle id="codeModalErrorTitle" data-testid="CodeModal error title">
-                {errorTitle}
+                {internalErrorTitle}
               </AlertTitle>
-              {errorMessage}
+              {internalErrorMessage}
             </Alert>
           )}
         </PnDialogContent>