From 073f03fcde2a2a580b63dde2ef3573ca9d437ac5 Mon Sep 17 00:00:00 2001 From: undemian Date: Fri, 4 May 2018 18:13:55 +0300 Subject: [PATCH] Add close button --- .gitignore | 1 + src/api.js | 21 ++++++++++++++++++++- src/form.js | 4 +++- src/state/event-api.js | 20 ++++++++++++++++++-- src/state/ui/actions.js | 2 +- src/ui/components/happychat-form/index.js | 4 +++- src/ui/components/happychat-form/style.scss | 1 + src/ui/components/timeline/style.scss | 1 + src/ui/css/_main.scss | 1 + 9 files changed, 49 insertions(+), 6 deletions(-) diff --git a/.gitignore b/.gitignore index 046215cf..bedd02f9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ # Generic node_modules/ *.map +.history # Project tokens diff --git a/src/api.js b/src/api.js index 7870ebfa..13e7011d 100644 --- a/src/api.js +++ b/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; diff --git a/src/form.js b/src/form.js index 0f929ac1..ecc55fa5 100644 --- a/src/form.js +++ b/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 } diff --git a/src/state/event-api.js b/src/state/event-api.js index 053e5572..e98d215c 100644 --- a/src/state/event-api.js +++ b/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, }; }; diff --git a/src/state/ui/actions.js b/src/state/ui/actions.js index 50d798cf..22590ff1 100644 --- a/src/state/ui/actions.js +++ b/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 } ); /** diff --git a/src/ui/components/happychat-form/index.js b/src/ui/components/happychat-form/index.js index 6d3c1df3..4702b307 100644 --- a/src/ui/components/happychat-form/index.js +++ b/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 (
{ includes( [ LAYOUT_PANEL_FIXED_SIZE, LAYOUT_PANEL_MAX_PARENT_SIZE ], layout ) && - } + <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, diff --git a/src/ui/components/happychat-form/style.scss b/src/ui/components/happychat-form/style.scss index ff718426..fc9fbb60 100644 --- a/src/ui/components/happychat-form/style.scss +++ b/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 { diff --git a/src/ui/components/timeline/style.scss b/src/ui/components/timeline/style.scss index 5717abb3..dcb16029 100644 --- a/src/ui/components/timeline/style.scss +++ b/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; diff --git a/src/ui/css/_main.scss b/src/ui/css/_main.scss index 8bcddfc8..1bf19807 100644 --- a/src/ui/css/_main.scss +++ b/src/ui/css/_main.scss @@ -6,6 +6,7 @@ } body { + background: none; font-family: $sans; font-size: 15px; line-height: 1.5;