From 25ba852b6852b99aca800d3a40bddce3e499dbef Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Fri, 28 May 2021 19:21:16 +0530
Subject: [PATCH] chore: Adjust Chatwoot Config to deploy frontend as a
 separate app (#2347)

---
 .../dashboard/assets/scss/_woot.scss          |  1 -
 .../components/widgets/InboxListItem.vue      | 16 ++++----
 .../components/widgets/WootWriter/Editor.vue  |  1 +
 app/javascript/dashboard/constants.js         |  5 +--
 app/javascript/dashboard/helper/APIHelper.js  |  9 ++---
 .../dashboard/helper/actionCable.js           |  3 +-
 .../dashboard/routes/auth/Confirmation.vue    | 38 ++++++++++---------
 .../dashboard/routes/auth/PasswordEdit.vue    |  7 ++--
 .../dashboard/routes/auth/ResetPassword.vue   |  2 -
 .../dashboard/routes/auth/Signup.vue          |  3 +-
 .../dashboard/settings/canned/EditCanned.vue  |  1 -
 .../dashboard/settings/integrations/New.vue   |  1 -
 app/javascript/dashboard/routes/index.js      | 14 +++----
 app/javascript/dashboard/routes/index.spec.js |  4 --
 .../dashboard/store/modules/auth.js           |  3 +-
 .../helpers/BaseActionCableConnector.js       |  5 ++-
 16 files changed, 53 insertions(+), 60 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index 7ecec198b..1712e256e 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -46,5 +46,4 @@
 
 @import 'plugins/multiselect';
 @import 'plugins/dropdown';
-@import '@chatwoot/prosemirror-schema/src/woot-editor.css';
 @import '~shared/assets/stylesheets/ionicons';
diff --git a/app/javascript/dashboard/components/widgets/InboxListItem.vue b/app/javascript/dashboard/components/widgets/InboxListItem.vue
index 413fec00c..5bfdacdda 100644
--- a/app/javascript/dashboard/components/widgets/InboxListItem.vue
+++ b/app/javascript/dashboard/components/widgets/InboxListItem.vue
@@ -1,21 +1,23 @@
 <template>
-  <div class="inbox-item" >
-    <img src="~dashboard/assets/images/no_page_image.png" alt="No Page Image"/>
+  <div class="inbox-item">
+    <img src="~dashboard/assets/images/no_page_image.png" alt="No Page Image" />
     <div class="item--details columns">
-      <h4 class="item--name">{{ inbox.label }}</h4>
-      <p class="item--sub">Facebook</p>
+      <h4 class="item--name">
+        {{ inbox.label }}
+      </h4>
+      <p class="item--sub">
+        Facebook
+      </p>
     </div>
     <!-- <span class="ion-chevron-right arrow"></span> -->
   </div>
 </template>
 <script>
 /* eslint no-console: 0 */
-/* global bus */
 // import WootSwitch from '../ui/Switch';
 
 export default {
   props: ['inbox'],
-  created() {
-  },
+  created() {},
 };
 </script>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index bbb1d4e82..ba26ef177 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -28,6 +28,7 @@ import TagAgents from '../conversation/TagAgents.vue';
 import { EditorState } from 'prosemirror-state';
 import { defaultMarkdownParser } from 'prosemirror-markdown';
 import { wootWriterSetup } from '@chatwoot/prosemirror-schema';
+import '@chatwoot/prosemirror-schema/src/woot-editor.css';
 
 const createState = (content, placeholder, plugins = []) => {
   return EditorState.create({
diff --git a/app/javascript/dashboard/constants.js b/app/javascript/dashboard/constants.js
index 9a00775bf..34f4b9845 100644
--- a/app/javascript/dashboard/constants.js
+++ b/app/javascript/dashboard/constants.js
@@ -1,8 +1,4 @@
 export default {
-  APP_BASE_URL: '/',
-  get apiURL() {
-    return `${this.APP_BASE_URL}/`;
-  },
   GRAVATAR_URL: 'https://www.gravatar.com/avatar/',
   ASSIGNEE_TYPE: {
     ME: 'me',
@@ -15,3 +11,4 @@ export default {
     BOT: 'bot',
   },
 };
+export const DEFAULT_REDIRECT_URL = '/app/';
diff --git a/app/javascript/dashboard/helper/APIHelper.js b/app/javascript/dashboard/helper/APIHelper.js
index 03e902259..5dcb34f97 100644
--- a/app/javascript/dashboard/helper/APIHelper.js
+++ b/app/javascript/dashboard/helper/APIHelper.js
@@ -1,14 +1,11 @@
 /* eslint no-console: 0 */
-import constants from '../constants';
 import Auth from '../api/auth';
 
-const parseErrorCode = error => {
-  return Promise.reject(error);
-};
+const parseErrorCode = error => Promise.reject(error);
 
 export default axios => {
-  const wootApi = axios.create();
-  wootApi.defaults.baseURL = constants.apiURL;
+  const { apiHost = '' } = window.chatwootConfig || {};
+  const wootApi = axios.create({ baseURL: `${apiHost}/` });
   // Add Auth Headers to requests if logged in
   if (Auth.isLoggedIn()) {
     const {
diff --git a/app/javascript/dashboard/helper/actionCable.js b/app/javascript/dashboard/helper/actionCable.js
index 6103ee915..afddb1e88 100644
--- a/app/javascript/dashboard/helper/actionCable.js
+++ b/app/javascript/dashboard/helper/actionCable.js
@@ -4,7 +4,8 @@ import { newMessageNotification } from 'shared/helpers/AudioNotificationHelper';
 
 class ActionCableConnector extends BaseActionCableConnector {
   constructor(app, pubsubToken) {
-    super(app, pubsubToken);
+    const { websocketURL = '' } = window.chatwootConfig || {};
+    super(app, pubsubToken, websocketURL);
     this.CancelTyping = [];
     this.events = {
       'message.created': this.onMessageCreated,
diff --git a/app/javascript/dashboard/routes/auth/Confirmation.vue b/app/javascript/dashboard/routes/auth/Confirmation.vue
index ff41375a6..db439af03 100644
--- a/app/javascript/dashboard/routes/auth/Confirmation.vue
+++ b/app/javascript/dashboard/routes/auth/Confirmation.vue
@@ -2,31 +2,35 @@
   <loading-state :message="$t('CONFIRM_EMAIL')"></loading-state>
 </template>
 <script>
-/* eslint-disable */
 import LoadingState from '../../components/widgets/LoadingState';
 import Auth from '../../api/auth';
+import { DEFAULT_REDIRECT_URL } from '../../constants';
 export default {
-  props: {
-    confirmationToken: String,
-    redirectUrl: String,
-    config: String,
-  },
   components: {
     LoadingState,
   },
+  props: {
+    confirmationToken: {
+      type: String,
+      default: '',
+    },
+  },
   mounted() {
     this.confirmToken();
   },
   methods: {
-    confirmToken() {
-      Auth.verifyPasswordToken({
-        confirmationToken: this.confirmationToken
-      }).then(res => {
-        window.location = res.data.redirect_url;
-      }).catch(res => {
-        window.location = '/';
-      });
-    }
-  }
-}
+    async confirmToken() {
+      try {
+        const {
+          data: { redirect_url: redirectURL },
+        } = await Auth.verifyPasswordToken({
+          confirmationToken: this.confirmationToken,
+        });
+        window.location = redirectURL;
+      } catch (error) {
+        window.location = DEFAULT_REDIRECT_URL;
+      }
+    },
+  },
+};
 </script>
diff --git a/app/javascript/dashboard/routes/auth/PasswordEdit.vue b/app/javascript/dashboard/routes/auth/PasswordEdit.vue
index 698c3f792..4549528a0 100644
--- a/app/javascript/dashboard/routes/auth/PasswordEdit.vue
+++ b/app/javascript/dashboard/routes/auth/PasswordEdit.vue
@@ -46,12 +46,11 @@
 </template>
 
 <script>
-/* global bus */
-
 import { required, minLength } from 'vuelidate/lib/validators';
 import Auth from '../../api/auth';
 
 import WootSubmitButton from '../../components/buttons/FormSubmitButton';
+import { DEFAULT_REDIRECT_URL } from '../../constants';
 
 export default {
   components: {
@@ -81,7 +80,7 @@ export default {
     // If url opened without token
     // redirect to login
     if (!this.resetPasswordToken) {
-      window.location = '/';
+      window.location = DEFAULT_REDIRECT_URL;
     }
   },
   validations: {
@@ -118,7 +117,7 @@ export default {
       Auth.setNewPassword(credentials)
         .then(res => {
           if (res.status === 200) {
-            window.location = '/';
+            window.location = DEFAULT_REDIRECT_URL;
           }
         })
         .catch(() => {
diff --git a/app/javascript/dashboard/routes/auth/ResetPassword.vue b/app/javascript/dashboard/routes/auth/ResetPassword.vue
index 55a976106..e9eae00ab 100644
--- a/app/javascript/dashboard/routes/auth/ResetPassword.vue
+++ b/app/javascript/dashboard/routes/auth/ResetPassword.vue
@@ -30,7 +30,6 @@
 <script>
 import { required, minLength, email } from 'vuelidate/lib/validators';
 import Auth from '../../api/auth';
-import { frontendURL } from '../../helper/URLHelper';
 
 export default {
   data() {
@@ -71,7 +70,6 @@ export default {
             successMessage = res.data.message;
           }
           this.showAlert(successMessage);
-          window.location = frontendURL('login');
         })
         .catch(error => {
           let errorMessage = this.$t('RESET_PASSWORD.API.ERROR_MESSAGE');
diff --git a/app/javascript/dashboard/routes/auth/Signup.vue b/app/javascript/dashboard/routes/auth/Signup.vue
index ed6743c62..5b71e2887 100644
--- a/app/javascript/dashboard/routes/auth/Signup.vue
+++ b/app/javascript/dashboard/routes/auth/Signup.vue
@@ -79,6 +79,7 @@ import Auth from '../../api/auth';
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import alertMixin from 'shared/mixins/alertMixin';
+import { DEFAULT_REDIRECT_URL } from '../../constants';
 
 export default {
   mixins: [globalConfigMixin, alertMixin],
@@ -132,7 +133,7 @@ export default {
       try {
         const response = await Auth.register(this.credentials);
         if (response.status === 200) {
-          window.location = '/';
+          window.location = DEFAULT_REDIRECT_URL;
         }
       } catch (error) {
         let errorMessage = this.$t('REGISTER.API.ERROR_MESSAGE');
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
index 5645d375c..5065454da 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
@@ -49,7 +49,6 @@
 </template>
 
 <script>
-/* global bus */
 /* eslint no-console: 0 */
 import { required, minLength } from 'vuelidate/lib/validators';
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/New.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/New.vue
index cf73436f6..55fbbc650 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/New.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/New.vue
@@ -44,7 +44,6 @@
 </template>
 
 <script>
-/* global bus */
 import { required, url, minLength } from 'vuelidate/lib/validators';
 
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
diff --git a/app/javascript/dashboard/routes/index.js b/app/javascript/dashboard/routes/index.js
index 6347e3894..83ae20533 100644
--- a/app/javascript/dashboard/routes/index.js
+++ b/app/javascript/dashboard/routes/index.js
@@ -1,4 +1,3 @@
-/* eslint no-console: 0 */
 import VueRouter from 'vue-router';
 
 import auth from '../api/auth';
@@ -7,14 +6,13 @@ import dashboard from './dashboard/dashboard.routes';
 import authRoute from './auth/auth.routes';
 import { frontendURL } from '../helper/URLHelper';
 
-const loggedInUser = auth.getCurrentUser() || {};
 const routes = [
   ...login.routes,
   ...dashboard.routes,
   ...authRoute.routes,
   {
     path: '/',
-    redirect: frontendURL(`accounts/${loggedInUser.account_id}/dashboard`),
+    redirect: '/app',
   },
 ];
 
@@ -41,10 +39,7 @@ const generateRoleWiseRoute = route => {
 // returns an object with roles as keys and routeArr as values
 generateRoleWiseRoute(routes);
 
-export const router = new VueRouter({
-  mode: 'history',
-  routes, // short for routes: routes
-});
+export const router = new VueRouter({ mode: 'history', routes });
 
 const unProtectedRoutes = ['login', 'auth_signup', 'auth_reset_password'];
 
@@ -117,7 +112,10 @@ const validateRouteAccess = (to, from, next) => {
 router.beforeEach((to, from, next) => {
   if (!to.name) {
     const user = auth.getCurrentUser();
-    return next(frontendURL(`accounts/${user.account_id}/dashboard`));
+    if (user) {
+      return next(frontendURL(`accounts/${user.account_id}/dashboard`));
+    }
+    return next('/app/login');
   }
 
   return validateRouteAccess(to, from, next);
diff --git a/app/javascript/dashboard/routes/index.spec.js b/app/javascript/dashboard/routes/index.spec.js
index 41d0cb226..b3af17480 100644
--- a/app/javascript/dashboard/routes/index.spec.js
+++ b/app/javascript/dashboard/routes/index.spec.js
@@ -13,10 +13,6 @@ jest.mock('./login/login.routes', () => ({
 }));
 jest.mock('../constants', () => {
   return {
-    APP_BASE_URL: '/',
-    get apiUrl() {
-      return `${this.APP_BASE_URL}/`;
-    },
     GRAVATAR_URL: 'https://www.gravatar.com/avatar',
     CHANNELS: {
       FACEBOOK: 'facebook',
diff --git a/app/javascript/dashboard/store/modules/auth.js b/app/javascript/dashboard/store/modules/auth.js
index b728e9ef8..3cdc045d1 100644
--- a/app/javascript/dashboard/store/modules/auth.js
+++ b/app/javascript/dashboard/store/modules/auth.js
@@ -6,6 +6,7 @@ import authAPI from '../../api/auth';
 import createAxios from '../../helper/APIHelper';
 import actionCable from '../../helper/actionCable';
 import { setUser, getHeaderExpiry, clearCookiesOnLogout } from '../utils/api';
+import { DEFAULT_REDIRECT_URL } from '../../constants';
 
 const state = {
   currentUser: {
@@ -69,7 +70,7 @@ export const actions = {
           commit(types.default.SET_CURRENT_USER);
           window.axios = createAxios(axios);
           actionCable.init(Vue);
-          window.location = '/';
+          window.location = DEFAULT_REDIRECT_URL;
           resolve();
         })
         .catch(error => {
diff --git a/app/javascript/shared/helpers/BaseActionCableConnector.js b/app/javascript/shared/helpers/BaseActionCableConnector.js
index ed0c1bb65..89b3ed6b0 100644
--- a/app/javascript/shared/helpers/BaseActionCableConnector.js
+++ b/app/javascript/shared/helpers/BaseActionCableConnector.js
@@ -3,8 +3,9 @@ import { createConsumer } from '@rails/actioncable';
 const PRESENCE_INTERVAL = 60000;
 
 class BaseActionCableConnector {
-  constructor(app, pubsubToken) {
-    this.consumer = createConsumer();
+  constructor(app, pubsubToken, websocketHost = '') {
+    const websocketURL = websocketHost ? `${websocketHost}/cable` : undefined;
+    this.consumer = createConsumer(websocketURL);
     this.subscription = this.consumer.subscriptions.create(
       {
         channel: 'RoomChannel',