Merge remote-tracking branch 'origin/develop' into refactor/PN-9010

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/__test__/CodeInput.test.tsx

@@ -8,6 +8,8 @@ import CodeInput from '../CodeInput';
 const handleChangeMock = vi.fn();
 
 describe('CodeInput Component', () => {
+  const user = userEvent.setup();
+
   afterEach(() => {
     vi.clearAllMocks();
   });
@@ -82,28 +84,40 @@ describe('CodeInput Component', () => {
     await waitFor(() => {
       expect(handleChangeMock).toBeCalledTimes(2);
       // check focus on next elem
-      expect(codeInputs[3]).toBe(document.activeElement);
+      expect(codeInputs[3]).toHaveFocus();
     });
     // change the value of the input and check that it is updated correctly
     // set the cursor position to the end
     act(() => (codeInputs[2] as HTMLInputElement).focus());
     (codeInputs[2] as HTMLInputElement).setSelectionRange(1, 1);
     // when we try to edit an input, we insert a second value and after, based on cursor position, we change the value
     // we must use userEvent because the keyboard event must trigger also the change event (fireEvent doesn't do that)
-    await userEvent.keyboard('4');
+    await user.keyboard('4');
+    // next element will be focused
+    await waitFor(() => {
+      expect(codeInputs[3]).toHaveFocus();
+    });
     await waitFor(() => {
       expect(codeInputs[2]).toHaveValue('4');
     });
     // move the cursor at the start of the input and try to edit again
     act(() => (codeInputs[2] as HTMLInputElement).focus());
     (codeInputs[2] as HTMLInputElement).setSelectionRange(0, 0);
-    await userEvent.keyboard('3');
+    await user.keyboard('3');
+    // next element will be focused
+    await waitFor(() => {
+      expect(codeInputs[3]).toHaveFocus();
+    });
     await waitFor(() => {
       expect(codeInputs[2]).toHaveValue('3');
     });
     // delete the value
     act(() => (codeInputs[2] as HTMLInputElement).focus());
-    await userEvent.keyboard('{Backspace}');
+    await user.keyboard('{Backspace}');
+    // previous element will be focused
+    await waitFor(() => {
+      expect(codeInputs[1]).toHaveFocus();
+    });
     await waitFor(() => {
       expect(codeInputs[2]).toHaveValue('');
     });
@@ -120,52 +134,52 @@ describe('CodeInput Component', () => {
     // press enter
     fireEvent.keyDown(codeInputs[0], { key: 'Enter', code: 'Enter' });
     await waitFor(() => {
-      expect(codeInputs[1]).toBe(document.activeElement);
+      expect(codeInputs[1]).toHaveFocus();
     });
     // press tab
     fireEvent.keyDown(codeInputs[1], { key: 'Tab', code: 'Tab' });
     await waitFor(() => {
-      expect(codeInputs[2]).toBe(document.activeElement);
+      expect(codeInputs[2]).toHaveFocus();
     });
     // press arrow right
     fireEvent.keyDown(codeInputs[2], { key: 'ArrowRight', code: 'ArrowRight' });
     await waitFor(() => {
-      expect(codeInputs[3]).toBe(document.activeElement);
+      expect(codeInputs[3]).toHaveFocus();
     });
     // press delete
     fireEvent.keyDown(codeInputs[3], { key: 'Delete', code: 'Delete' });
     await waitFor(() => {
-      expect(codeInputs[4]).toBe(document.activeElement);
+      expect(codeInputs[4]).toHaveFocus();
     });
     // press the same value of the input
     // we reach the end, so we have to lost the focus
     fireEvent.keyDown(codeInputs[4], { key: '1', code: 'Digit1' });
     await waitFor(() => {
-      expect(document.body).toBe(document.activeElement);
+      expect(document.body).toHaveFocus();
     });
     // focus on last input and moove back
     act(() => (codeInputs[4] as HTMLInputElement).focus());
     // press backspace
     fireEvent.keyDown(codeInputs[4], { key: 'Backspace', code: 'Backspace' });
     await waitFor(() => {
-      expect(codeInputs[3]).toBe(document.activeElement);
+      expect(codeInputs[3]).toHaveFocus();
     });
     // press arrow left
     fireEvent.keyDown(codeInputs[3], { key: 'ArrowLeft', code: 'ArrowLeft' });
     await waitFor(() => {
-      expect(codeInputs[2]).toBe(document.activeElement);
+      expect(codeInputs[2]).toHaveFocus();
     });
     // press tab and shift key
     fireEvent.keyDown(codeInputs[2], { key: 'Tab', code: 'Tab', shiftKey: true });
     await waitFor(() => {
-      expect(codeInputs[1]).toBe(document.activeElement);
+      expect(codeInputs[1]).toHaveFocus();
     });
     // focus on first element and try to go back
     act(() => (codeInputs[0] as HTMLInputElement).focus());
     fireEvent.keyDown(codeInputs[0], { key: 'Backspace', code: 'Backspace' });
     // nothing happens
     await waitFor(() => {
-      expect(codeInputs[0]).toBe(document.activeElement);
+      expect(codeInputs[0]).toHaveFocus();
     });
   });
 });

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

@@ -38,9 +38,11 @@ type HeaderProps = {
   eventTrackingCallbackProductSwitch?: (target: string) => void;
   /** Whether there is a logged user */
   isLogged?: boolean;
+  /** Enable assistance button */
+  enableAssistanceButton?: boolean;
 };
 
-const Header = ({
+const Header: React.FC<HeaderProps> = ({
   onExitAction = () => window.location.assign(''),
   productsList,
   showHeaderProduct = true,
@@ -53,7 +55,8 @@ const Header = ({
   onAssistanceClick,
   eventTrackingCallbackProductSwitch,
   isLogged,
-}: HeaderProps) => {
+  enableAssistanceButton,
+}) => {
   const pagoPAHeaderLink: RootLinkType = {
     ...pagoPALink(),
     label: 'PagoPA S.p.A.',
@@ -107,6 +110,7 @@ const Header = ({
         onLogout={onExitAction}
         enableDropdown={enableDropdown}
         userActions={userActions}
+        enableAssistanceButton={enableAssistanceButton}
       />
       {enableHeaderProduct && (
         <HeaderProduct

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

@@ -53,6 +53,8 @@ type Props = {
   privacyPolicyHref?: string;
   /** Url to terms of service page */
   termsOfServiceHref?: string;
+  /** Enable assistance button */
+  enableAssistanceButton?: boolean;
 };
 
 const Layout: React.FC<Props> = ({
@@ -68,7 +70,7 @@ const Layout: React.FC<Props> = ({
   loggedUser,
   enableUserDropdown,
   userActions,
-  onLanguageChanged = () => { },
+  onLanguageChanged = () => {},
   eventTrackingCallbackAppCrash,
   eventTrackingCallbackProductSwitch,
   eventTrackingCallbackRefreshPage,
@@ -79,6 +81,7 @@ const Layout: React.FC<Props> = ({
   hasTermsOfService,
   privacyPolicyHref,
   termsOfServiceHref,
+  enableAssistanceButton = true,
 }) => (
   <ErrorBoundary
     sx={{ height: 'calc(100vh - 5px)' }}
@@ -105,6 +108,7 @@ const Layout: React.FC<Props> = ({
             onAssistanceClick={onAssistanceClick}
             eventTrackingCallbackProductSwitch={eventTrackingCallbackProductSwitch}
             isLogged={isLogged}
+            enableAssistanceButton={enableAssistanceButton}
           />
         )}
         <Stack direction={{ xs: 'column', lg: 'row' }} sx={{ flexGrow: 1 }}>

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

@@ -1,4 +1,4 @@
-import { Children, cloneElement, isValidElement, useMemo } from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
 
 import { Dialog, DialogProps, DialogTitle } from '@mui/material';
 
@@ -8,9 +8,8 @@ import PnDialogActions from './PnDialogActions';
 import PnDialogContent from './PnDialogContent';
 
 const PnDialog: React.FC<DialogProps> = (props) => {
-  const isMobile = useIsMobile();
-  const paddingSize = useMemo(() => (isMobile ? 3 : 4), [isMobile]);
-
+  const isMobile = useIsMobile('sm');
+  const paddingSize = isMobile ? 3 : 4;
   const title: ReactComponent = Children.toArray(props.children).find(
     (child) => isValidElement(child) && child.type === DialogTitle
   );
@@ -26,11 +25,10 @@ const PnDialog: React.FC<DialogProps> = (props) => {
     (child) => isValidElement(child) && child.type === PnDialogContent
   );
 
-  const paddingTop = isMobile ? 3 : 4;
   const enrichedContent = isValidElement(content)
     ? cloneElement(content, {
         ...content.props,
-        sx: { pt: title ? 0 : paddingTop, ...content.props.sx },
+        sx: { pt: title ? 0 : paddingSize, ...content.props.sx },
       })
     : content;
 

packages/pn-commons/src/components/PnDialog/PnDialogActions.tsx

@@ -1,15 +1,12 @@
-import { Children, cloneElement, isValidElement, useMemo } from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
 
 import { Button, DialogActions, DialogActionsProps } from '@mui/material';
 
 import { useIsMobile } from '../../hooks';
 import { ReactComponent } from '../../models/PnDialog';
 
 const PnDialogActions: React.FC<DialogActionsProps> = (props) => {
-  const isMobile = useIsMobile();
-  const paddingSize = useMemo(() => (isMobile ? 3 : 4), [isMobile]);
-  const gapSize = useMemo(() => (isMobile ? 0 : 1), [isMobile]);
-
+  const isMobile = useIsMobile('sm');
   const buttons: Array<ReactComponent> | undefined = Children.toArray(props.children).filter(
     (child) => isValidElement(child) && child.type === Button
   );
@@ -19,7 +16,10 @@ const PnDialogActions: React.FC<DialogActionsProps> = (props) => {
       ? cloneElement(button, {
           ...button.props,
           fullWidth: isMobile,
-          sx: { marginBottom: isMobile && index > 0 ? 2 : 0, ...button.props.sx },
+          sx: {
+            marginBottom: index > 0 && isMobile ? 2 : 0,
+            ...button.props.sx,
+          },
         })
       : button
   );
@@ -31,9 +31,9 @@ const PnDialogActions: React.FC<DialogActionsProps> = (props) => {
       {...props}
       sx={{
         flexDirection: isMobile ? 'column-reverse' : 'row',
-        p: paddingSize,
+        p: isMobile ? 3 : 4,
         pt: 0,
-        gap: gapSize,
+        gap: isMobile ? 0 : 1,
         ...props.sx,
       }}
     >

packages/pn-commons/src/components/PnDialog/PnDialogContent.tsx

@@ -1,14 +1,12 @@
-import { Children, cloneElement, isValidElement, useMemo } from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
 
 import { DialogContent, DialogContentProps, DialogContentText } from '@mui/material';
 
 import { useIsMobile } from '../../hooks';
 import { ReactComponent } from '../../models/PnDialog';
 
 const PnDialogContent: React.FC<DialogContentProps> = (props) => {
-  const isMobile = useIsMobile();
-  const paddingSize = useMemo(() => (isMobile ? 3 : 4), [isMobile]);
-
+  const isMobile = useIsMobile('sm');
   const subtitle: ReactComponent = Children.toArray(props.children).find(
     (child) => isValidElement(child) && child.type === DialogContentText
   );
@@ -28,7 +26,7 @@ const PnDialogContent: React.FC<DialogContentProps> = (props) => {
     <DialogContent
       data-testid="dialog-content"
       {...props}
-      sx={{ p: paddingSize, pt: 0, ...props.sx }}
+      sx={{ p: isMobile ? 3 : 4, pt: 0, ...props.sx }}
     >
       {subtitle && enrichedSubTitle}
       {othersChildren}