Auto-reopening of the chat plugin won't happen on mobile

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<AppProps> = (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();
         }
 

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;
+};

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()}
                         />
                     </React.StrictMode>,
                 );

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 {