Feat/PN-13447 Add EmailSmsContactWizard component

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+
+import { Button, ButtonProps, DialogTitle } from '@mui/material';
+import { PnDialog, PnDialogActions, PnDialogContent } from '@pagopa-pn/pn-commons';
+
+type Props = {
+  open: boolean;
+  title: string;
+  slotsProps?: {
+    confirmButton?: ButtonProps;
+    closeButton?: ButtonProps;
+  };
+  onConfirmLabel?: string;
+  onCloseLabel?: string;
+  children?: React.ReactNode;
+};
+
+const ConfirmationModal: React.FC<Props> = ({
+  open,
+  title,
+  slotsProps,
+  onConfirmLabel = 'Riprova',
+  onCloseLabel = 'Annulla',
+  children,
+}: Props) => (
+  <PnDialog
+    id="confirmation-dialog"
+    open={open}
+    onClose={slotsProps?.closeButton?.onClick}
+    aria-labelledby="confirmation-dialog-title"
+    aria-describedby="confirmation-dialog-description"
+    maxWidth="sm"
+    data-testid="confirmationDialog"
+  >
+    <DialogTitle id="confirmation-dialog-title">{title}</DialogTitle>
+    {children && <PnDialogContent>{children}</PnDialogContent>}
+    <PnDialogActions>
+      <Button
+        id="dialog-close-button"
+        color="primary"
+        variant="outlined"
+        data-testid="closeButton"
+        {...slotsProps?.closeButton}
+      >
+        {onCloseLabel}
+      </Button>
+      <Button
+        id="dialog-confirm-button"
+        color="primary"
+        variant="contained"
+        data-testid="confirmButton"
+        {...slotsProps?.confirmButton}
+      >
+        {onConfirmLabel}
+      </Button>
+    </PnDialogActions>
+  </PnDialog>
+);
+
+export default ConfirmationModal;

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

@@ -1,5 +1,4 @@
 import React, { JSXElementConstructor, ReactElement, ReactNode } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import {
@@ -24,6 +23,7 @@ type Props = {
   setActiveStep: (step: number) => void;
   title: ReactNode;
   children: ReactNode;
+  onExit: () => void;
   slots?: {
     nextButton?: JSXElementConstructor<ButtonProps>;
     prevButton?: JSXElementConstructor<ButtonProps>;
@@ -36,6 +36,7 @@ type Props = {
     prevButton?: Omit<ButtonProps, 'onClick'> & {
       onClick?: (previous: () => void, step: number) => void;
     };
+    actions?: StackProps;
     container?: Omit<StackProps, 'children'> & { 'data-testid'?: string };
     feedback?: {
       title: string;
@@ -50,13 +51,11 @@ const PnWizard: React.FC<Props> = ({
   setActiveStep,
   title,
   children,
+  onExit,
   slots,
   slotsProps,
 }) => {
   checkChildren(children, [{ cmp: PnWizardStep }], 'PnWizard');
-
-  const navigate = useNavigate();
-
   const PrevButton = slots?.prevButton || Button;
   const NextButton = slots?.nextButton || Button;
 
@@ -127,7 +126,7 @@ const PnWizard: React.FC<Props> = ({
           size="medium"
           color="primary"
           startIcon={<ArrowBackIcon />}
-          onClick={() => navigate(-1)}
+          onClick={onExit}
         >
           {getLocalizedOrDefaultLabel('common', 'button.exit', 'Esci')}
         </ButtonNaked>
@@ -142,7 +141,7 @@ const PnWizard: React.FC<Props> = ({
           {childrens[activeStep]}
         </Paper>
 
-        <Stack direction={{ xs: 'column-reverse', md: 'row' }}>
+        <Stack direction={{ xs: 'column-reverse', md: 'row' }} {...slotsProps?.actions}>
           <PrevButton
             data-testid="prev-button"
             sx={{ mt: { xs: 2, md: 0 } }}

packages/pn-commons/src/components/PnWizard/__test__/PnWizard.test.tsx

@@ -7,10 +7,16 @@ import PnWizardStep from '../PnWizardStep';
 describe('PnWizard Component', () => {
   disableConsoleLogging('error');
   const setActiveStep = vi.fn();
+  const onExitMock = vi.fn();
 
   it('renders PnWizard', () => {
     const { getByTestId, getByText, queryByText } = render(
-      <PnWizard activeStep={0} setActiveStep={setActiveStep} title="Wizard Title">
+      <PnWizard
+        activeStep={0}
+        setActiveStep={setActiveStep}
+        onExit={onExitMock}
+        title="Wizard Title"
+      >
         <PnWizardStep label="Label Step 1">Step 1</PnWizardStep>
         <PnWizardStep label="Label Step 2">Step 2</PnWizardStep>
       </PnWizard>
@@ -21,9 +27,32 @@ describe('PnWizard Component', () => {
     expect(queryByText('Step 2')).not.toBeInTheDocument();
   });
 
+  it('should call the exit callback', () => {
+    const { getByRole } = render(
+      <PnWizard
+        activeStep={0}
+        setActiveStep={setActiveStep}
+        onExit={onExitMock}
+        title="Wizard Title"
+      >
+        <PnWizardStep label="Label Step 1">Step 1</PnWizardStep>
+        <PnWizardStep label="Label Step 2">Step 2</PnWizardStep>
+      </PnWizard>
+    );
+
+    const exitButton = getByRole('button', { name: 'Esci' });
+    fireEvent.click(exitButton);
+    expect(onExitMock).toHaveBeenCalledOnce();
+  });
+
   it('should call setActiveStep on step navigation', () => {
     const { getByTestId } = render(
-      <PnWizard activeStep={0} setActiveStep={setActiveStep} title="Wizard Title">
+      <PnWizard
+        activeStep={0}
+        setActiveStep={setActiveStep}
+        onExit={onExitMock}
+        title="Wizard Title"
+      >
         <PnWizardStep label="Label Step 1">Step 1</PnWizardStep>
         <PnWizardStep label="Label Step 2">Step 2</PnWizardStep>
       </PnWizard>
@@ -43,6 +72,7 @@ describe('PnWizard Component', () => {
       <PnWizard
         activeStep={0}
         setActiveStep={setActiveStep}
+        onExit={onExitMock}
         title="Wizard Title"
         slots={{ nextButton: CustomNextButton }}
       >
@@ -62,6 +92,7 @@ describe('PnWizard Component', () => {
       <PnWizard
         activeStep={1}
         setActiveStep={setActiveStep}
+        onExit={onExitMock}
         title="Wizard Title"
         slotsProps={{
           nextButton: { onClick: customNextClick },
@@ -88,6 +119,7 @@ describe('PnWizard Component', () => {
       <PnWizard
         activeStep={2}
         setActiveStep={setActiveStep}
+        onExit={onExitMock}
         title="Wizard Title"
         slotsProps={{
           feedback: {
@@ -108,7 +140,12 @@ describe('PnWizard Component', () => {
 
   it('should not render feedback step', () => {
     const { queryByTestId } = render(
-      <PnWizard activeStep={2} setActiveStep={setActiveStep} title="Wizard Title">
+      <PnWizard
+        activeStep={2}
+        setActiveStep={setActiveStep}
+        onExit={onExitMock}
+        title="Wizard Title"
+      >
         <PnWizardStep label="Label Step 1">Step 1</PnWizardStep>
         <PnWizardStep label="Label Step 2">Step 2</PnWizardStep>
       </PnWizard>
@@ -125,6 +162,7 @@ describe('PnWizard Component', () => {
       <PnWizard
         activeStep={2}
         setActiveStep={setActiveStep}
+        onExit={onExitMock}
         title="Wizard Title"
         slotsProps={{
           feedback: {
@@ -153,7 +191,12 @@ describe('PnWizard Component', () => {
   it('should throw an error if children are not PnWizardStep', () => {
     expect(() =>
       render(
-        <PnWizard activeStep={0} setActiveStep={setActiveStep} title="Wizard Title">
+        <PnWizard
+          activeStep={0}
+          setActiveStep={setActiveStep}
+          onExit={onExitMock}
+          title="Wizard Title"
+        >
           <div>Step 1</div>
         </PnWizard>
       )

packages/pn-commons/src/components/__test__/ConfirmationModal.test.tsx

@@ -0,0 +1,93 @@
+import { vi } from 'vitest';
+
+import { fireEvent, render } from '../../test-utils';
+import ConfirmationModal from '../ConfirmationModal';
+
+const mockCancelFunction = vi.fn();
+const mockConfirmFunction = vi.fn();
+
+describe('ConfirmationModal Component', () => {
+  it('renders the component', () => {
+    const { getByRole, getByTestId } = render(
+      <ConfirmationModal
+        title={'Test title'}
+        slotsProps={{
+          closeButton: { onClick: mockCancelFunction },
+          confirmButton: { onClick: mockConfirmFunction },
+        }}
+        onCloseLabel={'Cancel'}
+        open
+        onConfirmLabel={'Confirm'}
+      />
+    );
+
+    const dialog = getByRole('dialog');
+    expect(dialog).toBeInTheDocument();
+    expect(dialog).toHaveTextContent(/Test Title/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 { getByTestId } = render(
+      <ConfirmationModal
+        title={'Test title'}
+        slotsProps={{
+          closeButton: { onClick: mockCancelFunction },
+          confirmButton: { onClick: mockConfirmFunction },
+        }}
+        onCloseLabel={'Cancel'}
+        open
+        onConfirmLabel={'Confirm'}
+      />
+    );
+
+    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 { getByTestId } = render(
+      <ConfirmationModal
+        title={'Test title'}
+        slotsProps={{
+          closeButton: { onClick: mockCancelFunction },
+          confirmButton: { onClick: mockConfirmFunction },
+        }}
+        open
+      />
+    );
+
+    const confirmButton = getByTestId('confirmButton');
+    const cancelButton = getByTestId('closeButton');
+    expect(confirmButton).toHaveTextContent(/Riprova/i);
+    expect(cancelButton).toHaveTextContent(/Annulla/i);
+  });
+
+  it('renders the dialog with children', () => {
+    const { getByRole } = render(
+      <ConfirmationModal
+        title={'Test title'}
+        slotsProps={{
+          closeButton: { onClick: mockCancelFunction },
+          confirmButton: { onClick: mockConfirmFunction },
+        }}
+        onCloseLabel={'Cancel'}
+        open
+        onConfirmLabel={'Confirm'}
+      >
+        <p>Test Content</p>
+      </ConfirmationModal>
+    );
+    const dialog = getByRole('dialog');
+    expect(dialog).toBeInTheDocument();
+    expect(dialog).toHaveTextContent(/Test Title/i);
+    expect(dialog).toHaveTextContent(/Test Content/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/public/locales/it/common.json

@@ -22,6 +22,7 @@
     "go-to-home": "Vai alla homepage",
     "go-to-login": "Accedi",
     "not-now": "Non ora",
+    "do-later": "Lo farò più tardi",
     "add": "Aggiungi",
     "understand": "Ok, ho capito"
   },

packages/pn-personafisica-webapp/public/locales/it/recapiti.json

@@ -107,6 +107,17 @@
         ],
         "confirm": "Collega SEND su IO"
       },
+      "step_3": {
+        "title": "La tua mail per ricevere aggiornamenti",
+        "step-title": "Inserisci una email",
+        "content": "L’email dove possiamo informarti quando c’è una comunicazione a valore legale per te su SEND.",
+        "io-list": [
+          "Ricevi le notifiche in tempo reale, appena l’ente le carica su SEND",
+          "Puoi aprire e leggere i documenti allegati alla notifica",
+          "Puoi pagare gli importi dovuti se la notifica prevede un pagamento"
+        ],
+        "confirm": "Collega SEND su IO"
+      },
       "feedback": {
         "title-activation": "Hai attivato il tuo domicilio digitale",
         "title-transfer": "Hai aggiornato il tuo domicilio digitale",
@@ -196,7 +207,12 @@
     "info-modal-email-content": "Se non hai il domicilio digitale attivo e non apri la notifica entro 5 giorni dall’invio della email, riceverai i documenti in formato cartaceo a casa.",
     "info-modal-sms-title": "Avvisi via SMS: come funzionano",
     "info-modal-sms-subtitle": "Quando ci sono nuove notifiche per te, riceverai un SMS al numero inserito.",
-    "info-modal-sms-content": "Se non hai il domicilio digitale attivo e non apri la notifica entro 5 giorni dall’invio dell’SMS, riceverai i documenti in formato cartaceo a casa."
+    "info-modal-sms-content": "Se non hai il domicilio digitale attivo e non apri la notifica entro 5 giorni dall’invio dell’SMS, riceverai i documenti in formato cartaceo a casa.",
+    "confirmation-modal-title": "Non rischiare di leggere in ritardo le tue notifiche",
+    "confirmation-modal-io-content": "<0>Se non colleghi SEND a IO non riceverai aggiornamenti in app quando ricevi una comunicazione a valore legale.</0><1>Ricorda che se non leggi in tempo una notifica SEND, potresti non essere al corrente di eventuali scadenze e incorrere in sanzioni.</1>",
+    "confirmation-modal-io-accept": "Collega SEND a IO",
+    "confirmation-modal-email-content": "<0>Senza un indirizzo email o un altro recapito non possiamo informarti quando ricevi una comunicazione a valore legale su SEND.</0><1>Ricorda che se non leggi in tempo una notifica SEND, potresti non essere al corrente di eventuali scadenze e incorrere in sanzioni.</1>",
+    "confirmation-modal-email-accept": "Inserisci email"
   },
   "special-contacts": {
     "select-address": "Tipologia",