Dropdown Notification for Community

[ajefts]

Overview

Enable notifications for community members. These will be similar to what we have for Connect users. The purpose is to keep members updated and aware of activities they are required to complete as well pushing info to them that might be of interest.

References

• Tech Requirements: https://docs.google.com/document/d/11JdLhu8ql1qqZqfrLIM-bJYYsDjcmzfhvOGDbRBymsM/edit

• https://docs.google.com/spreadsheets/d/1AMPSBj_wUdMM-hs9oaVRubSkhAnk3bKTjAxcDn8rx60/edit?ts=5cc888f3#gid=967851284

[ajefts]

Link to feature: https://tcprod.productboard.com/feature-board/planning/features/1323423

[luizrrodrigues]

Notifications Popup is done and already merged with community-app notifications branch.
Challenge: http://www.topcoder.com/challenges/30114259
Fixes (F2F): http://www.topcoder.com/challenges/30115261

Notifications Listings challenge is LIVE (submission deadline: 02.22.2020)
http://www.topcoder.com/challenges/30116087

[SathyaJayabal]

1. Can you provide the access to
   https://docs.google.com/spreadsheets/d/1AMPSBj_wUdMM-hs9oaVRubSkhAnk3bKTjAxcDn8rx60/edit?ts=5cc888f3#gid=967851284

2. What are the states of the notifications in the pop-up?
   There is "un seen" with a pink dot. There is "un read" with the grey dot. There seems to be another state "read", with no dot. What is the use of this state ? In connect( and in general) when a notification is read it is removed from the list. Will the notifications be removed when the related contest is completed or when the user closes the respective completed challenge notification?

3. Should the "Mark All as Read" should be disabled once all the notifications are read? Same with the tick in the mobile view.

4. Mobile view: Will the notification icon and the number of notifications be always in pink or only if there are unread notifications? If not what is the colour for the other two states?

5. The same set of notifications are displayed when we reload the page, even though we have closed/read some of the notifications. Why are user actions not saved? Is it for testing purposes?

cc @luizrrodrigues cc @Oanh-and-only-Oanh

[SathyaJayabal]

UI Issues:

1. The space between the notification icon and the pink dot seems more than the design

Design:

2. The hover state background circle is not centered.

3. The notifications title is not aligned correctly in mobile view

cc @luizrrodrigues

[SathyaJayabal]

@luizrrodrigues , not able to test the empty state as I am not able to remove the notifications.

[luizrrodrigues]

@luizrrodrigues , not able to test the empty state as I am not able to remove the notifications.

Let cover all issues in populated state first, then I'll clear the notifications to we test empty state.

[luizrrodrigues]

2. @SathyaJayabal Please check challenge spec:
   https://www.topcoder.com/challenges/30114259

3. @Oanh-and-only-Oanh Please confirm this one.

4. @Oanh-and-only-Oanh Please confirm this one.

5. @SathyaJayabal Yes, currently we're using mock data, so always when refresh will load previous data.

---

UI issues, I'll fix all.

[SathyaJayabal]

From the challenge spec:
Mark All as Read - will remove all notifications
All the notifications that have a pink dot are new notifications that have not been seen before (not seen means a user didn't open the popup)
All notifications who have a gray dot are notifications that have been see (meaning the user opened the popup before) but have not been read (as in the user didn't click them)

@luizrrodrigues, Marking as read does not remove the notifications at present. It just removes the grey dot.

[SathyaJayabal]

Completed challenges: why do they have a close icon to dismiss the notification ? Why cant they be dismissed the usual way, by marking them as read ? What is the need for two different ways to dismiss the notifications ?
cc @luizrrodrigues @Oanh-and-only-Oanh

[Oanh-and-only-Oanh]

@SathyaJayabal @luizrrodrigues

3. Should the "Mark All as Read" should be disabled once all the notifications are read? Same with the tick in the mobile view. Yes, check mark should be disabled once all the notifications are read (mobile and desktop).

4. Mobile view: Will the notification icon and the number of notifications be always in pink or only if there are unread notifications? If not what is the colour for the other two states?
   
   Icon should be "disabled or greyed out" if all notifications have been read. If there are no new notifications, or all notifications have been read, there shouldn't be a number next to the icon. @Dara-K can you weigh in for design perspective?

[SathyaJayabal]

@luizrrodrigues , one more UI issue. The handle should be bold like in the design.

@Oanh-and-only-Oanh @Dara-K , should the handle be a link?

[Dara-K]

@Oanh-and-only-Oanh @SathyaJayabal Here's the design for that screen when the notifications are seen: https://marvelapp.com/dcc2h8h/screen/66552240

[Dara-K]

I don't think we want the handle to be a link - that would take the members to the user profile, which doesn't bring any value here, but from a UI perspective if we make the handle link, we have to make it blue and underlined to pass accessibility test, which would just distract the user from the notification itself.

@Oanh-and-only-Oanh what are your thoughts on this?

[SathyaJayabal]

@Dara-K , I agree, the handle as a link does not add any value and will distract from the actual notification. Forget that I asked :)

[SathyaJayabal]

@Oanh-and-only-Oanh , @Dara-K , are the notifications themselves clickable like in connect? Do they take the user to the appropriate page (eg: to the challenge details - checkpoints tab when the checkpoint review is ready etc) ?

[luizrrodrigues]

@SathyaJayabal

Mark All as Read - will remove all notifications

This was a spec typo, Mark All as Read will just remove gray/pink marks.

---

@Dara-K Thanks for clarifications, just to confirm:

a) In mobile, the notifications count is only to unseen notifications?
b) If only have unread notifications, need to show count too?
c) If we have both, unread and unseen notifications:

• Show the bell icon in red color;
• Show counter in red color;
• The counter will be unseen or unread count?

[SathyaJayabal]

@luizrrodrigues , so the notifications will be removed when the challenge is completed?

[luizrrodrigues]

@SathyaJayabal when challenge is completed will move to Completed Challenges at bottom:

In this section we have X button, click in this button will remove notification from panel.

[Dara-K]

@SathyaJayabal Yes, it would be great if we could make the notifications clickable as in Connect to take the user to the related page.

@luizrrodrigues
a) Right
b) No
c)

• Show the bell icon in red color;  -> Right
  

• Show counter in red color;  -> Right 
  

• The counter will be unseen or unread count? -> Unseen
  

Also, for the Completed Challenges we would like to limit their number that are displayed in the popup to 5. We can show the rest of them in the Notifications Details page.

[SathyaJayabal]

@luizrrodrigues , all the issues above have been addressed.

New Requirements that need to be implemented:
Remove the completed challenges section from the popup.

Clarification:
@luizrrodrigues , the challenge notification should take the user to the. challenge details page on clicking it. Will this be implemented after api integration ?

[luizrrodrigues]

Clarification: the challenge notification should take the user to the. challenge details page on clicking it. Will this be implemented after API integration?

@SathyaJayabal Yes, we need to check as the backend will pass the challenge link.

[macs054]

Verified in Test Env

[SathyaJayabal]

Bell icon is in active state but the notifications popup and the notifications page do not display any notifications

@luizrrodrigues , this could be because of the older submission uploaded notifications returned by the backend, but not shown by the front end.

[SathyaJayabal]

cc @sachin-maheshwari

[luizrrodrigues]

@SathyaJayabal Yep, we need to remove this from backend return.

I think we can close this one and follow up here: #4108

[SathyaJayabal]

Sure @luizrrodrigues

[SathyaJayabal]

verified on beta(develop)

[SathyaJayabal]

verified on prod