feat: Add an SDK method for opening conversation in popout window (#4232)

app/javascript/widget/components/HeaderActions.vue

@@ -29,7 +29,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
-import { buildPopoutURL } from '../helpers/urlParamsHelper';
+import { popoutChatWindow } from '../helpers/popoutHelper';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
 export default {
@@ -69,19 +69,12 @@ export default {
         chatwootWebChannel: { websiteToken },
         authToken,
       } = window;
-
-      const popoutWindowURL = buildPopoutURL({
+      popoutChatWindow(
         origin,
         websiteToken,
-        locale: this.$root.$i18n.locale,
-        conversationCookie: authToken,
-      });
-      const popoutWindow = window.open(
-        popoutWindowURL,
-        `webwidget_session_${websiteToken}`,
-        'resizable=off,width=400,height=600'
+        this.$root.$i18n.locale,
+        authToken
       );
-      popoutWindow.focus();
     },
     closeWindow() {
       if (IFrameHelper.isIFrame()) {

app/javascript/widget/helpers/popoutHelper.js

@@ -0,0 +1,26 @@
+import { buildPopoutURL } from './urlParamsHelper';
+
+export const popoutChatWindow = (
+  origin,
+  websiteToken,
+  locale,
+  conversationCookie
+) => {
+  try {
+    const windowUrl = buildPopoutURL({
+      origin,
+      websiteToken,
+      locale,
+      conversationCookie,
+    });
+    const popoutWindow = window.open(
+      windowUrl,
+      `webwidget_session_${websiteToken}`,
+      'resizable=off,width=400,height=600'
+    );
+    popoutWindow.focus();
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.log(err);
+  }
+};