[PPANTT-129] feat: Update associate and dissociate CI-Station relation

package.json

@@ -28,7 +28,7 @@
     "clean:api-portal": "rimraf src/api/generated/portal && rimraf openApi/generated",
     "generate:api-portal": "wget https://raw.githubusercontent.com/pagopa/pagopa-selfcare-ms-backoffice-backend/main/openapi/openapi.json -O ./openApi/portal-api-docs.json && npm run generate:client",
     "generate:api-portal-next": "wget https://raw.githubusercontent.com/pagopa/pagopa-selfcare-ms-backoffice-backend/next/openapi/openapi.json -O ./openApi/portal-api-docs.json && npm run generate:client",
-    "generate:api-portal-pr": "wget https://raw.githubusercontent.com/pagopa/pagopa-selfcare-ms-backoffice-backend/next/openapi/openapi.json -O ./openApi/portal-api-docs.json && npm run generate:client",
+    "generate:api-portal-pr": "wget https://raw.githubusercontent.com/pagopa/pagopa-selfcare-ms-backoffice-backend/PPANTT-129-bo-authorizer-api-key-with-segregation-codes/openapi/openapi.json -O ./openApi/portal-api-docs.json && npm run generate:client",
     "generate:api-portal-local": "npm run generate:client",
     "generate:client": "jq 'walk(if type == \"object\" and has(\"parameters\") then .parameters |= map(select(.name != \"X-Request-Id\")) else . end)' ./openApi/portal-api-docs.json > ./openApi/portal-api-docs.json.temp && mv ./openApi/portal-api-docs.json.temp ./openApi/portal-api-docs.json && yarn run clean:api-portal && mkdirp openApi/generated && gen-api-models --api-spec openApi/portal-api-docs.json --out-dir src/api/generated/portal --no-strict --request-types --response-decoders --client && node openApi/scripts/api-portal_fixPostGen.js"
   },

src/api/BackofficeClient.ts

@@ -600,7 +600,9 @@ export const BackofficeApi = {
 
   associateEcToStation: async (
     ecCode: string,
-    station: CreditorInstitutionStationDto
+    station: CreditorInstitutionStationDto,
+    institutionId: string,
+    brokerTaxCode: string,
   ): Promise<CreditorInstitutionStationEditResource | ProblemJson> => {
     const result = await backofficeClient.associateStationToCreditorInstitution({
       'ci-tax-code': ecCode,
@@ -612,13 +614,15 @@ export const BackofficeApi = {
         aca: station.aca,
         stand_in: station.stand_in,
       },
+      institutionId,
+      brokerTaxCode
     });
     return extractResponse(result, 201, onRedirectToLogin);
   },
 
   updateEcAssociationToStation: async (
     ecCode: string,
-    station: CreditorInstitutionStationDto
+    station: CreditorInstitutionStationDto,
   ): Promise<CreditorInstitutionStationEditResource | ProblemJson> => {
     const result = await backofficeClient.updateStationAssociationToCreditorInstitution({
       'ci-tax-code': ecCode,
@@ -634,10 +638,12 @@ export const BackofficeApi = {
     return extractResponse(result, 200, onRedirectToLogin);
   },
 
-  dissociateECfromStation: async (ecCode: string, stationcode: string): Promise<void> => {
+  dissociateECfromStation: async (ecCode: string, stationcode: string, institutionId: string, brokerTaxCode: string,): Promise<void> => {
     const result = await backofficeClient.deleteCreditorInstitutionStationRelationship({
       'ci-tax-code': ecCode,
       'station-code': stationcode,
+      institutionId,
+      brokerTaxCode
     });
     return extractResponse(result, 200, onRedirectToLogin);
   },

src/components/Table/TableDataGrid.tsx

@@ -113,6 +113,7 @@ export default function TableDataGrid({
         className="CustomDataGrid"
         columnBuffer={5}
         columns={columns}
+        disableVirtualization
         components={{
           Pagination: () =>
             handleChangePage && rows.length > 0 ? (

src/pages/commisionalBundles/list/CommissionBundlesTableColumns.tsx

@@ -4,6 +4,7 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
 import { TFunction, useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
+import { Euro } from '@mui/icons-material';
 import GridLinkAction from '../../../components/Table/GridLinkAction';
 import ROUTES from '../../../routes';
 import { bundleDetailsActions } from '../../../redux/slices/bundleDetailsSlice';

src/pages/components/ConfirmModal.tsx

@@ -1,77 +1,64 @@
-import React, {MouseEventHandler} from 'react';
-import {Box, Button, Typography} from '@mui/material';
+import React, { MouseEventHandler } from 'react';
+import { Box, Button, Typography } from '@mui/material';
 import GenericModal from '../../components/Form/GenericModal';
-import {useUserRole} from "../../hooks/useUserRole";
 
 type Props = {
-    title: string;
-    message: any;
-    openConfirmModal: boolean;
-    onConfirmLabel: string;
-    onCloseLabel: string;
-    handleCloseConfirmModal: MouseEventHandler;
-    handleConfrimSubmit: MouseEventHandler;
+  title: string;
+  message: any;
+  openConfirmModal: boolean;
+  onConfirmLabel: string;
+  onCloseLabel: string;
+  handleCloseConfirmModal: MouseEventHandler;
+  handleConfrimSubmit: MouseEventHandler;
 };
 
 const ConfirmModal = ({
-                          title,
-                          message,
-                          openConfirmModal,
-                          onConfirmLabel,
-                          onCloseLabel,
-                          handleCloseConfirmModal,
-                          handleConfrimSubmit,
-                      }: Props) => {
-    const {userIsPagopaOperator} = useUserRole();
-    const renderContent = () => (
-        <>
-            <Typography variant="h6">{title}</Typography>
-            <Typography variant="body1" sx={{my: 2}}>
-                {message}
-            </Typography>
-            <Box
-                sx={{
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(6, 1fr)',
-                    gridTemplateRows: 'auto',
-                }}
-            >
-                <Button
-                    variant="outlined"
-                    sx={
-                        userIsPagopaOperator
-                            ? {gridColumn: 'span 5', justifySelf: 'end', mr: 4}
-                            : {gridColumn: 'span 5', justifySelf: 'end', mr: 2}
-                    }
-                    onClick={handleCloseConfirmModal}
-                    data-testid="cancel-button-modal-test"
-                >
-                    {onCloseLabel}
-                </Button>
-                <Button
-                    variant="contained"
-                    sx={{gridColumn: 'span 1', justifySelf: 'end'}}
-                    onClick={handleConfrimSubmit}
-                    data-testid="confirm-button-modal-test"
-                >
-                    {onConfirmLabel}
-                </Button>
-            </Box>
-        </>
-    );
+  title,
+  message,
+  openConfirmModal,
+  onConfirmLabel,
+  onCloseLabel,
+  handleCloseConfirmModal,
+  handleConfrimSubmit,
+}: Props) => {
+  const renderContent = () => (
+    <>
+      <Typography variant="h6">{title}</Typography>
+      <Typography variant="body1" sx={{ my: 2 }}>
+        {message}
+      </Typography>
+      <Box display="flex" justifyContent={'flex-end'}>
+        <Button
+          variant="outlined"
+          sx={{ mr: 3 }}
+          onClick={handleCloseConfirmModal}
+          data-testid="cancel-button-modal-test"
+        >
+          {onCloseLabel}
+        </Button>
+        <Button
+          variant="contained"
+          onClick={handleConfrimSubmit}
+          data-testid="confirm-button-modal-test"
+        >
+          {onConfirmLabel}
+        </Button>
+      </Box>
+    </>
+  );
 
-    return (
-        <GenericModal
-            title={title}
-            message={message}
-            openModal={openConfirmModal}
-            onConfirmLabel={onConfirmLabel}
-            onCloseLabel={onCloseLabel}
-            handleCloseModal={handleCloseConfirmModal}
-            handleConfirm={handleConfrimSubmit}
-            renderContent={renderContent}
-        />
-    );
+  return (
+    <GenericModal
+      title={title}
+      message={message}
+      openModal={openConfirmModal}
+      onConfirmLabel={onConfirmLabel}
+      onCloseLabel={onCloseLabel}
+      handleCloseModal={handleCloseConfirmModal}
+      handleConfirm={handleConfrimSubmit}
+      renderContent={renderContent}
+    />
+  );
 };
 
 export default ConfirmModal;

src/pages/delegations/detail/list/DelegationStationsTable.tsx

@@ -87,7 +87,7 @@ const DelegationStationsTable = ({ciTaxCode, filterByStationCode}: Props) => {
         setShowDisassociateStationModal(undefined);
         setLoading(true);
 
-        dissociateECfromStation(ciTaxCode, stationCode)
+        dissociateECfromStation(ciTaxCode, stationCode, selectedParty?.partyId ?? '', selectedParty?.fiscalCode ?? '')
             .catch((reason) => (
                 addError({
                     id: 'STATION_DELETE_RELATIONSHIP',

src/pages/stationMaintenances/list/__tests__/StationMaintenancesTable.test.tsx

@@ -40,7 +40,9 @@ describe('<StationMaintenancesTable />', () => {
         <MemoryRouter initialEntries={[`/station-maintenances`]}>
           <Route path="/station-maintenances">
             <ThemeProvider theme={theme}>
-              <StationMaintenancesTable setAlertMessage={alertFn} />
+              <StationMaintenancesTable setAlertMessage={alertFn} hoursRemaining={''} getHoursSummary={function (): void {
+                throw new Error('Function not implemented.');
+              } } />
             </ThemeProvider>
           </Route>
         </MemoryRouter>
@@ -145,7 +147,9 @@ describe('<StationMaintenancesTable />', () => {
         <MemoryRouter initialEntries={[`/station-maintenances`]}>
           <Route path="/station-maintenances">
             <ThemeProvider theme={theme}>
-              <StationMaintenancesTable setAlertMessage={alertFn} />
+              <StationMaintenancesTable setAlertMessage={alertFn} hoursRemaining={''} getHoursSummary={function (): void {
+                throw new Error('Function not implemented.');
+              } } />
             </ThemeProvider>
           </Route>
         </MemoryRouter>
@@ -195,7 +199,9 @@ describe('<StationMaintenancesTable />', () => {
         <MemoryRouter initialEntries={[`/station-maintenances`]}>
           <Route path="/station-maintenances">
             <ThemeProvider theme={theme}>
-              <StationMaintenancesTable setAlertMessage={alertFn} />
+              <StationMaintenancesTable setAlertMessage={alertFn} hoursRemaining={''} getHoursSummary={function (): void {
+                throw new Error('Function not implemented.');
+              } } />
             </ThemeProvider>
           </Route>
         </MemoryRouter>
@@ -226,7 +232,9 @@ describe('<StationMaintenancesTable />', () => {
         <MemoryRouter initialEntries={[`/station-maintenances`]}>
           <Route path="/station-maintenances">
             <ThemeProvider theme={theme}>
-              <StationMaintenancesTable setAlertMessage={alertFn} />
+              <StationMaintenancesTable setAlertMessage={alertFn} hoursRemaining={''} getHoursSummary={function (): void {
+                throw new Error('Function not implemented.');
+              } } />
             </ThemeProvider>
           </Route>
         </MemoryRouter>
@@ -250,7 +258,9 @@ describe('<StationMaintenancesTable />', () => {
         <MemoryRouter initialEntries={[`/station-maintenances`]}>
           <Route path="/station-maintenances">
             <ThemeProvider theme={theme}>
-              <StationMaintenancesTable setAlertMessage={alertFn} />
+              <StationMaintenancesTable setAlertMessage={alertFn} hoursRemaining={''} getHoursSummary={function (): void {
+                throw new Error('Function not implemented.');
+              } } />
             </ThemeProvider>
           </Route>
         </MemoryRouter>
@@ -298,7 +308,9 @@ describe('<StationMaintenancesTable />', () => {
         <MemoryRouter initialEntries={[`/station-maintenances`]}>
           <Route path="/station-maintenances">
             <ThemeProvider theme={theme}>
-              <StationMaintenancesTable setAlertMessage={alertFn} />
+              <StationMaintenancesTable setAlertMessage={alertFn} hoursRemaining={''} getHoursSummary={function (): void {
+                throw new Error('Function not implemented.');
+              } } />
             </ThemeProvider>
           </Route>
         </MemoryRouter>

src/pages/stations/stationAssociateEC/StationAssociateECPage.tsx

@@ -1,8 +1,3 @@
-import Button from '@mui/material/Button';
-import FormControl from '@mui/material/FormControl';
-import Grid from '@mui/material/Grid';
-import Paper from '@mui/material/Paper';
-import { useEffect, useState } from 'react';
 import {
   FormControlLabel,
   InputLabel,
@@ -12,21 +7,29 @@ import {
   Select,
   Switch,
 } from '@mui/material';
+import Button from '@mui/material/Button';
+import FormControl from '@mui/material/FormControl';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { Box } from '@mui/system';
 import { theme } from '@pagopa/mui-italia';
 import { useErrorDispatcher, useLoading } from '@pagopa/selfcare-common-frontend';
 import { useFormik } from 'formik';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, useHistory, useParams } from 'react-router-dom';
 import { AvailableCodes } from '../../../api/generated/portal/AvailableCodes';
 import { CreditorInstitutionInfo } from '../../../api/generated/portal/CreditorInstitutionInfo';
 import { CreditorInstitutionInfoResource } from '../../../api/generated/portal/CreditorInstitutionInfoResource';
+import { CreditorInstitutionResource } from '../../../api/generated/portal/CreditorInstitutionResource';
 import { CreditorInstitutionStationDto } from '../../../api/generated/portal/CreditorInstitutionStationDto';
 import ECSelection from '../../../components/Form/ECSelection';
+import { StationECAssociateActionType } from '../../../model/Station';
 import { useAppSelector, useAppSelectorWithRedirect } from '../../../redux/hooks';
 import { partiesSelectors } from '../../../redux/slices/partiesSlice';
+import { stationCISelectors } from '../../../redux/slices/stationCISlice';
 import ROUTES from '../../../routes';
 import { getAvailableCreditorInstitutionsForStation } from '../../../services/creditorInstitutionService';
 import {
@@ -39,9 +42,6 @@ import {
   LOADING_TASK_EC_AVAILABLE,
   LOADING_TASK_SEGREGATION_CODES_AVAILABLE,
 } from '../../../utils/constants';
-import { StationECAssociateActionType } from '../../../model/Station';
-import { stationCISelectors } from '../../../redux/slices/stationCISlice';
-import { CreditorInstitutionResource } from '../../../api/generated/portal/CreditorInstitutionResource';
 
 const availableEcEmptyState: CreditorInstitutionInfoResource = {
   creditor_institution_info_list: [],
@@ -187,11 +187,11 @@ function StationAssociateECPage() {
     selectedEC;
 
   const submit = (values: CreditorInstitutionStationDto) => {
-    if (selectedEC && selectedEC.ciTaxCode) {
+    if (selectedEC && selectedEC.ciTaxCode && selectedParty?.partyId && selectedParty?.fiscalCode) {
       setLoading(true);
       const promise = isEditMode
         ? updateEcAssociationToStation(selectedEC.ciTaxCode, { ...values, stationCode: stationId })
-        : associateEcToStation(selectedEC.ciTaxCode, { ...values, stationCode: stationId });
+        : associateEcToStation(selectedEC.ciTaxCode, { ...values, stationCode: stationId }, selectedParty.partyId, selectedParty.fiscalCode);
       promise
         .then((_) => {
           history.push(generatePath(ROUTES.STATION_EC_LIST, { stationId }), {