fix(PN-10282): implement pasteHandler for OTP

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>

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

@@ -182,4 +182,44 @@ describe('CodeInput Component', () => {
       expect(codeInputs[0]).toHaveFocus();
     });
   });
+
+  it('handles paste event', async () => {
+    // render component
+    const { getAllByTestId } = render(
+      <CodeInput initialValues={new Array(5).fill('')} onChange={handleChangeMock} />
+    );
+    const codeInputs = getAllByTestId(/code-input-[0-4]/);
+
+    // paste the value of the input and check that it is updated correctly
+    // set the cursor position to the beggining
+    act(() => (codeInputs[2] as HTMLInputElement).focus());
+    (codeInputs[2] as HTMLInputElement).setSelectionRange(0, 0);
+
+    const codePasted = '12345';
+    await user.paste(codePasted);
+
+    await waitFor(() => {
+      for (let i = 0; i < 5; i++) {
+        expect(codeInputs[i]).toHaveValue(codePasted[i]);
+      }
+    });
+  });
+
+  it('accepts first 5 digits in case of too long code (pasted)', async () => {
+    // render component
+    const { getAllByTestId } = render(
+      <CodeInput initialValues={new Array(5).fill('')} onChange={handleChangeMock} />
+    );
+    const codeInputs = getAllByTestId(/code-input-[0-4]/);
+    act(() => (codeInputs[2] as HTMLInputElement).focus());
+    (codeInputs[2] as HTMLInputElement).setSelectionRange(0, 0);
+    const codePasted = '123456'; // too long code
+    await user.paste(codePasted);
+    await waitFor(() => {
+      for (let i = 0; i < 5; i++) {
+        expect(codeInputs[i]).toHaveValue(codePasted[i]);
+      }
+    });
+    expect(handleChangeMock).toHaveBeenCalledWith(['1', '2', '3', '4', '5']);
+  });
 });

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

@@ -1,17 +1,19 @@
 import { vi } from 'vitest';
 
-import { fireEvent, render, screen, waitFor, within } from '../../../test-utils';
+import userEvent from '@testing-library/user-event';
+
+import { act, fireEvent, render, screen, waitFor, within } from '../../../test-utils';
 import CodeModal from '../CodeModal';
 
 const cancelButtonMock = vi.fn();
 const confirmButtonMock = vi.fn();
 
-const openedModalComponent = (
-  open: boolean,
-  hasError: boolean = false,
-  readonly: boolean = false,
-  initialValues: string[] = new Array(5).fill('')
-) => (
+const CodeModalWrapper: React.FC<{
+  open: boolean;
+  hasError?: boolean;
+  readonly?: boolean;
+  initialValues?: string[];
+}> = ({ open, hasError = false, readonly = false, initialValues = new Array(5).fill('') }) => (
   <CodeModal
     title="mocked-title"
     subtitle="mocked-subtitle"
@@ -45,14 +47,14 @@ describe('CodeModal Component', () => {
 
   it('renders CodeModal (closed)', () => {
     // render component
-    render(openedModalComponent(false));
+    render(<CodeModalWrapper open={false} />);
     const dialog = screen.queryByTestId('codeDialog');
     expect(dialog).not.toBeInTheDocument();
   });
 
   it('renders CodeModal (opened)', () => {
     // render component
-    render(openedModalComponent(true));
+    render(<CodeModalWrapper open />);
     const dialog = screen.getByTestId('codeDialog');
     expect(dialog).toBeInTheDocument();
     expect(dialog).toHaveTextContent(/mocked-title/i);
@@ -65,13 +67,13 @@ describe('CodeModal Component', () => {
     });
     const buttons = within(dialog).getAllByRole('button');
     expect(buttons).toHaveLength(2);
-    expect(buttons![0]).toHaveTextContent('mocked-cancel');
-    expect(buttons![1]).toHaveTextContent('mocked-confirm');
+    expect(buttons[0]).toHaveTextContent('mocked-cancel');
+    expect(buttons[1]).toHaveTextContent('mocked-confirm');
   });
 
   it('renders CodeModal (read only)', async () => {
     // render component
-    render(openedModalComponent(true, false, true, ['0', '1', '2', '3', '4']));
+    render(<CodeModalWrapper open readonly initialValues={['0', '1', '2', '3', '4']} />);
     const dialog = screen.getByTestId('codeDialog');
     expect(dialog).toBeInTheDocument();
     expect(dialog).toHaveTextContent(/mocked-title/i);
@@ -93,21 +95,21 @@ describe('CodeModal Component', () => {
 
   it('clicks on cancel', async () => {
     // render component
-    render(openedModalComponent(true));
+    render(<CodeModalWrapper open />);
     const dialog = screen.getByTestId('codeDialog');
     const button = within(dialog).getByTestId('codeCancelButton');
-    fireEvent.click(button!);
+    fireEvent.click(button);
     await waitFor(() => {
       expect(cancelButtonMock).toBeCalledTimes(1);
     });
   });
 
   it('clicks on confirm', async () => {
     // render component
-    render(openedModalComponent(true));
+    render(<CodeModalWrapper open />);
     const dialog = screen.getByTestId('codeDialog');
     const button = within(dialog).getByTestId('codeConfirmButton');
-    expect(button!).toBeDisabled();
+    expect(button).toBeDisabled();
     const codeInputs = within(dialog).getAllByTestId(/code-input-[0-4]/);
     // fill inputs with values
     codeInputs?.forEach((input, index) => {
@@ -117,19 +119,63 @@ describe('CodeModal Component', () => {
       codeInputs?.forEach((input, index) => {
         expect(input).toHaveValue(index.toString());
       });
-      expect(button!).toBeEnabled();
+      expect(button).toBeEnabled();
     });
-    fireEvent.click(button!);
+    fireEvent.click(button);
     expect(confirmButtonMock).toBeCalledTimes(1);
     expect(confirmButtonMock).toBeCalledWith(['0', '1', '2', '3', '4']);
   });
 
   it('shows error', () => {
     // render component
-    render(openedModalComponent(true, true));
+    const { rerender } = render(
+      <CodeModalWrapper open initialValues={['0', '1', '2', '3', '4']} />
+    );
     const dialog = screen.getByTestId('codeDialog');
-    const errorAlert = within(dialog).getByTestId('errorAlert');
+    let errorAlert = within(dialog).queryByTestId('errorAlert');
+    expect(errorAlert).not.toBeInTheDocument();
+    // simulate error from external
+    rerender(<CodeModalWrapper open hasError initialValues={['0', '1', '2', '3', '4']} />);
+    errorAlert = within(dialog).getByTestId('errorAlert');
     expect(errorAlert).toBeInTheDocument();
     expect(errorAlert).toHaveTextContent('mocked-errorMessage');
   });
+
+  it('shows error in case of letters as input values', async () => {
+    // render component
+    render(<CodeModalWrapper open />);
+    const dialog = screen.getByTestId('codeDialog');
+    const codeInputs = within(dialog).getAllByTestId(/code-input-[0-4]/);
+    fireEvent.change(codeInputs[0], { target: { value: 'A' } });
+    const errorAlert = screen.getByTestId('errorAlert');
+    expect(errorAlert).toBeInTheDocument();
+    expect(errorAlert).toHaveTextContent('errors.invalid_type_code.message');
+  });
+
+  it('error in case of letters (pasted)', async () => {
+    // render component
+    render(<CodeModalWrapper open />);
+    const dialog = screen.getByTestId('codeDialog');
+    const codeInputs = within(dialog).getAllByTestId(/code-input-[0-4]/);
+    act(() => (codeInputs[2] as HTMLInputElement).focus());
+    (codeInputs[2] as HTMLInputElement).setSelectionRange(0, 0);
+    const codePasted = 'abcd';
+    await userEvent.paste(codePasted);
+    const errorAlert = screen.getByTestId('errorAlert');
+    expect(errorAlert).toBeInTheDocument();
+    expect(errorAlert).toHaveTextContent('errors.invalid_type_code.message');
+  });
+
+  it('short code (pasted) - confirm disabled', async () => {
+    // render component
+    render(<CodeModalWrapper open />);
+    const dialog = screen.getByTestId('codeDialog');
+    const codeInputs = within(dialog).getAllByTestId(/code-input-[0-4]/);
+    act(() => (codeInputs[2] as HTMLInputElement).focus());
+    (codeInputs[2] as HTMLInputElement).setSelectionRange(0, 0);
+    const codePasted = '123';
+    await userEvent.paste(codePasted);
+    const button = screen.getByTestId('codeConfirmButton');
+    expect(button).toBeDisabled();
+  });
 });

packages/pn-commons/src/utility/__test__/localization.utility.test.ts

@@ -18,6 +18,7 @@ describe('localization service', () => {
       notifications: 'different-namespace',
       appStatus: 'appStatus',
       delegations: 'deleghe',
+      recapiti: 'recapiti',
     });
     const label = getLocalizedOrDefaultLabel('notifications', 'mocked.path', 'default label');
     expect(label).toBe('different-namespace mocked.path');

packages/pn-commons/src/utility/localization.utility.ts

@@ -1,4 +1,9 @@
-type LocalizationNamespacesNames = 'common' | 'notifications' | 'appStatus' | 'delegations';
+type LocalizationNamespacesNames =
+  | 'common'
+  | 'notifications'
+  | 'appStatus'
+  | 'delegations'
+  | 'recapiti';
 
 type LocalizationNamespaces = {
   [key in LocalizationNamespacesNames]: string;
@@ -16,6 +21,7 @@ let localizationNamespaces: LocalizationNamespaces = {
   notifications: 'notifiche',
   appStatus: 'appStatus',
   delegations: 'deleghe',
+  recapiti: 'recapiti',
 };
 
 /* eslint-disable-next-line functional/no-let */