From 8ed18f3d699f48ceb38576d5dd49370439627c57 Mon Sep 17 00:00:00 2001
From: SundasNoreen <sundas.noreen@arbisoft.com>
Date: Thu, 25 May 2023 11:58:38 +0500
Subject: [PATCH] refactor: UI refactor based on figma

---
 src/Notifications/NotificationRowItem.jsx  |  18 +-
 src/Notifications/NotificationSections.jsx |   6 +-
 src/Notifications/NotificationTabs.jsx     |  18 +-
 src/Notifications/Notifications.jsx        |  25 +-
 src/Notifications/data/api.js              | 306 +++++++++------------
 src/Notifications/data/selectors.js        |   1 +
 src/__snapshots__/Header.test.jsx.snap     |   2 +-
 src/index.scss                             |  77 ++----
 8 files changed, 205 insertions(+), 248 deletions(-)

diff --git a/src/Notifications/NotificationRowItem.jsx b/src/Notifications/NotificationRowItem.jsx
index c21793a..6541bd8 100644
--- a/src/Notifications/NotificationRowItem.jsx
+++ b/src/Notifications/NotificationRowItem.jsx
@@ -55,15 +55,15 @@ const NotificationRowItem = ({ notification }) => {
 
   const iconComponent = getIconByType(notification.type);
   return (
-    <div className="d-flex notification-section-padding mb-2">
-      <div className="mr-2 pt-2.5 pr-2.5 pb-2.5">
+    <div className="d-flex mb-2">
+      <div className="mr-2 py-4 pr-2.5">
         <Icon
           src={iconComponent && iconComponent.icon}
-          style={{ height: '28px', width: '28px' }}
+          style={{ height: '23.33px', width: '23.33px' }}
           className={iconComponent && iconComponent.class}
         />
       </div>
-      <div className="row d-flex w-100 ml-0">
+      <div className="row d-flex w-100 py-0 px-0 py-2.5">
         <div style={{ display: 'contents' }} className="col-md-12 w-100">
           <span className="col-md-11 px-0 text-primary-500 mb-2 w-100 notification-item-content overflow-hidden">
             {notification?.respondingUser} {' '}
@@ -82,13 +82,13 @@ const NotificationRowItem = ({ notification }) => {
               {' '}{notification?.notificationContent}
             </a>
           </span>
-          <div className="col-md-1 d-flex flex-column justify-content-end mb-2 unread">
-            {notification.status === 'unread' && <div className="bg-brand-500 rounded" />}
+          <div className="col-md-1 d-flex flex-column justify-content-end mb-2">
+            {notification.status === 'unread' && <div className="bg-brand-500 rounded unread" />}
           </div>
-          <div className="w-100 px-0">
-            <span className="text-gray-500 mb-2 w-100 course-container">
+          <div className="w-100 px-0 py-0 d-flex flex-row align-items-center">
+            <span className="text-gray-500 mb-2 w-100 font-size-12">
               <span className="">{notification?.courseName}</span>
-              <span className="mr-1.5 font-size-8 font-style text-light-700" style={{ padding: '0px 6px' }}>
+              <span className="font-size-12 text-light-700 px-1.5">
                 {intl.formatMessage(messages.fullStop)}
               </span>
               <span>
diff --git a/src/Notifications/NotificationSections.jsx b/src/Notifications/NotificationSections.jsx
index d71329c..0a2103b 100644
--- a/src/Notifications/NotificationSections.jsx
+++ b/src/Notifications/NotificationSections.jsx
@@ -14,8 +14,8 @@ const NotificationSections = ({ handleLoadMoreNotification, loadMoreCount }) =>
 
   return (
     notifications && (
-    <div className="pt-4">
-      <div className="d-flex pb-2 notification-section-padding">
+    <div className="pt-4 py-2.5">
+      <div className="d-flex flex-row align-items-center pb-2">
         <span className="w-100 px-0 text-gray-500">
           {TODAY && TODAY.length > 0 && intl.formatMessage(messages.notificationTodayHeading)}
         </span>
@@ -29,7 +29,7 @@ const NotificationSections = ({ handleLoadMoreNotification, loadMoreCount }) =>
         {TODAY && TODAY.map(
           (notification) => <NotificationRowItem notification={notification} />,
         )}
-        <div className="d-flex pb-2 notification-section-padding">
+        <div className="d-flex pb-2 notification-section">
           <span className="w-100 px-0 text-gray-500">
             {EARLIER && EARLIER.length > 0
             && intl.formatMessage(messages.notificationEarlierHeading)}
diff --git a/src/Notifications/NotificationTabs.jsx b/src/Notifications/NotificationTabs.jsx
index 0828fab..8fd9cea 100644
--- a/src/Notifications/NotificationTabs.jsx
+++ b/src/Notifications/NotificationTabs.jsx
@@ -4,12 +4,13 @@ import React, {
 import { Tabs, Tab } from '@edx/paragon';
 import { useSelector, useDispatch } from 'react-redux';
 import NotificationSections from './NotificationSections';
-import { getNotificationTotalUnseenCounts } from './data/selectors';
+import { getNotificationTotalUnseenCounts, getSelectedNotificationType } from './data/selectors';
 import { fetchNotificationList } from './data/thunks';
 import { notificationTabsOptions } from './data/constants';
 
 const NotificationTabs = () => {
   const notificationUnseenCounts = useSelector(getNotificationTotalUnseenCounts());
+  const selectedNotificationType = useSelector(getSelectedNotificationType());
   const [activeTab, setActiveTab] = useState(notificationTabsOptions[0].key);
   const [loadMoreCount, setLoadMoreCount] = useState(10);
 
@@ -32,17 +33,24 @@ const NotificationTabs = () => {
       eventKey={option.key}
       title={option.title}
       notification={notificationUnseenCounts[option.title]}
-      tabClassName="notification-tab d-flex flex-row align-items-center"
+      tabClassName="d-flex flex-row align-items-center pt-0 pb-2.5 line-height-24 px-0 mr-4"
     >
-      <NotificationSections handleLoadMoreNotification={handleLoadMoreNotification} loadMoreCount={loadMoreCount} />
+      {option.key === selectedNotificationType
+      && <NotificationSections handleLoadMoreNotification={handleLoadMoreNotification} loadMoreCount={loadMoreCount} />}
     </Tab>
-  )), [notificationUnseenCounts, handleLoadMoreNotification, loadMoreCount]);
+  )), [notificationUnseenCounts, handleLoadMoreNotification, loadMoreCount, selectedNotificationType]);
+
+  // This code is used to replace More... text to More to match the UI
+  const buttons = document.getElementsByClassName('dropdown-toggle');
+  for (let i = 0; i < buttons.length; i++) {
+    buttons[i].firstChild.nodeValue = 'More';
+  }
 
   return (
     activeTab && (
     <Tabs
       defaultActiveKey={activeTab}
-      className="notification-tabs ml-2.5"
+      className="notification-tabs"
       onSelect={handleActiveTab}
     >
       {tabArray}
diff --git a/src/Notifications/Notifications.jsx b/src/Notifications/Notifications.jsx
index 60d0f96..a9f4ddc 100644
--- a/src/Notifications/Notifications.jsx
+++ b/src/Notifications/Notifications.jsx
@@ -49,7 +49,7 @@ const Notifications = () => {
   }, []);
 
   return (
-    <div className="d-flex mx-4 my-3 bell-container">
+    <div className="mx-4 my-3 bell-container">
       <OverlayTrigger
         trigger="click"
         key="bottom"
@@ -58,18 +58,19 @@ const Notifications = () => {
         overlay={(
           <Popover
             id="popover-positioned-bottom"
-            className="notification-tray-container vh-100 pt-4.5 pb-4 overflow-auto"
+            className="notification-tray-container pt-4.5 pb-4 px-4 overflow-auto d-flex flex-column
+            align-items-start position-absolute mt-2"
           >
             <div ref={popoverRef}>
-              <Popover.Title as="h3" style={{ padding: '0px 26px 16px 24px', border: 'none' }}>
-                <h2 className="text-primary-500 notification-title">
+              <Popover.Title
+                as="h3"
+                style={{ border: 'none' }}
+                className="d-flex flex-row justify-content-between py-0 px-0 mb-4"
+              >
+                <h2 className="text-primary-500 font-size-18 line-height-24">
                   {intl.formatMessage(messages.notificationTitle)}
                 </h2>
-                <div className="setting-icon-container d-flex flex-row justify-content-end align-items-end w-100
-                position-absolute"
-                >
-                  <Icon src={Settings} />
-                </div>
+                <Icon src={Settings} className="icon-size-20" />
               </Popover.Title>
               <Popover.Content className="notification-content p-0">
                 <NotificationTabs />
@@ -80,8 +81,10 @@ const Notifications = () => {
       >
         <>
           {notificationCounts?.Total > 0 && (
-          <Badge variant="danger position-absolute d-flex flex-row justify-content-center align-items-center zindex-1">
-            <Form.Label className="count">{notificationCounts?.Total}</Form.Label>
+          <Badge variant="danger position-absolute px-1.5 py-1.5 d-flex flex-row justify-content-center
+           align-items-center zindex-1"
+          >
+            <Form.Label className="count font-size-9 mt-2">{notificationCounts?.Total}</Form.Label>
           </Badge>
           )}
           <div className="bell-icon-container rounded-circle" ref={buttonRef}>
diff --git a/src/Notifications/data/api.js b/src/Notifications/data/api.js
index 0de5a60..64b812c 100644
--- a/src/Notifications/data/api.js
+++ b/src/Notifications/data/api.js
@@ -2,180 +2,148 @@ import { getConfig } from '@edx/frontend-platform';
 
 export const getApiBaseUrl = () => getConfig().LMS_BASE_URL;
 
+const parseNotificationList = (notificationList) => {
+  const currentTime = Date.now();
+  const twentyFourHoursAgo = currentTime - (24 * 60 * 60 * 1000);
+  const today = [];
+  const earlier = [];
+  notificationList.forEach(obj => {
+    const objectTime = obj.time;
+    if (objectTime >= twentyFourHoursAgo && objectTime <= currentTime) { today.push(obj); } else { earlier.push(obj); }
+  });
+  return { today, earlier };
+};
 export async function getNotifications(notificationType, notificationCount) {
+  const notificationData = [
+    {
+      type: 'post',
+      respondingUser: 'SCM_Lead',
+      notificationContent: 'Hello and welcome to SC0x!',
+      targetUser: '',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1684996319038',
+    },
+    {
+      type: 'post',
+      respondingUser: 'SCM_Lead',
+      notificationContent: 'Hello and welcome to SC0x!',
+      targetUser: '',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1684996319038',
+    },
+    {
+      type: 'post',
+      respondingUser: 'SCM_Lead',
+      notificationContent: 'Hello and welcome to SC0x!',
+      targetUser: '',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1684996319038',
+    },
+    {
+      type: 'help',
+      respondingUser: 'MITx_Learner',
+      notificationContent: 'What grade does a student need to get in order to pass the course and earn a certificate?',
+      targetUser: '',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1684996339844',
+    },
+    {
+      type: 'post',
+      respondingUser: 'SCM_Lead',
+      notificationContent: 'Hello and welcome to SC0x!',
+      targetUser: '',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1684253634808',
+      author: '',
+    },
+    {
+      type: 'help',
+      respondingUser: 'MITx_Learner',
+      notificationContent: 'What grade does a student need to get in order to pass the course and earn a certificate?',
+      targetUser: '',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1684253736371',
+      author: '',
+    },
+    {
+      type: 'respond',
+      respondingUser: 'MITx_Learner',
+      notificationContent: 'Can’t find linear regression in section 3 review',
+      targetUser: '',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1684253736371',
+      author: '',
+    },
+    {
+      type: 'comment',
+      respondingUser: 'MITx_Learner',
+      notificationContent: 'Can’t find linear regression in section 3 review',
+      targetUser: 'MITx_Expert’s ',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1684253736371',
+      author: '',
+    },
+    {
+      type: 'question',
+      respondingUser: 'MITx_Learner',
+      notificationContent: 'Examples of quadratic equations in supply chains',
+      targetUser: '',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1684253736371',
+      author: '',
+    },
+    {
+      type: 'comment',
+      respondingUser: 'MITx_Learner',
+      notificationContent: 'What grade does a student need to get in order to pass the course and earn a certificate?',
+      targetUser: 'MITx_Expert’s ',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1684253736371',
+      author: 'testuser',
+    },
+    {
+      type: 'comment',
+      respondingUser: 'MITx_Learner',
+      notificationContent: 'Convexity of f(x)=1/x , x>1',
+      targetUser: '',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1684253736371',
+      author: 'testuser',
+    },
+  ];
+
+  const { today, earlier } = parseNotificationList(notificationData);
+
   const data = {
     discussions: {
-      TODAY: [
-        {
-          type: 'post',
-          respondingUser: 'SCM_Lead',
-          notificationContent: 'Hello and welcome to SC0x!',
-          targetUser: '',
-          courseName: 'Supply Chain Analytics',
-          URL: '',
-          status: 'unread',
-          time: '15m',
-        },
-        {
-          type: 'help',
-          respondingUser: 'MITx_Learner',
-          notificationContent: 'What grade does a student need to get in order to pass the course and earn a certificate?',
-          targetUser: '',
-          courseName: 'Supply Chain Analytics',
-          URL: '',
-          status: 'unread',
-          time: '15m',
-        },
-      ],
+      TODAY: today,
+      EARLIER: earlier,
     },
     reminders: {
-      TODAY: [
-        {
-          type: 'post',
-          respondingUser: 'SCM_Lead',
-          notificationContent: 'Hello and welcome to SC0x!',
-          targetUser: '',
-          courseName: 'Supply Chain Analytics',
-          URL: '',
-          status: 'unread',
-          time: '1684253634808',
-          author: '',
-        },
-        {
-          type: 'help',
-          respondingUser: 'MITx_Learner',
-          notificationContent: 'What grade does a student need to get in order to pass the course and earn a certificate?',
-          targetUser: '',
-          courseName: 'Supply Chain Analytics',
-          URL: '',
-          status: 'unread',
-          time: '1684253736371',
-          author: '',
-        },
-        {
-          type: 'respond',
-          respondingUser: 'MITx_Learner',
-          notificationContent: 'Can’t find linear regression in section 3 review',
-          targetUser: '',
-          courseName: 'Supply Chain Analytics',
-          URL: '',
-          status: 'unread',
-          time: '1684253736371',
-          author: '',
-        },
-        {
-          type: 'comment',
-          respondingUser: 'MITx_Learner',
-          notificationContent: 'Can’t find linear regression in section 3 review',
-          targetUser: 'MITx_Expert’s ',
-          courseName: 'Supply Chain Analytics',
-          URL: '',
-          status: 'unread',
-          time: '1684253736371',
-          author: '',
-        },
-        {
-          type: 'question',
-          respondingUser: 'MITx_Learner',
-          notificationContent: 'Examples of quadratic equations in supply chains',
-          targetUser: '',
-          courseName: 'Supply Chain Analytics',
-          URL: '',
-          status: 'unread',
-          time: '1684253736371',
-          author: '',
-        },
-        {
-          type: 'comment',
-          respondingUser: 'MITx_Learner',
-          notificationContent: 'What grade does a student need to get in order to pass the course and earn a certificate?',
-          targetUser: 'MITx_Expert’s ',
-          courseName: 'Supply Chain Analytics',
-          URL: '',
-          status: 'unread',
-          time: '1684253736371',
-          author: 'testuser',
-        },
-        {
-          type: 'comment',
-          respondingUser: 'MITx_Learner',
-          notificationContent: 'Convexity of f(x)=1/x , x>1',
-          targetUser: '',
-          courseName: 'Supply Chain Analytics',
-          URL: '',
-          status: 'unread',
-          time: '1684253736371',
-          author: 'testuser',
-        },
-      ],
-      EARLIER: [
-        {
-          type: 'answer',
-          respondingUser: 'SCM_Lead',
-          notificationContent: 'Quiz in section 3 - Please explain the F-Significance value',
-          targetUser: '',
-          courseName: 'Supply Chain Analytics',
-          URL: '',
-          status: 'unread',
-          time: '15m',
-          author: 'testuser',
-        },
-        {
-          type: 'endorsed',
-          respondingUser: '',
-          notificationContent: 'Quiz in section 3 - Please explain the F-Significance value',
-          targetUser: '',
-          courseName: 'Supply Chain Analytics',
-          URL: '',
-          status: 'unread',
-          time: '15m',
-          author: 'testuser',
-        },
-        {
-          type: 'reported',
-          respondingUser: 'MITx Learner’s',
-          notificationContent: '“Here are the exam answers. Question 1 - CSA stands for Compliance Safety Ac...”',
-          targetUser: '',
-          courseName: 'Supply Chain Analytics',
-          URL: '',
-          status: 'unread',
-          time: '15m',
-          author: '',
-        },
-        {
-          type: 'postLiked',
-          respondingUser: 'SCM_Lead',
-          notificationContent: 'Retaking the course',
-          targetUser: '',
-          courseName: 'Supply Chain Analytics',
-          URL: '',
-          status: 'unread',
-          time: '15m',
-          author: '',
-        },
-        {
-          type: 'commentLiked',
-          respondingUser: 'MITx_Expert ',
-          notificationContent: 'Final exam answers',
-          targetUser: '',
-          courseName: 'Supply Chain Analytics',
-          URL: '',
-          status: 'unread',
-          time: '15m',
-          author: '',
-        },
-        {
-          type: 'edited',
-          respondingUser: 'MITx_Expert ',
-          notificationContent: 'Question 1',
-          targetUser: '',
-          courseName: 'Supply Chain Analytics',
-          URL: '',
-          status: 'unread',
-          time: '15m',
-          author: '',
-        },
-      ],
+      TODAY: today,
+      EARLIER: earlier,
     },
   };
   const notifications = data[notificationType];
diff --git a/src/Notifications/data/selectors.js b/src/Notifications/data/selectors.js
index b0bb9d4..d62a52b 100644
--- a/src/Notifications/data/selectors.js
+++ b/src/Notifications/data/selectors.js
@@ -1,3 +1,4 @@
 export const getNotificationStatus = () => state => state.notifications.notificationStatus;
 export const getNotificationTotalUnseenCounts = () => state => state.notifications.totalUnseenCounts;
 export const getNotifications = () => state => state.notifications.notifications;
+export const getSelectedNotificationType = () => state => state.notifications.notificationType;
diff --git a/src/__snapshots__/Header.test.jsx.snap b/src/__snapshots__/Header.test.jsx.snap
index e19fabe..3768354 100644
--- a/src/__snapshots__/Header.test.jsx.snap
+++ b/src/__snapshots__/Header.test.jsx.snap
@@ -238,7 +238,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
         className="nav secondary-menu-container align-items-center ml-auto"
       >
         <div
-          className="d-flex mx-4 my-3 bell-container"
+          className="mx-4 my-3 bell-container"
         >
           <div
             className="bell-icon-container rounded-circle"
diff --git a/src/index.scss b/src/index.scss
index d5a4493..dd64cfc 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -133,55 +133,49 @@ $white: #fff;
   .badge{
     border-radius: 54px;
     border: 2px solid #FFFFFF;
-    padding: 4px 5px;
     width: 23px;
     height: 16px;
-    margin-top: 3px;
     margin-left: 18px;
     .count{
-      font-size: 9px;
-      line-height: 20px;
-      width: 13px;
-      height: 8px;
       font-weight: 600;
-      margin-top: -3px;
     }
   }
 }
 
+.font-size-18{
+  font-size: 18px;
+}
+
+.font-size-12{
+  font-size: 12px;
+}
+
+.font-size-9{
+  font-size: 9px;
+}
+.line-height-24{
+  line-height: 24px;
+}
+.icon-size-20{
+  width: 20px !important;
+  height: 20px !important;
+}
 .notification-tray-container{
-  width: 549px;
-  margin-top: 9px !important;
-  max-width: 549px;
+  min-width: 549px;
+  min-height:'1253px';
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 2px 8px rgba(0, 0, 0, 0.15);
   border-radius: 0px 0px 4px 4px;
-  .notification-title{
-    line-height: 24px;
-    font-size: 18px;
-  }
-  .setting-icon-container{
-    margin-left: -40px;
-    margin-top: -7px;
-    span{
-      height:20px;
-      width: 20px;
-    }
-  }
-  .notification-section-padding{
-    padding: 10px 24px 10px 24px;
+
+  .dropdown-toggle::after {
+    display: none;
   }
   .notification-content{
     .notification-tabs{
-      height: 38px;
       width: 501px;
       button{
         font-size: 14px;
       }
     .dropdown-toggle{
-      ::after{
-        display: none;
-      }
-      height: 36px;
       padding-top: 0px !important;
       padding-left: 12px !important;
       div{
@@ -189,21 +183,14 @@ $white: #fff;
         min-width: 6px;
       }
     }
-    .notification-tab, .dropdown-item{
-      padding: 0px 12px 12px !important;
-      height: 36px;
+     .dropdown-item{
       font-size:14px;
+      color: $primary-500;
       font-weight: 500;
-      line-height: 24px;
-      padding-bottom: 18px;
     }
     .expandable{
         height: 20px;
         width: 20px;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
         padding: 6px 7px;
         position: relative;
         margin-left: 4px;
@@ -214,20 +201,10 @@ $white: #fff;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       text-overflow: ellipsis;
-      line-height: 24px;
-      width: 417px;
     }
     .unread{
-      max-height: 48px;
-      width: 24px;
-      div{
-        height: 10px;
-        width: 10px;
-      }
-    }
-    .course-container{
-      line-height: 20px;
-      font-size: 12px;
+      height: 10px;
+      width: 10px;
     }
   }
 }