Deployment - Sept 2

packages/nulp_elite/public/locales/en/translation.json

@@ -132,7 +132,7 @@
   "NEW_PASSWORD": "New Password",
   "TERMS_CONDITIONS": "Terms and conditions",
   "SELECT_CATEGORY": "Select category",
-  "FAQS": "Faq(s)",
+  "FAQS": "FAQ(s)",
   "NIUA": "NIUA",
   "MOHUA": "MoHUA",
   "ABOUT_US": "About Us",
@@ -187,7 +187,7 @@
   "LEAVE_COURSE_CONFIRMATION_TITLE": "Batch Unenrolment",
   "LEAVE_COURSE_CONFIRMATION_MESSAGE": "Do you want to unenrol from this batch?",
   "ENROLLMENT_SUCCESS_MESSAGE": "Enrolled Successfully",
-  "UNENROLLMENT_SUCCESS_MESSAGE": " Unenroled Successfully",
+  "UNENROLLMENT_SUCCESS_MESSAGE": " Unenrolled Successfully",
   "YOUR_CHAT_REQUEST_IS_PENDING": "Your chat request is pending. Please wait for the creator to accept the chat invitation",
   "CHAT_WITH_CREATOR": "Chat with creator",
   "CONNECT_WITH_CREATOR": "Connect with creator",

packages/nulp_elite/src/components/FeedbackPopup.js

@@ -85,6 +85,7 @@ const FeedbackPopup = ({ open, onClose, contentId }) => {
   };
 
   const handleAdditionalFeedbackChange = (event) => {
+    console.log("handleAdditionalFeedbackChange----",event)
     setAdditionalFeedback(event.target.value);
   };
 
@@ -95,8 +96,11 @@ const FeedbackPopup = ({ open, onClose, contentId }) => {
       Object.keys(checkboxes).forEach((key) => {
         if (checkboxes[key] && checkboxLabels[key] !== "Other") {
           selectedCheckboxes.push(checkboxLabels[key]);
+        }else if(checkboxLabels[key] == "Other" && additionalFeedback != "") {
+          selectedCheckboxes.push(checkboxLabels[key]);
         }
       });
+      console.log("selectedCheckboxes----",selectedCheckboxes)
 
       const url = `${urlConfig.URLS.FEEDBACK.CREATE}`;
       const request = {

packages/nulp_elite/src/components/FloatingChatIcon.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Popover, Typography } from "@mui/material";
+import { Popover, Tooltip, Typography } from "@mui/material";
 import { makeStyles } from "@material-ui/core";
 import { Link } from "react-router-dom";
 import HeadsetMicOutlinedIcon from "@mui/icons-material/HeadsetMicOutlined";
@@ -49,6 +49,7 @@ const FloatingChatIcon = () => {
           title="ChatBot"
         />
       </Popover>
+      <Tooltip title={t("NULP_ASSIST")} placement="left">
       <Link
         onClick={handleOpenPopover}
         color="primary"
@@ -63,8 +64,9 @@ const FloatingChatIcon = () => {
             height: "3  2px", // Adjust the size as needed
           }}
         />
-        {t("NULP_ASSIST")}
+
       </Link>
+      </Tooltip>
     </>
   );
 };

packages/nulp_elite/src/components/Notification.js

@@ -0,0 +1,208 @@
+import React, { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  List,
+  ListItem,
+  ListItemText,
+  Button,
+  Typography,
+  IconButton,
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import CloseIcon from "@mui/icons-material/Close"; 
+import { useNavigate } from "react-router-dom";
+import * as util from "../services/utilService";
+const urlConfig = require("../configs/urlConfig.json");
+
+const NotificationPopup = ({ open, handleClose, updateNotificationCount }) => {
+  const [notifications, setNotifications] = useState([]);
+  const _userId = util.userId();
+  const navigate = useNavigate();
+  const [NotificationCount , setNotificationCount] = useState(0)
+
+  useEffect(() => {
+    const fetchNotifications = async () => {
+      try {
+        const url = `${urlConfig.URLS.LEARNER_PREFIX}${urlConfig.URLS.NOTIFICATION.READ}${_userId}`;
+        const response = await fetch(url);
+        const data = await response.json();
+        if (data?.result?.feeds) {
+          const sortedNotifications = data.result.feeds.sort((a, b) => {
+            if (a.status === "unread" && b.status !== "unread") return -1;
+            if (a.status !== "unread" && b.status === "unread") return 1;
+            return 0;
+          });
+          setNotifications(sortedNotifications);
+          updateNotificationCount(
+            sortedNotifications.filter((notif) => notif.status === "unread").length
+          );
+           setNotificationCount(
+            sortedNotifications.filter((notif) => notif.status === "unread").length
+          );
+        }
+      } catch (error) {
+        console.error("Error fetching notifications:", error);
+      }
+    };
+
+    if (open) {
+      fetchNotifications();
+    }
+  }, [open, _userId, updateNotificationCount]);
+
+  const handleNotificationClick = async (notificationId, status, actionType) => {
+    try {
+      const url = `${urlConfig.URLS.LEARNER_PREFIX}${urlConfig.URLS.NOTIFICATION.UPDATE}`;
+      const requestBody = {
+        request: {
+          ids: [notificationId], 
+          userId: _userId,
+        },
+      };
+
+      const response = await fetch(url, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(requestBody),
+      });
+
+      const result = await response.json();
+
+      if (result?.responseCode === "OK") {
+        if (actionType === "certificateUpdate") {
+          navigate("/webapp/profile");
+        }
+      } else {
+        console.error("Failed to update notification:", result);
+      }
+    } catch (error) {
+      console.error("Error updating notification:", error);
+    }
+  };
+
+  const handleDeleteNotification = async (notificationIds) => {
+    try {
+      const url =`${urlConfig.URLS.LEARNER_PREFIX}${urlConfig.URLS.NOTIFICATION.DELETE}`;
+      const requestBody = {
+        request: {
+          ids: notificationIds,
+          userId: _userId,
+          category: "group-feed",
+        },
+      };
+
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(requestBody),
+      });
+
+      const result = await response.json();
+
+      if (result?.responseCode === "OK") {
+        setNotifications((prevNotifications) =>
+          prevNotifications.filter((notif) => !notificationIds.includes(notif.id))
+        );
+        updateNotificationCount(notifications.length - notificationIds.length);
+      } else {
+        console.error("Failed to delete notifications:", result);
+      }
+    } catch (error) {
+      console.error("Error deleting notifications:", error);
+    }
+  };
+
+  const handleClearAllNotifications = () => {
+    const allNotificationIds = notifications.map((notification) => notification.id);
+    handleDeleteNotification(allNotificationIds);
+  };
+
+  const formatDate = (timestamp) => {
+    const date = new Date(timestamp);
+    return new Intl.DateTimeFormat("en-US", {
+      weekday: "short",
+      day: "numeric",
+      month: "long",
+      hour: "numeric",
+      minute: "numeric",
+    }).format(date);
+  };
+
+  return (
+    <Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm">
+      <DialogTitle>
+        {NotificationCount} {"New Notification (s)"}
+        <IconButton
+          aria-label="close"
+          onClick={handleClose}
+          sx={{ position: 'absolute', right: 8, top: 8, color: 'grey.500' }}
+        >
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent>
+        {notifications.length > 0 ? (
+          <List>
+            {notifications.map((notification) => {
+              const { id, action, status, createdOn } = notification;
+              const { description, title, type } = JSON.parse(action.template.data);
+
+              return (
+                <ListItem
+                  key={id}
+                  divider
+                  button
+                  onClick={() => handleNotificationClick(id, status, action.type)} 
+                >
+                  <ListItemText
+                    primary={
+                      <>
+                        <Typography variant="caption" color="textSecondary" sx={{ display: "block" }}>
+                          {formatDate(createdOn)}
+                        </Typography>
+                        {title}
+                      </>
+                    }
+                    secondary={description}
+                    primaryTypographyProps={{
+                      style: status === "unread" ? { fontWeight: "bold" } : {},
+                    }}
+                    secondaryTypographyProps={{
+                      style: status === "unread" ? { fontWeight: "bold" } : {},
+                    }}
+                  />
+                  <IconButton
+                    edge="end"
+                    color="secondary"
+                    onClick={(e) => {
+                      e.stopPropagation(); 
+                      handleDeleteNotification([id]); 
+                    }}
+                  >
+                    <DeleteIcon />
+                  </IconButton>
+                </ListItem>
+              );
+            })}
+          </List>
+        ) : (
+          <Typography>No Notifications Found</Typography>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClearAllNotifications} color="secondary">
+          Clear All
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default NotificationPopup;

packages/nulp_elite/src/components/header.js

@@ -10,6 +10,7 @@ import Tooltip from "@mui/material/Tooltip";
 import AccountCircleOutlinedIcon from "@mui/icons-material/AccountCircleOutlined";
 import TextField from "@mui/material/TextField";
 import IconButton from "@mui/material/IconButton";
+import { Badge } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import Link from "@mui/material/Link";
 import DevicesIcon from "@mui/icons-material/Devices";
@@ -40,6 +41,7 @@ import Grid from "@mui/material/Grid";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { ExpandLess, ExpandMore } from "@mui/icons-material";
 import { Collapse, List } from "@mui/material";
+import NotificationPopup from "./Notification";
 
 function Header({ globalSearchQuery }) {
   const { t } = useTranslation();
@@ -68,6 +70,10 @@ function Header({ globalSearchQuery }) {
   const [openSubmenu, setOpenSubmenu] = useState(false);
   const [open, setOpen] = useState(false);
   const [show, setShow] = React.useState(false);
+  const [openNotification, setOpenNotification] = useState(false);
+  const [notificationCount, setNotificationCount] = useState(0);
+
+
   const handleTooltipClose = () => {
     setOpen(false);
   };
@@ -124,6 +130,45 @@ function Header({ globalSearchQuery }) {
     });
   };
 
+   const handleClickOpenNotification = () => {
+    setOpenNotification(true);
+  };
+
+    const fetchNotifications = async () => {
+    try {
+      const url = `${urlConfig.URLS.LEARNER_PREFIX}${urlConfig.URLS.NOTIFICATION.READ}${_userId}`;
+      const response = await fetch(url);
+      const data = await response.json();
+
+      if (data?.result?.feeds) {
+        const unreadCount = data.result.feeds.filter(
+          (notif) => notif.status === "unread"
+        ).length;
+        setNotificationCount(unreadCount);
+      }
+    } catch (error) {
+      console.error("Error fetching notifications:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchNotifications();
+
+    const intervalId = setInterval(() => {
+      fetchNotifications();
+    }, 20000);
+
+    return () => clearInterval(intervalId);
+  }, [_userId]);
+
+  const handleCloseNotification = () => {
+    setOpenNotification(false);
+  };
+
+    const updateNotificationCount = (count) => {
+    setNotificationCount(count);
+  };
+
   const handleInputChange = (event) => {
     setSearchQuery(event.target.value);
   };
@@ -467,7 +512,8 @@ function Header({ globalSearchQuery }) {
             <Tooltip title={t("Notification")} placement="bottom" arrow>
               <Box className="notification-circle xs-hide">
                 <Tooltip>
-                  <IconButton sx={{ p: 0 }}>
+                  <IconButton sx={{ p: 0 }} onClick={handleClickOpenNotification}>
+                    <Badge badgeContent={notificationCount} color="error"></Badge>
                     <NotificationsNoneOutlinedIcon />
                   </IconButton>
                 </Tooltip>
@@ -505,6 +551,7 @@ function Header({ globalSearchQuery }) {
                 </Menu> */}
               </Box>
             </Tooltip>
+             <NotificationPopup open={openNotification} handleClose={handleCloseNotification}  updateNotificationCount={updateNotificationCount} />
             <Tooltip title={t("Notification")} placement="bottom" arrow>
               <Box className="notification-circle xs-hide">
                 {/* <NotificationsNoneOutlinedIcon />

packages/nulp_elite/src/configs/urlConfig.json

@@ -424,7 +424,7 @@
       "REGISTER": "/custom_event/registration",
       "REPORT": "/custom_event/reports",
       "CUSTOM_ENROLL_LIST": "/custom_event/enrollment-list",
-      "UNREGISTER": "custom_event/unregister",
+      "UNREGISTER": "/custom_event/unregister",
       "UPDATE_REGISTER": "/custom_event/registration/update",
       "CUSTOM_COMPOSITE_SEARCH": "/custom_event/composite/search",
       "READ_BY_ID": "/custom_event/read/event"
@@ -442,6 +442,11 @@
     "FEEDBACK": {
       "CREATE" : "/custom_feedback/create",
       "LIST" : "/custom_feedback/list"
+    },
+    "NOTIFICATION" : {
+      "READ": "notification/v1/feed/read/",
+      "UPDATE" : "notification/v1/feed/update",
+      "DELETE" : "notification/v1/feed/delete"
     }
   }
 }