1 files changed, 106 insertions, 0 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx b/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx
new file mode 100644
index 0000000000..de105d23a7
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/userNotifications/NotificationsView.jsx
@@ -0,0 +1,106 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import enhanceWithClickOutside from 'react-click-outside';
+import classnames from 'classnames';
+import {connect} from 'react-redux';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
+import Overlay from 'nfvo-components/overlay/Overlay.jsx';
+import UserNotifications from 'sdc-app/onboarding/userNotifications/UserNotifications.jsx';
+import UserNotificationsActionHelper from 'sdc-app/onboarding/userNotifications/UserNotificationsActionHelper.js';
+import {actionTypes} from './UserNotificationsConstants.js';
+import OnboardingActionHelper from 'sdc-app/onboarding/OnboardingActionHelper.js';
+
+const mapStateToProps = ({currentScreen, notifications, users: {usersList}}) => {
+	return {currentScreen, notifications, usersList};
+};
+
+const mapActionToProps = (dispatch) => {
+	return {
+		resetNewNotifications: notificationId => UserNotificationsActionHelper.updateLastSeenNotification(dispatch, {notificationId}),
+		toggleOverlay: ({showNotificationsOverlay}) => dispatch({type: actionTypes.TOGGLE_OVERLAY, showNotificationsOverlay}),
+		onLoadPrevNotifications: (lastScanned, endOfPage) => UserNotificationsActionHelper.loadPreviousNotifications(dispatch, {lastScanned, endOfPage}),
+		onSync: ({itemId, itemName, versionId, versionName, currentScreen}) =>  UserNotificationsActionHelper.syncItem(dispatch, {itemId, itemName, versionId, versionName, currentScreen}),
+		updateNotification: notificationForUpdate => UserNotificationsActionHelper.updateNotification(dispatch, {notificationForUpdate}),
+		onLoadItemsLists: () => OnboardingActionHelper.loadItemsLists(dispatch)
+	};
+};
+
+
+class NotificationsView extends React.Component {
+
+	static propTypes = {
+		currentScreen: PropTypes.object,
+		notifications: PropTypes.object,
+		resetNewNotifications: PropTypes.func,
+		toggleOverlay: PropTypes.func,
+		onLoadPrevNotifications: PropTypes.func,
+		onSync: PropTypes.func,
+		updateNotification: PropTypes.func,
+		onLoadItemsLists: PropTypes.func
+	};
+
+	render() {
+		const {usersList, notifications, onLoadPrevNotifications, onSync, updateNotification, onLoadItemsLists, currentScreen} = this.props;
+		const {notificationsList, numOfNotSeenNotifications, showNotificationsOverlay, lastScanned, endOfPage} = notifications;
+
+		return (
+			<div className='onboarding-notifications'>
+				<div className='notifications-icon' onClick={() => this.onNotificationIconClick()}>
+					<SVGIcon name={numOfNotSeenNotifications > 0 ? 'notificationFullBell' : 'notificationBell'} color={numOfNotSeenNotifications > 0 ? 'primary' : ''}/>
+					<div className={classnames('notifications-count', {'hidden-count': numOfNotSeenNotifications === 0})}>
+							{numOfNotSeenNotifications}
+					</div>
+				</div>
+				{showNotificationsOverlay &&
+					<Overlay>
+						<UserNotifications notificationsList={notificationsList} usersList={usersList} lastScanned={lastScanned} endOfPage={endOfPage}
+							onLoadPrevNotifications={onLoadPrevNotifications} onSync={onSync} updateNotification={updateNotification} onLoadItemsLists={onLoadItemsLists}
+							currentScreen={currentScreen}/>
+					</Overlay>
+				}
+			</div>
+		);
+	}
+
+	handleClickOutside() {
+		const {notifications: {showNotificationsOverlay}} = this.props;
+		if(showNotificationsOverlay) {
+			this.onCloseOverlay();
+		}
+	}
+
+	onNotificationIconClick() {
+		const {notifications: {showNotificationsOverlay}, toggleOverlay} = this.props;
+		if (showNotificationsOverlay) {
+			this.onCloseOverlay();
+		} else {
+			toggleOverlay({showNotificationsOverlay: true});
+		}
+	}
+
+	onCloseOverlay() {
+		const {notifications: {numOfNotSeenNotifications, lastScanned}, resetNewNotifications, toggleOverlay} = this.props;
+		if (numOfNotSeenNotifications) {
+			resetNewNotifications(lastScanned);
+		}
+		toggleOverlay({showNotificationsOverlay: false});
+	}
+}
+
+export default connect(mapStateToProps, mapActionToProps)(enhanceWithClickOutside(NotificationsView));