Ognomy Phase 3 Interoffice Messaging Integration

CHALLENGE OBJECTIVES

• Integrate the interoffice messaging UI with backend.

 

PROJECT BACKGROUND

• We are building a mobile app that allows patients to schedule and participate in teleconsultations on their mobile device, and a web app that allows doctors / admins / secretaries to view teleconsult schedules and participate in teleconsults from a desktop device.

• In this phase we are planning to add a lot more features to the web app and update the mobile app with some new features.

 

TECHNOLOGY STACK

• ReactJS

• Redux

• HTML5

• Javascript

• REST

• JSON

 

CODE BASE

 

You are supposed to work with the provided code base and integrate the features with the backend. This new messaging feature needs to work for all the web app roles and you must NOT break any existing functions. This is considered a major requirement in the scorecard during review.

 

CODE QUALITY

You must take code quality into consideration, for example: you should create / use components for reusable UI / features instead of copying and pasting the same code everywhere. This is considered a major requirement in the scorecard during review.

 

API INTEGRATION

Please fully integrate the new UI with the backend, if minor tweaks are needed to the backend to work with UI that’s in the scope of this challenge as well.

 

SCREEN REQUIREMENTS

Entry

Logged in user can click the message icon on the top right corner of all pages as shown in UI to access the messaging feature. The icon will have a red dot when there are unread messages but there should be no red dot when all messages are read.

 

Clicking the message icon will show the popup menu with more actions.

 

Please note this feature is available to all the web app roles.

 

Messages List

The interoffice messages system is like a simplified version of emails, once you land on the messages screen you’ll see menu items like Inbox, Pending (drafts), Sent, Deleted, Archived, etc. All the following features must be working properly:

• Search messages

• Select messages for deletion / archive

• Click a message to view details

• Click the 3-dot menu icon to Reply / Forward / Archive / Delete the message

• Sort messages

• Filter messages by priority level (1 - 9, 1 being the highest priority)

• The table should support pagination

• Deleting a message will only delete it from the message UI (i.e. soft delete) but the messages will be kept in the backend.

• The newest messages should be shown on top.

• When replying/forwarding a message, the original message should be automatically included in a different style (exactly like how email reply / forward works).

 

Message Details

• The details page will show all the details of the message, including sender, patient,  recipients, attachments, and the body

• From this page, the user can go to the previous or next message

• From this page, the user can reply, forward, archive or delete the message

 

New Message

• The user can compose a new message from the menu

• On this page the user can specify the recipient (required), cc/bcc (optional), patient (optional), priority level (1-9, with 1 being the highest level; required, and defaults to level 9), subject (required) and body (required)

• The body must support rich formatting

• The user must be able to attach documents to the message

• The user can send, discard or save the message as draft

• If the user tries to leave the page without saving the changes in any way, a warning should be shown to let the user confirm

• Auto-completion must be supported for fields like to, cc/bcc, patient

• Alternatively, the user should be able to pick from a list (either individuals or groups)

• When a group is selected, we should show the group in the messages instead of the actual list of users. This also means if a user is removed from a group after a message is sent, that message will disappear from that user’s message list.

• The list should support searching

 

Groups

• The user can manage groups on this page, which includes creating new group, editing existing group, and deleting an existing group

 

UI Issues

The following UI issues must be fixed during integration as well:

• Right now when the user tries to leave an unsaved message the prototype shows a browser alert, we need to replace that with the custom-styled in-app alert
• The rich editor is not grabbing focus if I click on the lower bottom half of the text area, this is not very user friendly
• Please make sure in-line images and hyper-links are working in the rich editor.
• The password expiration warning messages seems to overlap with the icons after the messaging icon is added, please fix that.
• The messaging icon is current missing on some of the pages (Patients, Users, etc...), this needs to be fixed so the icon is available on all the pages that has the notification and search icons.

 

GENERAL REQUIREMENTS

• Must use ReactJS and follow the provided design.

• The main content should have fluid width to fill all the available space, the minimum supported resolution is 1280*720 (height is actually unlimited since the page can scroll).

• Searching/filtering should work whenever applicable.

• Pagination should work whenever applicable.

• Filtering/pagination happens on the server-side so you need to pass the query parameters and the server is expected to return the pagination info (pageSize, total etc).

• Implement popup for confirmation and warning messages. Do NOT use browser alerts, but use custom styles popups as shown in the design

• Show loading spinners when populating data from API / local JSON to UI

• Implement validation errors (for example: login error as shown in design)

• No linting errors

• No errors with prod build

• You are expected to create a detailed README file including information on how to setup, run, and verify your application.

 

CODE REQUIREMENTS

• ES6 syntax is preferred, as Babel has been set up to handle transpiling the syntax to the current JavaScript standard.

• Use .jsx extension for React components; using PascalCase for filenames. E.g., ComponentName/index.jsx.

• Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.

• Ensure that there are no lint errors.

• You’re free to choose between CSS & SCSS but you need to use flex instead of float.

• Follow a clean folder structure.

• Create reusable components.

 

JAVASCRIPT REQUIREMENTS

• All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

• Use ES6 linter for code quality

 

LICENSES & ATTRIBUTION

• Third-party assets used to build your item must be properly licensed and free for commercial use. MIT and Apache v2 licenses are ok, for any others please check with us to get approval first.

• Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.

 

BROWSER REQUIREMENTS

• Windows: IE 11+, Chrome latest, Firefox latest

• Mac: Safari Latest, Chrome Latest, Firefox Latest

Final Submission Guidelines

• Full code that covers all the requirements.

• A detailed README file including information on how to setup and run your application.