Merge pull request #27 from Kitzanos/feature/92-notifications

Feature/92 notifications

.env

@@ -1,6 +1,7 @@
 REACT_APP_TAB_TITLE=Gepafin
 REACT_APP_API_EXECUTION_ADDRESS=https://api-dev-gepafin.memento.credit/v1
 REACT_APP_API_ADDRESS=https://api-dev-gepafin.memento.credit
+REACT_APP_API_ADDRESS_WS=https://api-dev-gepafin.memento.credit/wss
 REACT_APP_LOGO_FILENAME=gepafin-logo.svg
 REACT_APP_FAVICON_FILENAME=gepafin-favicon.ico
 REACT_APP_HUB_ID=p4lk3bcx1RStqTaIVVbXs

package.json

@@ -10,6 +10,7 @@
     "@emotion/styled": "11.13.0",
     "@number-flow/react": "0.4.2",
     "@sentry/browser": "^8.42.0",
+    "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-table": "^8.20.5",
     "@wordpress/i18n": "5.8.0",
     "@wordpress/react-i18n": "4.8.0",
@@ -36,6 +37,7 @@
     "react-hook-form": "7.53.0",
     "react-router-dom": "6.26.2",
     "react-scripts": "5.0.1",
+    "sockjs-client": "^1.6.1",
     "validate.js": "0.13.1",
     "zustand": "4.5.4",
     "zustand-x": "3.0.4"

src/assets/scss/components/appPage.scss

@@ -89,6 +89,7 @@
 }
 
 .appPageSection {
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -434,6 +435,15 @@
     }
 }
 
+.appPageSection__emailTemplate {
+    > div {
+        max-width: 100%!important;
+        > div {
+            max-width: 100%!important;
+        }
+    }
+}
+
 @media (max-width: 700px) {
     .appPageSection {
         &.columns {

src/assets/scss/components/notificationsSidebar.scss

@@ -0,0 +1,55 @@
+.notificationsIcon {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.notificationsSidebar {
+  max-width: 360px;
+  width: 100%;
+}
+
+.notificationsSidebar__loading {
+  padding: 30px 0;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.notificationsSidebar__list {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  list-style: none;
+  padding: 0;
+}
+
+.notificationsSidebar__listItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 5px;
+  padding: 15px 0;
+  border-bottom: 1px solid #e7e7e7;
+
+  &:hover {
+    cursor: pointer;
+    color: var(--primary-text);
+  }
+}
+
+.notificationsSidebar__listItemContent {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  font-size: 14px;
+}
+
+.notificationsSidebar__listItemChosen {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+}

src/assets/scss/theme.scss

@@ -45,3 +45,4 @@
 @import "./components/myTable.scss";
 @import "./components/evaluation.scss";
 @import "./components/fieldsRepeater.scss";
+@import "./components/notificationsSidebar.scss";

src/components/NotificationsSidebar/components/NotificationItem/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import getDateFromISOstring from '../../../../helpers/getDateFromISOstring';
+
+const NotificationItem = ({ item, clickFn }) => {
+    const handleClick = () => {
+        clickFn(item.id);
+    }
+
+    return (
+        <li className="notificationsSidebar__listItem" onClick={handleClick}>
+            <div className="notificationsSidebar__listItemContent">
+                {item.status === 'READ'
+                    ? <p>{item.title}</p>
+                    : <strong>{item.title}</strong>}
+                <span>{getDateFromISOstring(item.createdDate)}</span>
+            </div>
+            <i className="pi pi-angle-right"></i>
+        </li>
+    )
+}
+
+export default NotificationItem;

src/components/NotificationsSidebar/components/NotificationItemChosen/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Button } from 'primereact/button';
+import getDateFromISOstring from '../../../../helpers/getDateFromISOstring';
+
+const NotificationItemChosen = ({ item, closeFn, markReadFn }) => {
+    return (
+        <div className="notificationsSidebar__listItemChosen">
+            <Button
+                style={{marginBottom: '20px'}}
+                type="button"
+                outlined
+                onClick={closeFn}
+                label={__('Indietro', 'gepafin')}
+                icon="pi pi-arrow-left" iconPos="left"/>
+            <strong>{item.title}</strong>
+            <span>{getDateFromISOstring(item.createdDate)}</span>
+            {item.message}
+
+            <Button
+                style={{marginTop: '20px'}}
+                type="button"
+                outlined
+                onClick={() => markReadFn(item.id)}
+                label={__('Letto', 'gepafin')}/>
+        </div>
+    )
+}
+
+export default NotificationItemChosen;

src/components/NotificationsSidebar/index.js

@@ -0,0 +1,280 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { __ } from '@wordpress/i18n';
+import { head, isEmpty, pathOr } from 'ramda';
+import SockJS from 'sockjs-client';
+import { Stomp } from '@stomp/stompjs';
+
+// store
+import { storeGet, useStore } from '../../store';
+
+// api
+import NotificationService from '../../service/notification-service';
+
+// tools
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
+
+// components
+import { Badge } from 'primereact/badge';
+import { Sidebar } from 'primereact/sidebar';
+import { TabPanel, TabView } from 'primereact/tabview';
+import NotificationItem from './components/NotificationItem';
+import NotificationItemChosen from './components/NotificationItemChosen';
+
+const socketUrl = process.env.REACT_APP_API_ADDRESS_WS;
+
+const NotificationsSidebar = () => {
+    const chosenCompanyId = useStore().main.chosenCompanyId();
+    const userData = useStore().main.userData();
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [notificationsVisible, setNotificationsVisible] = useState(false);
+    const [notifications, setNotifications] = useState([]);
+    const [notificationsRead, setNotificationsRead] = useState([]);
+    const [chosenMsg, setChosenMsg] = useState({});
+    const socket = useRef(null);
+    const stomp = useRef(null);
+    const [currentSubscription, setCurrentSubscription] = useState(null);
+    const [isConnected, setIsConnected] = useState(false);
+
+    // Handle tab change
+    const handleTabChange = (e) => {
+        setActiveIndex(e.index);
+        fetchTabData(e.index);
+    };
+
+    const fetchTabData = (index) => {
+        setChosenMsg({});
+
+        if (0 === index) {
+            fetchMessages();
+        } else {
+            fetchMessages('READ');
+        }
+    }
+
+    const chooseNotification = (id) => {
+        const properItems = activeIndex === 0 ? notifications : notificationsRead;
+        const chosen = head(properItems.filter(o => o.id === id));
+        if (chosen) {
+            setChosenMsg(chosen);
+        }
+    }
+
+    const closeChosenMsg = () => {
+        setChosenMsg({});
+    }
+
+    const fetchMessages = (status = 'UNREAD') => {
+        const chosenCompanyId = storeGet.main.chosenCompanyId();
+        const userData = storeGet.main.userData();
+        const role = pathOr('', ['role', 'roleType'], userData);
+
+        if (currentSubscription) {
+            console.log('UNsubscribed')
+            currentSubscription.unsubscribe();
+            setCurrentSubscription(null);
+        }
+
+        if (isConnected && userData.id && chosenCompanyId !== 0 && role === 'ROLE_BENEFICIARY') {
+            setLoading(true);
+            NotificationService.getNotifications(
+                userData.id,
+                status === 'UNREAD' ? getNotifications : getNotificationsRead,
+                errGetNotifications,
+                [
+                    ['status', status],
+                    ['companyId', chosenCompanyId]
+                ]
+            );
+            if (socket.current) {
+                subscribeTo(`/topic/notifications_user_${userData.id}_company_${chosenCompanyId}`)
+            }
+        } else if (isConnected && userData.id && role !== 'ROLE_BENEFICIARY') {
+            setLoading(true);
+            NotificationService.getNotifications(
+                userData.id,
+                status === 'UNREAD' ? getNotifications : getNotificationsRead,
+                errGetNotifications,
+                [
+                    ['status', status]
+                ]
+            );
+            if (socket.current) {
+                subscribeTo(`/topic/notifications_user_${userData.id}`)
+            }
+        }
+    }
+
+    const getNotifications = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            setNotifications(resp.data);
+        }
+        set404FromErrorResponse(resp);
+        setLoading(false);
+    }
+
+    const getNotificationsRead = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            setNotificationsRead(resp.data);
+        }
+        set404FromErrorResponse(resp);
+        setLoading(false);
+    }
+
+    const errGetNotifications = (resp) => {
+        set404FromErrorResponse(resp);
+        setLoading(false);
+    }
+
+    const makeNotificationRead = (id) => {
+        NotificationService.notificationMakeRead(id, makeReadCallback, makeReadErrorCallback)
+    }
+
+    const makeReadCallback = (resp) => {
+        if (resp.status === 'SUCCESS') {
+            if (0 === activeIndex) {
+                const msgs = notifications.map(o => o.id === resp.data.id ? resp.data : o);
+                setNotifications(msgs);
+            } else {
+                const msgs = notificationsRead.map(o => o.id === resp.data.id ? resp.data : o);
+                setNotificationsRead(msgs);
+            }
+        }
+        set404FromErrorResponse(resp);
+    }
+
+    const makeReadErrorCallback = (resp) => {
+        set404FromErrorResponse(resp);
+    }
+
+    const connectWebSocket = () => {
+        socket.current = new SockJS(socketUrl);
+        stomp.current = Stomp.over(socket.current);
+
+        stomp.current.configure({
+            debug: function(str) {
+                //console.log(str);
+            },
+            reconnectDelay: 5000,
+            heartbeatIncoming: 20000,
+            heartbeatOutgoing: 20000
+        });
+
+        stomp.current.connect(
+            {},
+            () => {
+                // connected
+                console.log('Websocket connected');
+                setIsConnected(true);
+            },
+            (error) => {
+                console.error('WebSocket Connection Error:', error);
+                setIsConnected(false);
+                setTimeout(connectWebSocket, 5000);
+            }
+        );
+    };
+
+    const subscribeTo = (topic) => {
+        console.log('subscribeTo', topic)
+        const subscription = stomp.current.subscribe(
+            topic,
+            (message) => {
+                try {
+                    const notification = JSON.parse(message.body);
+                    console.log('notification', notification)
+                    //setNotifications(prev => [notification, ...prev]);
+                } catch (error) {
+                    console.error('Error parsing notification:', error);
+                }
+            }
+        );
+
+        setCurrentSubscription(subscription);
+    }
+
+    useEffect(() => {
+        fetchMessages();
+    }, [chosenCompanyId, userData.id, isConnected]);
+
+    useEffect(() => {
+        connectWebSocket();
+
+        return () => {
+            if (currentSubscription) {
+                currentSubscription.unsubscribe();
+                setCurrentSubscription(null);
+            }
+
+            if (stomp.current) {
+                stomp.current.disconnect(() => {
+                    console.log('WebSocket Disconnected');
+                });
+            }
+        };
+    }, []);
+
+    return (
+        <>
+            <i className="pi pi-bell p-overlay-badge topBar__icon notificationsIcon"
+               onClick={() => setNotificationsVisible(true)}>
+                <Badge value={notifications.length}></Badge>
+            </i>
+            <Sidebar
+                className="notificationsSidebar"
+                position="left"
+                visible={notificationsVisible}
+                onHide={() => setNotificationsVisible(false)}>
+                <TabView activeIndex={activeIndex} onTabChange={handleTabChange}>
+                    <TabPanel header={__('Da leggere', 'gepafin')}>
+                        {loading
+                            ? <div className="notificationsSidebar__loading">
+                                <i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>
+                            </div>
+                            : !isEmpty(chosenMsg)
+                                ? <NotificationItemChosen
+                                    item={chosenMsg}
+                                    closeFn={closeChosenMsg}
+                                    markReadFn={makeNotificationRead}/>
+                                : (notifications.length > 0
+                                    ? <ul className="notificationsSidebar__list">
+                                        {notifications.map(o => <NotificationItem
+                                            key={o.id}
+                                            item={o}
+                                            clickFn={chooseNotification}/>)}
+                                    </ul>
+                                    : <div className="notificationsSidebar__loading">
+                                        <i className="pi pi-megaphone" style={{ fontSize: '2rem' }}></i>
+                                        {__('Vuoto', 'gepafin')}
+                                    </div>)}
+                    </TabPanel>
+                    <TabPanel header={__('Letti', 'gepafin')}>
+                        {loading
+                            ? <div className="notificationsSidebar__loading">
+                                <i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>
+                            </div>
+                            : !isEmpty(chosenMsg)
+                                ? <NotificationItemChosen
+                                    item={chosenMsg}
+                                    closeFn={closeChosenMsg}
+                                    markReadFn={makeNotificationRead}/>
+                                : (notificationsRead.length > 0
+                                ? <ul className="notificationsSidebar__list">
+                                    {notificationsRead.map(o => <NotificationItem
+                                        key={o.id}
+                                        item={o}
+                                        clickFn={chooseNotification}/>)}
+                                </ul>
+                                :
+                                <div className="notificationsSidebar__loading">
+                                    <i className="pi pi-megaphone" style={{ fontSize: '2rem' }}></i>
+                                    {__('Vuoto', 'gepafin')}
+                                </div>)}
+                    </TabPanel>
+                </TabView>
+            </Sidebar>
+        </>
+    )
+}
+
+export default NotificationsSidebar;

src/helpers/getStrippedHtmlBodyTags.js

@@ -0,0 +1,28 @@
+import parse from 'html-react-parser';
+import DOMPurify from 'dompurify';
+
+const getEmailTemplateForSoccorso = (content = '', fallback = '') => {
+    const config = {
+        FORBID_TAGS: ['html', 'body'],
+        WHOLE_DOCUMENT: false,
+        RETURN_DOM: false,
+        RETURN_DOM_FRAGMENT: false,
+        RETURN_DOM_IMPORT: false,
+        FORCE_BODY: false,
+        ADD_TAGS: ['*'],
+        ADD_ATTR: ['*']
+    };
+    try {
+        const wrappedHtml = `<div>${content}</div>`;
+        const cleaned = DOMPurify.sanitize(wrappedHtml, config);
+
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = cleaned;
+        return parse(tempDiv.innerHTML);
+    } catch (error) {
+        console.error('DOMPurify cleaning error:', error);
+        return fallback;
+    }
+}
+
+export default getEmailTemplateForSoccorso;

src/layouts/DefaultLayout/components/AppTopbar/index.js

@@ -8,9 +8,9 @@ import LogoIcon from '../../../../icons/LogoIcon';
 import { IconField } from 'primereact/iconfield';
 import { InputIcon } from 'primereact/inputicon';
 import { InputText } from 'primereact/inputtext';
-import { Badge } from 'primereact/badge';
 import { Button } from 'primereact/button';
 import TopBarProfileMenu from '../../../../components/TopBarProfileMenu';
+import NotificationsSidebar from '../../../../components/NotificationsSidebar';
 
 const AppTopbar = () => {
     const menuLeft = useRef(null);
@@ -24,14 +24,13 @@ const AppTopbar = () => {
             <InputIcon className="pi pi-search"> </InputIcon>
             <InputText v-model="value1" placeholder={__('Cerca', 'gepafin')} disabled={true}/>
         </IconField>
-        <i className="pi pi-bell p-overlay-badge topBar__icon">
+        <NotificationsSidebar/>
-            <Badge value="0"></Badge>
-        </i>
         <i className="pi pi-envelope topBar__icon"></i>
         {/*<i className="pi pi-envelope p-overlay-badge topBar__icon">
             <Badge severity="danger"></Badge>
         </i>*/}
         <Button
+            type="button"
             className="topBar__profileBtn"
             outlined
             onClick={(event) => menuLeft.current.toggle(event)} aria-controls="topBar_profileMenu" aria-haspopup>

src/pages/DomandaEditInstructorManager/index.js

@@ -0,0 +1,960 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { __, sprintf } from '@wordpress/i18n';
+import { useNavigate, useParams } from 'react-router-dom';
+import { is, isEmpty, isNil, sum, pathOr, head } from 'ramda';
+import { klona } from 'klona';
+import { wrap } from 'object-path-immutable';
+
+// store
+import { storeGet, storeSet, useStore } from '../../store';
+
+// api
+import ApplicationEvaluationService from '../../service/application-evaluation-service';
+import AmendmentsService from '../../service/amendments-service';
+import AppointmentService from '../../service/appointment-service';
+
+// tools
+import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
+import getBandoLabel from '../../helpers/getBandoLabel';
+import getDateFromISOstring from '../../helpers/getDateFromISOstring';
+
+// components
+import { Skeleton } from 'primereact/skeleton';
+import { Button } from 'primereact/button';
+import { Tag } from 'primereact/tag';
+import { Checkbox } from 'primereact/checkbox';
+import { Editor } from 'primereact/editor';
+import { InputNumber } from 'primereact/inputnumber';
+import { Toast } from 'primereact/toast';
+import { Dialog } from 'primereact/dialog';
+import HelpIcon from '../../icons/HelpIcon';
+import { classNames } from 'primereact/utils';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { InputText } from 'primereact/inputtext';
+import DownloadApplicationArchive from '../DomandaEditPreInstructor/components/DownloadApplicationArchive';
+import DownloadCompanyDelegation from '../DomandaEditPreInstructor/components/DownloadCompanyDelegation';
+import DownloadSignedApplication from '../DomandaEditPreInstructor/components/DownloadSignedApplication';
+import ListOfFiles from '../DomandaEditPreInstructor/components/ListOfFiles';
+import RepeaterFields from '../DomandaEditPreInstructor/components/RepeaterFields';
+
+const APP_EVALUATION_FLOW_ID = process.env.REACT_APP_EVALUATION_FLOW_ID;
+
+const DomandaEditPreInstructor = () => {
+    const isAsyncRequest = useStore().main.isAsyncRequest();
+    const { id } = useParams();
+    const navigate = useNavigate();
+    const [data, setData] = useState({});
+    const [isVisibleCriterionData, setIsVisibleCriterionData] = useState(0);
+    const [criterionDataTitle, setCriterionDataTitle] = useState('');
+    const [criterionDataContent, setCriterionDataContent] = useState('');
+    const [isAdmissible, setIsAdmissible] = useState(false);
+    const [connectedSoccorsoId, setConnectedSoccorsoId] = useState(0);
+    const toast = useRef(null);
+    const [loading, setLoading] = useState(false);
+    const [isVisibleCompleteDialog, setIsVisibleCompleteDialog] = useState(false);
+    const [operationType, setOperationType] = useState('');
+    const [motivation, setMotivation] = useState('');
+    const [isVisibleAppointmentDialog, setIsVisibleAppointmentDialog] = useState(false);
+    const [allFilesRated, setAllFilesRated] = useState(false);
+    const [atLeastOneChecked, setAtLeastOneChecked] = useState(false);
+    const [allChecksChecked, setAllChecksChecked] = useState(false);
+    const [appointmentData, setAppointmentData] = useState({
+        title: '',
+        text: '',
+        duration: 0,
+        amount: 0
+    });
+
+    const goToEvaluationsPage = () => {
+        navigate('/domande');
+    }
+
+    const updateFlagsForSoccorso = (data) => {
+        let nonRatedFilesLength = 0;
+
+        if (data.files) {
+            const nonRatedFiles = data.files
+                .map(el => el.valid)
+                .filter(v => isNil(v));
+            nonRatedFilesLength = nonRatedFiles.length;
+        }
+
+        if (data.amendmentDetails) {
+            const nonRatedFiles = data.amendmentDetails
+                .map(el => el.valid)
+                .filter(v => isNil(v));
+            nonRatedFilesLength = nonRatedFiles.length;
+        }
+
+        setAllFilesRated(nonRatedFilesLength === 0);
+
+        if (data.checklist) {
+            const checkedChecklistItems = data.checklist
+                .map(el => el.valid)
+                .filter(v => v);
+            setAtLeastOneChecked(checkedChecklistItems.length > 0);
+            setAllChecksChecked(checkedChecklistItems.length === data.checklist.length)
+        }
+    }
+
+    const doNewSoccorso = () => {
+        if (connectedSoccorsoId !== 0) {
+            navigate(`/domande/${id}/soccorso/${connectedSoccorsoId}`);
+        } else {
+            doSaveDraft(`/domande/${id}/aggiungi-soccorso/`)
+        }
+    }
+
+    const getCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            setData(getFormattedData(data.data));
+            setMotivation(data.data.motivation);
+            updateFlagsForSoccorso(data.data);
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetCallback = (data) => {
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: 'error',
+                summary: '',
+                detail: data.message
+            });
+        }
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const getFormattedData = (data) => {
+        data.submissionDate = is(String, data.submissionDate) ? new Date(data.submissionDate) : (data.submissionDate ? data.submissionDate : '');
+        data.evaluationDate = is(String, data.evaluationDate) ? new Date(data.evaluationDate) : (data.evaluationDate ? data.evaluationDate : '');
+        return data;
+    };
+
+    const renderHeader = () => {
+        return (
+            <span className="ql-formats">
+                <button className="ql-bold" aria-label="Bold"></button>
+                <button className="ql-italic" aria-label="Italic"></button>
+                <button className="ql-underline" aria-label="Underline"></button>
+                <button className="ql-link" aria-label="Link"></button>
+                <button className="ql-list" value="ordered"></button>
+                <button className="ql-header" value="2"></button>
+                <button className="ql-header" value="3"></button>
+                <button className="ql-blockquote"></button>
+                <button className="ql-list" value="bullet"></button>
+                <button className="ql-indent" value="-1"></button>
+                <button className="ql-indent" value="+1"></button>
+            </span>
+        );
+    };
+
+    const header = renderHeader();
+
+    const updateEvaluationValue = (value, path, maxValue = null) => {
+        let finalValue = value;
+
+        if (maxValue || maxValue === 0) {
+            finalValue = value > maxValue ? maxValue : value;
+        }
+
+        const newData = wrap(data).set(path, finalValue).value();
+        setData(newData);
+        updateFlagsForSoccorso(newData);
+    }
+
+    const doSaveDraft = useCallback((doRedirect = '') => {
+        const formData = {
+            criteria: klona(data.criteria),
+            checklist: klona(data.checklist),
+            files: klona(data.files),
+            evaluationDocument: klona(data.evaluationDocument.map(o => ({
+                    ...o,
+                    fileValue: o.fileValue[0] ? o.fileValue[0].id : ''
+                })
+            )),
+            amendmentDetails: klona(data.amendmentDetails),
+            note: data.note
+        }
+
+        ApplicationEvaluationService.updateEvaluation(
+            data.assignedApplicationId,
+            formData,
+            (data) => updateCallback(data, doRedirect),
+            errUpdateCallback
+        );
+    }, [data]);
+
+    const updateCallback = (data, doRedirect = '') => {
+        if (data.status === 'SUCCESS') {
+            setData(getFormattedData(data.data));
+            if (toast.current) {
+                toast.current.show({
+                    severity: 'success',
+                    summary: '',
+                    detail: data.message
+                });
+            }
+            if (!isEmpty(doRedirect)) {
+                navigate(doRedirect);
+            }
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errUpdateCallback = (data) => {
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: 'error',
+                summary: '',
+                detail: data.message
+            });
+        }
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const doApprove = () => {
+        const formData = {
+            applicationStatus: 'APPROVED',
+            criteria: klona(data.criteria),
+            checklist: klona(data.checklist),
+            files: klona(data.files),
+            note: data.note,
+            motivation
+        }
+
+        setIsVisibleCompleteDialog(false);
+        ApplicationEvaluationService.updateEvaluation(data.assignedApplicationId, formData, updateStatusCallback, errUpdateStatusCallback);
+    }
+
+    const doReject = () => {
+        const formData = {
+            applicationStatus: 'REJECTED',
+            criteria: klona(data.criteria),
+            checklist: klona(data.checklist),
+            files: klona(data.files),
+            note: data.note,
+            motivation
+        }
+
+        setIsVisibleCompleteDialog(false);
+        ApplicationEvaluationService.updateEvaluation(data.assignedApplicationId, formData, updateStatusCallback, errUpdateStatusCallback);
+    }
+
+    const updateStatusCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            setData(getFormattedData(data.data));
+            if (toast.current) {
+                toast.current.show({
+                    severity: 'success',
+                    summary: '',
+                    detail: data.message
+                });
+            }
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errUpdateStatusCallback = (data) => {
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: 'error',
+                summary: '',
+                detail: data.message
+            });
+        }
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const displayCriterionData = (id) => {
+        const criterion = head(data.criteria.filter(o => o.id === id));
+        setCriterionDataTitle(criterion.label);
+        const content = <div className="criterionRelatedData">
+            <h3>{__('I campi correlati')}</h3>
+            {criterion.criteriaMappedFields ? criterion.criteriaMappedFields.map(o => criteriaDataItem(o)) : null}
+        </div>;
+        setCriterionDataContent(content);
+        setIsVisibleCriterionData(id);
+    }
+
+    const criteriaDataItem = (item) => {
+        let content = '';
+
+        switch (item.fieldName) {
+            case 'fileupload' :
+                content = <ul>
+                    {item.fieldValue
+                        ? item.fieldValue.map(o => <li key={o.id}>
+                            {o.filePath ? <a href={o.filePath}>{o.name}</a> : null}
+                        </li>)
+                        : null}
+                </ul>;
+                break;
+            case 'table' :
+                const th = Object.keys(item.fieldValue[0]);
+                content = <table>
+                    <thead>
+                    <tr>
+                        {th.map(v => <th key={v}>{v}</th>)}
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {item.fieldValue
+                        ? item.fieldValue.map((o, i) => <tr key={i}>
+                            {Object.values(o).map(v => <td key={v}>{v}</td>)}
+                        </tr>)
+                        : null}
+                    </tbody>
+                </table>;
+                break;
+            default :
+                content = item.fieldValue;
+                break;
+        }
+
+        return <div key={item.id} className="criterionRelatedData__item">
+            <strong>{item.fieldLabel}</strong>
+            {content}
+        </div>
+    }
+
+    const hideCriterionData = () => {
+        setIsVisibleCriterionData(0);
+        setCriterionDataTitle('');
+        setCriterionDataContent('');
+    }
+
+    const getAmendmentsCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            if (data.data.length) {
+                setConnectedSoccorsoId(data.data[0].id);
+            }
+        }
+    }
+
+    const errGetAmendmentsCallback = () => {
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: 'error',
+                summary: '',
+                detail: data.message
+            });
+        }
+        set404FromErrorResponse(data);
+    }
+
+    const shouldDisableField = (fieldName) => {
+        return !['EVALUATION'].includes(data.applicationStatus)
+            || (['ADMISSIBLE'].includes(data.applicationStatus) && fieldName !== 'criteria')
+    }
+
+    const headerCompleteDialog = () => {
+        return 'approve' === operationType
+            ? <span>{__('Confermare l\'approvazione', 'gepafin')}</span>
+            : <span>{__('Confermare il rifiuto', 'gepafin')}</span>;
+    }
+
+    const hideCompleteDialog = () => {
+        setIsVisibleCompleteDialog(false);
+        setOperationType('');
+        setMotivation('');
+    }
+
+    const footerCompleteDialog = () => {
+        return <div>
+            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideCompleteDialog} outlined/>
+            <Button
+                type="button"
+                disabled={loading}
+                label={__('Invia', 'gepafin')} onClick={'approve' === operationType ? doApprove : doReject}/>
+        </div>
+    }
+
+    const initiateApproving = () => {
+        setOperationType('approve');
+        setIsVisibleCompleteDialog(true);
+
+    }
+
+    const initiateRejecting = () => {
+        setOperationType('reject');
+        setIsVisibleCompleteDialog(true);
+    }
+
+    const doCheckNDG = () => {
+        storeSet.main.setAsyncRequest();
+        doSaveDraft();
+        setTimeout(() => {
+            AppointmentService.getNdg(id, getNdgCallback, errGetNdgCallback);
+        }, 100);
+    }
+
+    const getNdgCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            if (toast.current && data.message) {
+                toast.current.show({
+                    severity: 'success',
+                    summary: '',
+                    detail: data.message
+                });
+            }
+        }
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetNdgCallback = (data) => {
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: data.status === 'SUCCESS' ? 'info' : 'error',
+                summary: '',
+                detail: data.message
+            });
+        }
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const doCreateAppointment = () => {
+        setAppointmentData({
+            title: '',
+            text: '',
+            duration: 0,
+            amount: 0
+        });
+        setIsVisibleAppointmentDialog(true);
+    }
+
+    const setValue = (name, value) => {
+        const newData = wrap(appointmentData).set(name, value).value();
+        setAppointmentData(newData);
+    }
+
+    const headerAppointmentDialog = () => {
+        return <span>{__('Crea appuntamento', 'gepafin')}</span>;
+    }
+
+    const hideAppointmentDialog = () => {
+        setIsVisibleAppointmentDialog(false);
+        setAppointmentData({});
+    }
+
+    const footerAppointmentDialog = () => {
+        return <div>
+            <Button type="button" label={__('Anulla', 'gepafin')} onClick={hideAppointmentDialog} outlined/>
+            <Button
+                type="button"
+                disabled={loading}
+                label={__('Invia', 'gepafin')} onClick={doCreateAppointmentRequest}/>
+        </div>
+    }
+
+    const doCreateAppointmentRequest = () => {
+        if (
+            !isEmpty(appointmentData.title) && !isEmpty(appointmentData.text) && !isEmpty(appointmentData.amount)
+            && !isEmpty(appointmentData.duration) && appointmentData.duration !== 0 && appointmentData.amount !== 0
+        ) {
+            storeSet.main.setAsyncRequest();
+            const submitData = {
+                'importoBreveTermine': appointmentData.amount,
+                'durataMesiFinanziamento': appointmentData.duration,
+                'nota': {
+                    'titolo': appointmentData.title,
+                    'testo': appointmentData.text
+                }
+            }
+
+            AppointmentService.createAppointment(id, submitData, getAppointemntCallback, errGetAppointemntCallback);
+        }
+    }
+
+    const getAppointemntCallback = (data) => {
+        if (data.status === 'SUCCESS') {
+            if (toast.current && data.message) {
+                toast.current.show({
+                    severity: 'success',
+                    summary: '',
+                    detail: data.message
+                });
+            }
+        }
+        setIsVisibleAppointmentDialog(false);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const errGetAppointemntCallback = (data) => {
+        if (toast.current && data.message) {
+            toast.current.show({
+                severity: data.status === 'SUCCESS' ? 'info' : 'error',
+                summary: '',
+                detail: data.message
+            });
+        }
+        setIsVisibleAppointmentDialog(false);
+        set404FromErrorResponse(data);
+        storeSet.main.unsetAsyncRequest();
+    }
+
+    const doMakeAdmisible = () => {
+        // TODO
+    }
+
+    const evaluationShouldBeBlocked = (data = {}) => {
+        const userData = storeGet.main.userData()
+        return isAsyncRequest || userData.id !== data.assignedUserId;
+    }
+
+    useEffect(() => {
+        const maxScore = pathOr(0, ['minScore'], data);
+        const criteria = pathOr([], ['criteria'], data);
+        const scoreSum = sum(criteria.map(o => o.score));
+
+        setIsAdmissible(scoreSum !== 0 && scoreSum >= maxScore);
+    }, [data]);
+
+    useEffect(() => {
+        const parsed = parseInt(id)
+        const entityId = !isNaN(parsed) ? parsed : 0;
+
+        storeSet.main.setAsyncRequest();
+        ApplicationEvaluationService.getEvaluationByApplId(getCallback, errGetCallback, [
+            ['applicationId', entityId]
+        ]);
+        AmendmentsService.getSoccorsoByApplId(entityId, getAmendmentsCallback, errGetAmendmentsCallback, [
+            ['statuses', 'AWAITING']
+        ]);
+    }, [id]);
+
+    return (
+        <div className="appPage">
+            <div className="appPage__pageHeader">
+                <h1>{__('Valuta domanda', 'gepafin')}</h1>
+            </div>
+
+            <div className="appPage__spacer"></div>
+            <Toast ref={toast}/>
+
+            <div className="appPageSection__row">
+                <Button
+                    type="button"
+                    outlined
+                    onClick={goToEvaluationsPage}
+                    label={__('Indietro', 'gepafin')}
+                    icon="pi pi-arrow-left" iconPos="left"/>
+            </div>
+
+            <div className="appPage__spacer"></div>
+
+            {!isAsyncRequest && !isEmpty(data)
+                ? <div className="appPage__content">
+                    <div className="appPageSection__withBorder columns">
+                        <p className="appPageSection__pMeta">
+                            <span>{__('ID domanda', 'gepafin')}</span>
+                            <span>{data.applicationId}</span>
+                        </p>
+                        <p className="appPageSection__pMeta">
+                            <span>{__('Protocollo', 'gepafin')}</span>
+                            <span>{data.protocolNumber}</span>
+                        </p>
+                        <p className="appPageSection__pMeta">
+                            <span>{__('NDG', 'gepafin')}</span>
+                            <span>{data.ndg}</span>
+                        </p>
+                        <p className="appPageSection__pMeta">
+                            <span>{__('Appuntamento', 'gepafin')}</span>
+                            <span>{data.appointmentId}</span>
+                        </p>
+                        <p className="appPageSection__pMeta">
+                            <span>{__('Bando', 'gepafin')}</span>
+                            <span>{data.callName}</span>
+                        </p>
+                        <p className="appPageSection__pMeta">
+                            <span>{__('Referente Aziendale', 'gepafin')}</span>
+                            <span>{data.beneficiary}</span>
+                        </p>
+                        <p className="appPageSection__pMeta">
+                            <span>{__('Azienda Beneficiaria', 'gepafin')}</span>
+                            <span>{data.companyName}</span>
+                        </p>
+                        <p className="appPageSection__pMeta">
+                            <span>{__('Data ricezione', 'gepafin')}</span>
+                            <span>{getDateFromISOstring(data.submissionDate)}</span>
+                        </p>
+                        <p className="appPageSection__pMeta">
+                            <span>{__('Data assegnazione', 'gepafin')}</span>
+                            <span>{getDateFromISOstring(data.assignedAt)}</span>
+                        </p>
+                        <p className="appPageSection__pMeta">
+                            <span>{__('Scadenza Valutazione', 'gepafin')}</span>
+                            <span>{getDateFromISOstring(data.evaluationEndDate)}</span>
+                        </p>
+                        <p className="appPageSection__pMeta">
+                            <span>{__('Stato', 'gepafin')}</span>
+                            <span>{getBandoLabel(data.applicationStatus)}</span>
+                        </p>
+                    </div>
+
+                    <div className="appPageSection">
+                        <h2>{__('Scarica documenti della domanda', 'gepafin')}</h2>
+                        <div className="appPageSection__row autoFlow">
+                            <DownloadApplicationArchive applicationId={id}/>
+                            <DownloadSignedApplication applicationId={id}/>
+                            <DownloadCompanyDelegation applicationId={id}/>
+                        </div>
+                    </div>
+
+                    <div className="appPageSection">
+                        <h2>{__('Documenti aggiuntivi', 'gepafin')}</h2>
+                        <RepeaterFields
+                            defaultValue={data.evaluationDocument ?? []}
+                            updateFn={(data) => updateEvaluationValue(
+                                data,
+                                ['evaluationDocument']
+                            )}
+                            shouldDisable={['APPROVED', 'REJECTED'].includes(data.applicationStatus) || evaluationShouldBeBlocked(data)}
+                            sourceId={data.assignedApplicationId}
+                            sourceName="evaluation"/>
+                    </div>
+
+                    <div className="appPageSection">
+                        <h2>{__('Checklist Valutazione', 'gepafin')}</h2>
+                        <div className="appPageSection columns">
+                            <div>
+                                <h3>{__('Lista', 'gepafin')}</h3>
+                                <div className="appPageSection__withBorder grey" style={{ marginBottom: '20px' }}>
+                                    <div className="appPageSection__checklist">
+                                        {data.checklist.map((o, i) => <div key={o.id}>
+                                            <Checkbox
+                                                disabled={shouldDisableField('checklist') || evaluationShouldBeBlocked(data)}
+                                                inputId={`checklist_${o.id}`}
+                                                onChange={(e) => updateEvaluationValue(
+                                                    e.checked,
+                                                    ['checklist', i, 'valid']
+                                                )}
+                                                checked={o.valid}></Checkbox>
+                                            <label htmlFor={`checklist_${o.id}`}>{o.label}</label>
+                                        </div>)}
+                                    </div>
+                                </div>
+
+                                <h3>{__('Note', 'gepafin')}</h3>
+                                <div>
+                                    <Editor
+                                        value={data.note}
+                                        readOnly={shouldDisableField('note') || evaluationShouldBeBlocked(data)}
+                                        placeholder={__('Digita qui il messagio', 'gepafin')}
+                                        headerTemplate={header}
+                                        onTextChange={(e) => updateEvaluationValue(
+                                            e.htmlValue,
+                                            ['note']
+                                        )}
+                                        style={{ height: 80 * 3, width: '100%' }}
+                                    />
+                                </div>
+                            </div>
+                            <div>
+                                <h3>{__('Documenti allegati', 'gepafin')}</h3>
+                                <ListOfFiles
+                                    files={data.files}
+                                    updateFn={updateEvaluationValue}
+                                    shouldDisableFieldFn={(name) => shouldDisableField(name) || evaluationShouldBeBlocked(data)}
+                                    name="files"
+                                    ndg={data.ndg}
+                                    applicationId={id}/>
+                            </div>
+                        </div>
+                    </div>
+
+                    {!isEmpty(data.amendmentDetails)
+                        ? <div className="appPageSection">
+                            <h2>{__('Documenti di soccorso', 'gepafin')}</h2>
+                            <ListOfFiles
+                                files={data.amendmentDetails}
+                                updateFn={updateEvaluationValue}
+                                shouldDisableFieldFn={(name) => shouldDisableField(name) || evaluationShouldBeBlocked(data)}
+                                name="amendmentDetails"
+                                ndg={data.ndg}
+                                applicationId={id}/>
+                        </div> : null}
+
+                    <div className="appPageSection">
+                        <h2>{__('Punteggi di valutazione', 'gepafin')}</h2>
+                        {data.criteria
+                            ? <table className="myTable">
+                                <thead className="myThead">
+                                <tr>
+                                    <th>{__('Parametro', 'gepafin')}</th>
+                                    <th style={{ width: 200 }}>{__('Punteggio', 'gepafin')}</th>
+                                    <th style={{ width: 220 }}>{__('Stato', 'gepafin')}</th>
+                                </tr>
+                                </thead>
+                                <tbody className="myTbody">
+                                {data.criteria.map((o, i) => <tr key={o.id}>
+                                    <td>{o.label}</td>
+                                    <td>
+                                        <div className="p-inputgroup">
+                                            <InputNumber
+                                                disabled={shouldDisableField('criteria') || evaluationShouldBeBlocked(data)}
+                                                placeholder={__('Punteggio', 'gepafin')}
+                                                keyfilter="int"
+                                                value={o.score}
+                                                max={o.maxScore}
+                                                onChange={(e) => updateEvaluationValue(
+                                                    e.value,
+                                                    ['criteria', i, 'score'],
+                                                    o.criteria
+                                                )}/>
+                                            <span className="p-inputgroup-addon">
+                                                / {o.maxScore}
+                                            </span>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <div className="appPageSection__iconActions">
+                                            {!isEmpty(o.criteriaMappedFields)
+                                                ? <Button icon="pi pi-eye"
+                                                          rounded outlined severity="info"
+                                                          onClick={() => displayCriterionData(o.id)}
+                                                          aria-label={__('Mostra', 'gepafin')}/> : null}
+                                            <Button icon="pi pi-thumbs-up" rounded outlined
+                                                    disabled={shouldDisableField('criteria') || evaluationShouldBeBlocked(data)}
+                                                    severity={!isNil(o.valid) && o.valid ? 'success' : 'secondary'}
+                                                    onClick={() => updateEvaluationValue(
+                                                        true,
+                                                        ['criteria', i, 'valid']
+                                                    )}
+                                                    aria-label={__('Su', 'gepafin')}/>
+                                            <Button icon="pi pi-thumbs-down" rounded outlined
+                                                    disabled={shouldDisableField('criteria') || evaluationShouldBeBlocked(data)}
+                                                    severity={!isNil(o.valid) && !o.valid ? 'danger' : 'secondary'}
+                                                    onClick={() => updateEvaluationValue(
+                                                        false,
+                                                        ['criteria', i, 'valid']
+                                                    )}
+                                                    aria-label={__('Giu', 'gepafin')}/>
+                                        </div>
+                                    </td>
+                                </tr>)}
+                                <tr>
+                                    <td>{__('Punteggio:', 'gepafin')}</td>
+                                    <td>{sum(data.criteria.map(o => o.score))}</td>
+                                    <td>
+                                        {isAdmissible
+                                            ? <Tag icon="pi pi-check" severity="success"
+                                                   value={__('Ammissibile')}></Tag> : null}
+                                        {!isAdmissible
+                                            ? <Tag icon="pi pi-times" severity="warning"
+                                                   value={__('Inammissibile')}></Tag> : null}
+                                    </td>
+                                </tr>
+                                </tbody>
+                                <tfoot className="myTfoot">
+                                <tr>
+                                    <td colSpan="3">{sprintf(__('Punteggio minimo per l\'ammissione: %d'), data.minScore)}</td>
+                                </tr>
+                                </tfoot>
+                            </table> : null}
+                    </div>
+
+                    <div className="appPage__spacer"></div>
+
+                    <div className="appPageSection__hr">
+                        <span>{__('Azioni rapide', 'gepafin')}</span>
+                    </div>
+
+                    <div className="appPageSection">
+                        <div className="appPageSection__actions">
+                            {['EVALUATION', 'SOCCORSO', 'CLOSE'].includes(data.applicationStatus)
+                                ? <Button
+                                    type="button"
+                                    disabled={!data.id || data.status === 'CLOSE' || (data.applicationStatus === 'EVALUATION'
+                                        && (!allFilesRated || !atLeastOneChecked)) || evaluationShouldBeBlocked(data)}
+                                    onClick={doNewSoccorso}
+                                    outlined
+                                    label={<>
+                                        {data.applicationStatus === 'EVALUATION'
+                                            ? __('Richiedi Soccorso Istruttorio', 'gepafin')
+                                            : __('Apri Soccorso Istruttorio', 'gepafin')}
+                                        <i style={{ marginLeft: 7 }}>
+                                            <HelpIcon/>
+                                        </i>
+                                    </>}
+                                /> : null}
+                            {data.id
+                                ? <Button
+                                    type="button"
+                                    disabled={data.status === 'CLOSE' || evaluationShouldBeBlocked(data)}
+                                    onClick={() => doSaveDraft()}
+                                    outlined
+                                    label={__('Salva bozza valutazione', 'gepafin')}
+                                    icon="pi pi-save" iconPos="right"/>
+                                : <Button
+                                    type="button"
+                                    onClick={() => doSaveDraft()}
+                                    label={__('Crea valutazione', 'gepafin')}
+                                    icon="pi pi-save" iconPos="right"/>}
+                            {/*{APP_EVALUATION_FLOW_ID === '1' && ['EVALUATION'].includes(data.applicationStatus)
+                                ? <Button
+                                    type="button"
+                                    disabled={!data.id || !allFilesRated || !allChecksChecked || evaluationShouldBeBlocked(data)}
+                                    onClick={doCheckNDG}
+                                    label={__('Controlla NDG', 'gepafin')}
+                                /> : null}*/}
+                            <Button
+                                type="button"
+                                disabled={true}
+                                onClick={() => {}}
+                                label={__('Controlla NDG', 'gepafin')}
+                            />
+                            {/*{APP_EVALUATION_FLOW_ID === '1' && ['NDG'].includes(data.applicationStatus) && data.ndg
+                                ? <Button
+                                    type="button"
+                                    disabled={!data.id || evaluationShouldBeBlocked(data)}
+                                    onClick={doCreateAppointment}
+                                    label={__('Crea l\'appuntamento', 'gepafin')}
+                                /> : null}*/}
+                            <Button
+                                type="button"
+                                disabled={true}
+                                onClick={() => {}}
+                                label={__('Crea l\'appuntamento', 'gepafin')}
+                            />
+                            {/*{APP_EVALUATION_FLOW_ID === '1' && ['APPOINTMENT'].includes(data.applicationStatus)
+                                ? <Button
+                                    type="button"
+                                    disabled={!data.id || evaluationShouldBeBlocked(data)}
+                                    onClick={doMakeAdmisible}
+                                    label={__('Ammissibile', 'gepafin')}
+                                /> : null}*/}
+                            <Button
+                                type="button"
+                                disabled={true}
+                                onClick={() => {}}
+                                label={__('Ammissibile', 'gepafin')}
+                            />
+                            {data.id
+                                ? <Button
+                                    type="button"
+                                    disabled={!isAdmissible || ['APPROVED'].includes(data.applicationStatus) || evaluationShouldBeBlocked(data)}
+                                    /*disabled={!isAdmissible
+                                        || (APP_EVALUATION_FLOW_ID === '1' && !['ADMISSIBLE', 'APPOINTMENT'].includes(data.applicationStatus))}*/
+                                    onClick={initiateApproving}
+                                    label={__('Approva Domanda', 'gepafin')}
+                                    icon="pi pi-check" iconPos="right"/> : null}
+                            {/*{data.id
+                                ? <Button
+                                    type="button"
+                                    disabled={APP_EVALUATION_FLOW_ID === '1' && !['ADMISSIBLE', 'APPOINTMENT'].includes(data.applicationStatus)}
+                                    onClick={initiateRejecting}
+                                    label={__('Respingi Domanda', 'gepafin')}
+                                    icon="pi pi-times" iconPos="right"/> : null}*/}
+                            {data.id
+                                ? <Button
+                                    type="button"
+                                    disabled={APP_EVALUATION_FLOW_ID === '1'
+                                        && !['EVALUATION', 'ADMISSIBLE', 'APPOINTMENT'].includes(data.applicationStatus)
+                                        || evaluationShouldBeBlocked(data)}
+                                    onClick={initiateRejecting}
+                                    label={__('Respingi Domanda', 'gepafin')}
+                                    icon="pi pi-times" iconPos="right"/> : null}
+                        </div>
+                    </div>
+
+                    <Dialog
+                        header={criterionDataTitle}
+                        visible={isVisibleCriterionData !== 0}
+                        style={{ width: '50vw' }}
+                        onHide={hideCriterionData}>
+                        {criterionDataContent}
+                    </Dialog>
+
+                    <Dialog
+                        visible={isVisibleCompleteDialog}
+                        modal
+                        header={headerCompleteDialog}
+                        footer={footerCompleteDialog}
+                        style={{ maxWidth: '600px', width: '100%' }}
+                        onHide={hideCompleteDialog}>
+                        <div className="appForm__field">
+                            <label>{__('Motivazione', 'gepafin')}</label>
+                            <Editor
+                                value={motivation}
+                                readOnly={loading}
+                                placeholder={__('Digita qui il messagio', 'gepafin')}
+                                headerTemplate={header}
+                                onTextChange={(e) => setMotivation(e.htmlValue)}
+                                style={{ height: 80 * 3, width: '100%' }}
+                            />
+                        </div>
+                    </Dialog>
+
+                    <Dialog
+                        visible={isVisibleAppointmentDialog}
+                        modal
+                        header={headerAppointmentDialog}
+                        footer={footerAppointmentDialog}
+                        style={{ maxWidth: '600px', width: '100%' }}
+                        onHide={hideAppointmentDialog}>
+                        <div className="appForm__field">
+                            <label
+                                className={classNames({ 'p-error': isEmpty(appointmentData.amount) || appointmentData.amount === 0 })}>
+                                {__('Importo', 'gepafin')}
+                            </label>
+                            <InputNumber
+                                value={appointmentData.amount}
+                                keyfilter="int"
+                                invalid={isEmpty(appointmentData.amount) || appointmentData.amount === 0}
+                                onChange={(e) => setValue('amount', e.value)}/>
+                        </div>
+                        <div className="appForm__field">
+                            <label
+                                className={classNames({ 'p-error': isEmpty(appointmentData.duration) || appointmentData.duration === 0 })}>
+                                {__('Durata', 'gepafin')}
+                            </label>
+                            <InputNumber
+                                value={appointmentData.duration}
+                                keyfilter="int"
+                                invalid={isEmpty(appointmentData.duration) || appointmentData.duration === 0}
+                                onChange={(e) => setValue('duration', e.value)}/>
+                        </div>
+                        <div className="appForm__field">
+                            <label className={classNames({ 'p-error': isEmpty(appointmentData.title) })}>
+                                {__('Titolo', 'gepafin')}
+                            </label>
+                            <InputText
+                                value={appointmentData.title}
+                                invalid={isEmpty(appointmentData.title)}
+                                onChange={(e) => setValue('title', e.target.value)}/>
+                        </div>
+                        <div className="appForm__field">
+                            <label className={classNames({ 'p-error': isEmpty(appointmentData.text) })}>
+                                {__('Messaggio', 'gepafin')}
+                            </label>
+                            <InputTextarea
+                                value={appointmentData.text}
+                                invalid={isEmpty(appointmentData.text)}
+                                onChange={(e) => setValue('text', e.target.value)}
+                                rows={3}
+                                cols={30}/>
+                        </div>
+                    </Dialog>
+
+                </div>
+                : <>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="4rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
+                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
+                    <Skeleton width="100%" height="4rem"></Skeleton>
+                </>}
+        </div>
+    )
+
+}
+
+export default DomandaEditPreInstructor;

src/pages/DomandaEditPreInstructor/components/RepeaterFields/index.js

@@ -138,7 +138,7 @@ const RepeaterFields = ({
                 className="fieldsRepeater__addNew"
                 outlined
                 type="button"
-                disabled={watchFields && watchFields.filter(o => isEmpty(o.nameValue) || isEmpty(o.fileValue)).length > 0 || shouldDisable}
+                disabled={(watchFields && watchFields.filter(o => isEmpty(o.nameValue) || isEmpty(o.fileValue)).length > 0) || shouldDisable}
                 onClick={addNew}
                 label={__('Aggiungi nuovo file', 'gepafin')}
             />

src/pages/DomandaEditPreInstructor/index.js

@@ -568,11 +568,11 @@ const DomandaEditPreInstructor = () => {
                             <span>{data.callName}</span>
                         </p>
                         <p className="appPageSection__pMeta">
-                            <span>{__('Beneficiario', 'gepafin')}</span>
+                            <span>{__('Referente Aziendale', 'gepafin')}</span>
                             <span>{data.beneficiary}</span>
                         </p>
                         <p className="appPageSection__pMeta">
-                            <span>{__('Azienda', 'gepafin')}</span>
+                            <span>{__('Azienda Beneficiaria', 'gepafin')}</span>
                             <span>{data.companyName}</span>
                         </p>
                         <p className="appPageSection__pMeta">

src/pages/Domande/components/AllDomandeTable/index.js

@@ -139,7 +139,7 @@ const AllDomandeTable = ({ openDialogFn, updaterString = '' }) => {
                     ? <Link to={'/domande'}>
                         <Button severity="info" label={__('Gestire', 'gepafin')} size="small"/>
                     </Link> : null}
-            <Link to={`/domande/${rowData.id}`}>
+            <Link to={`/domande/${rowData.id}/preview`}>
                 <Button severity="info" label={__('Anteprima', 'gepafin')} icon="pi pi-eye" size="small"
                         iconPos="right"/>
             </Link>
@@ -165,7 +165,7 @@ const AllDomandeTable = ({ openDialogFn, updaterString = '' }) => {
                         filter sortable
                         filterPlaceholder={__('Cerca', 'gepafin')}
                         style={{ minWidth: '10rem' }}/>
-                <Column field="companyName" header={__('Azienda', 'gepafin')}
+                <Column field="companyName" header={__('Azienda Beneficiaria', 'gepafin')}
                         filter sortable
                         filterPlaceholder={__('Cerca il nome', 'gepafin')}
                         style={{ minWidth: '8rem' }}/>
@@ -173,10 +173,10 @@ const AllDomandeTable = ({ openDialogFn, updaterString = '' }) => {
                         filterField="submissionDate" dataType="date"
                         style={{ minWidth: '8rem' }}
                         body={dateAppliedBodyTemplate} filter filterElement={dateFilterTemplate}/>
-                {/*<Column header={__('Scadenza', 'gepafin')}
+                <Column field="assignedUserName" header={__('Assegnato', 'gepafin')}
-                        filterField="callEndDate" dataType="date"
+                        filter sortable
-                        style={{ minWidth: '8rem' }}
+                        filterPlaceholder={__('Cerca il nome', 'gepafin')}
-                        body={dateEndBodyTemplate} filter filterElement={dateFilterTemplate}/>*/}
+                        style={{ minWidth: '8rem' }}/>
                 <Column field="status" header={__('Stato', 'gepafin')}
                         style={{ minWidth: '8rem' }} body={statusBodyTemplate}
                         filter

src/pages/DomandeBeneficiario/components/BeneficiarioDomandeTable/index.js

@@ -165,7 +165,7 @@ const BeneficiarioDomandeTable = () => {
                         filter sortable
                         filterPlaceholder={__('Cerca il nome', 'gepafin')}
                         style={{ minWidth: '8rem' }}/>
-                <Column field="companyName" header={__('Azienda', 'gepafin')}
+                <Column field="companyName" header={__('Azienda Beneficiaria', 'gepafin')}
                         filter sortable
                         filterPlaceholder={__('Cerca il nome', 'gepafin')}
                         style={{ minWidth: '8rem' }}/>

src/pages/SoccorsoAddPreInstructor/index.js

@@ -185,7 +185,7 @@ const SoccorsoAddPreInstructor = () => {
                             <span>{data.callName}</span>
                         </p>
                         <p className="appPageSection__pMeta">
-                            <span>{__('Beneficiario', 'gepafin')}</span>
+                            <span>{__('Referente Aziendale', 'gepafin')}</span>
                             <span>{data.beneficiaryName}</span>
                         </p>
                     </div>

src/pages/SoccorsoEditBeneficiario/index.js

@@ -17,7 +17,6 @@ import ApplicationService from '../../service/application-service';
 import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
 import getBandoLabel from '../../helpers/getBandoLabel';
 import getDateFromISOstring from '../../helpers/getDateFromISOstring';
-import renderHtmlContent from '../../helpers/renderHtmlContent';
 
 // components
 import { Button } from 'primereact/button';
@@ -27,6 +26,7 @@ import { Dialog } from 'primereact/dialog';
 import FormField from '../../components/FormField';
 import SoccorsoComunications from '../SoccorsoEditPreInstructor/components/SoccorsoComunications';
 import { Editor } from 'primereact/editor';
+import getEmailTemplateForSoccorso from '../../helpers/getStrippedHtmlBodyTags';
 
 const SoccorsoEditBeneficiario = () => {
     const isAsyncRequest = useStore().main.isAsyncRequest();
@@ -275,11 +275,11 @@ const SoccorsoEditBeneficiario = () => {
                             <span>{data.callName}</span>
                         </p>
                         <p className="appPageSection__pMeta">
-                            <span>{__('Beneficiario', 'gepafin')}</span>
+                            <span>{__('Referente Aziendale', 'gepafin')}</span>
                             <span>{data.beneficiaryName}</span>
                         </p>
                         <p className="appPageSection__pMeta">
-                            <span>{__('Azienda', 'gepafin')}</span>
+                            <span>{__('Azienda Beneficiaria', 'gepafin')}</span>
                             <span></span>
                         </p>
                         <p className="appPageSection__pMeta">
@@ -306,7 +306,7 @@ const SoccorsoEditBeneficiario = () => {
                             <span>{dataAppl.callTitle}</span>
                         </p>
                         <p className="appPageSection__pMeta">
-                            <span>{__('Azienda', 'gepafin')}</span>
+                            <span>{__('Azienda Beneficiaria', 'gepafin')}</span>
                             <span>{dataAppl.companyName}</span>
                         </p>
                         <p className="appPageSection__pMeta">
@@ -327,10 +327,7 @@ const SoccorsoEditBeneficiario = () => {
                     ? <div className="appPageSection">
                         <h2>{__('Dettagli Richiesta', 'gepafin')}</h2>
                         <h3>{__('Note e spiegazioni', 'gepafin')}</h3>
-                        <div className="appPageSection__withBorder grey ql-editor"
+                        <div>{getEmailTemplateForSoccorso(data.emailTemplate, data.note)}</div>
-                             style={{ minHeight: '100px' }}>
-                            {renderHtmlContent(data.note)}
-                        </div>
                     </div> : null}
 
                 {data.id

src/pages/SoccorsoEditPreInstructor/index.js

@@ -16,7 +16,7 @@ import AmendmentsService from '../../service/amendments-service';
 import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
 import getBandoLabel from '../../helpers/getBandoLabel';
 import getDateFromISOstring from '../../helpers/getDateFromISOstring';
-import renderHtmlContent from '../../helpers/renderHtmlContent';
+import getEmailTemplateForSoccorso from '../../helpers/getStrippedHtmlBodyTags';
 
 // components
 import { Button } from 'primereact/button';
@@ -392,7 +392,7 @@ const SoccorsoEditPreInstructor = () => {
                         <span>{data.callName}</span>
                     </p>
                     <p className="appPageSection__pMeta">
-                        <span>{__('Beneficiario', 'gepafin')}</span>
+                        <span>{__('Referente Aziendale', 'gepafin')}</span>
                         <span>{data.beneficiaryName}</span>
                     </p>
                     <p className="appPageSection__pMeta">
@@ -411,26 +411,19 @@ const SoccorsoEditPreInstructor = () => {
 
                 <div className="appPageSection">
                     <h2>{__('Dettagli Richiesta', 'gepafin')}</h2>
-                    <div className="appPageSection columns">
+                    <h3>{__('Note e spiegazioni', 'gepafin')}</h3>
-                        <div>
+                    <div
-                            <h3>{__('Documenti Richiesti', 'gepafin')}</h3>
+                        className="appPageSection__emailTemplate">{getEmailTemplateForSoccorso(data.emailTemplate, data.note)}</div>
-                            <ol className="appPageSection__list">
+                </div>
-                                {data.formFields
+                <div className="appPageSection">
-                                    ? data.formFields.map((o, i) => <li key={o.fieldId}
+                    <h3>{__('Documenti Richiesti', 'gepafin')}</h3>
-                                                                        style={{ flexDirection: 'row' }}>
+                    <ol className="appPageSection__list">
-                                        <span>{o.label}</span>
+                        {data.formFields
-                                    </li>) : null}
+                            ? data.formFields.map((o, i) => <li key={o.fieldId}
-                            </ol>
+                                                                style={{ flexDirection: 'row' }}>
-                        </div>
+                                <span>{o.label}</span>
-                        <div>
+                            </li>) : null}
-                            <h3>{__('Note e spiegazioni', 'gepafin')}</h3>
+                    </ol>
-                            <div className="appPageSection__withBorder grey ql-editor"
-                                 style={{ minHeight: '200px' }}>
-                                {renderHtmlContent(data.note)}
-                            </div>
-                        </div>
-
-                    </div>
                 </div>
 
                 <div className="appPageSection">

src/pages/SoccorsoIstruttorioPreInstructor/components/PreInstructorSoccorsiTable/index.js

@@ -78,7 +78,7 @@ const PreInstructorSoccorsiTable = ({ openDialogFn }) => {
                 operator: FilterOperator.AND,
                 constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
             },
-            beneficiaryName: {
+            companyName: {
                 operator: FilterOperator.AND,
                 constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
             },
@@ -149,7 +149,7 @@ const PreInstructorSoccorsiTable = ({ openDialogFn }) => {
                 <Column field="callName" header={__('Bando', 'gepafin')}
                         filter filterPlaceholder={__('Cerca', 'gepafin')}
                         style={{ minWidth: '8rem' }}/>
-                <Column field="beneficiaryName" header={__('Beneficiario', 'gepafin')}
+                <Column field="companyName" header={__('Azienda Beneficiaria', 'gepafin')}
                         filter filterPlaceholder={__('Cerca', 'gepafin')}
                         style={{ minWidth: '8rem' }}/>
                 <Column header={__('Data Richiesta', 'gepafin')}

src/routes.js

@@ -38,6 +38,7 @@ import SoccorsoEditBeneficiario from './pages/SoccorsoEditBeneficiario';
 import BandoApplicationPreview from './pages/BandoApplicationPreview';
 import BandiPreferredBeneficiario from './pages/BandiPreferredBeneficiario';
 import DomandeInstructorManager from './pages/DomandeInstructorManager';
+import DomandaEditInstructorManager from './pages/DomandaEditInstructorManager';
 
 const routes = ({ role, chosenCompanyId }) => {
 
@@ -114,6 +115,12 @@ const routes = ({ role, chosenCompanyId }) => {
                     {'ROLE_SUPER_ADMIN' === role ? <BandoApplicationPreview/> : null}
                     {'ROLE_BENEFICIARY' === role ? <SoccorsoEditBeneficiario/> : null}
                     {'ROLE_PRE_INSTRUCTOR' === role ? <DomandaEditPreInstructor/> : null}
+                    {'ROLE_INSTRUCTOR_MANAGER' === role ? <DomandaEditInstructorManager/> : null}
+                </DefaultLayout>}/>
+                <Route path="/domande/:id/preview" element={<DefaultLayout>
+                    {'ROLE_SUPER_ADMIN' === role ? <BandoApplicationPreview/> : null}
+                    {'ROLE_BENEFICIARY' === role ? <PageNotFound/> : null}
+                    {'ROLE_PRE_INSTRUCTOR' === role ? <BandoApplicationPreview/> : null}
                     {'ROLE_INSTRUCTOR_MANAGER' === role ? <BandoApplicationPreview/> : null}
                 </DefaultLayout>}/>
                 <Route path="/domande/:id/aggiungi-soccorso" element={<DefaultLayout>

src/service/notification-service.js

@@ -0,0 +1,22 @@
+import { NetworkService } from './network-service';
+
+const API_BASE_URL = process.env.REACT_APP_API_EXECUTION_ADDRESS;
+
+export default class NotificationService {
+
+    static getNotifications = (id, callback, errCallback, queryParams) => {
+        NetworkService.get(`${API_BASE_URL}/notification/user/${id}`, callback, errCallback, queryParams);
+    };
+
+    static notificationMakeRead = (id, callback, errCallback) => {
+        NetworkService.put(`${API_BASE_URL}/notification/${id}`, {}, callback, errCallback, [
+            ['status', 'READ']
+        ]);
+    };
+
+    static notificationMakeUnread = (id, callback, errCallback) => {
+        NetworkService.put(`${API_BASE_URL}/notification/${id}`, {}, callback, errCallback, [
+            ['status', 'UNREAD']
+        ]);
+    };
+}