From 3a2b6da0e1ae1bba6aec17a03d4ad78f66a285a4 Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Tue, 27 Sep 2022 15:51:44 -0300 Subject: [PATCH] [FIX] Adjusted livechat fallbacks to take null values into account (#26909) * [FIX] Adjusted livechat fallbacks to take null values into account * [FIX] Adjusted to clear defaultAgent when department is changed * [FIX] Fixed default guest info not being displayed * [FIX] Adjusted widget default values logic * [FIX] Removing unnecessary check * [FIX] Changed default values logic again to account for changes via api Co-authored-by: Tasso Evangelista --- packages/livechat/src/components/App/App.js | 8 ++++- packages/livechat/src/lib/hooks.js | 13 +++++-- packages/livechat/src/lib/room.js | 3 +- packages/livechat/src/lib/triggers.js | 2 +- .../livechat/src/routes/Chat/container.js | 3 +- .../livechat/src/routes/Register/component.js | 34 +++++++------------ 6 files changed, 36 insertions(+), 27 deletions(-) diff --git a/packages/livechat/src/components/App/App.js b/packages/livechat/src/components/App/App.js index 91accd921c42..c774165050dc 100644 --- a/packages/livechat/src/components/App/App.js +++ b/packages/livechat/src/components/App/App.js @@ -205,10 +205,13 @@ export class App extends Component { } } - render = ({ sound, undocked, minimized, expanded, alerts, modal }, { initialized, poppedOut }) => { + render = ({ sound, undocked, minimized, expanded, alerts, modal, iframe }, { initialized, poppedOut }) => { if (!initialized) { return null; } + + const { department, name, email } = iframe.guest || {}; + const screenProps = { notificationsEnabled: sound && sound.enabled, minimized: !poppedOut && (minimized || undocked), @@ -217,6 +220,9 @@ export class App extends Component { sound, alerts, modal, + nameDefault: name, + emailDefault: email, + departmentDefault: department, onEnableNotifications: this.handleEnableNotifications, onDisableNotifications: this.handleDisableNotifications, onMinimize: this.handleMinimize, diff --git a/packages/livechat/src/lib/hooks.js b/packages/livechat/src/lib/hooks.js index 46c2c11fa0fb..68f28466918d 100644 --- a/packages/livechat/src/lib/hooks.js +++ b/packages/livechat/src/lib/hooks.js @@ -39,7 +39,9 @@ const api = { Triggers.processRequest(info); } - const { token, room: { _id: rid } = {} } = store.state; + const { token, room } = store.state; + const { _id: rid } = room || {}; + const { change, title, @@ -75,14 +77,21 @@ const api = { async setDepartment(value) { const { + user, config: { departments = [] }, - user: { department: existingDepartment } = {}, + defaultAgent, } = store.state; + const { department: existingDepartment } = user || {}; + const department = departments.find((dep) => dep._id === value || dep.name === value)?._id || ''; updateIframeGuestData({ department }); + if (defaultAgent && defaultAgent.department !== department) { + store.setState({ defaultAgent: null }); + } + if (department !== existingDepartment) { await loadConfig(); await loadMessages(); diff --git a/packages/livechat/src/lib/room.js b/packages/livechat/src/lib/room.js index c33d29ce89f8..3cfd8918234a 100644 --- a/packages/livechat/src/lib/room.js +++ b/packages/livechat/src/lib/room.js @@ -299,7 +299,8 @@ export const loadMessages = async () => { }; export const loadMoreMessages = async () => { - const { room: { _id: rid } = {}, messages = [], noMoreMessages = false } = store.state; + const { room, messages = [], noMoreMessages = false } = store.state; + const { _id: rid } = room || {}; if (!rid || noMoreMessages) { return; diff --git a/packages/livechat/src/lib/triggers.js b/packages/livechat/src/lib/triggers.js index f366ae1e46b8..b1ce9dbb7234 100644 --- a/packages/livechat/src/lib/triggers.js +++ b/packages/livechat/src/lib/triggers.js @@ -38,7 +38,7 @@ const getAgent = (triggerAction) => { return reject(error); } - store.setState({ defaultAgent: { ...agent, ts: Date.now() } }); + store.setState({ defaultAgent: { ...agent, department, ts: Date.now() } }); resolve(agent); } else if (params.sender === 'custom') { resolve({ diff --git a/packages/livechat/src/routes/Chat/container.js b/packages/livechat/src/routes/Chat/container.js index 112011e0f176..5c2a76ce24d1 100644 --- a/packages/livechat/src/routes/Chat/container.js +++ b/packages/livechat/src/routes/Chat/container.js @@ -190,7 +190,8 @@ class ChatContainer extends Component { return; } - const { alerts, dispatch, room: { _id: rid } = {} } = this.props; + const { alerts, dispatch, room } = this.props; + const { _id: rid } = room || {}; await dispatch({ loading: true }); try { diff --git a/packages/livechat/src/routes/Register/component.js b/packages/livechat/src/routes/Register/component.js index 60cb1fda37eb..aee08f7b7ced 100644 --- a/packages/livechat/src/routes/Register/component.js +++ b/packages/livechat/src/routes/Register/component.js @@ -126,34 +126,26 @@ class Register extends Component { } static getDerivedStateFromProps(nextProps, state) { - const { hasNameField, hasEmailField, hasDepartmentField, departmentDefault, departments, nameDefault, emailDefault } = nextProps; + const { hasNameField, hasEmailField, hasDepartmentField, nameDefault, emailDefault, departmentDefault } = nextProps; + const { name, email, department } = state; + const newState = {}; - const nameValue = nameDefault || ''; - if (hasNameField && (!state.name || state.name !== nameValue)) { - state = { ...state, name: { ...state.name, value: nameValue } }; - } else if (!hasNameField) { - state = { ...state, name: null }; + if (hasNameField && nameDefault && nameDefault !== name?.value) { + const error = validate(this.props, { name: 'name', value: nameDefault, regexp: name?.regexp }); + newState.name = { ...name, value: nameDefault, error }; } - const emailValue = emailDefault || ''; - if (hasEmailField && (!state.email || state.name !== emailValue)) { - state = { ...state, email: { ...state.email, value: emailValue } }; - } else if (!hasEmailField) { - state = { ...state, email: null }; + if (hasEmailField && emailDefault && emailDefault !== email?.value) { + const error = validate(this.props, { name: 'email', value: emailDefault, regexp: email?.regexp }); + newState.email = { ...email, value: emailDefault, error }; } - const departmentValue = departmentDefault || getDefaultDepartment(departments); - const showDepartmentField = hasDepartmentField && departments && departments.length > 1; - if (showDepartmentField && (!state.department || state.department !== departmentValue)) { - state = { ...state, department: { ...state.department, value: departmentValue } }; - } else if (!showDepartmentField) { - state = { ...state, department: null }; + if (hasDepartmentField && departmentDefault && departmentDefault !== department?.value) { + const error = validate(this.props, { name: 'department', value: departmentDefault, regexp: department?.regexp }); + newState.department = { ...department, value: departmentDefault, error }; } - for (const { fieldName: name, value, regexp } of getValidableFields(state)) { - const error = validate(nextProps, { name, value, regexp }); - state = { ...state, [name]: { ...state[name], value, error, showError: false } }; - } + return newState; } state = {