refactor: apply cr

packages/pn-personagiuridica-webapp/src/components/Deleghe/ConfirmationModal.tsx → packages/pn-commons/src/components/ConfirmationModal.tsx

@@ -1,61 +1,59 @@
 import * as React from 'react';
 
-import { Button, DialogContentText, DialogTitle } from '@mui/material';
+import { Button, DialogTitle } from '@mui/material';
 import { PnDialog, PnDialogActions, PnDialogContent } from '@pagopa-pn/pn-commons';
 
 type Props = {
   open: boolean;
   title: string;
-  subtitle?: string | JSX.Element;
-  onConfirm?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+  onConfirm?: React.MouseEventHandler<HTMLButtonElement>;
   onConfirmLabel?: string;
   onClose: React.MouseEventHandler<HTMLButtonElement> | undefined;
   onCloseLabel?: string;
-  minHeight?: string;
   width?: string;
+  children?: React.ReactNode;
 };
 export default function ConfirmationModal({
   open,
   title,
-  subtitle = '',
   onConfirm,
   onConfirmLabel = 'Riprova',
   onClose,
   onCloseLabel = 'Annulla',
-}: Props) {
+  children,
+}: Readonly<Props>) {
   return (
     <PnDialog
       id="confirmation-dialog"
       open={open}
       onClose={onClose}
-      aria-labelledby="dialog-title"
+      aria-labelledby="confirmation-dialog-title"
+      maxWidth="sm"
       data-testid="confirmationDialog"
     >
-      <DialogTitle id="dialog-title">{title}</DialogTitle>
-      <PnDialogContent>
-        <DialogContentText id="dialog-description">{subtitle}</DialogContentText>
-      </PnDialogContent>
+      <DialogTitle id="confirmation-dialog-title">{title}</DialogTitle>
+      {children && <PnDialogContent>{children}</PnDialogContent>}
       <PnDialogActions>
-        <Button
-          id="dialog-close-button"
-          onClick={onClose}
-          color="primary"
-          variant="outlined"
-          data-testid="dialogAction"
-        >
-          {onCloseLabel}
-        </Button>
         {onConfirm && (
           <Button
-            id="dialog-action-button"
+            id="dialog-confirm-button"
             color="primary"
             variant="contained"
             onClick={onConfirm}
-            data-testid="dialogAction"
+            data-testid="confirmButton"
           >
             {onConfirmLabel}
           </Button>
         )}
+        <Button
+          id="dialog-close-button"
+          color="primary"
+          variant="outlined"
+          onClick={onClose}
+          data-testid="closeButton"
+        >
+          {onCloseLabel}
+        </Button>
       </PnDialogActions>
     </PnDialog>
   );

packages/pn-personagiuridica-webapp/src/components/Deleghe/__test__/ConfirmationModal.test.tsx → packages/pn-commons/src/components/__test__/ConfirmationModal.test.tsx

@@ -1,18 +1,14 @@
 import { vi } from 'vitest';
 
-import { fireEvent, render } from '../../../__test__/test-utils';
+import { fireEvent, render } from '../../test-utils';
 import ConfirmationModal from '../ConfirmationModal';
 
 const mockCancelFunction = vi.fn();
 const mockConfirmFunction = vi.fn();
 
 describe('ConfirmationModal Component', () => {
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
   it('renders the component', () => {
-    const { getByRole, getAllByTestId } = render(
+    const { getByRole, getByTestId } = render(
       <ConfirmationModal
         title={'Test title'}
         onClose={mockCancelFunction}
@@ -22,17 +18,18 @@ describe('ConfirmationModal Component', () => {
         onConfirmLabel={'Confirm'}
       />
     );
+
     const dialog = getByRole('dialog');
     expect(dialog).toBeInTheDocument();
     expect(dialog).toHaveTextContent(/Test Title/i);
-    const dialogActions = getAllByTestId('dialogAction');
-    expect(dialogActions).toHaveLength(2);
-    expect(dialogActions[1]).toHaveTextContent(/Confirm/i);
-    expect(dialogActions[0]).toHaveTextContent(/Cancel/i);
+    const confirmButton = getByTestId('confirmButton');
+    const closeButton = getByTestId('closeButton');
+    expect(confirmButton).toHaveTextContent(/Confirm/i);
+    expect(closeButton).toHaveTextContent(/Cancel/i);
   });
 
   it('checks that the confirm and cancel functions are executed', () => {
-    const { getAllByTestId } = render(
+    const { getByTestId } = render(
       <ConfirmationModal
         title={'Test title'}
         onClose={mockCancelFunction}
@@ -42,37 +39,38 @@ describe('ConfirmationModal Component', () => {
         onConfirmLabel={'Confirm'}
       />
     );
-    const dialogActions = getAllByTestId('dialogAction');
-    const confirm = dialogActions[1];
-    const cancel = dialogActions[0];
-    fireEvent.click(confirm);
-    expect(mockConfirmFunction).toBeCalledTimes(1);
-    fireEvent.click(cancel);
-    expect(mockCancelFunction).toBeCalledTimes(1);
+
+    const confirmButton = getByTestId('confirmButton');
+    const cancelButton = getByTestId('closeButton');
+    fireEvent.click(confirmButton);
+    expect(mockConfirmFunction).toHaveBeenCalledTimes(1);
+    fireEvent.click(cancelButton);
+    expect(mockCancelFunction).toHaveBeenCalledTimes(1);
   });
 
   it('renders the dialog with default labels', () => {
-    const { getAllByTestId } = render(
+    const { getByTestId } = render(
       <ConfirmationModal
         title={'Test title'}
         onClose={mockCancelFunction}
         open
         onConfirm={mockConfirmFunction}
       />
     );
-    const dialogActions = getAllByTestId('dialogAction');
-    const confirm = dialogActions[1];
-    const cancel = dialogActions[0];
-    expect(confirm).toHaveTextContent(/Riprova/i);
-    expect(cancel).toHaveTextContent(/Annulla/i);
+
+    const confirmButton = getByTestId('confirmButton');
+    const cancelButton = getByTestId('closeButton');
+    expect(confirmButton).toHaveTextContent(/Riprova/i);
+    expect(cancelButton).toHaveTextContent(/Annulla/i);
   });
 
   it('renders the dialog with no confirm button', () => {
-    const { getAllByTestId } = render(
+    const { getByTestId, queryByTestId } = render(
       <ConfirmationModal title={'Test title'} onClose={mockCancelFunction} open />
     );
-    const dialogActions = getAllByTestId('dialogAction');
-    expect(dialogActions).toHaveLength(1);
-    expect(dialogActions[0]).toHaveTextContent(/Annulla/i);
+    const confirmButton = queryByTestId('confirmButton');
+    const cancelButton = getByTestId('closeButton');
+    expect(confirmButton).not.toBeInTheDocument();
+    expect(cancelButton).toHaveTextContent(/Annulla/i);
   });
 });

packages/pn-commons/src/components/index.ts

@@ -6,6 +6,7 @@ import AppResponseMessage from './AppResponseMessage';
 import { AppStatusRender } from './AppStatus/AppStatusRender';
 import CodeModal from './CodeModal/CodeModal';
 import CollapsedList from './CollapsedList';
+import ConfirmationModal from './ConfirmationModal';
 import CopyToClipboard from './CopyToClipboard';
 import CustomDatePicker from './CustomDatePicker';
 import CustomDropdown from './CustomDropdown';
@@ -86,6 +87,7 @@ export {
   AppResponseMessage,
   AppStatusRender,
   CodeModal,
+  ConfirmationModal,
   CopyToClipboard,
   CustomDatePicker,
   CustomDropdown,

packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactActivation.tsx

@@ -2,14 +2,8 @@ import React, { useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
-import { Button, DialogContentText, DialogTitle, Typography } from '@mui/material';
-import {
-  PnDialog,
-  PnDialogActions,
-  PnDialogContent,
-  PnWizard,
-  PnWizardStep,
-} from '@pagopa-pn/pn-commons';
+import { Button, DialogContentText, Typography } from '@mui/material';
+import { ConfirmationModal, PnWizard, PnWizardStep } from '@pagopa-pn/pn-commons';
 import { ButtonNaked } from '@pagopa/mui-italia';
 
 import IOContactWizard from '../../components/Contacts/IOContactWizard';
@@ -35,63 +29,6 @@ type ModalType = {
   exit?: boolean;
 };
 
-type DialogProps = {
-  open: boolean;
-  title: string;
-  content: string;
-  onConfirm: () => void;
-  confirmAction: string;
-  onDiscard?: () => void;
-};
-
-const CourtesyContactConfirmationDialog: React.FC<DialogProps> = ({
-  open,
-  title,
-  content,
-  onConfirm,
-  confirmAction,
-  onDiscard,
-}) => {
-  const { t } = useTranslation(['common', 'recapiti']);
-
-  return (
-    <PnDialog
-      open={open}
-      onClose={onDiscard}
-      aria-labelledby="dialog-title"
-      aria-describedby="dialog-description"
-      data-testid="confirmationDialog"
-    >
-      <DialogTitle id="dialog-title">{title}</DialogTitle>
-      <PnDialogContent>
-        <Trans
-          ns={'recapiti'}
-          i18nKey={content}
-          components={[
-            <DialogContentText key="paragraph1" id="dialog-description" color="text.primary" />,
-            <DialogContentText
-              key="paragraph2"
-              id="dialog-description"
-              color="text.primary"
-              mt={2}
-            />,
-          ]}
-        />
-      </PnDialogContent>
-      <PnDialogActions>
-        <Button key="confirm" onClick={onConfirm} variant="contained" data-testid="confirmButton">
-          {confirmAction}
-        </Button>
-        {onDiscard && (
-          <Button key="cancel" onClick={onDiscard} variant="outlined" data-testid="discardButton">
-            {t('button.do-later')}
-          </Button>
-        )}
-      </PnDialogActions>
-    </PnDialog>
-  );
-};
-
 const DigitalContactActivation: React.FC<Props> = ({ isTransferring = false }) => {
   const { t } = useTranslation(['recapiti', 'common']);
   const navigate = useNavigate();
@@ -233,22 +170,36 @@ const DigitalContactActivation: React.FC<Props> = ({ isTransferring = false }) =
           </PnWizardStep>
         )}
       </PnWizard>
-      <CourtesyContactConfirmationDialog
+      <ConfirmationModal
         open={modal.open}
         title={t('courtesy-contacts.confirmation-modal-title')}
-        content={
-          modal.step
-            ? `courtesy-contacts.confirmation-modal-${modal.step.toLowerCase()}-content`
-            : ''
-        }
         onConfirm={handleConfirmationModalAccept}
-        confirmAction={
+        onConfirmLabel={
           modal.step
             ? t(`courtesy-contacts.confirmation-modal-${modal.step.toLowerCase()}-accept`)
             : ''
         }
-        onDiscard={handleConfirmationModalDecline}
-      />
+        onClose={handleConfirmationModalDecline}
+        onCloseLabel={t('button.do-later', { ns: 'common' })}
+      >
+        <Trans
+          ns={'recapiti'}
+          i18nKey={
+            modal.step
+              ? `courtesy-contacts.confirmation-modal-${modal.step.toLowerCase()}-content`
+              : ''
+          }
+          components={[
+            <DialogContentText key="paragraph1" id="dialog-description" color="text.primary" />,
+            <DialogContentText
+              key="paragraph2"
+              id="dialog-description"
+              color="text.primary"
+              mt={2}
+            />,
+          ]}
+        />
+      </ConfirmationModal>
     </>
   );
 };