Add close button

.gitignore

@@ -1,6 +1,7 @@
 # Generic
 node_modules/
 *.map
+.history
 
 # Project
 tokens

src/api.js

@@ -32,7 +32,11 @@ const api = {
 	 * 			 ENTRY_CHAT (constant for 'chat') will render the chat form.
 	 * @param {Object} entryOptions Optional. Contains options to configure the selected entry.
 	 * @param {Array} groups Mandatory. Happychat groups this user belongs to.
-	 * @param {String} layout Optional. The chat layout max-width-fixed-height | max-parent-size | panel-fixed-size | panel-max-parent-size
+	 * @param {String} layout Optional. The chat layout available options:
+	 * 										max-width-fixed-height
+	 * 										max-parent-size
+	 * 										panel-fixed-size
+	 * 										panel-max-parent-size
 	 * @param {string} nodeId Mandatory. HTML Node id where Happychat will be rendered.
 	 * @param {Object} user Optional. Customer information .
 	 */
@@ -64,20 +68,26 @@ const api = {
 			)
 			.catch( error => renderError( targetNode, { error } ) );
 	},
+
 	/**
 	 * Method to subscribe to Happychat events, either 'availability' or 'chatStatus'.
 	 *
 	 * @param  {String}   eventName The name of the event to be subscribed to.
 	 * @param  {Function} callback  The callback function to subscribe to the event.
+	 * @returns {Function} event subscribe function
 	 */
 	on: ( eventName, callback ) => eventAPI.subscribeTo( eventName, callback ),
+
 	/**
 	 * Method to unsubscribe from Happychat events, either 'availability' or 'chatStatus'.
 	 *
 	 * @param  {String}   eventName The name of the event to be unsubscribed from.
 	 * @param  {Function} callback  The callback function to unsubscribe from the event.
+	 * @returns {Function} event unsubscribe function
 	 */
+
 	off: ( eventName, callback ) => eventAPI.unsubscribeFrom( eventName, callback ),
+
 	/**
 	 * Method to send events to the Happychat server, to be shown to operators.
 	 * This is useful, for example, to send any action the user may have done in the page, etc.
@@ -103,8 +113,17 @@ const api = {
 	 * }
 	 *
 	 * @param  {Object} userInfo The object shape described above.
+	 * @returns {Function} send user info function
 	 */
 	sendUserInfo: userInfo => eventAPI.sendUserInfoMsg( userInfo ),
+
+	/**
+	 * Method to chat panel open/closed
+	 *
+	 * @param  {String} status chat status
+	 * @returns {Function} set chat status function
+	 */
+	setChatOpen: status => eventAPI.setChatOpen( status ),
 };
 
 export default api;

src/form.js

@@ -22,7 +22,7 @@ import {
 	sendNotTyping,
 	sendTyping,
 } from 'src/state/connection/actions';
-import { blur, focus, openChat, setCurrentMessage } from 'src/state/ui/actions';
+import { blur, closeChat, focus, openChat, setCurrentMessage } from 'src/state/ui/actions';
 import { setEligibility } from 'src/state/user/actions';
 import {
 	HAPPYCHAT_FALLBACK_TICKET_NEW,
@@ -80,6 +80,7 @@ class ChatComponent {
 			isServerReachable,
 			layout,
 			message,
+			onCloseChat,
 			onSendMessage,
 			onSendNotTyping,
 			onSendTyping,
@@ -103,6 +104,7 @@ class ChatComponent {
 				isServerReachable={ isServerReachable }
 				layout={ layout }
 				message={ message }
+				onCloseChat={ onCloseChat }
 				onSendMessage={ onSendMessage }
 				onSendNotTyping={ onSendNotTyping }
 				onSendTyping={ onSendTyping }

src/state/event-api.js

@@ -4,6 +4,8 @@
  * Internal dependencies
  */
 import { sendEvent, sendUserInfo } from 'src/state/connection/actions';
+import { setChatStatus } from 'src/state/ui/actions';
+import isChatFormOpen from 'src/state/selectors/is-chatform-open';
 import getChatStatus from 'src/state/selectors/get-chat-status';
 import getUserInfo from 'src/state/selectors/get-user-info';
 import isAvailable from 'src/state/selectors/is-available';
@@ -12,22 +14,33 @@ const eventAPI = store => {
 	const subscribers = {
 		availability: [],
 		chatStatus: [],
+		chatPanelOpen: [],
 	};
 
+	let oldChatOpenStatus = false;
 	let oldAvailability = false;
 	let oldChatStatus = 'new';
 	store.subscribe( () => {
-		const newAvailability = isAvailable( store.getState() );
+		const state = store.getState();
+		const newAvailability = isAvailable( state );
 		if ( newAvailability !== oldAvailability ) {
 			oldAvailability = newAvailability;
 			subscribers.availability.forEach( subscriber => subscriber( newAvailability ) );
 		}
 
-		const newChatStatus = getChatStatus( store.getState() );
+		const newChatStatus = getChatStatus( state );
 		if ( newChatStatus !== oldChatStatus ) {
 			oldChatStatus = newChatStatus;
 			subscribers.chatStatus.forEach( subscriber => subscriber( newChatStatus ) );
 		}
+
+		const newChatOpenStatus = isChatFormOpen( state );
+		if ( newChatOpenStatus !== oldChatOpenStatus ) {
+			oldChatOpenStatus = newChatOpenStatus;
+			subscribers.chatPanelOpen.forEach(
+				subscriber => subscriber( isChatFormOpen( state ) )
+			);
+		}
 	} );
 
 	const eventNameExist = eventName => subscribers.hasOwnProperty( eventName );
@@ -50,11 +63,14 @@ const eventAPI = store => {
 	const sendUserInfoMsg = userInfo =>
 		store.dispatch( sendUserInfo( getUserInfo( store.getState() )( userInfo ) ) );
 
+	const setChatOpen = ( status ) => store.dispatch( setChatStatus( status ) );
+
 	return {
 		subscribeTo,
 		unsubscribeFrom,
 		sendEventMsg,
 		sendUserInfoMsg,
+		setChatOpen,
 	};
 };
 

src/state/ui/actions.js

@@ -12,7 +12,7 @@ import {
 	HAPPYCHAT_SET_CURRENT_MESSAGE,
 } from 'src/state/action-types';
 
-const setChatOpen = isOpen => ( { type: HAPPYCHAT_OPEN, isOpen } );
+export const setChatOpen = isOpen => ( { type: HAPPYCHAT_OPEN, isOpen } );
 const setChatMinimizing = isMinimizing => ( { type: HAPPYCHAT_MINIMIZING, isMinimizing } );
 
 /**

src/ui/components/happychat-form/index.js

@@ -52,6 +52,7 @@ export class HappychatForm extends Component {
 			isServerReachable,
 			layout,
 			message,
+			onCloseChat,
 			onSendMessage,
 			onSendNotTyping,
 			onSendTyping,
@@ -64,7 +65,7 @@ export class HappychatForm extends Component {
 		return (
 			<div className="happychat__page" aria-live="polite" aria-relevant="additions">
 				{ includes( [ LAYOUT_PANEL_FIXED_SIZE, LAYOUT_PANEL_MAX_PARENT_SIZE ], layout ) &&
-					<Title /> }
+					<Title onCloseChat={ onCloseChat } /> }
 
 				<Timeline
 					currentUserEmail={ currentUserEmail }
@@ -106,6 +107,7 @@ HappychatForm.propTypes = {
 	isServerReachable: PropTypes.bool,
 	layout: PropTypes.string,
 	message: PropTypes.string,
+	onCloseChat: PropTypes.func,
 	onSendMessage: PropTypes.func,
 	onSendNotTyping: PropTypes.func,
 	onSendTyping: PropTypes.func,

src/ui/components/happychat-form/style.scss

@@ -49,6 +49,7 @@ body.is-fullscreen .happychat__page {
 .happychat__conversation {
 	padding-left: 6px;
 	padding-right: 6px;
+	background: var(--neutral-lighten-30);
 }
 
 .happychat__composer {

src/ui/components/timeline/style.scss

@@ -21,6 +21,7 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-end;
+	background: var(--neutral-lighten-30);
 
 	p {
 		margin: 0;

src/ui/css/_main.scss

@@ -6,6 +6,7 @@
 }
 
 body {
+	background: none;
 	font-family: $sans;
 	font-size: 15px;
 	line-height: 1.5;