2024-11-20 - Feedback confirmation page

Author: Luch76

web-ui-external-feedback/src/components/feedback_submit_confirmation/FeedbackSubmitConfirmation.css

@@ -0,0 +1,11 @@
+.submit-confirmation {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  padding-top: 40px;
+  overflow-x: hidden;
+}

web-ui-external-feedback/src/components/feedback_submit_confirmation/FeedbackSubmitConfirmation.jsx

@@ -0,0 +1,99 @@
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import {
+  selectCsrfToken,
+  selectCurrentUser,
+  selectProfile,
+  selectHasCreateFeedbackPermission,
+  noPermission,
+} from '../../context/selectors';
+import { AppContext } from '../../context/AppContext';
+import { useLocation } from 'react-router-dom';
+import queryString from 'query-string';
+import './FeedbackSubmitConfirmation.css';
+import { green } from '@mui/material/colors';
+import {getFeedbackRequestById, getRequesteeForFeedbackRequest} from '../../api/feedback';
+
+const PREFIX = 'FeedbackSubmitConfirmation';
+const classes = {
+  announcement: `${PREFIX}-announcement`
+};
+
+const Root = styled('div')({
+  [`& .${classes.announcement}`]: {
+    textAlign: 'center',
+    ['@media (max-width:820px)']: {
+      // eslint-disable-line no-useless-computed-key
+      fontSize: 'x-large'
+    }
+  }
+});
+
+const FeedbackSubmitConfirmation = props => {
+  const { state } = useContext(AppContext);
+  const location = useLocation();
+  const query = queryString.parse(location?.search);
+  const csrf = selectCsrfToken(state);
+  const currentUserId = selectCurrentUser(state)?.id;
+  const requestQuery = query.request?.toString();
+  const [feedbackRequest, setFeedbackRequest] = useState(null);
+  const feedbackRequestFetched = useRef(false);
+
+  const [requestee, setRequestee] = useState(null);
+
+  useEffect(() => {
+    async function getFeedbackRequest(cookie) {
+      if (!currentUserId || !cookie || feedbackRequestFetched.current) {
+        return null;
+      }
+
+      // make call to the API
+      let res = await getFeedbackRequestById(requestQuery, cookie);
+      return res.payload &&
+        res.payload.data &&
+        res.payload.status === 200 &&
+        !res.error
+        ? res.payload.data
+        : null;
+    }
+
+    if (csrf && currentUserId && requestQuery && !feedbackRequestFetched.current) {
+      getFeedbackRequest(csrf).then(request => {
+        if (request) {
+          setFeedbackRequest(request);
+        }
+      });
+    }
+  }, [csrf, currentUserId, requestQuery]);
+
+  useEffect(() => {
+    console.log("FeedbackSubmitConfirmation, useEffect[feedbackRequest, state], feedbackRequest: ", feedbackRequest);
+
+    if (feedbackRequest) {
+      feedbackRequestFetched.current = true;
+    }
+
+    if (feedbackRequestFetched.current) {
+      getRequesteeForFeedbackRequest(feedbackRequest?.requesteeId, csrf).then(response => {
+        if (response.payload && response.payload.data && !response.error) {
+          setRequestee(response.payload.data);
+        }
+      });
+    }
+  }, [feedbackRequest, state]);
+
+  return (
+    <Root className="submit-confirmation">
+      <CheckCircleIcon style={{ color: green[500], fontSize: '40vh' }}>
+        checkmark-image
+      </CheckCircleIcon>
+      <Typography className={classes.announcement} variant="h3">
+        Thank you for your feedback on <b>{requestee?.name}</b>
+      </Typography>
+    </Root>
+  );
+};
+
+export default FeedbackSubmitConfirmation;

web-ui-external-feedback/src/components/feedback_submit_confirmation/FeedbackSubmitConfirmation.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { AppContextProvider } from '../../context/AppContext';
+import FeedbackSubmitConfirmation from './FeedbackSubmitConfirmation';
+
+const userStateWithPermission = {
+  state: {
+    userProfile: {
+      name: 'john watson',
+      role: ['MEMBER'],
+      permissions: [{ permission: 'CAN_CREATE_FEEDBACK_REQUEST' }],
+    }
+  }
+};
+
+it('renders the confirmation message', () => {
+  snapshot(
+    <BrowserRouter>
+      <AppContextProvider value={userStateWithPermission}>
+        <FeedbackSubmitConfirmation />
+      </AppContextProvider>
+    </BrowserRouter>
+  );
+});
+
+it('renders an error if user does not have appropriate permission', () => {
+  snapshot(
+    <BrowserRouter>
+      <AppContextProvider>
+        <FeedbackSubmitConfirmation />
+      </AppContextProvider>
+    </BrowserRouter>
+  );
+});

web-ui-external-feedback/src/components/feedback_submit_confirmation/__snapshots__/FeedbackSubmitConfirmation.test.jsx.snap

@@ -0,0 +1,36 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders an error if user does not have appropriate permission 1`] = `
+<div>
+  <h3>
+    You do not have permission to view this page.
+  </h3>
+</div>
+`;
+
+exports[`renders the confirmation message 1`] = `
+<div>
+  <div
+    class="submit-confirmation css-7zlo4e"
+  >
+    <svg
+      aria-hidden="true"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+      data-testid="CheckCircleIcon"
+      focusable="false"
+      style="color: rgb(76, 175, 80); font-size: 40vh;"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"
+      />
+    </svg>
+    <h3
+      class="MuiTypography-root MuiTypography-h3 FeedbackSubmitConfirmation-announcement css-gepadz-MuiTypography-root"
+    >
+      Thank you for your feedback on 
+      <b />
+    </h3>
+  </div>
+</div>
+`;

web-ui-external-feedback/src/components/feedback_submit_form/FeedbackSubmitForm.jsx

@@ -143,7 +143,7 @@ const FeedbackSubmitForm = ({
         updateRequestSubmit().then(res => {
           setIsSubmitting(false);
           if (res && res.payload && res.payload.data && !res.error) {
-            history.push(`/feedback/submit/confirmation/?request=${requestId}`);
+            history.push(`/externalFeedback/submit/confirmation/?request=${requestId}`);
           } else {
             dispatch({
               type: UPDATE_TOAST,

web-ui-external-feedback/src/components/routes/Routes.jsx

@@ -2,15 +2,19 @@ import React, { useContext } from 'react';
 import { Switch, Route } from 'react-router-dom';
 import { AppContext } from '../../context/AppContext';
 import FeedbackSubmitPage from "../../pages/FeedbackSubmitPage.jsx";
+import FeedbackSubmitConfirmation from "../feedback_submit_confirmation/FeedbackSubmitConfirmation.jsx";
 
 export default function Routes() {
   const { state } = useContext(AppContext);
 
   return (
     <Switch>
-      <Route path="/externalFeedback/">
+      <Route path="/externalFeedback/submit">
         <FeedbackSubmitPage />
       </Route>
+        <Route exact path="/externalFeedback/submit/confirmation">
+            <FeedbackSubmitConfirmation />
+        </Route>
     </Switch>
   );
 }