Skip to content

Commit 40610f0

Browse files
Luch76Luch76
committed
2024-11-04 - external-recips page
1 parent 819b9b4 commit 40610f0

File tree

1 file changed

+106
-73
lines changed

1 file changed

+106
-73
lines changed

‎web-ui/src/components/feedback_request_confirmation/FeedbackRequestConfirmation.jsx‎

Lines changed: 106 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React, {useContext, useEffect, useRef, useState} from 'react';
1+
import React, { useContext, useEffect, useState } from 'react';
22
import { styled } from '@mui/material/styles';
33
import Typography from '@mui/material/Typography';
44
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
55
import {
6-
selectProfile,
7-
selectHasCreateFeedbackPermission,
8-
noPermission,
6+
selectProfile,
7+
selectHasCreateFeedbackPermission,
8+
noPermission, selectFeedbackExternalRecipient,
99
} from '../../context/selectors';
1010
import { AppContext } from '../../context/AppContext';
1111
import { Link, useLocation } from 'react-router-dom';
@@ -14,95 +14,128 @@ import DateFnsUtils from '@date-io/date-fns';
1414
import './FeedbackRequestConfirmation.css';
1515
import { green } from '@mui/material/colors';
1616
import Button from '@mui/material/Button';
17+
import {getFeedbackTemplate} from "../../api/feedbacktemplate.js";
18+
import {UPDATE_TOAST} from "../../context/actions.js"; // Import the action type
1719

1820
const dateUtils = new DateFnsUtils();
1921
const PREFIX = 'FeedbackRequestConfirmation';
2022
const classes = {
21-
announcement: `${PREFIX}-announcement`,
22-
checkmark: `${PREFIX}-checkmark`
23+
announcement: `${PREFIX}-announcement`,
24+
checkmark: `${PREFIX}-checkmark`
2325
};
2426

2527
const Root = styled('div')({
26-
[`& .${classes.announcement}`]: {
27-
textAlign: 'center',
28-
['@media (max-width:820px)']: {
29-
// eslint-disable-line no-useless-computed-key
30-
fontSize: 'x-large'
31-
}
32-
},
33-
[`& .${classes.checkmark}`]: {
34-
['@media (max-width:820px)']: {
35-
// eslint-disable-line no-useless-computed-key
36-
width: '65%'
28+
[`& .${classes.announcement}`]: {
29+
textAlign: 'center',
30+
['@media (max-width:820px)']: {
31+
// eslint-disable-line no-useless-computed-key
32+
fontSize: 'x-large'
33+
}
34+
},
35+
[`& .${classes.checkmark}`]: {
36+
['@media (max-width:820px)']: {
37+
// eslint-disable-line no-useless-computed-key
38+
width: '65%'
39+
}
3740
}
38-
}
3941
});
4042

4143
let today = new Date();
4244

4345
const FeedbackRequestConfirmation = () => {
44-
const { state } = useContext(AppContext);
45-
const location = useLocation();
46-
const query = queryString.parse(location?.search);
47-
const forQuery = query.for?.toString();
48-
const fromQuery = query.from?.toString();
49-
const sendQuery = query.send?.toString();
50-
const templateQuery = query.template?.toString();
51-
const requestee = selectProfile(state, forQuery);
52-
let recipientInfo = getRecipientNames();
53-
let sendDate = dateUtils.parse(sendQuery, 'MM/dd/yyyy', new Date());
46+
const { state, dispatch } = useContext(AppContext);
47+
const location = useLocation();
48+
const query = queryString.parse(location?.search);
49+
const forQuery = query.for?.toString();
50+
const fromQuery = query.from?.toString();
51+
const sendQuery = query.send?.toString();
52+
const templateQuery = query.template?.toString();
53+
const requestee = selectProfile(state, forQuery);
54+
const [templateIsForExternalRecipient, setTemplateIsForExternalRecipient] = useState(false);
5455

55-
function getRecipientNames() {
56+
useEffect(() => {
57+
async function fetchTemplateDetails() {
58+
if (!templateQuery) return;
5659

57-
console.log("FeedbackRequestConfirmation, getRecipientNames(), query: ", query);
60+
let res = await getFeedbackTemplate(templateQuery);
61+
let templateResponse =
62+
res.payload &&
63+
res.payload.data &&
64+
res.payload.status === 200 &&
65+
!res.error
66+
? res.payload.data
67+
: null;
5868

69+
if (templateResponse === null) {
70+
dispatch({
71+
type: UPDATE_TOAST,
72+
payload: {
73+
severity: 'error',
74+
toast: 'The ID for the template you selected does not exist.'
75+
}
76+
});
77+
} else {
78+
setTemplateIsForExternalRecipient(templateResponse.isForExternalRecipient);
79+
}
80+
}
81+
82+
fetchTemplateDetails();
83+
}, [templateQuery, dispatch]);
5984

60-
if (fromQuery !== undefined) {
61-
let fromArray = fromQuery.split(',');
62-
let recipientProfiles = [];
63-
if (fromArray.length !== 0) {
64-
for (let i = 0; i < fromArray.length; ++i) {
65-
let element = fromArray[i];
66-
recipientProfiles.push(element);
85+
function getRecipientNames() {
86+
if (fromQuery !== undefined) {
87+
let fromArray = fromQuery.split(',');
88+
let recipientProfiles = [];
89+
if (fromArray.length !== 0) {
90+
for (let i = 0; i < fromArray.length; ++i) {
91+
let element = fromArray[i];
92+
recipientProfiles.push(element);
93+
}
94+
} else {
95+
recipientProfiles.push(fromQuery);
96+
}
97+
return recipientProfiles;
6798
}
68-
} else {
69-
recipientProfiles.push(fromQuery);
70-
}
71-
return recipientProfiles;
7299
}
73-
}
74100

75-
return selectHasCreateFeedbackPermission(state) ? (
76-
<Root className="request-confirmation">
77-
<CheckCircleIcon style={{ color: green[500], fontSize: '40vh' }}>
78-
checkmark-image
79-
</CheckCircleIcon>
80-
<Typography className={classes.announcement} variant="h3">
81-
<b>
82-
Feedback request{' '}
83-
{dateUtils.isBefore(today, sendDate)
84-
? ' scheduled on: ' + sendQuery
85-
: ' sent'}{' '}
86-
for {requestee?.name}{' '}
87-
</b>
88-
</Typography>
89-
<Typography className="recipients-list" variant="h6">
90-
<b>Sent to: </b>
91-
{recipientInfo?.map(
92-
(member, index) =>
93-
`
94-
${selectProfile(state, member)?.name} - id: ${member} - templateQuery: ${templateQuery}
95-
${index === recipientInfo.length - 1 ? '' : ', '}
96-
`
97-
)}
98-
</Typography>
99-
<Link style={{ marginTop: '4em', textDecoration: 'none' }} to="/">
100-
<Button variant="outlined">Return home</Button>
101-
</Link>
102-
</Root>
103-
) : (
104-
<h3>{noPermission}</h3>
105-
);
101+
let recipientInfo = getRecipientNames();
102+
let sendDate = dateUtils.parse(sendQuery, 'MM/dd/yyyy', new Date());
103+
104+
return selectHasCreateFeedbackPermission(state) ? (
105+
<Root className="request-confirmation">
106+
<CheckCircleIcon style={{ color: green[500], fontSize: '40vh' }}>
107+
checkmark-image
108+
</CheckCircleIcon>
109+
<Typography className={classes.announcement} variant="h3">
110+
<b>
111+
Feedback request{' '}
112+
{dateUtils.isBefore(today, sendDate)
113+
? ' scheduled on: ' + sendQuery
114+
: ' sent'}{' '}
115+
for {requestee?.name}{' '}
116+
</b>
117+
</Typography>
118+
<Typography className="recipients-list" variant="h6">
119+
<b>Sent to: </b>
120+
{recipientInfo?.map(
121+
(recipient, index) =>
122+
`
123+
${
124+
templateIsForExternalRecipient
125+
? selectFeedbackExternalRecipient(state, recipient)?.firstName + " " + selectFeedbackExternalRecipient(state, recipient)?.lastName + " (" + selectFeedbackExternalRecipient(state, recipient)?.companyName + ") "
126+
: selectProfile(state, recipient)?.name
127+
}
128+
${index === recipientInfo.length - 1 ? '' : ', '}
129+
`
130+
)}
131+
</Typography>
132+
<Link style={{ marginTop: '4em', textDecoration: 'none' }} to="/">
133+
<Button variant="outlined">Return home</Button>
134+
</Link>
135+
</Root>
136+
) : (
137+
<h3>{noPermission}</h3>
138+
);
106139
};
107140

108141
export default FeedbackRequestConfirmation;

0 commit comments

Comments
 (0)