Merge pull request #34 from AtilaU19/task-2431

feat: capture feedback rating on page leave or unload

Author: prlanzarin

backend/server.js

@@ -41,6 +41,7 @@ redisClient.on('error', (err) => logger.error('Redis Client Error', err));
 
 await redisClient.connect();
 
+app.use(bodyParser.text({ type: 'application/json' }));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));
 
@@ -197,6 +198,7 @@ app.post('/feedback/webhook', async (req, res) => {
           const userData = {
             name: user.name,
             id: user['internal-user-id'],
+            external_id: user['external-user-id'],
             role: user.role,
           };
 
@@ -233,7 +235,23 @@ app.post('/feedback/webhook', async (req, res) => {
 });
 
 app.post('/feedback/submit', async (req, res) => {
-  const { session, user, feedback, device, rating } = req.body;
+  let body = req.body;
+  if (typeof req.body === 'string') {
+    try {
+      body = JSON.parse(req.body);
+    } catch (e) {
+      logger.error('Error parsing feedback body:', e);
+      return res.status(400).send();
+    }
+  }
+
+  const { session, user, feedback, device, rating } = body;
+
+  if (!session || !user) {
+    logger.warn('Received feedback submission with missing session or user.', body);
+    return res.status(400).json({ status: 'error', message: 'Missing session or user information' });
+  }
+
   try {
     const feedbackKey = `${KEY_PREFIX}:${session.sessionId}:${user.userId}`;
     const existingFeedback = await redisClient.get(feedbackKey);
@@ -243,7 +261,7 @@ app.post('/feedback/submit', async (req, res) => {
     // User redirect URL takes precedence over session redirect URL
     const redirectUrl = userData.redirect_url || sessionData.redirect_url;
 
-    const isFeedbackEmpty = Object.keys(feedback).length === 0 && !rating;
+    const isFeedbackEmpty = (!feedback || Object.keys(feedback).length === 0) && (rating === undefined || rating === null);
     const essentialData = {
       session: { redirect_url: redirectUrl },
     }
@@ -259,7 +277,7 @@ app.post('/feedback/submit', async (req, res) => {
       return res.status(400).json({ status: 'error', message: 'Feedback already submitted' });
     }
 
-    logger.info(`Submitting feedback for userID: ${userData.id} meetingID: ${sessionData.session_id}`);
+    logger.info(`Submitting feedback for userID: ${userData.id || user.userId} meetingID: ${sessionData.session_id || session.sessionId}`);
 
     const completeFeedback = {
       rating,
@@ -274,6 +292,7 @@ app.post('/feedback/submit', async (req, res) => {
       user: {
         name: userData.name,
         id: userData.id,
+        external_id: userData.external_id,
         role: userData.role,
         email: user.email
       },
@@ -283,7 +302,7 @@ app.post('/feedback/submit', async (req, res) => {
     const cleanFeedback = JSON.parse(JSON.stringify(completeFeedback, (key, value) => value === undefined ? undefined : value));
     const logLevel = logger.level;
 
-    if (cleanFeedback.rating) {
+    if (cleanFeedback.rating !== undefined && cleanFeedback.rating !== null) {
       console.log(`${new Date().toISOString()} custom-feedback [${logLevel}] : CUSTOM FEEDBACK LOG: ${JSON.stringify(cleanFeedback)}`);
     } else {
       return logger.info(`Not logging feedback without rating`);

frontend/src/components/FeedbackFlow/FeedbackFlow.jsx

@@ -78,25 +78,24 @@ const FeedbackFlow = ({ intl }) => {
     }
   }, []);
 
-  const handleNext = (nextStep, data) => {
-    const updatedFeedback = () => {
-      let updatedFeedback = { ...feedback.current };
-  
-      if (data.hasOwnProperty('rating')) {
-        updatedFeedback = { ...updatedFeedback, rating: data.rating };
-      } else if (data.hasOwnProperty('email')) {
-        updatedFeedback.user.email = data.email;
-      } else {
-        updatedFeedback.feedback = { ...updatedFeedback.feedback, ...data };
-      }
-  
-      sessionStorage.setItem('feedbackData', JSON.stringify(updatedFeedback));
+  const updateFeedback = (data) => {
+    let updatedFeedbackData = { ...feedback.current };
+
+    if (data.hasOwnProperty('rating')) {
+      updatedFeedbackData = { ...updatedFeedbackData, rating: data.rating };
+    } else if (data.hasOwnProperty('email')) {
+      updatedFeedbackData.user.email = data.email;
+    } else {
+      updatedFeedbackData.feedback = { ...updatedFeedbackData.feedback, ...data };
+    }
 
-      return updatedFeedback;
-    };
+    feedback.current = updatedFeedbackData;
+    sessionStorage.setItem('feedbackData', JSON.stringify(updatedFeedbackData));
+  };
+
+  const handleNext = (nextStep, data) => {
+    updateFeedback(data);
 
-    feedback.current = updatedFeedback();
-  
     if (!nextStep) {
       submitFeedback(feedback.current);
     }
@@ -111,7 +110,7 @@ const FeedbackFlow = ({ intl }) => {
 
     switch (currentStep) {
       case 'rating':
-        return <RatingStep onNext={handleNext} />;
+        return <RatingStep onNext={handleNext} onUpdate={updateFeedback} />;
       case 'problem':
       case 'audioProblem':
       case 'cameraProblem':

frontend/src/components/RatingStep/RatingStep.jsx

@@ -19,16 +19,18 @@ const messages = defineMessages({
   }
 });
 
-const RatingStep = ({ onNext, intl }) => {
+const RatingStep = ({ onNext, onUpdate, intl }) => {
   const [rating, setRating] = useState(null);
   const [hover, setHover] = useState(null);
 
   const handleRatingChange = (value) => {
     setRating(value);
+    onUpdate({ rating: value });
   };
 
   const handleLeave = () => {
-    onNext(null, { });
+    const data = rating ? { rating } : {};
+    onNext(null, data);
   };
 
   const nextStep = () => {

frontend/src/components/service.js

@@ -65,7 +65,9 @@ export const getRedirectTimeout = () => {
 export const handleBeforeUnload = async () => {
   const savedFeedback = sessionStorage.getItem('feedbackData');
   if (savedFeedback) {
-    await submitFeedback(JSON.parse(savedFeedback));
+    const feedback = JSON.parse(savedFeedback);
+    const blob = new Blob([JSON.stringify(feedback)], { type: 'application/json; charset=UTF-8' });
+    navigator.sendBeacon('/feedback/submit', blob);
     sessionStorage.removeItem('feedbackData');
   }
 };