From 1a64d6768b08427cd7cccfa1ca51e6e9b6f68a06 Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Thu, 15 Feb 2024 23:54:35 -0300 Subject: [PATCH 01/20] feat: added position to Livechat widget's theme --- .../app/livechat/server/api/lib/livechat.ts | 1 + .../app/livechat/server/lib/LivechatTyped.ts | 1 + apps/meteor/server/settings/omnichannel.ts | 13 +++++++++++++ packages/i18n/src/locales/en.i18n.json | 1 + packages/i18n/src/locales/pt-BR.i18n.json | 1 + packages/livechat/src/components/App/App.tsx | 13 ++++++------- .../src/components/Screen/ScreenProvider.tsx | 8 +++++--- .../livechat/src/components/Screen/index.js | 10 +++++++++- .../livechat/src/components/Screen/styles.scss | 4 ++++ packages/livechat/src/store/index.tsx | 6 +++++- packages/livechat/src/widget.ts | 18 +++++++++++++++++- 11 files changed, 63 insertions(+), 13 deletions(-) diff --git a/apps/meteor/app/livechat/server/api/lib/livechat.ts b/apps/meteor/app/livechat/server/api/lib/livechat.ts index 0f7da0b7c9e97..dd77533612b8c 100644 --- a/apps/meteor/app/livechat/server/api/lib/livechat.ts +++ b/apps/meteor/app/livechat/server/api/lib/livechat.ts @@ -177,6 +177,7 @@ export async function settings({ businessUnit = '' }: { businessUnit?: string } color: initSettings.Livechat_title_color, offlineTitle: initSettings.Livechat_offline_title, offlineColor: initSettings.Livechat_offline_title_color, + position: initSettings.Livechat_widget_position || 'right', actionLinks: { webrtc: [ { diff --git a/apps/meteor/app/livechat/server/lib/LivechatTyped.ts b/apps/meteor/app/livechat/server/lib/LivechatTyped.ts index 776990beaa21a..087bd56291674 100644 --- a/apps/meteor/app/livechat/server/lib/LivechatTyped.ts +++ b/apps/meteor/app/livechat/server/lib/LivechatTyped.ts @@ -1127,6 +1127,7 @@ class LivechatClass { 'Livechat_clear_local_storage_when_chat_ended', 'Livechat_history_monitor_type', 'Livechat_hide_system_messages', + 'Livechat_widget_position', ] as const; type SettingTypes = (typeof validSettings)[number] | 'Livechat_Show_Connecting'; diff --git a/apps/meteor/server/settings/omnichannel.ts b/apps/meteor/server/settings/omnichannel.ts index cc9da54748627..7e0de1dabd593 100644 --- a/apps/meteor/server/settings/omnichannel.ts +++ b/apps/meteor/server/settings/omnichannel.ts @@ -632,6 +632,19 @@ export const createOmniSettings = () => i18nLabel: 'Call_provider', enableQuery: omnichannelEnabledQuery, }); + + await this.add('Livechat_widget_position', 'right', { + type: 'select', + group: 'Omnichannel', + section: 'Livechat', + i18nLabel: 'Livechat_widget_position_on_the_screen', + public: true, + values: [ + { key: 'left', i18nLabel: 'Left' }, + { key: 'right', i18nLabel: 'Right' }, + ], + enableQuery: omnichannelEnabledQuery, + }); }); await settingsRegistry.addGroup('SMS', async function () { await this.add('SMS_Enabled', false, { diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json index 849dcab49c5c9..61268e0040aea 100644 --- a/packages/i18n/src/locales/en.i18n.json +++ b/packages/i18n/src/locales/en.i18n.json @@ -3176,6 +3176,7 @@ "Livechat_offline_message_sent": "Livechat offline message sent", "Livechat_OfflineMessageToChannel_enabled": "Send Livechat offline messages to a channel", "Livechat_hide_system_messages": "Hide system messages", + "Livechat_widget_position_on_the_screen": "Livechat widget position on the screen", "Omnichannel_chat_closed_due_to_inactivity": "The chat was automatically closed because we haven't received any reply from {{guest}} in {{timeout}} seconds", "Omnichannel_actions": "Omnichannel actions", "Omnichannel_on_hold_chat_resumed": "On Hold Chat Resumed: {{comment}}", diff --git a/packages/i18n/src/locales/pt-BR.i18n.json b/packages/i18n/src/locales/pt-BR.i18n.json index 76fc3db44e7e2..42f5819602f1c 100644 --- a/packages/i18n/src/locales/pt-BR.i18n.json +++ b/packages/i18n/src/locales/pt-BR.i18n.json @@ -2685,6 +2685,7 @@ "Livechat_offline_message_sent": "Mensagem offline do livechat enviada", "Livechat_OfflineMessageToChannel_enabled": "Envie mensagens offline do livechat para um canal", "Livechat_hide_system_messages": "Ocultar mensagens do sistema", + "Livechat_widget_position_on_the_screen": "Posição do livechat widget na tela", "Omnichannel_on_hold_chat_resumed": "Conversa em espera retomada: {{comment}}", "Omnichannel_on_hold_chat_automatically": "A conversa foi automaticamente retomada de em espera após receber uma nova mensagem de {{guest}}", "Omnichannel_on_hold_chat_resumed_manually": "A conversa foi manualmente retomada de em espera por {{user}}", diff --git a/packages/livechat/src/components/App/App.tsx b/packages/livechat/src/components/App/App.tsx index ba1f435409f36..ba3e941c27558 100644 --- a/packages/livechat/src/components/App/App.tsx +++ b/packages/livechat/src/components/App/App.tsx @@ -22,17 +22,13 @@ import LeaveMessage from '../../routes/LeaveMessage'; import Register from '../../routes/Register'; import SwitchDepartment from '../../routes/SwitchDepartment'; import TriggerMessage from '../../routes/TriggerMessage'; -import type { Dispatch } from '../../store'; +import type { Dispatch, StoreState } from '../../store'; import { ScreenProvider } from '../Screen/ScreenProvider'; type AppProps = { config: { - settings: { - registrationForm?: boolean; - nameFieldRegistrationForm?: boolean; - emailFieldRegistrationForm?: boolean; - forceAcceptDataProcessingConsent?: boolean; - }; + settings: StoreState['config']['settings']; + theme: StoreState['config']['theme']; online?: boolean; departments: Department[]; enabled?: boolean; @@ -64,6 +60,7 @@ type AppProps = { name: string; email: string; }; + theme: StoreState['iframe']['theme']; }; i18n: typeof i18next; }; @@ -141,11 +138,13 @@ export class App extends Component { const { minimized, iframe: { visible }, + config: { theme }, dispatch, } = this.props; parentCall(minimized ? 'minimizeWindow' : 'restoreWindow'); parentCall(visible ? 'showWidget' : 'hideWidget'); + parentCall('setWidgetPosition', theme.position || 'right'); visibility.addListener(this.handleVisibilityChange); diff --git a/packages/livechat/src/components/Screen/ScreenProvider.tsx b/packages/livechat/src/components/Screen/ScreenProvider.tsx index 8243879f2549d..5c7a31819dd4f 100644 --- a/packages/livechat/src/components/Screen/ScreenProvider.tsx +++ b/packages/livechat/src/components/Screen/ScreenProvider.tsx @@ -27,9 +27,10 @@ export type ScreenContextValue = { onDismissAlert: () => unknown; dismissNotification: () => void; theme?: { - color: string; - fontColor: string; - iconColor: string; + color?: string; + fontColor?: string; + iconColor?: string; + position?: 'left' | 'right'; }; }; @@ -118,6 +119,7 @@ export const ScreenProvider: FunctionalComponent = ({ children }) => { color: customColor || color, fontColor: customFontColor, iconColor: customIconColor, + position: iframe.theme.position || config.theme.position || 'right', }, notificationsEnabled: sound?.enabled, minimized: !poppedOut && (minimized || undocked), diff --git a/packages/livechat/src/components/Screen/index.js b/packages/livechat/src/components/Screen/index.js index f9bf036e19e23..a01f3e3e7d6fa 100644 --- a/packages/livechat/src/components/Screen/index.js +++ b/packages/livechat/src/components/Screen/index.js @@ -95,7 +95,15 @@ export const Screen = ({ title, color, agent, children, className, unread, trigg } = useContext(ScreenContext); return ( -
+
{triggered && (