Refactor/PN-13453 - Domicile Banner and Validating PEC

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

@@ -19,8 +19,8 @@ import PnWizardStep, { PnWizardStepProps } from './PnWizardStep';
 import PnWizardStepper from './PnWizardStepper';
 
 type Props = {
-  activeStep: number;
-  setActiveStep: (step: number) => void;
+  activeStep?: number;
+  setActiveStep?: (step: number) => void;
   title: ReactNode;
   children: ReactNode;
   onExit: () => void;
@@ -47,8 +47,8 @@ type Props = {
 };
 
 const PnWizard: React.FC<Props> = ({
-  activeStep,
-  setActiveStep,
+  activeStep = 0,
+  setActiveStep = () => {},
   title,
   children,
   onExit,

packages/pn-commons/src/hooks/__test__/usePreviousLocation.test.tsx

@@ -0,0 +1,101 @@
+import { act } from 'react-dom/test-utils';
+import * as reactRouterDom from 'react-router-dom';
+import { vi } from 'vitest';
+
+import { renderHook } from '../../test-utils';
+import { usePreviousLocation } from '../usePreviousLocation';
+
+const mockNavigateFn = vi.fn();
+
+const MemoryRouter = reactRouterDom.MemoryRouter;
+
+const mockLocation = {
+  pathname: '/page-b',
+  state: { from: '/page-a' },
+  key: '',
+  search: '',
+  hash: '',
+};
+
+vi.mock('react-router-dom', async () => ({
+  ...(await vi.importActual<any>('react-router-dom')),
+  useNavigate: () => mockNavigateFn,
+}));
+
+describe('usePreviousLocation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.resetAllMocks();
+  });
+
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should return undefined for previousLocation if no state is provided', () => {
+    const { result } = renderHook(() => usePreviousLocation(), {
+      wrapper: ({ children }) => <MemoryRouter>{children}</MemoryRouter>,
+    });
+
+    expect(result.current.previousLocation).toBeUndefined();
+  });
+
+  it('should call navigate with the correct state', () => {
+    const { result } = renderHook(() => usePreviousLocation(), {
+      wrapper: ({ children }) => <MemoryRouter>{children}</MemoryRouter>,
+    });
+
+    act(() => {
+      result.current.navigateWithState('/page-b');
+    });
+
+    expect(mockNavigateFn).toHaveBeenCalledWith('/page-b', {
+      state: { from: '/' },
+    });
+  });
+
+  it('should return previousLocation from state', () => {
+    vi.spyOn(reactRouterDom, 'useLocation').mockReturnValue(mockLocation);
+
+    const { result } = renderHook(() => usePreviousLocation(), {
+      wrapper: ({ children }) => <MemoryRouter>{children}</MemoryRouter>,
+    });
+
+    expect(result.current.previousLocation).toBe('/page-a');
+  });
+
+  it('should call navigate(previousLocation) when previousLocation exists', () => {
+    vi.spyOn(reactRouterDom, 'useLocation').mockReturnValue(mockLocation);
+
+    const { result } = renderHook(() => usePreviousLocation(), {
+      wrapper: ({ children }) => <MemoryRouter>{children}</MemoryRouter>,
+    });
+
+    act(() => {
+      result.current.navigateToPreviousLocation();
+    });
+
+    expect(mockNavigateFn).toHaveBeenCalledWith('/page-a', { replace: true });
+  });
+
+  it('should call navigate(-1) when previousLocation is undefined', () => {
+    vi.spyOn(reactRouterDom, 'useLocation').mockReturnValue({
+      ...mockLocation,
+      state: { from: undefined },
+    });
+
+    const { result } = renderHook(() => usePreviousLocation(), {
+      wrapper: ({ children }) => <MemoryRouter>{children}</MemoryRouter>,
+    });
+
+    act(() => {
+      result.current.navigateToPreviousLocation();
+    });
+
+    expect(mockNavigateFn).toHaveBeenCalledWith(-1);
+  });
+});

packages/pn-commons/src/hooks/usePreviousLocation.tsx

@@ -0,0 +1,26 @@
+import { useLocation, useNavigate } from 'react-router-dom';
+
+interface LocationState {
+  from?: string;
+}
+
+export const usePreviousLocation = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const previousLocation = (location.state as LocationState)?.from ?? undefined;
+
+  const navigateWithState = (path: string) => {
+    navigate(path, { state: { from: location.pathname } });
+  };
+
+  const navigateToPreviousLocation = () => {
+    if (previousLocation) {
+      navigate(previousLocation, { replace: true });
+    } else {
+      navigate(-1);
+    }
+  };
+
+  return { navigateWithState, navigateToPreviousLocation, previousLocation };
+};

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

@@ -16,7 +16,8 @@
     "pec-validation-banner": {
       "title": "La PEC è in validazione",
       "dod-enabled-message": "Fino al termine del processo, la Piattaforma SEND rimane attiva come domicilio digitale.",
-      "dod-disabled-message": "Fino al termine del processo non sarà possibile modificare i recapiti a valore legale."
+      "dod-disabled-message": "Fino al termine del processo non sarà possibile modificare i recapiti a valore legale.",
+      "parties-list": "La piattaforma SEND resterà il tuo domicilio digitale per {{list}} fino al completamento della validazione."
     },
     "pec-description": "Quando un ente ti invia una notifica SEND, ricevi l’avviso a valore legale sulla PEC che hai scelto.",
     "link-pec-placeholder": "La tua PEC",

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

@@ -223,6 +223,7 @@ const EmailContactItem: React.FC = () => {
       actions={getActions()}
       expanded={isEmailActive}
       data-testid="emailContact"
+      slotProps={{ Card: { id: 'emailContactSection' } }}
     >
       {!isEmailActive && (
         <Typography variant="body1" fontSize={{ xs: '14px', lg: '16px' }} mb={3}>

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

@@ -153,6 +153,7 @@ const IOContact: React.FC = () => {
           color="primary"
           fullWidth={isMobile}
           sx={{ mt: 3 }}
+          id="ioContactButton"
         >
           {t('io-contact.enable', { ns: 'recapiti' })}
         </Button>
@@ -208,6 +209,7 @@ const IOContact: React.FC = () => {
           : undefined
       }
       expanded={isAppIOEnabled}
+      slotProps={{ Card: { id: 'ioContactSection' } }}
     >
       <Stack direction="row" alignItems="center" data-testid="ioContact">
         <Avatar variant="rounded" sx={{ bgcolor: '#0B3EE3', width: '36px', height: '36px' }}>

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

@@ -134,6 +134,9 @@ const LegalContacts = () => {
     )
       .unwrap()
       .then(() => {
+        if (channelType === ChannelType.SERCQ_SEND) {
+          sessionStorage.removeItem('domicileBannerClosed');
+        }
         PFEventStrategyFactory.triggerEvent(
           PFEventsType[`SEND_REMOVE_${channelType}_SUCCESS`],
           'default'

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

@@ -142,6 +142,7 @@ const SercqSendContactWizard: React.FC<Props> = ({ goToNextStep, setShowPecWizar
     dispatch(createOrUpdateAddress(digitalAddressParams))
       .unwrap()
       .then(() => {
+        sessionStorage.removeItem('domicileBannerClosed');
         PFEventStrategyFactory.triggerEvent(PFEventsType.SEND_ADD_SERCQ_SEND_UX_SUCCESS, 'default');
         // show success message
         dispatch(
@@ -150,7 +151,6 @@ const SercqSendContactWizard: React.FC<Props> = ({ goToNextStep, setShowPecWizar
             message: t(`legal-contacts.sercq_send-added-successfully`, { ns: 'recapiti' }),
           })
         );
-
         goToNextStep && goToNextStep();
       })
       .catch(() => {});

packages/pn-personafisica-webapp/src/components/DomicileBanner/DomicileBanner.tsx

@@ -6,14 +6,13 @@ import { ButtonNaked } from '@pagopa/mui-italia';
 
 import { PFEventsType } from '../../models/PFEventsType';
 import {
-  AddressType,
   ChannelType,
   ContactOperation,
   ContactSource,
   IOAllowedValues,
 } from '../../models/contacts';
 import * as routes from '../../navigation/routes.const';
-import { setExternalEvent } from '../../redux/contact/reducers';
+import { contactsSelectors, setExternalEvent } from '../../redux/contact/reducers';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { closeDomicileBanner } from '../../redux/sidemenu/reducers';
 import { RootState } from '../../redux/store';
@@ -108,43 +107,47 @@ const DomicileBanner: React.FC<Props> = ({ source }) => {
   const dispatch = useAppDispatch();
   const open = useAppSelector((state: RootState) => state.generalInfoState.domicileBannerOpened);
   const { IS_DOD_ENABLED } = getConfiguration();
+  const {
+    defaultPECAddress,
+    defaultSERCQ_SENDAddress,
+    defaultAPPIOAddress,
+    defaultEMAILAddress,
+    defaultSMSAddress,
+  } = useAppSelector(contactsSelectors.selectAddresses);
 
-  const digitalAddresses = useAppSelector(
-    (state: RootState) => state.contactsState.digitalAddresses
-  );
-
-  const hasSercqSend = digitalAddresses.find((addr) => addr.channelType === ChannelType.SERCQ_SEND);
-  const hasAppIODisabled = digitalAddresses.find(
-    (addr) => addr.channelType === ChannelType.IOMSG && addr.value === IOAllowedValues.DISABLED
-  );
+  const hasAppIODisabled = defaultAPPIOAddress?.value === IOAllowedValues.DISABLED;
 
-  const hasCourtesyAddresses =
-    digitalAddresses.filter(
-      (addr) => addr.addressType === AddressType.COURTESY && addr.value !== IOAllowedValues.DISABLED
-    ).length > 0;
-  const domicileBannerData: DomicileBannerData | null = getDomicileData(
-    source,
-    !!hasSercqSend,
-    hasCourtesyAddresses,
-    !!hasAppIODisabled,
-    IS_DOD_ENABLED
-  );
+  const hasCourtesyAddresses = !!(defaultEMAILAddress || defaultSMSAddress);
+  const domicileBannerData: DomicileBannerData | null = defaultPECAddress
+    ? null
+    : getDomicileData(
+        source,
+        !!defaultSERCQ_SENDAddress,
+        hasCourtesyAddresses,
+        hasAppIODisabled,
+        IS_DOD_ENABLED
+      );
 
   const handleClose = () => {
     dispatch(closeDomicileBanner());
-    // sessionStorage.setItem('domicileBannerClosed', 'true');
+    sessionStorage.setItem('domicileBannerClosed', 'true');
   };
 
   const handleClick = (destination?: ChannelType, operation?: ContactOperation) => {
     if (destination && operation) {
-      dispatch(setExternalEvent({ destination, source, operation }));
+      if (destination === ChannelType.SERCQ_SEND && operation === ContactOperation.ADD) {
+        navigate(routes.DIGITAL_DOMICILE_ACTIVATION);
+        return;
+      } else {
+        dispatch(setExternalEvent({ destination, source, operation }));
+      }
     }
     PFEventStrategyFactory.triggerEvent(PFEventsType.SEND_VIEW_CONTACT_DETAILS, { source });
     navigate(routes.RECAPITI);
   };
 
   return open && domicileBannerData ? (
-    <Box mb={5}>
+    <Box my={4}>
       <Alert
         severity={domicileBannerData.severity}
         variant="outlined"

packages/pn-personafisica-webapp/src/components/DomicileBanner/__test__/DomicileBanner.test.tsx

@@ -47,12 +47,7 @@ describe('DomicileBanner component', () => {
     const button = getByText('domicile-banner.no-sercq-cta');
     fireEvent.click(button);
     expect(mockNavigateFn).toHaveBeenCalledTimes(1);
-    expect(mockNavigateFn).toHaveBeenCalledWith(routes.RECAPITI);
-    expect(testStore.getState().contactsState.event).toStrictEqual({
-      destination: ChannelType.SERCQ_SEND,
-      source: ContactSource.HOME_NOTIFICHE,
-      operation: ContactOperation.ADD,
-    });
+    expect(mockNavigateFn).toHaveBeenCalledWith(routes.DIGITAL_DOMICILE_ACTIVATION);
   });
 
   it('renders the component - no SERCQ SEND enabled - banner closed', () => {