[VAS-820] feat: Operator's station detail page & request edit modal (#…

…507) * [VAS-820] feat: Aligned operator Station details page with design * [VAS-820] feat: Aligned operator station detail page buttons with design * [VAS-820] fix: Turn back button addEdit station form * [VAS-820] feat: Pagopa operator request edit station modal * [VAS-820] fix: Hide station status badge when status undefined * [VAS-820] fix: Hide station status badge when status undefined * [VAS-820] chore: Clean code * [VAS-820] feat: Implement API updateWrapperStationWithOperatorReview * [VAS-820] chore: New loading task constant * [VAS-820] fix: Unit tests * [VAS-820] fix: Unit tests * [VAS-820] fix: Pagopa operator stations action menu * [VAS-820] chore: Station table columns tests * [VAS-820] chore: AddEditStationPage unit tests * [VAS-820] fix: Unit test of select elements werent working --------- Co-authored-by: Jacopo Carlini <jacopo.carlini@gmail.com>
pagopa · May 29, 2024 · 0e41e3e · 0e41e3e
1 parent 0ef5d3f
commit 0e41e3e
Show file tree

Hide file tree

Showing 30 changed files with 1,313 additions and 1,263 deletions.
diff --git a/.env.development.local b/.env.development.local
@@ -16,8 +16,8 @@ REACT_APP_URL_FE_TOKEN_EXCHANGE=https://dev.selfcare.pagopa.it/token-exchange
 REACT_APP_URL_INSTITUTION_LOGO_PREFIX=https://selcdcheckoutsa.z6.web.core.windows.net/institutions/
 
 # Backends configuration
-#REACT_APP_URL_BACKOFFICE=http://localhost:8080
-REACT_APP_URL_BACKOFFICE=https://api.dev.platform.pagopa.it/backoffice/v1
+REACT_APP_URL_BACKOFFICE=http://localhost:8080
+#REACT_APP_URL_BACKOFFICE=https://api.dev.platform.pagopa.it/backoffice/v1
 REACT_APP_URL_API_TOKEN=https://api.dev.platform.pagopa.it/api/token/token
 REACT_APP_URL_BETA=false
 

diff --git a/src/api/BackofficeClient.ts b/src/api/BackofficeClient.ts
@@ -774,11 +774,20 @@ export const BackofficeApi = {
     return extractResponse(result, 200, onRedirectToLogin);
   },
 
-  updateWrapperStationByOpt: async (station: StationDetailsDto): Promise<WrapperEntities> => {
-    const result = await backofficeClient.updateWrapperStationDetailsByOpt({
+  updateWrapperStationWithOperatorReview: async ({
+    stationCode,
+    ciTaxCode,
+    note,
+  }: {
+    stationCode: string;
+    ciTaxCode: string;
+    note: string;
+  }): Promise<StationDetailResource> => {
+    const result = await backofficeClient.updateWrapperStationWithOperatorReview({
+      'station-code': stationCode,
+      ciTaxCode,
       body: {
-        ...station,
-        status: StatusEnum.TO_CHECK_UPDATE,
+        note
       },
     });
     return extractResponse(result, 200, onRedirectToLogin);

diff --git a/src/components/CommonHeader/MyHeaderProduct.tsx b/src/components/CommonHeader/MyHeaderProduct.tsx
@@ -66,7 +66,6 @@ const HeaderProduct = ({
 
 
     useEffect(() => {
-        console.log('useEffect');
         getOptions();
     }, [organizations]);
 

diff --git a/src/components/Form/GenericModal.tsx b/src/components/Form/GenericModal.tsx
@@ -2,13 +2,14 @@ import { Modal, Backdrop, Fade, Box, Typography, Button } from '@mui/material';
 import { MouseEventHandler } from 'react';
 
 type Props = {
-  title: string;
-  message: any;
   openModal: boolean;
-  onConfirmLabel: string;
-  onCloseLabel: string;
-  handleCloseModal: MouseEventHandler;
-  handleConfirm: MouseEventHandler;
+
+  title?: string;
+  message?: any;
+  onConfirmLabel?: string;
+  onCloseLabel?: string;
+  handleCloseModal?: MouseEventHandler;
+  handleConfirm?: MouseEventHandler;
   renderContent?: () => any;
 };
 

diff --git a/src/components/StatusChip.tsx b/src/components/StatusChip.tsx
@@ -1,5 +1,6 @@
 import { Chip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import { useUserRole } from '../hooks/useUserRole';
 import { WrapperStatusEnum } from '../api/generated/portal/WrapperStationResource';
 
 type Props = {
@@ -8,9 +9,10 @@ type Props = {
 };
 export const StatusChip = ({ status, size = 'regular' }: Props) => {
   const { t } = useTranslation();
-  const resolvedChip = resolveWrappedStatusToChipObj(status);
+  const { userIsPagopaOperator } = useUserRole();
+  const resolvedChip = resolveWrappedStatusToChipObj(status, userIsPagopaOperator);
 
-  return (
+  return status ? (
     <Chip
       label={t(`general.WrapperStatus.${resolvedChip.label}`)}
       aria-label="Status"
@@ -20,21 +22,30 @@ export const StatusChip = ({ status, size = 'regular' }: Props) => {
         backgroundColor: resolvedChip.backgroundColor,
         ...(size === 'small' && { fontSize: '14px', paddingBottom: '1px', height: '24px' }),
       }}
-    ></Chip>
-  );
+    />
+  ) : null;
 };
 
-const resolveWrappedStatusToChipObj = (status: string) => {
+const resolveWrappedStatusToChipObj = (status: string, userIsPagopaOperator: boolean) => {
+  const label = status + (userIsPagopaOperator ? '_OPERATOR' : '');
   switch (status) {
     case WrapperStatusEnum.APPROVED:
       return { label: status, color: '#FFFFFF', backgroundColor: 'primary.main' };
     case WrapperStatusEnum.TO_FIX:
     case WrapperStatusEnum.TO_FIX_UPDATE:
-      return { label: status, color: '#17324D', backgroundColor: 'warning.light' };
+      return {
+        label: status,
+        color: '#17324D',
+        backgroundColor: userIsPagopaOperator ? 'grey.200' : 'warning.light',
+      };
     case WrapperStatusEnum.TO_CHECK:
     case WrapperStatusEnum.TO_CHECK_UPDATE:
-      return { label: status, color: '#17324D', backgroundColor: 'grey.200' };
+      return {
+        label: status,
+        color: '#17324D',
+        backgroundColor: userIsPagopaOperator ? 'warning.light' : 'grey.200',
+      };
     default:
-      return { label: status, color: '#17324D', backgroundColor: 'grey.200' };
+      return { label, color: '#17324D', backgroundColor: 'grey.200' };
   }
 };
diff --git a/src/locale/it.json b/src/locale/it.json
@@ -595,8 +595,9 @@
       "duplicateStation": "Duplica",
       "editStation": "Modifica",
       "deleteRequired": "Richiedi eliminazione",
-      "correctionRequired": "Richiedi correzione",
-      "configureStation": "Configura"
+      "configureStation": "Configura",
+      "requestEdit": "Richiedi modifiche",
+      "approveAndValidate": "Approva e valida"
     }
   },
   "stationECList": {
@@ -651,16 +652,31 @@
     }
   },
   "stationDetailPageValidation": {
-    "alert": "Stazione in attesa di revisione da parte di un operatore PagoPA.",
-    "alertToFix": "Stazione in attesa di correzione da parte dell’ente.",
+    "subtitle": "Ecco i dettagli della stazione inviata in revisione.",
+    "alert": {
+      "toCheckMessage": "Verifica le informazioni inserite dall’ente e approva o richiedi modifiche alla stazione.",
+      "toFixTitle": "Modifiche richieste",
+      "toFixMessage": "Stazione in attesa di correzione da parte dell’ente."
+    },
+    "modal": {
+      "title": "Cosa c'è che non va?",
+      "subtitle": "Il tuo commento sarà condiviso con l'ente",
+      "placeholder": "Descrivi l'anomalia",
+      "helperText": "Scrivi massimo 200 caratteri",
+      "error": "Si è verificato un problema nel salvataggio del commento."
+    },
     "configuration": {
       "status": "Stato",
       "title": "Configurazione della stazione",
       "subtitle": "Informazioni a carico dell’ente.",
       "registry": "Anagrafica",
       "stationCode": "Codice stazione",
       "version": "Versione stazione",
-      "intermediaryCode": "Codice intermediario",
+      "connectionType": {
+        "label":"Tipo di connessione",
+        "sync": "Sincrona",
+        "async": "Asincrona"
+      },
       "protocol": "Protocollo",
       "port": "Porta",
       "ip": "IP",
@@ -1319,6 +1335,7 @@
     "manage": "Gestisci",
     "activate": "Attiva",
     "deactivate": "Disattiva",
+    "confirmAndSend": "Conferma e invia",
     "channels": "canali",
     "Channels": "Canali",
     "dashboard": "Panoramica",
@@ -1336,7 +1353,12 @@
       "TO_FIX": "Da correggere",
       "TO_FIX_UPDATE": "Da correggere",
       "TO_CHECK": "In revisione",
-      "TO_CHECK_UPDATE": "In revisione"
+      "TO_CHECK_UPDATE": "In revisione",
+      "APPROVED_OPERATOR": "Attivo",
+      "TO_FIX_OPERATOR": "Da correggere",
+      "TO_FIX_UPDATE_OPERATOR": "Da correggere",
+      "TO_CHECK_OPERATOR": "Da validare",
+      "TO_CHECK_UPDATE_OPERATOR": "Da validare"
     },
     "yes": "Sì",
     "no": "No",

diff --git a/src/pages/channels/list/__tests__/ChannelsTableColumns.test.tsx b/src/pages/channels/list/__tests__/ChannelsTableColumns.test.tsx
@@ -3,6 +3,8 @@ import { cleanup, render } from '@testing-library/react';
 import { buildColumnDefs, showStatus } from '../ChannelsTableColumns';
 import { showCustomHeader } from '../../../../components/Table/TableUtils';
 import React from 'react';
+import { store } from '../../../../redux/store';
+import { Provider } from 'react-redux';
 
 beforeEach(() => {
   jest.spyOn(console, 'error').mockImplementation(() => {});
@@ -185,6 +187,6 @@ describe('<ChannelsTableColumns />', () => {
     const realColumns = buildColumnDefs(mockTFunction, () => jest.fn()) as Array<any>;
     expect(realColumns).toEqual(ArrayBuildColumnDefs);
 
-    render(<>{showStatus(params)}</>);
+    render(<Provider store={store}>{showStatus(params)}</Provider>);
   });
 });
diff --git a/...ges/commisionalBundles/addEditCommissionBundle/components/AddEditCommissionBundleForm.tsx b/...ges/commisionalBundles/addEditCommissionBundle/components/AddEditCommissionBundleForm.tsx
@@ -307,7 +307,7 @@ const AddEditCommissionBundleForm = ({isEdit, formik, idBrokerPsp}: Props) => {
                             </Grid>
                             <Grid item xs={6}>
                                 <FormControl fullWidth>
-                                    <InputLabel size="small">
+                                    <InputLabel size="small" id="paymentTypeLabel">
                                         {t('commissionBundlesPage.addEditCommissionBundle.form.paymentType')}
                                     </InputLabel>
                                     <Select
@@ -341,7 +341,7 @@ const AddEditCommissionBundleForm = ({isEdit, formik, idBrokerPsp}: Props) => {
                             </Grid>
                             <Grid item xs={6}>
                                 <FormControl fullWidth>
-                                    <InputLabel size="small">
+                                    <InputLabel size="small" id="touchpointLabel">
                                         {t('commissionBundlesPage.addEditCommissionBundle.form.touchpoint')}
                                     </InputLabel>
                                     <Select