diff --git a/.changeset/new-mails-add.md b/.changeset/new-mails-add.md new file mode 100644 index 000000000000..87446ac8b4c1 --- /dev/null +++ b/.changeset/new-mails-add.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/livechat": patch +--- + +Fixes issue that caused different sessions when opening a livechat popover in cross domain diff --git a/packages/livechat/src/components/Screen/ScreenProvider.tsx b/packages/livechat/src/components/Screen/ScreenProvider.tsx index aa1dd61c59be..2bccafd60c6f 100644 --- a/packages/livechat/src/components/Screen/ScreenProvider.tsx +++ b/packages/livechat/src/components/Screen/ScreenProvider.tsx @@ -4,6 +4,7 @@ import { useCallback, useContext, useEffect, useState } from 'preact/hooks'; import { parse } from 'query-string'; import { isActiveSession } from '../../helpers/isActiveSession'; +import { createOrUpdateGuest, evaluateChangesAndLoadConfigByFields } from '../../lib/hooks'; import { loadConfig } from '../../lib/main'; import { parentCall } from '../../lib/parentCall'; import { loadMessages } from '../../lib/room'; @@ -76,7 +77,7 @@ export const ScreenProvider: FunctionalComponent = ({ children }) => { } = useContext(StoreContext); const { department, name, email } = iframe.guest || {}; const { color, position: configPosition, background } = config.theme || {}; - const { livechatLogo, hideWatermark = false } = config.settings || {}; + const { livechatLogo, hideWatermark = false, registrationForm } = config.settings || {}; const { color: customColor, @@ -137,15 +138,26 @@ export const ScreenProvider: FunctionalComponent = ({ children }) => { const dismissNotification = () => !isActiveSession(); - const checkPoppedOutWindow = useCallback(() => { + const checkPoppedOutWindow = useCallback(async () => { // Checking if the window is poppedOut and setting parent minimized if yes for the restore purpose const poppedOut = parse(window.location.search).mode === 'popout'; + const { token = '' } = parse(window.location.search); setPopedOut(poppedOut); if (poppedOut) { dispatch({ minimized: false, undocked: true }); } - }, [dispatch]); + + if (token && typeof token === 'string') { + if (registrationForm && !name && !email) { + dispatch({ token }); + return; + } + await evaluateChangesAndLoadConfigByFields(async () => { + await createOrUpdateGuest({ token }); + }); + } + }, [dispatch, email, name, registrationForm]); useEffect(() => { checkPoppedOutWindow(); diff --git a/packages/livechat/src/lib/hooks.ts b/packages/livechat/src/lib/hooks.ts index e1a980fe65e3..cdfde40f16e5 100644 --- a/packages/livechat/src/lib/hooks.ts +++ b/packages/livechat/src/lib/hooks.ts @@ -11,7 +11,7 @@ import { createToken } from './random'; import { loadMessages } from './room'; import Triggers from './triggers'; -const evaluateChangesAndLoadConfigByFields = async (fn: () => Promise) => { +export const evaluateChangesAndLoadConfigByFields = async (fn: () => Promise) => { const oldStore = JSON.parse( JSON.stringify({ user: store.state.user || {}, @@ -42,7 +42,7 @@ const evaluateChangesAndLoadConfigByFields = async (fn: () => Promise) => } }; -const createOrUpdateGuest = async (guest: StoreState['guest']) => { +export const createOrUpdateGuest = async (guest: StoreState['guest']) => { if (!guest) { return; } diff --git a/packages/livechat/src/widget.ts b/packages/livechat/src/widget.ts index 234d61f87096..ca46ab944913 100644 --- a/packages/livechat/src/widget.ts +++ b/packages/livechat/src/widget.ts @@ -489,20 +489,13 @@ const api: InternalWidgetAPI = { if (!config.url) { throw new Error('Config.url is not set!'); } + const urlToken = token && `&token=${token}`; + api.popup = window.open( - `${config.url}${config.url.lastIndexOf('?') > -1 ? '&' : '?'}mode=popout`, + `${config.url}${config.url.lastIndexOf('?') > -1 ? '&' : '?'}mode=popout${urlToken}`, 'livechat-popout', `width=${WIDGET_OPEN_WIDTH}, height=${widgetHeight}, toolbars=no`, ); - - const data = { - src: 'rocketchat', - fn: 'setGuestToken', - args: [token], - }; - - api.popup?.postMessage(data, '*'); - api.popup?.focus(); }, removeWidget() {