diff --git a/src/app.tsx b/src/app.tsx index 347faf1..da69f5c 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -39,6 +39,7 @@ interface AppProps { storeService: StoreService; globalEventService: GlobalEventService; urlNavigationService: UrlNavigationService; + isFullScreen: boolean; } interface PopoverInterface { @@ -107,7 +108,9 @@ export const App: React.FC = (props) => { }; useEffect(() => { - if (props.chatStorage.getChatState() == ChatState.Opened || props.configuration.features?.embedded) { + // we are opening chat on the new page only if it was opened before and if the chat is not in fullscreen mode + const shallOpenChat = !props.isFullScreen && props.chatStorage.getChatState() == ChatState.Opened; + if (shallOpenChat || props.configuration.features?.embedded) { openChat(); } diff --git a/src/middlewares/device-query.tsx b/src/middlewares/device-query.tsx new file mode 100644 index 0000000..e335d79 --- /dev/null +++ b/src/middlewares/device-query.tsx @@ -0,0 +1,11 @@ +const fullScreenBreakpoint = 768; // this shall be in sync with the value in src/styles/app.scss + +/** + * Check if the device is mobile by running media query. + */ +export const isFullScreen = () => { + // we are implementing this over match media as fullscreen is only if mobile break point is matched + const queryString = `( max-width: ${fullScreenBreakpoint}px )`; + const query = window.matchMedia(queryString); + return query.matches; +}; diff --git a/src/spinoco-webchat-plugin.tsx b/src/spinoco-webchat-plugin.tsx index 53d27c5..f5ce761 100644 --- a/src/spinoco-webchat-plugin.tsx +++ b/src/spinoco-webchat-plugin.tsx @@ -13,6 +13,7 @@ import { GlobalEventService } from "./models/services/global-event-service/globa import "./styles/app.scss"; import { UrlNavigationService } from "./models/services/dom/url-navigation-service"; import { RuleService } from "./models/services/rule-service"; +import { isFullScreen } from "./middlewares/device-query"; declare global { interface Window { @@ -53,6 +54,7 @@ const createWithConfigUrl = (url: string) => { configuration={configuration} globalEventService={globalEventService} urlNavigationService={urlNavigationService} + isFullScreen={isFullScreen()} /> , ); diff --git a/src/styles/app.scss b/src/styles/app.scss index d9a4f5b..b742c97 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -1,4 +1,6 @@ -$tablet-breakpoint: "768px"; + + +$tablet-breakpoint: "768px"; // when changing breakpoint, also update the `src/middlewares/device-query.tsx` file $mobile-breakpoint: "384px"; @mixin tablet {